a[data-link][hidden]{display:none!important}
@font-face { font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/DelaGothicOne-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/RedHatText-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/RedHatText-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Caveat-normal-400.woff2') format('woff2'); }

/* ==========================================================================
   Paws for Thought: Sheet 01, The Obvious (a folded survey map, split at the fold)
   ========================================================================== */

:root {
  --red: #bf2c12;            /* the cover: the sunrise red at the rim of the banner's peaks */
  --snow: #fbfcff;           /* type on red */
  --sheet: #f4f2ec;          /* sunlit snow: the map sheet */
  --crease: #e6dccd;         /* warm fold shadow of the sheet */
  --ink: #302117;
  --ink2: #624e41;
  --night: #18100c;
  --on-night: #f4efe7;       /* warm snow on the night margin */
  --on-night2: #cbbfb1;
  --door: #2a1a12;           /* Buy plates only: the dark of his paw pads */
  --focus: var(--night);
  --fd: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --fb: "Red Hat Text", "Segoe UI", system-ui, sans-serif;
  --fs: "Caveat", "Segoe Print", cursive;
  --b: 3px solid var(--night);
  --sh: 6px 6px 0 var(--night);
  --hh: 56px;
  --u: calc(100vh - var(--hh));

  /* printed matter */
  --crosses-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='%23302117' stroke-opacity='.3' fill='none'/%3E%3C/svg%3E");
  --crosses-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='%23fbfcff' stroke-opacity='.3' fill='none'/%3E%3C/svg%3E");
  --still-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='840' viewBox='0 0 720 840'%3E%3Cdefs%3E%3Cpath id='a' vector-effect='non-scaling-stroke' d='M0-150C95-155 170-85 160 5S75 150-15 146-172 70-160-12-95-146 0-150Z'/%3E%3Cpath id='b' vector-effect='non-scaling-stroke' d='M0-120C70-130 150-60 130 20S40 125-40 110-150 40-120-40-60-112 0-120Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23302117' stroke-opacity='.34' stroke-width='1'%3E%3Cg transform='translate(120 150) rotate(-30) scale(1.3 .8)'%3E%3Cuse href='%23a' transform='scale(.14)'/%3E%3Cuse href='%23a' transform='scale(.3) rotate(8)'/%3E%3Cuse href='%23a' transform='scale(.46) rotate(-6)'/%3E%3Cuse href='%23a' transform='scale(.62) rotate(10)'/%3E%3Cuse href='%23a' transform='scale(.8) rotate(-4)' stroke-width='2'/%3E%3Cuse href='%23a' transform='scale(.98) rotate(12)'/%3E%3Cuse href='%23a' transform='scale(1.18) rotate(-9)'/%3E%3Cuse href='%23a' transform='scale(1.4) rotate(5)'/%3E%3Cuse href='%23a' transform='scale(1.64) rotate(-12)'/%3E%3Cuse href='%23a' transform='scale(1.92) rotate(7)' stroke-width='2'/%3E%3Cuse href='%23a' transform='scale(2.24) rotate(-3)'/%3E%3Cuse href='%23a' transform='scale(2.6) rotate(9)'/%3E%3C/g%3E%3Cg transform='translate(660 800) rotate(20) scale(1.4 .9)'%3E%3Cuse href='%23b' transform='scale(.2)'/%3E%3Cuse href='%23b' transform='scale(.42) rotate(14)'/%3E%3Cuse href='%23b' transform='scale(.66) rotate(-8)'/%3E%3Cuse href='%23b' transform='scale(.92) rotate(6)' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --still-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='840' viewBox='0 0 720 840'%3E%3Cdefs%3E%3Cpath id='a' vector-effect='non-scaling-stroke' d='M0-150C95-155 170-85 160 5S75 150-15 146-172 70-160-12-95-146 0-150Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23fbfcff' stroke-opacity='.2' stroke-width='1'%3E%3Cg transform='translate(260 560) rotate(40)'%3E%3Cuse href='%23a' transform='scale(.2)'/%3E%3Cuse href='%23a' transform='scale(.42) rotate(8)'/%3E%3Cuse href='%23a' transform='scale(.66) rotate(-6)'/%3E%3Cuse href='%23a' transform='scale(.9) rotate(10)' stroke-width='2'/%3E%3Cuse href='%23a' transform='scale(1.16) rotate(-4)'/%3E%3Cuse href='%23a' transform='scale(1.44) rotate(12)'/%3E%3Cuse href='%23a' transform='scale(1.76) rotate(-9)'/%3E%3Cuse href='%23a' transform='scale(2.1) rotate(5)'/%3E%3Cuse href='%23a' transform='scale(2.5) rotate(-12)' stroke-width='2'/%3E%3Cuse href='%23a' transform='scale(2.95) rotate(7)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --crease-ink: linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,.55) 49.4%, rgba(255,255,255,.55) 49.7%, rgba(48,33,23,.07) 49.7%, transparent 52%),
                linear-gradient(180deg, transparent 49.4%, rgba(255,255,255,.55) 49.4%, rgba(255,255,255,.55) 49.6%, rgba(48,33,23,.06) 49.6%, transparent 51.6%);
  --crease-snow: linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,.16) 49.4%, rgba(255,255,255,.16) 49.7%, rgba(0,0,0,.12) 49.7%, transparent 52%),
                 linear-gradient(180deg, transparent 49.4%, rgba(255,255,255,.14) 49.4%, rgba(255,255,255,.14) 49.6%, rgba(0,0,0,.1) 49.6%, transparent 51.6%);
}
@media (min-width: 1024px) { :root { --hh: 64px; } }

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hh); }
body {
  margin: 0; padding-top: var(--hh);
  background: var(--sheet); color: var(--ink);
  font: 400 16px/1.55 var(--fb);
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--snow); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--night); color: var(--snow); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------- header: the map's top margin ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hh);
  display: flex; align-items: stretch;
  background: var(--sheet); border-bottom: var(--b);
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  text-decoration: none; border-right: var(--b);
}
.brand img { display: block; width: 36px; height: 36px; border: 2px solid var(--night); }
.brand__txt { display: none; line-height: 1.1; }
.brand__txt b { display: block; font-weight: 800; font-size: 15px; }
.brand__txt small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); margin-top: 3px; }
@media (min-width: 420px) { .brand__txt { display: block; } .brand__txt small { display: none; } }
@media (min-width: 1024px) { .brand { padding: 0 20px; } .brand img { width: 40px; height: 40px; } .brand__txt small { display: block; } }

