/* ---------------------------------------------------------------------------
   Wander, as a contact sheet. The site's shared stylesheet.

   Adopted 2026-09-28 from an unlinked preview that argued the direction on the
   landing page alone; this file carries it to every page. That preview, the
   previous stylesheet and its hero imagery were removed once 1.8 shipped and
   the design went live, so nothing here has a predecessor to diff against.

   The reference is the contact sheet rather than the map, because Wander's
   pipeline is photographs sorted by capture time with a route inferred between
   them, and that is a contact sheet with the keeper circled. Frame numbers
   encode capture order, which is genuinely the app's first step. The chinagraph
   mark is grease pencil, spent only where something is being chosen: the
   button, the current link, and exactly one circled frame. Two faces split by
   who wrote them, machine and hand, with the hand rationed.

   Dark mode is the negative. The stock inverts, the screenshots swap to their
   dark captures, and the grease pencil stays exactly where it was, because
   grease pencil sits on the print and never on the negative.

   What the previous stylesheet did better and this keeps: screenshots on light
   stock, the dark-variant swap through <picture>, and the system stack for body
   copy, which reads native and continuous with a Liquid Glass app.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@600;700&family=Caveat:wght@600&display=swap');

:root {
  color-scheme: light dark;

  /* The stock began as the app icon's own paper, sampled off the rendered icon:
     #faedd0 its mid tone, #ebdabd the shade along its lower edge, so the
     vignette repeated the icon's own shading rather than inventing a second
     one. At full strength that read too yellow across a whole page, where the
     icon only ever shows it at thumbnail size, so both are lifted 40% toward
     white. The hue and the relationship between the two are unchanged; only
     the saturation comes down.
     
     This leaves the site lighter than the App Store screenshots, which are
     baked at the original #faedd0 and cannot be swapped while 1.8 is the live
     version. Deliberate and temporary: `Store/MarketingScreenshots/build_slots.py`
     in the app repo carries the same note, and the twenty screenshots get
     re-rendered to match at the next release. */
  --stock:      #fcf4e3;
  --stock-deep: #f3e9d7;
  --plate:      #ffffff;   /* screenshots sit on light stock, as they should */
  /* Neutrals carry the stock's warmth rather than fighting it: a pure grey on
     tan reads cold and unconsidered. */
  --ink:        #1f1b14;
  --ink-soft:   #5d5648;
  --ink-faint:  #93897a;
  --rule:       rgba(31,27,20,.16);
  --rule-firm:  rgba(31,27,20,.34);
  --chinagraph: #cf3a1e;   /* grease pencil, the only accent */

  --f-edge: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-head: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-hand: "Caveat", "Bradley Hand", cursive;

  --lift: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
}

/* The theme tokens are redefined three times on purpose: once for the OS
   preference, and once each for an explicit override, so a toggle can win in
   both directions. Components read the tokens and are never restyled inside a
   media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stock:      #211d17;
    --stock-deep: #17140f;
    --plate:      #2b2620;
    --ink:        #f2e9d6;
    --ink-soft:   #ada393;
    --ink-faint:  #79705f;
    --rule:       rgba(242,233,214,.16);
    --rule-firm:  rgba(242,233,214,.32);
    --chinagraph: #ff5c3d;
    --lift:       0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --stock: #211d17; --stock-deep: #17140f; --plate: #2b2620;
  --ink: #f2e9d6; --ink-soft: #ada393; --ink-faint: #79705f;
  --rule: rgba(242,233,214,.16); --rule-firm: rgba(242,233,214,.32);
  --chinagraph: #ff5c3d;
  --lift: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --stock: #fcf4e3; --stock-deep: #f3e9d7; --plate: #ffffff;
  --ink: #1f1b14; --ink-soft: #5d5648; --ink-faint: #93897a;
  --rule: rgba(31,27,20,.16); --rule-firm: rgba(31,27,20,.34);
  --chinagraph: #cf3a1e;
  --lift: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

a { color: var(--chinagraph); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--ink); }

:focus-visible { outline: 2px solid var(--chinagraph); outline-offset: 3px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.wrap.narrow { max-width: 760px; }

/* --------------------------------------------------------------- masthead */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--stock);
  position: sticky; top: 0; z-index: 10;
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 15px; padding-bottom: 15px;
}
.brand {
  margin: 0; font-family: var(--f-edge); font-weight: 500;
  font-size: 14px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
a.brand:hover { color: var(--chinagraph); }
.masthead nav { display: flex; gap: clamp(14px, 2.4vw, 26px); flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--f-edge); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
}
.masthead nav a:hover, .masthead nav a:focus-visible {
  color: var(--ink); border-bottom-color: var(--chinagraph);
}
/* The current page is the frame being chosen, so it gets the grease pencil. */
.masthead nav a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--chinagraph);
}
.flag {
  font-family: var(--f-edge); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--chinagraph);
  border: 1px solid var(--chinagraph); padding: 3px 8px;
}

