body[data-page^='field-note'] {
  background: #071523;
}

.notes-index-map,
.note-hero,
.note-missing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #071523 url('/assets/night-neighborhood-map-fast.jpg') center / cover no-repeat;
}

.notes-index-map {
  min-height: 1420px;
}

.notes-map-shade,
.note-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.notes-map-shade {
  background:
    linear-gradient(90deg, rgba(4, 13, 23, .96) 0%, rgba(4, 13, 23, .72) 32%, rgba(4, 13, 23, .2) 67%, rgba(4, 13, 23, .54) 100%),
    linear-gradient(180deg, rgba(4, 13, 23, .28), rgba(4, 13, 23, .72));
}

.notes-intro {
  position: absolute;
  z-index: 4;
  top: 11%;
  left: clamp(28px, 5vw, 76px);
  width: min(48vw, 650px);
}

.notes-intro h1,
.note-hero-copy h1,
.note-next h2,
.note-missing h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .93;
  text-wrap: balance;
}

.notes-intro h1 {
  max-width: 11ch;
  font-size: clamp(4rem, 7vw, 6rem);
}

.notes-intro p {
  max-width: 36ch;
  margin: 24px 0 0;
  color: #d9e0e8;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}

.notes-route,
.note-hero-route {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(49, 157, 255, .52));
}

.notes-route {
  inset: 12% 2% 4% 24%;
  width: 74%;
  height: 84%;
}

.notes-route path,
.note-hero-route path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 18;
}

.notes-map-dog {
  position: absolute;
  z-index: 3;
  top: 39%;
  left: 52%;
  width: 92px;
  height: 92px;
  border: 5px solid var(--blue);
  border-radius: 50%;
  background: #10243a;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 0 8px rgba(49, 157, 255, .16);
}

.notes-map-dog img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 70% 38%;
}

.notes-map-dog span {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 6px 10px;
  transform: translateX(-50%);
  border-radius: 8px;
  color: white;
  background: rgba(9, 23, 37, .94);
  font-size: .76rem;
  font-weight: 760;
  white-space: nowrap;
}

.notes-trail {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-trail-item {
  position: absolute;
  width: min(38vw, 520px);
}

.note-trail-item.note-1 { top: 27%; right: 7%; }
.note-trail-item.note-2 { top: 49%; left: 8%; width: min(34vw, 470px); }
.note-trail-item.note-3 { top: 64%; right: 9%; width: min(32vw, 450px); }
.note-trail-item.note-4 { top: 81%; left: 19%; width: min(42vw, 560px); }

.note-trail-item > a {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  min-height: 172px;
  padding: 21px 24px 22px 16px;
  border-radius: 16px;
  color: white;
  background: rgba(9, 23, 37, .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .34);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), background 220ms ease-out;
}

.note-trail-item > a:hover {
  transform: translateY(-5px);
  background: rgba(14, 32, 50, .96);
}

.note-trail-item > a:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