#burger {
  margin-left: auto; width: var(--hh); border: 0; border-left: var(--b); background: var(--sheet);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.burger__bars {
  display: block; width: 22px; height: 16px;
  background: linear-gradient(var(--night), var(--night)) top / 100% 3px no-repeat,
              linear-gradient(var(--night), var(--night)) center / 100% 3px no-repeat,
              linear-gradient(var(--night), var(--night)) bottom / 100% 3px no-repeat;
  transition: transform .2s;
}
#burger[aria-expanded="true"] .burger__bars { transform: rotate(90deg); }

#nav {
  display: none; position: fixed; top: var(--hh); left: 0; right: 0; z-index: 49;
  flex-direction: column; background: var(--sheet); border-bottom: var(--b);
  max-height: calc(100vh - var(--hh)); overflow-y: auto;
}
#nav.is-open { display: flex; }
#nav a, #motion {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px; min-height: 52px;
  font: 700 15px/1.2 var(--fb); text-decoration: none; color: var(--ink);
  border: 0; border-bottom: 2px solid var(--night); background: transparent; text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
#nav a em { font: 400 13px/1 var(--fd); font-style: normal; color: var(--red); }
#nav a:hover, #nav a:focus-visible, #motion:hover { background: var(--night); color: var(--snow); }
#nav a:hover em, #nav a:focus-visible em { color: var(--snow); }
#motion { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.nav__note { display: none; }
@media (min-width: 1180px) {
  .nav__note {
    display: flex; align-items: center; gap: 10px; margin: 0 auto; padding: 0 20px;
    font: 700 10px/1.2 var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--ink2);
  }
  .nav__note b {
    display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--night);
    font: 400 13px/1 var(--fd); color: var(--red); letter-spacing: 0;
  }
}
.xlink img { display: block; }

.plate--top { margin: 8px 8px 8px 10px; }
@media (max-width: 1023px) { .brand { margin-right: auto; } #burger { margin-left: 0; order: 3; } .plate--top { order: 2; } }

@media (min-width: 1024px) {
  #burger { display: none; }
  #nav {
    display: flex; position: static; flex-direction: row; flex: 1; border: 0; max-height: none; overflow: visible; background: none;
  }
  #nav a, #motion { border-bottom: 0; border-right: var(--b); padding: 0 20px; min-height: 0; }
  #nav a em { transition: transform .15s; }
  #nav a:hover em { transform: translateX(3px); }
  #motion { margin-left: auto; border-left: var(--b); }
  .plate--top { margin: 8px 16px; }
}