/* ------------------------------------------------------------------- hero */
.hero { padding: clamp(52px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.hero.compact { padding: clamp(40px, 6vw, 68px) 0 clamp(28px, 4vw, 44px); }
.roll-id {
  font-family: var(--f-edge); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 22px;
}
h1 {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(36px, 6.6vw, 66px); line-height: 1.03;
  letter-spacing: -.025em; margin: 0 0 20px; max-width: 16ch; text-wrap: balance;
}
.hero.compact h1 { font-size: clamp(32px, 5vw, 48px); }
.lede { font-size: clamp(17px, 2.1vw, 20px); max-width: 46ch; margin: 0 0 32px; }
.hero.compact .lede { margin-bottom: 0; }
.actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn {
  font-family: var(--f-edge); font-weight: 500; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--chinagraph); color: #fff;
  border: 1.5px solid var(--chinagraph); padding: 13px 26px;
  text-decoration: none; display: inline-block;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--chinagraph); }
.aside { font-family: var(--f-edge); font-size: 12px; color: var(--ink-soft); }
.hand {
  font-family: var(--f-hand); font-size: 26px; color: var(--chinagraph);
  display: inline-block; transform: rotate(-2.5deg);
}

/* ----------------------------------------------------------------- frames */
.frame {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(44px, 6vw, 74px) 0;
  border-bottom: 1px solid var(--rule);
}
.frame:nth-of-type(even) .copy { order: 2; }

/* The rail became an eyebrow: same encoding, none of the width. */
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--f-edge); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.eyebrow .no { color: var(--ink-soft); }
.eyebrow .slug::before { content: "/ "; color: var(--ink-faint); }
.keeper .eyebrow .no { color: var(--chinagraph); }

h2 {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(24px, 3.3vw, 35px); line-height: 1.13;
  letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance;
}
.copy p { margin: 0 0 12px; max-width: 52ch; }
.copy p:last-child { margin-bottom: 0; }
.mark { margin-top: 16px !important; }

/* Screenshot sizing and the concentric corner curve are measured against the
   real device masks, in percent so they hold at any rendered width. */
figure.exposure { margin: 0 auto; max-width: 320px; }
figure.exposure.ipad { max-width: 460px; }
figure.exposure picture, figure.exposure img { display: block; width: 100%; }
figure.exposure img {
  background: var(--plate);
  border-radius: 9.3% / 4.3%;   /* iPhone: ~123px of 1320 wide */
  box-shadow: var(--lift);
}
figure.exposure.ipad img {
  border-radius: 2.12% / 2.82%; /* iPad Pro 13": ~29pt corners */
}
/* The frame number prints under the frame, which is where a sheet prints it. */
figure.exposure figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--f-edge); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 10px;
}
/* The one frame that moves. Playback is a motion feature, so the frame showing
   it plays: a short muted loop of the marker travelling the route with the
   picture-in-picture viewer following along. Styled to be indistinguishable
   from the stills beside it, same plate, radius and lift, so the roll still
   reads as one sheet.

   Two videos, one per theme, swapped here rather than by script. A single
   element whose source is rewritten on a theme change has to survive load(),
   which resets readyState to 0 and silently drops the play() that follows it;
   that cost two rounds of chasing a reel parked on its poster. CSS has no such
   state to lose, it switches instantly when the system theme changes, and the
   page needs no JavaScript at all.

   Reduced motion hides both and shows the poster frame as a plain image, which
   is why that still is in the markup rather than left to the poster attribute:
   someone who asked the system for less movement should get a photograph, not
   a paused video. */
figure.exposure.motion .reel {
  display: block;
  width: 100%;
  background: var(--plate);
  border-radius: 9.3% / 4.3%;
  box-shadow: var(--lift);
}
figure.exposure.motion .reel-dark { display: none; }
figure.exposure.motion .still { display: none; }