.trail-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.trail-copy strong {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.15vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.trail-copy small {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  color: #c2ccd7;
  font-size: .94rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.trail-copy em {
  margin-top: auto;
  padding-top: 16px;
  color: #ffae73;
  font-size: .78rem;
  font-style: normal;
  font-weight: 760;
}

.trail-copy em b { margin-left: 8px; font-size: 1rem; }

.trail-marker,
.note-hero-marker {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 12px 30px rgba(255, 92, 8, .27);
}

.trail-marker i,
.trail-marker b,
.note-hero-marker i,
.note-hero-marker b {
  position: absolute;
  display: block;
}

.foxtail i {
  width: 4px;
  height: 25px;
  left: 27px;
  top: 17px;
  border-radius: 4px;
  background: white;
  transform: rotate(-18deg);
}
.foxtail i:nth-child(2) { height: 15px; left: 19px; top: 19px; transform: rotate(-52deg); }
.foxtail i:nth-child(3) { height: 15px; left: 33px; top: 13px; transform: rotate(28deg); }
.foxtail b { width: 9px; height: 9px; left: 23px; top: 10px; border-radius: 50%; background: #071523; }

.greeting i {
  width: 19px;
  height: 19px;
  top: 19px;
  border: 3px solid white;
  border-radius: 50%;
}
.greeting i:first-child { left: 9px; }
.greeting i:nth-child(2) { right: 9px; }
.greeting b { width: 12px; height: 3px; top: 27px; background: white; }
.greeting b:nth-of-type(1) { left: 20px; transform: rotate(14deg); }
.greeting b:nth-of-type(2) { right: 20px; transform: rotate(-14deg); }

.hazard i { width: 13px; height: 19px; left: 22px; top: 9px; background: white; clip-path: polygon(50% 0, 100% 100%, 0 76%); transform: rotate(-8deg); }
.hazard i:nth-child(2) { width: 11px; height: 14px; left: 12px; top: 29px; transform: rotate(-48deg); }
.hazard i:nth-child(3) { width: 10px; height: 13px; left: 34px; top: 30px; transform: rotate(58deg); }

.handoff i { width: 22px; height: 28px; top: 13px; border: 3px solid white; border-radius: 5px; }
.handoff i:first-child { left: 10px; }
.handoff i:nth-child(2) { right: 10px; }
.handoff b { width: 16px; height: 3px; left: 20px; top: 27px; background: white; }

.note-hero {
  min-height: 680px;
}

.note-hero-shade {
  background:
    linear-gradient(90deg, rgba(4, 13, 23, .97) 0%, rgba(4, 13, 23, .84) 46%, rgba(4, 13, 23, .2) 78%),
    linear-gradient(0deg, rgba(4, 13, 23, .76), transparent 55%);
}

.notes-back {
  position: absolute;
  z-index: 5;
  top: 112px;
  left: clamp(28px, 5vw, 76px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: #cbd4de;
  font-size: .9rem;
  font-weight: 720;
  text-decoration: none;
}

.notes-back:hover { color: white; }
.notes-back span { color: var(--orange); font-size: 1.2rem; }

.note-hero-copy {
  position: absolute;
  z-index: 4;
  top: 29%;
  left: clamp(28px, 5vw, 76px);
  width: min(65vw, 900px);
}

.note-hero-copy h1 {
  max-width: 16ch;
  font-size: clamp(3.7rem, 6.4vw, 6rem);
}

.note-hero-copy > p {
  max-width: 56ch;
  margin: 24px 0 0;
  color: #d4dce5;
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  line-height: 1.55;
}

.note-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 24px;
  color: #aebbc9;
  font-size: .82rem;
}

.note-byline span:first-child { color: #ffae73; font-weight: 760; }

.note-hero-route {
  right: -2%;
  bottom: 3%;
  width: 58%;
  height: 74%;
}

.note-hero-marker {
  position: absolute;
  z-index: 3;
  right: 15%;
  bottom: 19%;
  width: 74px;
  height: 74px;
  transform: scale(1.14);
}

.note-hero-marker.foxtail i { left: 36px; top: 24px; }
.note-hero-marker.foxtail i:nth-child(2) { left: 25px; top: 26px; }
.note-hero-marker.foxtail i:nth-child(3) { left: 43px; top: 18px; }
.note-hero-marker.foxtail b { left: 31px; top: 15px; }
.note-hero-marker.greeting i { top: 27px; }
.note-hero-marker.greeting i:first-child { left: 16px; }
.note-hero-marker.greeting i:nth-child(2) { right: 16px; }
.note-hero-marker.greeting b { top: 35px; }
.note-hero-marker.greeting b:nth-of-type(1) { left: 27px; }
.note-hero-marker.greeting b:nth-of-type(2) { right: 27px; }
.note-hero-marker.hazard i { left: 30px; top: 16px; }
.note-hero-marker.hazard i:nth-child(2) { left: 18px; top: 40px; }
.note-hero-marker.hazard i:nth-child(3) { left: 43px; top: 41px; }
.note-hero-marker.handoff i { top: 20px; }
.note-hero-marker.handoff i:first-child { left: 17px; }
.note-hero-marker.handoff i:nth-child(2) { right: 17px; }
.note-hero-marker.handoff b { left: 29px; top: 34px; }

.note-reading-field {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 760px);
  justify-content: center;
  gap: clamp(46px, 7vw, 110px);
  padding: 88px clamp(28px, 7vw, 110px) 118px;
  color: #172333;
  background: #f4efe5;
}

.note-wayfinding {
  position: sticky;
  top: 28px;
  align-self: start;
  padding-top: 10px;
}

.note-wayfinding > strong {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid #c9c0b4;
  color: #172333;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
}

.note-wayfinding ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-wayfinding li { border-bottom: 1px solid #d7cec2; }
.note-wayfinding a {
  display: block;
  padding: 14px 2px;
  color: #526072;
  font-size: .9rem;
  line-height: 1.35;
  text-decoration: none;
}
.note-wayfinding a:hover { color: #c94309; }

.note-body {
  max-width: 72ch;
  font-size: 1.08rem;
  line-height: 1.78;
}

.note-body .note-disclaimer {
  margin: 0 0 56px;
  padding: 18px 0;
  border-top: 1px solid #c9c0b4;
  border-bottom: 1px solid #c9c0b4;
  color: #5b6674;
  font-size: .92rem;
  line-height: 1.55;
}

.note-body section {
  scroll-margin-top: 28px;
}

.note-body section + section { margin-top: 66px; }

.note-body h2 {
  max-width: 18ch;
  margin: 0 0 22px;
  color: #122033;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.note-body p { margin: 0 0 22px; color: #3f4d5e; }
.note-body ul { margin: 24px 0 28px; padding-left: 1.25em; color: #3f4d5e; }
.note-body li { padding-left: 6px; margin: 10px 0; }
.note-body li::marker { color: var(--orange-deep); }

.note-sources {
  padding-top: 48px;
  border-top: 1px solid #c9c0b4;
}

.note-sources ul { padding: 0; list-style: none; }
.note-sources li { margin: 0; padding: 0; border-bottom: 1px solid #d7cec2; }
.note-sources a { display: grid; gap: 3px; padding: 16px 0; color: #243348; text-decoration: none; }
.note-sources a:hover strong { color: var(--orange-deep); }
.note-sources strong { font-size: .98rem; }
.note-sources span { color: #626d7b; font-size: .82rem; }

.note-next {
  display: grid;
  grid-template-columns: minmax(0, 760px) auto;
  align-items: end;
  justify-content: center;
  gap: clamp(40px, 8vw, 140px);
  padding: 82px clamp(28px, 8vw, 120px) 88px;
  color: #201407;
  background: var(--orange);
}

.note-next h2 { max-width: 11ch; font-size: clamp(3rem, 5vw, 5rem); }
.note-next p { max-width: 56ch; margin: 22px 0 0; color: #3f230b; font-size: 1.08rem; line-height: 1.62; }
.note-next .store-action { color: white; background: #071523; box-shadow: 0 16px 34px rgba(33, 15, 2, .22); }
.note-next .store-action.disabled { color: #c8d1da; background: #17283a; border: 0; }

.related-notes {
  display: grid;
  grid-template-columns: 170px repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 52px clamp(28px, 6vw, 92px) 60px;
  color: #dbe2ea;
  background: #071523;
}

.related-notes > strong { font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.related-notes a { display: grid; gap: 8px; padding-top: 2px; color: white; font-size: 1.08rem; font-weight: 720; line-height: 1.35; text-decoration: none; }
.related-notes a span { color: #ffae73; font-size: .75rem; font-weight: 760; }
.related-notes a b { margin-left: 6px; color: var(--orange); }

.note-missing {
  min-height: 84svh;
  padding: 230px clamp(28px, 8vw, 120px) 100px;
}
.note-missing::after { content: ''; position: absolute; z-index: -1; inset: 0; background: rgba(4, 13, 23, .72); }
.note-missing > div { max-width: 800px; }
.note-missing h1 { max-width: 12ch; font-size: clamp(3.8rem, 8vw, 6rem); }
.note-missing p { margin: 24px 0 34px; color: #c1ccd7; font-size: 1.15rem; }

@media (max-width: 900px) {
  .notes-index-map { min-height: auto; padding: 150px 22px 70px; }
  .notes-map-shade { background: linear-gradient(180deg, rgba(4, 13, 23, .94), rgba(4, 13, 23, .55) 42%, rgba(4, 13, 23, .88)); }
  .notes-intro { position: relative; top: auto; left: auto; width: auto; }
  .notes-intro h1 { font-size: clamp(3.35rem, 14vw, 5rem); }
  .notes-intro p { max-width: 31ch; }
  .notes-route { inset: 28% -42% 5% 2%; width: 126%; height: 66%; }
  .notes-map-dog { top: 26%; left: auto; right: 11%; width: 74px; height: 74px; }
  .notes-trail { position: relative; inset: auto; display: grid; gap: 20px; margin-top: 180px; padding-left: 22px; }
  .notes-trail::before { content: ''; position: absolute; top: -70px; bottom: 28px; left: 9px; border-left: 3px dotted rgba(49, 157, 255, .82); }
  .note-trail-item,
  .note-trail-item.note-1,
  .note-trail-item.note-2,
  .note-trail-item.note-3,
  .note-trail-item.note-4 { position: relative; inset: auto; width: auto; }
  .note-trail-item > a { grid-template-columns: 50px minmax(0, 1fr); min-height: 0; padding: 18px 17px 19px 12px; }
  .trail-marker { width: 48px; height: 48px; transform: scale(.84); transform-origin: top center; }
  .trail-copy strong { font-size: clamp(1.4rem, 6vw, 2rem); }
  .trail-copy small { -webkit-line-clamp: 3; }

  .note-hero { min-height: 720px; }
  .note-hero-shade { background: linear-gradient(180deg, rgba(4, 13, 23, .97), rgba(4, 13, 23, .7) 64%, rgba(4, 13, 23, .88)); }
  .notes-back { top: 86px; }
  .note-hero-copy { top: 24%; width: calc(100% - 56px); }
  .note-hero-copy h1 { max-width: 14ch; font-size: clamp(3rem, 12.7vw, 4.45rem); }
  .note-hero-copy > p { font-size: 1rem; }
  .note-hero-route { right: -44%; bottom: -2%; width: 130%; height: 50%; }
  .note-hero-marker { right: 13%; bottom: 8%; transform: scale(.88); }
  .note-reading-field { grid-template-columns: 1fr; gap: 54px; padding: 64px 24px 82px; }
  .note-wayfinding { position: static; }
  .note-wayfinding ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .note-body { font-size: 1.04rem; }
  .note-body section + section { margin-top: 54px; }
  .note-next { grid-template-columns: 1fr; align-items: start; padding: 64px 24px 70px; }
  .note-next .store-action { justify-self: start; }
  .related-notes { grid-template-columns: 1fr; gap: 26px; padding: 42px 24px 52px; }
}

@media (max-width: 540px) {
  .note-byline { gap: 7px 12px; }
  .note-byline span:not(:first-child)::before,
  .note-byline time::before { content: '·'; margin-right: 12px; color: #66778a; }
  .note-wayfinding ol { grid-template-columns: 1fr; }
  .note-hero-marker { bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .note-trail-item > a { transition: none; }
}