/* ---------- Buy: the door push plate (a black enamel plate with snow letters: Buy only) ---------- */
.plate {
  position: relative; display: inline-flex; flex-direction: column; justify-content: center;
  background: var(--door); color: var(--snow); text-decoration: none;
  border: 3px solid var(--snow); outline: 3px solid var(--night); box-shadow: 9px 9px 0 var(--night);
  padding: 12px 26px 12px 26px; font: 800 20px/1.1 var(--fb); white-space: nowrap;
  transition: transform .16s cubic-bezier(.3,.7,.4,1), box-shadow .16s cubic-bezier(.3,.7,.4,1), background .16s;
}
.plate small { font-size: 10px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 3px; }
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--snow), var(--snow)) 5px 5px / 4px 4px no-repeat,
              linear-gradient(var(--snow), var(--snow)) calc(100% - 5px) 5px / 4px 4px no-repeat,
              linear-gradient(var(--snow), var(--snow)) 5px calc(100% - 5px) / 4px 4px no-repeat,
              linear-gradient(var(--snow), var(--snow)) calc(100% - 5px) calc(100% - 5px) / 4px 4px no-repeat;
}
.plate:hover, .plate:focus-visible { transform: translate(6px, 6px); box-shadow: 3px 3px 0 var(--night); }
.plate:active { transform: translate(6px, 6px) scale(.985); }
.plate--top { font-size: 13px; padding: 4px 12px; box-shadow: 3px 3px 0 var(--night); align-self: center; }
.plate--top small { font-size: 7px; margin-bottom: 1px; }
.plate--top:hover, .plate--top:focus-visible { transform: translate(3px, 3px); }
.plate--top::before { display: none; }
.plate--hero { align-self: flex-start; min-width: min(300px, 100%); font-size: 22px; padding: 14px 30px; }
.plate--big { font-size: clamp(22px, 2.4vw, 32px); padding: 20px 44px; }

/* ---------- the atlas: two halves of one folded map ---------- */
.atlas { position: relative; }
.stage { position: relative; display: grid; grid-template-columns: 1fr; }
.track { display: contents; }
.leaf { position: relative; padding: 28px 20px 40px; min-width: 0; }
.leaf--1 { order: 1; } .leaf--2 { order: 2; } .leaf--3 { order: 3; } .leaf--4 { order: 4; }
.leaf--5 { order: 5; } .leaf--6 { order: 6; } .leaf--7 { order: 7; } .leaf--8 { order: 8; }