@media (prefers-color-scheme: dark) {
  figure.exposure.motion .reel-light { display: none; }
  figure.exposure.motion .reel-dark { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  figure.exposure.motion .reel { display: none; }
  figure.exposure.motion .still { display: block; }
}

/* Circled, in the only sense a box-shadow can circle something. */
.keeper figure.exposure img { box-shadow: 0 0 0 2px var(--chinagraph), var(--lift); }
.keeper figure.exposure figcaption { color: var(--chinagraph); }

/* ------------------------------------------------------------------- prose
   About, Support, Privacy and Releases are read rather than skimmed, so they
   run as a single measured column on the stock itself. No cards: a card was
   the old design's way of lifting text off a photograph, and there is no
   photograph here to lift it off. A rule and an eyebrow do the same work. */
.sheet { padding: clamp(36px, 5vw, 58px) 0; border-bottom: 1px solid var(--rule); }
.sheet:last-of-type { border-bottom: 0; }
.sheet > h2:first-child { margin-top: 0; }
.sheet h3 {
  font-family: var(--f-head); font-weight: 600; font-size: 20px;
  line-height: 1.25; letter-spacing: -.01em; margin: 30px 0 8px;
}
.sheet h3:first-of-type { margin-top: 20px; }
.sheet p, .sheet li { max-width: 64ch; }
.sheet p { margin: 0 0 14px; }
.sheet ul, .sheet ol { margin: 0 0 14px; padding-left: 22px; }
.sheet li { margin-bottom: 7px; }
.sheet strong { font-weight: 600; }

/* A label for a block that is data rather than prose. */
.label {
  font-family: var(--f-edge); font-weight: 500; font-size: 11.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 20px;
}

/* ------------------------------------------------------------- the ledger
   Releases, as the roll's own log. Each version is a <details>; shut, it is
   one line of edge data, which is the whole reason the page can hold eight of
   them without becoming a scroll. */
details.release {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}
details.release:last-of-type { border-bottom: 1px solid var(--rule); }
details.release > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
details.release > summary::-webkit-details-marker { display: none; }
details.release > summary h2 {
  margin: 0; font-size: 26px; font-family: var(--f-edge); font-weight: 500;
  letter-spacing: .04em;
}
details.release[open] > summary h2 { color: var(--chinagraph); }
.release-meta {
  margin: 0; font-family: var(--f-edge); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
details.release > summary::after {
  content: "+"; margin-left: auto; align-self: center;
  font-family: var(--f-edge); font-size: 20px; line-height: 1; color: var(--ink-faint);
}
details.release[open] > summary::after { content: "\2212"; color: var(--chinagraph); }
details.release > .release-body { margin-top: 18px; }
details.release > .release-body h3 {
  font-family: var(--f-edge); font-weight: 500; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
  margin: 22px 0 8px;
}
details.release > .release-body ul { margin: 0; padding-left: 22px; }
details.release > .release-body li { margin-bottom: 7px; max-width: 64ch; }

/* -------------------------------------------------------------- edge data */
.edge-data { padding: clamp(44px, 6vw, 70px) 0; border-bottom: 1px solid var(--rule); }
.edge-data h3 {
  font-family: var(--f-edge); font-weight: 500; font-size: 11.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 24px;
}
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px 32px; margin: 0; }
.figures div { border-top: 1.5px solid var(--rule-firm); padding-top: 11px; }
.figures dt {
  font-family: var(--f-edge); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.figures dd { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------- privacy */
.privacy-strip { padding: clamp(38px, 5vw, 62px) 0; border-bottom: 1px solid var(--rule); }
.privacy-strip p { margin: 0; max-width: 62ch; font-size: 18px; }

/* ------------------------------------------------------------------ close */
.closing { padding: clamp(44px, 6vw, 72px) 0; text-align: center; }
.closing h2 { margin: 0 0 24px; }
.closing .actions { justify-content: center; }

/* ----------------------------------------------------------------- footer */
footer { padding: clamp(32px, 4vw, 50px) 0 52px; }
.foot-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer nav a {
  font-family: var(--f-edge); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
footer nav a:hover { color: var(--chinagraph); }
.colophon { font-family: var(--f-edge); font-size: 11px; color: var(--ink-faint); margin: 24px 0 0; line-height: 1.8; }

@media (max-width: 820px) {
  .frame { grid-template-columns: 1fr; }
  .frame:nth-of-type(even) .copy { order: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }