/* =========================================================================
   SOMEWHERE FOR TWO: the V5 shared layer (approved 2026-09-24, frozen).

   Four text behaviours, and nothing else:
     Noto Serif Display 300   display: headlines, names, places, prices
     Hanken Grotesk 300-500   everything you read or press (18px reading)
     one small caption voice  .quiet, 15px
     buttons                  .btn / .btn.solid
   IBM Plex Mono only for what a map would print (coordinates, step numbers).

   Two layers:
   1. @font-face and :root tokens. Global, safe on every page.
   2. Primitives, scoped with :where(.v5). They apply only where <body class="v5">,
      so where-you-met.html (which keeps production's own stylesheet) gets the
      fonts and tokens but none of these rules. :where() adds no specificity, so
      each page's own rules still win exactly as they did in the lab.
   Page-specific composition stays in each page's own <style>.
   ========================================================================= */

/* ---------- 1a. fonts: self-hosted, latin subset, only what V5 uses ---------- */
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/noto-display-300.woff2?v=1) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif Display";font-style:italic;font-weight:300;font-display:swap;
  src:url(/fonts/noto-display-300i.woff2?v=1) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 500;font-display:swap;
  src:url(/fonts/hanken-var.woff2?v=1) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:300 500;font-display:swap;
  src:url(/fonts/hanken-var-i.woff2?v=1) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plex-mono-400.woff2?v=1) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1b. tokens ---------- */
:root{
  --paper:#f6f3ec; --lift:#fbf9f4; --tint:#eee8dc;
  --sea:#c9d7d9; --land:#f2eadb; --stone:#d1c9b8;
  --ink:#16110a; --ink-2:#3b3228; --mute:#6a6053;
  --rose:#b0685b; --rose-lt:#e3a293;
  --daniel:#3f4a66; --ashlyn:#5f6641; --sage-tint:#e8ebdc;
  --brass:#a8823f;
  --field:#353a22; --field-lit:#4a5033; --on-field:#f3eee2; --on-field-2:#cfcbb4;
  --control:#8b8377; --rule:rgba(22,17,10,.16);

  --display:"Noto Serif Display",Georgia,serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --tech:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --t1:clamp(50px,7.08vw,102px);
  --t2:clamp(38px,4.45vw,64px);
  --t3:clamp(30px,3.06vw,44px);
  --t4:clamp(24px,2.08vw,30px);
  --t5:clamp(20px,1.53vw,22px);
  --t6:clamp(17px,1.25vw,18px);
  --t7:15px;
  --t8:12px;

  --gut:clamp(20px,5vw,72px);
  --gap:clamp(16px,1.7vw,24px);
  --maxw:1440px;
  --ease:cubic-bezier(.16,.85,.24,1);
  --grade:saturate(.78) contrast(1.04) sepia(.06);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. primitives (only under <body class="v5">) ---------- */
:where(.v5), :where(.v5) *{box-sizing:border-box}
:where(html:has(body.v5)){-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:where(body.v5){margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:350;
  font-size:var(--t6);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.v5) :where(img,svg){display:block;max-width:100%}
:where(.v5) :where(a){color:inherit;text-decoration:none}
:where(.v5) :where(h1,h2,h3,p,figure,ol,dl,dd,blockquote){margin:0;padding:0}
:where(.v5) :where(h1,h2,h3){font-family:var(--display);font-weight:300;letter-spacing:-.022em}
:where(.v5) :where(em){font-style:italic}

/* page / container */
:where(.v5) :where(.wrap){max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* the caption voice, and the map's own notation */
:where(.v5) :where(.quiet){font-size:var(--t7);color:var(--mute)}
:where(.v5) :where(.m){font-family:var(--tech);font-size:var(--t8);line-height:1.5;letter-spacing:.04em;color:var(--mute);font-variant-numeric:tabular-nums}

/* buttons */
:where(.v5) :where(.btn){display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 30px;
  font-family:var(--sans);font-weight:500;font-size:var(--t7);letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--ink);background:transparent;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
:where(.v5) :where(.btn:hover){background:var(--ink);color:var(--paper)}
:where(.v5) :where(.btn.solid){background:var(--ink);color:var(--paper)}
:where(.v5) :where(.btn.solid:hover){background:var(--ink-2);border-color:var(--ink-2)}
:where(.v5) :where(.btn.sm){height:42px;padding:0 20px}
:where(.v5) :where(a:focus-visible,button:focus-visible){outline:2px solid var(--rose);outline-offset:3px}

/* photographs */
:where(.v5) :where(.ph){position:relative;overflow:hidden;background:var(--land)}
:where(.v5) :where(.ph img){width:100%;height:100%;object-fit:cover;filter:var(--grade)}

/* header: brand + links */
:where(.v5) :where(.rings){display:inline-block;width:30px;height:18px;flex:none}
:where(.v5) :where(.rings circle){fill:none;stroke:var(--brass);stroke-width:1.3}
:where(.v5) :where(.bar){height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
:where(.v5) :where(.brand){display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:300;font-size:var(--t5);letter-spacing:-.01em}
:where(.v5) :where(.bar .links){display:flex;align-items:center;gap:34px}
:where(.v5) :where(.bar .links a:not(.btn)){font-size:var(--t7);color:var(--ink-2)}

/* footer */
:where(.v5) :where(footer){padding:clamp(56px,6vw,90px) 0 clamp(48px,5vw,80px)}
:where(.v5) :where(footer .top){display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
:where(.v5) :where(footer .links){display:flex;gap:28px;flex-wrap:wrap}
:where(.v5) :where(footer .links a){font-size:var(--t7);color:var(--ink-2)}
:where(.v5) :where(footer .fine){margin-top:28px;max-width:60em;font-size:var(--t7);line-height:1.6;color:var(--mute)}
:where(.v5) :where(footer .copy){margin-top:10px;font-size:var(--t7);color:var(--mute)}

/* the one place mark: an ink point in a hairline ring, no glow (HTML version; the maps draw the same in SVG) */
:where(.v5) :where(.pt){position:absolute;transform:translate(-50%,-50%);z-index:2;opacity:0;transition:opacity .9s var(--ease),left .6s var(--ease),top .6s var(--ease)}
:where(.v5) :where(.pt.on){opacity:1}
:where(.v5) :where(.pt i){display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
:where(.v5) :where(.pt)::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  border:.8px solid var(--ink);opacity:.55}
:where(.v5) :where(.pt span){position:absolute;left:14px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);
  font-size:var(--t7);color:var(--ink);text-shadow:0 0 3px var(--land),0 0 6px var(--land),0 0 10px var(--land)}
:where(.v5) :where(.pt.left span){left:auto;right:14px}

/* errors: said once, next to the thing to fix */
:where(.v5) :where(.err){display:none;margin-top:10px;font-size:var(--t7);color:#8e463b;padding-left:14px;position:relative}
:where(.v5) :where(.err)::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--rose)}

/* optical alignment: at display sizes the serif's capitals sit ~0.06em inside their box */
:where(.v5) :where(.opt-l){margin-left:-.055em}

@media (max-width:760px){
  :where(.v5) :where(.bar){height:64px}
  :where(.v5) :where(.bar .links a:not(.btn)){display:none}
  :where(.v5) :where(.brand){gap:10px;flex:none;white-space:nowrap}
  :where(.v5) :where(footer .top){flex-direction:column;text-align:center}
  :where(.v5) :where(footer .links){justify-content:center}
  :where(.v5) :where(footer .fine),:where(.v5) :where(footer .copy){text-align:center}
  :where(.v5) :where(.opt-l){margin-left:0}
}
@media (prefers-reduced-motion:no-preference){
  :where(.v5) :where(.rise){opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  :where(.v5) :where(.rise.in){opacity:1;transform:none}
}

/* ---------- 3. the cookie notice, in V5 (presentation only) ----------
   consent.js builds and injects its own markup and <style>; nothing here changes what it
   does. These rules sit on every page that loads v5.css and outrank the injected styles by
   specificity (html body #sft-consent ...), so the logic file stays untouched. */
html body #sft-consent .scx{max-width:760px;margin:0 auto 18px;background:var(--lift);color:var(--ink);
  border:1px solid var(--rule);border-radius:0;box-shadow:0 1px 1px rgba(22,17,10,.06),0 24px 48px -30px rgba(22,17,10,.42);
  padding:18px 22px;gap:22px}
html body #sft-consent .scx-t{font-family:var(--sans);font-weight:350;font-size:var(--t7);line-height:1.55;color:var(--ink-2)}
html body #sft-consent .scx-t a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html body #sft-consent .scx-btn{font-family:var(--sans);font-weight:500;font-size:var(--t7);letter-spacing:.02em;text-transform:none;
  min-height:42px;padding:0 20px;border-radius:0;border:1px solid var(--ink);background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
html body #sft-consent .scx-btn:hover{background:var(--ink);color:var(--paper)}
html body #sft-consent .scx-yes{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html body #sft-consent .scx-yes:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
html body #sft-consent .scx-opt{border-color:transparent;background:transparent;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;letter-spacing:.02em;padding:0 10px;min-height:44px}
html body #sft-consent .scx-opt:hover{background:var(--tint);color:var(--ink)}
html body #sft-consent .scx-btn:focus-visible,html body #sft-consent .scx-pill:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
html body #sft-consent .scx-panel{border-top:1px solid var(--rule)}
html body #sft-consent .scx-row input{accent-color:var(--ashlyn)}
html body #sft-consent .scx-row label{font-family:var(--sans);font-weight:350;font-size:14px;line-height:1.5;color:var(--ink-2)}
html body #sft-consent .scx-row label b{font-weight:500;letter-spacing:0;color:var(--ink)}
html body #sft-consent .scx-pill{background:var(--lift);color:var(--brass);border:1px solid var(--rule);
  box-shadow:0 10px 24px -12px rgba(22,17,10,.45)}
html body #sft-consent .scx-pill:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:560px){
  html body #sft-consent .scx{margin:0 8px 8px;padding:12px 14px;gap:10px;border-radius:0}
  html body #sft-consent .scx-t{font-size:14px;line-height:1.45}
  html body #sft-consent .scx-btn{min-height:44px;padding:0 16px}
  html body #sft-consent .scx-opt{padding:0 10px}
}

/* ---------- 4. For Two / For You: the sibling strip ----------
   The brand's two ways in, Gap-and-Old-Navy style: a quiet utility strip above each page's own
   header, so neither header changes. Global on purpose (not under :where(.v5)): it has to look
   the same on pages that keep their own stylesheet. The current side carries aria-current. */
.sib{background:var(--tint);font-family:var(--sans);-webkit-font-smoothing:antialiased;border-bottom:1px solid var(--rule)}
.sib-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:40px;display:flex;align-items:center;gap:28px}
.sib a{font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1;color:var(--ink-2);text-decoration:none;padding:8px 0}
.sib a:hover{color:var(--ink)}
.sib a[aria-current=page]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--rose)}
.sib a:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
@media (max-width:760px){.sib-in{justify-content:center;height:42px;gap:32px}}