.leaf--cover {
  background-color: var(--red); color: var(--snow);
  background-image: var(--crease-snow), var(--crosses-snow), var(--still-snow);
  background-size: 100% 100%, 100% 100%, 120px 120px, cover;
  background-position: 0 0, 0 0, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
.leaf--sheet {
  background-color: var(--sheet); color: var(--ink);
  background-image: var(--crease-ink), var(--crosses-ink), var(--still-ink);
  background-size: 100% 100%, 100% 100%, 120px 120px, cover;
  background-position: 0 0, 0 0, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
.leaf--cover { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.leaf.is-live { background-image: var(--crease-ink), var(--crosses-ink); }

.contour { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.contour.on { opacity: 1; }
.contour--stage { display: none; }

.collar, .rows { display: none; }

.strip {
  display: inline-block; margin: 0; padding: 7px 12px;
  background: var(--night); color: var(--snow);
  font: 700 11px/1.2 var(--fb); letter-spacing: .18em; text-transform: uppercase;
}

/* hero: the cover */
h1 { margin: 0; font-weight: 400; }
.h1__a {
  display: block; font-family: var(--fd); font-size: clamp(40px, 5.6vw, 84px);
  line-height: .92; letter-spacing: -.045em; color: var(--snow); max-width: 8.4em;
}
.h1__b {
  position: relative; display: inline-block; max-width: 13em; margin-top: .35em;
  font-family: var(--fs); font-style: normal; font-weight: 400;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.08; color: var(--snow);
  transform: rotate(-2deg); transform-origin: 0 50%;
}
.scribble { position: absolute; right: -4%; bottom: -.32em; width: 6.4em; height: .5em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--snow); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* the sheet reference panel (CA box) */
.ref { width: 100%; max-width: 560px; background: var(--snow); color: var(--ink); border: var(--b); box-shadow: var(--sh); }
.ref__band {
  margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--night); color: var(--snow); padding: 8px 12px;
  font: 700 11px/1.3 var(--fb); letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s;
}
.ref__tag { background: var(--red); color: var(--snow); padding: 3px 8px; flex: none; }
#ca-copy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 14px 12px; margin: 0; border: 0; border-bottom: 2px solid var(--night);
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
#ca-text { min-width: 0; font: 600 14px/1.35 var(--fb); font-variant-numeric: tabular-nums; word-break: break-all; color: var(--ink); }
.ca__tap {
  flex: none; background: var(--night); color: var(--snow); padding: 8px 10px;
  font: 700 11px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase;
  transition: background .18s, transform .18s;
}
#ca-copy:hover .ca__tap, #ca-copy:focus-visible .ca__tap { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--red); }
#ca-copy.is-copied .ca__tap { background: var(--red); color: var(--snow); }
html.ca-copied .ref__band { background: var(--red); }
html.ca-copied .ref__tag { background: var(--night); }
.chips { display: flex; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  font: 700 13px/1 var(--fb); color: var(--ink); text-decoration: none; background: var(--snow);
  border-right: 2px solid var(--night); border-bottom: 2px solid var(--night); margin-bottom: -2px;
  transition: background .15s, box-shadow .15s;
}
.chip img { display: block; width: 18px; height: 18px; }
.chip:hover, .chip:focus-visible { background: var(--crease); box-shadow: inset 0 -4px 0 var(--red); }

/* hero: the sheet */
.legend { position: relative; z-index: 3; background: var(--snow); border: var(--b); box-shadow: var(--sh); padding: 0 16px 14px; margin: 0 20px 28px; }
.legend__tab { display: inline-block; margin: 0 0 10px -16px; padding: 5px 12px; background: var(--night); color: var(--snow); font: 700 10px/1.2 var(--fb); letter-spacing: .2em; text-transform: uppercase; }
.legend__tag { margin: 0; font: 800 19px/1.2 var(--fb); }
.legend__lede { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.watch { position: absolute; z-index: 3; top: 12px; right: 14px; text-align: right; }
.watch__label, .watch__note { margin: 0; font: 700 9px/1.2 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.watch__note { color: var(--red); }
.watch__time { margin: 2px 0; font: 400 40px/1 var(--fd); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.watch__time b { display: inline-block; width: .8em; text-align: center; font-weight: 400; }
.watch__time i { display: inline-block; width: .34em; font-style: normal; text-align: center; }
.leaf--2 { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.summit { position: relative; z-index: 1; order: -1; height: 330px; overflow: hidden; pointer-events: none; flex: none; }
/* character treatment: "overprint" (terrain). The photo cut-out is printed into the map itself: multiplied onto the
   sheet so its contour lines and grid crosses run through his fur, and masked so his body sinks into the terrain at
   the sheet's bottom edge, the summit rising out of the survey. His paw breaks over the fold. */
.summit__in { position: relative; width: 300px; margin: -56px 0 0 -40px; transform-origin: 55% 45%; }

/* elevation echoes: his own silhouette, stepped outward like contour intervals around a summit
   (outermost ink line, bare sheet, red index contour, bare sheet, then the photograph) */
.contour-ring {
  position: absolute; inset: 0; pointer-events: none; transform-origin: 52% 58%;
  -webkit-mask: url("../img/cutout.png") 0 0 / 100% 100% no-repeat;
          mask: url("../img/cutout.png") 0 0 / 100% 100% no-repeat;
}
.contour-ring--4 { background: var(--ink); transform: scale(1.12); }
.contour-ring--3 { background: var(--sheet); transform: scale(1.105); }
.contour-ring--2 { background: var(--red); transform: scale(1.07); }
.contour-ring--1 { background: var(--sheet); transform: scale(1.045); }
.summit__img { position: relative; }

/* ...and his reflection across the fold: the "set-off". When a map is folded with its ink still wet, the picture
   prints itself mirrored onto the facing panel. On the cover he appears again, mirrored across the fold and printed
   faintly in the cover's own ink (a grayscale plate multiplied onto the red): his second opinion, paw to paw with
   him at the fold. Phones fold the other way, so there the reflection hangs upside down above the fold. */
.leaf--1 { isolation: isolate; }
.leaf--1 .reflection {
  position: absolute; z-index: -1; pointer-events: none; display: block; max-width: none;
  width: 300px; height: auto; left: -40px; bottom: -56px;
  filter: grayscale(1) contrast(1.4);
  mix-blend-mode: multiply; opacity: .2;
  transform: scaleY(-1);
}
@media (max-width: 1023px) {
  .leaf--1 { padding-bottom: 76px; }
  /* phones: the summit, rings and all, sinks into the sheet before the crop, so no ring ends ragged */
  .summit {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 56%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 0, #000 56%, transparent 92%);
  }
}
.summit__img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0,0,0,.35) 62%, transparent 68%);
          mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0,0,0,.35) 62%, transparent 68%);
}
@media (min-width: 1024px) {
  .summit__img {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 37%, rgba(0,0,0,.4) 43%, transparent 49%);
            mask-image: linear-gradient(180deg, #000 0, #000 37%, rgba(0,0,0,.4) 43%, transparent 49%);
  }
}
.paw-note, .elev, .scale { display: none; }

/* cover 2: the sign */
.sheet-title { margin: 0; font: 400 clamp(36px, 5.2vw, 76px)/.95 var(--fd); letter-spacing: -.04em; }
.leaf--cover .sheet-title { color: var(--snow); }
.door { width: 100%; margin-top: 14px; }
.door__plate {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--snow); border: var(--b); box-shadow: var(--sh); padding: 14px 18px;
}
.door__plate b { font: 400 clamp(64px, 22vw, 132px)/1 var(--fd); letter-spacing: -.03em; color: var(--red); }
.door__screw { width: 14px; height: 14px; border: 2px solid var(--night); border-radius: 50%; flex: none; background: linear-gradient(45deg, transparent 45%, var(--night) 45% 55%, transparent 55%); }
.cover-note { margin: 4px 0 0; font: 700 12px/1.4 var(--fb); letter-spacing: .16em; text-transform: uppercase; }

/* cover 3: the second opinion */
.plate-photo { margin: 0; width: 100%; border: var(--b); background: var(--snow); box-shadow: var(--sh); }
.plate-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.plate-photo figcaption { padding: 10px 16px; border-top: var(--b); font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--fd); letter-spacing: -.02em; color: var(--ink); }
.second { font-size: clamp(44px, 6vw, 88px); line-height: .88; }
.second span { display: block; padding: .04em .12em .08em; margin-top: .06em; background: var(--snow); color: var(--red); width: max-content; max-width: 100%; border: var(--b); box-shadow: var(--sh); }
.cover-body { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--snow); }

/* cover 4: the readout */
.play-title { margin: 0; font: 400 clamp(30px, 4vw, 58px)/.95 var(--fd); letter-spacing: -.04em; color: var(--snow); }
.play-title span { display: block; margin-top: .5em; font: 800 .42em/1.2 var(--fb); letter-spacing: .04em; text-transform: uppercase; }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; width: 100%; margin-top: 10px; }
.readout__pt {
  min-width: 1.5em; padding: .06em .16em; text-align: center;
  font: 400 clamp(64px, 9vw, 140px)/1 var(--fd); letter-spacing: -.04em;
  background: var(--snow); color: var(--red); border: var(--b); box-shadow: var(--sh);
}
.readout__line { margin: 0; font: 400 clamp(20px, 2.3vw, 32px)/1.15 var(--fd); letter-spacing: -.02em; color: var(--snow); }
.readout.is-push .readout__pt { animation: push-flip .5s steps(1) 2; }
@keyframes push-flip { 0% { background: var(--night); color: var(--snow); } 50% { background: var(--snow); color: var(--red); } }
.tally { margin: 0; font: 700 12px/1.3 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--snow); }
.tally b { display: inline-block; margin-left: 8px; padding: 5px 10px; background: var(--night); color: var(--snow); font: 400 18px/1 var(--fd); letter-spacing: 0; }

/* sheet 2: his notes (waypoints on a route) */
.leaf--4 .sheet-title { color: var(--ink); }
.route { position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.route::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 37px; border-left: 3px dashed var(--red); }
.card {
  position: relative; display: grid; grid-template-columns: 88px 1fr; column-gap: 12px;
  width: 100%; max-width: 520px; padding: 14px 18px 16px 0;
  background: var(--snow); border: var(--b); box-shadow: var(--sh);
  transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--night); }
.card__num { grid-row: 1 / span 2; align-self: center; justify-self: center; text-align: center; font: 400 34px/1 var(--fd); letter-spacing: -.06em; color: var(--red); white-space: nowrap; padding-left: 8px; }
.route::before { left: 47px; }
.card h3 { margin: 0; font: 800 19px/1.2 var(--fb); }
.card p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.pencil { margin: 20px 0 0; font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--fs); color: var(--red); transform: rotate(-2deg); transform-origin: 0 50%; }

/* sheet 3: field photographs */
.strip--ink { margin-bottom: 12px; }
.sheet-title--sm { font-size: clamp(30px, 3.6vw, 52px); }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.photos figure { position: relative; margin: 0; background: var(--snow); border: var(--b); transition: transform .18s, box-shadow .18s; }
.photos figure::before {
  content: "C3"; position: absolute; z-index: 1; top: 6px; left: 6px; padding: 2px 6px;
  background: var(--night); color: var(--snow); font: 700 10px/1.3 var(--fb); letter-spacing: .12em;
  transition: background .18s;
}
.photos figure:nth-child(2)::before { content: "D3"; }
.photos figure:nth-child(3)::before { content: "E3"; }
.photos figure:nth-child(4)::before { content: "C4"; }
.photos figure:nth-child(5)::before { content: "D4"; }
.photos figure:nth-child(6)::before { content: "E4"; }
.photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: var(--b); }
.photos figcaption { padding: 7px 9px 9px; font-size: 12px; line-height: 1.35; color: var(--ink); }
.photos figure:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--night); }
.photos figure:hover::before { background: var(--red); }

/* sheet 4: the compass */
.leaf--8 { display: flex; align-items: center; justify-content: center; }
.compass { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dial {
  position: relative; width: min(84vw, 340px); aspect-ratio: 1; border-radius: 50%;
  background: var(--snow); border: var(--b); box-shadow: var(--sh); touch-action: none; cursor: grab;
}
.dial__ring {
  position: absolute; inset: 8px; border-radius: 50%;
  background: repeating-conic-gradient(var(--night) 0 .8deg, transparent .8deg 11.25deg);
}
.dial__ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--snow); }
.pt { position: absolute; transform: translate(-50%, -50%); font: 400 15px/1 var(--fd); color: var(--ink); transition: color .2s; }
.pt--0, .pt--2, .pt--4, .pt--6 { font-size: 26px; }
.pt--0 { left: 50%; top: 17%; } .pt--1 { left: 74%; top: 26%; } .pt--2 { left: 83%; top: 50%; } .pt--3 { left: 74%; top: 74%; }
.pt--4 { left: 50%; top: 83%; } .pt--5 { left: 26%; top: 74%; } .pt--6 { left: 17%; top: 50%; } .pt--7 { left: 26%; top: 26%; }
.pt.is-landed { color: var(--red); }
.needle { position: absolute; left: 50%; top: 50%; width: 18px; height: 56%; margin: -28% 0 0 -9px; display: flex; flex-direction: column; will-change: transform; }
.needle__n { flex: 1; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.needle__s { flex: 1; background: var(--night); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dial__pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 7px var(--night), inset 0 0 0 11px var(--snow); }
.key {
  margin-top: 30px; padding: 18px 30px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  background: var(--night); color: var(--snow); border: var(--b); box-shadow: 6px 6px 0 var(--red);
  font: 800 18px/1 var(--fb); transition: transform .14s, box-shadow .14s;
}
.key:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--red); }
.key.is-holding { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--red); animation: needle-tick .16s steps(1) infinite; }
@keyframes needle-tick { 50% { background: var(--red); } }
.compass__hint { margin: 18px 0 0; font: 700 11px/1.4 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); text-align: center; }

/* ---------- Buy: where the halves meet ---------- */
.buy {
  position: relative; overflow: hidden; padding: 36px 20px 64px;
  background-color: var(--sheet);
  background-image: var(--crosses-ink), var(--still-ink);
  background-size: 120px 120px, cover; background-repeat: repeat, no-repeat; background-position: 0 0, center;
  border-top: var(--b);
}
.buy.is-live { background-image: var(--crosses-ink); }
.buy > *:not(canvas) { position: relative; z-index: 1; }
.view { margin: 0; border: var(--b); box-shadow: var(--sh); background: var(--night); }
.view img { display: block; width: 100%; height: clamp(200px, 36vw, 520px); object-fit: cover; object-position: 66% 55%; }
.view figcaption {
  position: absolute; top: -3px; left: 18px; padding: 8px 12px; background: var(--night); color: var(--snow);
  font: 700 11px/1.2 var(--fb); letter-spacing: .18em; text-transform: uppercase;
}
.buy__head { margin-top: 40px; }
.buy__title { margin: 14px 0 0; font: 400 clamp(42px, 8.4vw, 124px)/.9 var(--fd); letter-spacing: -.045em; color: var(--ink); }
.buy__title span { color: var(--red); }
.waypoints { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr; gap: 24px; position: relative; }
.waypoints::before { content: ""; position: absolute; z-index: -1; left: 40px; top: 0; bottom: 0; border-left: 4px dashed var(--red); }
.waypoints li { position: relative; padding: 18px 22px 22px; background: var(--snow); border: var(--b); box-shadow: var(--sh); transition: transform .18s, box-shadow .18s; }
.waypoints li:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--night); }
.wp__n { display: block; font: 400 clamp(64px, 9vw, 140px)/.85 var(--fd); letter-spacing: -.04em; color: var(--red); }
.waypoints h3 { margin: 12px 0 0; font: 800 22px/1.2 var(--fb); }
.waypoints p { margin: 6px 0 0; font-size: 16px; color: var(--ink2); }
.buy__end { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 40px; }
.buy__mark { margin: 0; font: 700 13px/1.4 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.buy__mark span { color: var(--red); font-size: 22px; letter-spacing: 0; vertical-align: -2px; }

/* ---------- footer: the map's margin information ---------- */
.foot { background: var(--night); color: var(--on-night); padding: 40px 20px 28px; }
.foot__grid { display: grid; grid-template-columns: 1fr; border: 1px solid rgba(244,239,231,.3); }
.foot__cell { padding: 20px; border-bottom: 1px solid rgba(244,239,231,.3); }
.foot__word { margin: 0; font: 400 28px/1 var(--fd); letter-spacing: -.03em; color: var(--snow); }
.foot__meta, .foot__h { margin: 10px 0 0; font: 700 11px/1.3 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--on-night2); }
.foot__h { margin: 0 0 12px; }
.key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--on-night); }
.key-list li { display: flex; align-items: center; gap: 12px; }
.k { flex: none; display: inline-block; width: 30px; }
.k--line { border-top: 1px solid var(--snow); }
.k--route { border-top: 3px dashed var(--red); }
.k--tri { text-align: center; color: var(--snow); line-height: 1; }
.k--door { height: 16px; background: var(--door); border: 2px solid var(--snow); outline: 1px solid var(--on-night2); }
.foot__links { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.foot__links a { color: var(--snow); font-weight: 700; text-underline-offset: 4px; }
.xlink--foot { display: inline-flex; align-items: center; gap: 10px; }
.xlink--foot img { filter: invert(1); }
.foot__num { font: 400 clamp(90px, 14vw, 200px)/.8 var(--fd); letter-spacing: -.05em; color: var(--on-night2); display: flex; align-items: flex-end; justify-content: flex-end; border-bottom: 0; }
.foot__legal { margin: 24px 0 0; max-width: 70em; font-size: 13px; line-height: 1.6; color: var(--on-night2); }

/* ---------- tablet+ ---------- */
@media (min-width: 640px) {
  .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .waypoints { grid-template-columns: repeat(3, 1fr); }
  .waypoints::before { left: 0; right: 0; top: 70px; bottom: auto; border-left: 0; border-top: 4px dashed var(--red); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- desktop: the two halves side by side ---------- */
@media (min-width: 1024px) {
  .stage { grid-template-columns: 1fr 1fr; }
  .leaf { min-height: var(--u); padding: 62px 56px 44px 64px; }
  .leaf--sheet { border-left: var(--b); padding-left: 56px; }
  .collar {
    display: grid; grid-template-columns: repeat(12, 1fr); position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 22px;
    background: var(--night); color: var(--snow); pointer-events: none;
  }
  .rows {
    display: grid; grid-template-rows: repeat(7, 1fr); position: absolute; z-index: 6; top: 22px; left: 0; width: 22px; height: calc(var(--u) - 22px);
    background: var(--night); color: var(--snow); pointer-events: none;
  }
  .collar span, .rows span { display: grid; place-items: center; font: 700 10px/1 var(--fb); letter-spacing: .1em; border-left: 1px solid rgba(251,252,255,.25); transition: background .2s; }
  .rows span { border-left: 0; border-top: 1px solid rgba(251,252,255,.25); }
  .collar span.is-at, .rows span.is-at { background: var(--red); }

  .leaf--1 { justify-content: center; gap: 22px; }

  /* hero sheet */
  .leaf--2 { position: relative; z-index: 2; display: block; padding: 0; overflow: hidden; }
  .leaf--1 { overflow: hidden; }
  .leaf--1 .reflection { width: 54vw; left: calc(100% - 48.5vw - 3px); top: 38%; bottom: auto; transform: scaleX(-1); opacity: .5; }
  .leaf--2 .contour--leaf { z-index: 0; }
  .legend { position: absolute; top: 54px; left: 48px; width: 250px; margin: 0; }
  .watch { top: 46px; right: 40px; }
  .watch__label, .watch__note { font-size: 11px; }
  .watch__time { font-size: clamp(52px, 8.3vw, 120px); }
  .summit { position: absolute; left: -5.5vw; top: 38%; width: 54vw; height: auto; overflow: visible; }
  .summit__in { width: 100%; margin: 0; }
  .paw-note {
    display: block; position: absolute; z-index: 3; left: 26px; top: calc(38% - 36px); margin: 0;
    font: 700 11px/1.2 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
    background: var(--sheet); padding: 3px 6px; pointer-events: none;
  }
  .elev {
    display: block; position: absolute; z-index: 3; margin: 0; padding: 2px 6px; pointer-events: none;
    font: 700 10px/1.2 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2);
    background: var(--sheet); border: 1px solid var(--ink2);
  }
  .elev--1 { right: 40px; top: 44%; }
  .elev--2 { right: 26px; top: 66%; }
  .scale {
    display: flex; align-items: center; gap: 10px; position: absolute; z-index: 3; right: 20px; bottom: 16px; pointer-events: none;
    padding: 5px 8px; background: var(--sheet); border: 2px solid var(--night);
    font: 700 10px/1.2 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  }
  .scale__bar { width: 80px; height: 8px; border: 2px solid var(--night); background: linear-gradient(90deg, var(--night) 25%, transparent 25% 50%, var(--night) 50% 75%, transparent 75%); }

  .door__plate b { font-size: clamp(64px, 9vw, 132px); }
  .leaf--3, .leaf--5, .leaf--7 { justify-content: center; }
  .leaf--4, .leaf--6 { display: flex; flex-direction: column; justify-content: center; }
  .card:nth-child(2) { margin-left: 8%; }
  .card:nth-child(3) { margin-left: 16%; }
  .photos { gap: 14px; }
  .plate-photo img { max-height: 46vh; }
  .dial { width: min(420px, 52vh); }
  .pt { font-size: 18px; }
  .pt--0, .pt--2, .pt--4, .pt--6 { font-size: 32px; }

  .buy { padding: 56px 56px 88px; }
  .foot { padding: 56px 56px 32px; }
  .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .foot__cell { border-bottom: 0; border-right: 1px solid rgba(244,239,231,.3); }
  .foot__num { border-right: 0; }
}

/* the atlas in motion (set by js/site.js on desktop, never under html.rm) */
html.atlas-on .atlas { height: calc(4 * var(--u)); }
html.atlas-on .stage {
  position: sticky; top: var(--hh); display: block; height: var(--u); overflow: hidden;
  background: linear-gradient(90deg, var(--red) 50%, var(--sheet) 50%);
}
html.atlas-on .stage::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(50% - 1.5px); width: 3px; background: var(--night); pointer-events: none; }
html.atlas-on .contour--stage { display: block; z-index: 0; }
html.atlas-on .contour--leaf { display: none; }
html.atlas-on .track { display: flex; flex-direction: column; position: absolute; top: 0; width: 50%; will-change: transform; }
html.atlas-on .track--l { left: 0; z-index: 1; flex-direction: column-reverse; transform: translate3d(0, calc((var(--l, 0) - 3) * var(--u)), 0); }
html.atlas-on .track--r { left: 50%; z-index: 3; transform: translate3d(0, calc(var(--r, 0) * -1 * var(--u)), 0); }
html.atlas-on .leaf { height: var(--u); min-height: 0; flex: none; background-color: transparent; border-left: 0; overflow: hidden; }
html.atlas-on .leaf--1 { background-color: var(--red); }
html.atlas-on.contour-live .leaf--1 { background-image: var(--crease-snow), var(--crosses-snow), var(--still-snow); }
html.atlas-on .leaf--1 .reflection { left: calc(100% - 48.5vw); }
html.atlas-on.contour-live .leaf--cover { background-image: var(--crease-snow), var(--crosses-snow); }
html.atlas-on.contour-live .leaf--sheet { background-image: var(--crease-ink), var(--crosses-ink); }
html.atlas-on .photos img { aspect-ratio: auto; height: clamp(90px, calc((100vh - 64px - 430px) / 2), 230px); }

/* alive at once: the only ambient move on the character */
html.js:not(.rm) .summit__in { animation: ponder-tilt 7s ease-in-out 1.2s infinite; }
@keyframes ponder-tilt {
  0%, 74%, 100% { transform: rotate(0deg); }
  80%, 90% { transform: rotate(-2.6deg); }
}

/* phones: nothing may leave the sheet sideways */
@media (max-width: 1023px) {
  .stage { overflow: hidden; }
  .leaf { overflow: hidden; }
  .door__plate b { font-size: clamp(56px, 17vw, 120px); }
}

/* 404: off the map */
body.lost { padding-top: 0; background: var(--red); }
.lost__cover { min-height: 100vh; justify-content: center; padding: 48px 24px; }
.lost__logo { display: block; width: 96px; height: 96px; border: var(--b); box-shadow: var(--sh); }
@media (min-width: 1024px) { .lost__cover { padding: 64px 12vw; } }

/* the route plot overlay (CA copied) */
.route-plot { position: fixed; inset: 0; z-index: 70; pointer-events: none; transition: opacity .5s; }
.route-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.route-plot.is-gone { opacity: 0; }

/* motion off: complete and still */
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}