/* Stock Room — shared stylesheet for index.html and shop.html.
   Was two hand-synced copies, 93% identical. The open/closed clock shipped the
   same timezone bug in both because of it. Page-specific rules stay inline on the
   page that owns them. */

/* Self-hosted, never a CDN web font. Both files are Google Fonts' own woff2
   subsets, served from this folder.
   Bricolage Grotesque 800 — the only weight --disp uses, so one static instance
   rather than the variable file. Latin subset, 21.8 KB.
   Instrument Serif italic — subset to DIGITS ONLY, because the only thing it sets
   is the numerals on .row .n and .step b. 4.1 KB for ten glyphs, which is why it
   was worth replacing Georgia rather than living with a borrowed face.
   Familjen Grotesk is deliberately NOT here: body text needs the widest glyph
   coverage of the three, so it is the most expensive face and the least visible
   change. The system sans stays. */
@font-face{font-family:'Bricolage Grotesque'; font-style:normal; font-weight:800;
  font-display:swap; src:url(bricolage-800-latin.woff2) 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:'Instrument Serif'; font-style:italic; font-weight:400;
  font-display:swap; src:url(instrument-italic-digits.woff2) format('woff2');
  unicode-range:U+30-39}
/* ===========================================================
     Direction 4a — "Belonging" (anchor).
     Tile band, centred symmetry, bilingual, painted pills.
     Palette fixed by the direction sheet:
       F7EDDC ground · 1D5C8C blue · D8452E red · E9A03B gold · 2A1A14 ink
     Dark register borrows 4d so the two stay one system (no invented palette).
     Type: Bricolage Grotesque 800 on the display, Instrument Serif italic on the
     numerals, system sans for body, MONO for all labels, eyebrows and pills.
     =========================================================== */
  :root{
    --ground:#F7EDDC; --paper:#FDF7EA; --tan:#E8DCC0; --line:#D8C7A4;
    --blue:#1D5C8C; --blue-dk:#164A72; --red:#D8452E; --gold:#E9A03B;
    /* --ink-3 was #9A8571: 3.03:1 on the light ground, and it carries real text —
       the customer quote, the review citations, the open/closed line. #776453 is
       4.85:1. The dark register keeps #9A8571, which is 5.31:1 against its ground. */
    --ink:#2A1A14; --ink-2:#6B5847; --ink-3:#776453;
    --on-blue:#FDF7EA;
    --maxw:1120px;
    --disp:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  }
  /* --on-blue is named by JOB, not by shade. The bug it replaces: the pill was
     color:var(--paper), and --paper flips to near-black in dark mode while the blue
     stays a mid-blue — 3.81:1 on the pill, 2.49:1 on its hover. A job-named token
     makes that pairing unreachable.
     Dark --blue is #2A6E9E, not #2E7AB0: even white on #2E7AB0 is only 4.35:1 at
     this text size. At #2A6E9E it is 5.49:1, and the pill still clears 3:1 against
     the ground so the button reads as a button. */
  @media(prefers-color-scheme:dark){
    :root{--ground:#17110E; --paper:#1F1712; --tan:#2E1E14; --line:#3A2A1E;
          --blue:#2A6E9E; --blue-dk:#1D5C8C; --red:#E4573F; --gold:#C98A3C;
          --on-blue:#FFFFFF;
          --ink:#F6E9D4; --ink-2:#C6B49B; --ink-3:#9A8571}
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.25rem)}
  section{padding:clamp(2.75rem,6.5vw,4.5rem) 0}
  a{color:inherit}
  img{max-width:100%; display:block}

  h1,h2,h3{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.02}

  /* mono is the texture: every label, eyebrow, pill and caption */
  .m{font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:.66rem; font-weight:600}
  .m.red{color:var(--red)} .m.mute{color:var(--ink-3)} .m.blue{color:var(--blue)}


  /* painted pills */
  .pill{display:inline-block; font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
        font-size:.7rem; font-weight:700; text-decoration:none; padding:.95rem 1.75rem; border-radius:999px;
        border:2px solid var(--blue); background:var(--blue); color:var(--on-blue); transition:background .18s,color .18s,border-color .18s}
  .pill:hover{background:var(--blue-dk); border-color:var(--blue-dk)}
  .pill.o{background:transparent; color:var(--ink); border-color:var(--ink)}
  .pill.o:hover{background:var(--ink); color:var(--ground)}
  .acts{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center}

  /* gold rule ornament */
  .rule{width:82px; height:4px; background:var(--gold); margin:1.3rem auto}
  .rule.l{margin-inline:0}

  .mockbar{background:var(--ink); color:var(--ground); text-align:center; padding:.6rem 1rem;
           font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600}

  /* painted photo blocks — never a dashed grey box */
  .ph{background:var(--tan); border:2px solid var(--ink); border-radius:10px; display:flex; align-items:center;
      justify-content:center; text-align:center; padding:1.1rem; color:var(--ink-2);
      font-family:var(--mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase}
  .ph.b{background:var(--blue); border-color:var(--blue); color:var(--on-blue)}
  .ph.g{background:var(--gold); border-color:var(--gold); color:#3A2A1E}

  header{background:var(--ground); border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:30}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; flex-wrap:wrap}
  .brand{display:inline-flex; align-items:baseline; gap:.4rem; font-family:var(--disp); font-weight:800;
         font-size:1.12rem; letter-spacing:-.01em; text-transform:uppercase; text-decoration:none; white-space:nowrap}
  .brand i{font-family:var(--mono); font-style:normal; font-weight:700; font-size:.68rem; letter-spacing:.1em; color:var(--red)}
  .nav ul{display:none; gap:1.4rem; list-style:none}
  .nav ul a{text-decoration:none; color:var(--ink-2)}
  .nav ul a:hover{color:var(--red)}
  .menu-toggle{display:inline-flex; align-items:center; gap:.55rem; min-height:40px; padding:.35rem .95rem;
               border:2px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink);
               cursor:pointer; font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em;
               font-size:.66rem; font-weight:600}
  .menu-toggle .bars{display:block; width:15px; height:2px; background:currentColor; position:relative}
  .menu-toggle .bars::before,.menu-toggle .bars::after{content:""; position:absolute; left:0; width:15px; height:2px; background:currentColor}
  .menu-toggle .bars::before{top:-5px}
  .menu-toggle .bars::after{top:5px}
  .menu-toggle[aria-expanded="true"]{background:var(--blue); border-color:var(--blue); color:var(--on-blue)}
  .nav ul.is-open{display:flex; flex-direction:column; width:100%; order:4; gap:0; margin-top:.7rem;
                  border-top:2px solid var(--ink)}
  .nav ul.is-open li{border-bottom:1px solid var(--line)}
  .nav ul.is-open a{display:flex; align-items:center; min-height:46px; color:var(--ink)}
  .status{display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; color:var(--ink-3);
          flex:1 0 100%; order:3; margin-top:.2rem}
  .status .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--ink-3); flex:none}
  .status.is-open{color:var(--ink)}
  .status.is-open .dot{background:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent)}
  .status.is-closed{color:var(--ink-2)}
  .status.is-closed .dot{background:var(--red)}

  /* hero — centred symmetry */
  .hero{text-align:center; padding-top:clamp(2rem,5.5vw,3.5rem)}
  .hero h1{font-size:clamp(2.4rem,9vw,4.6rem); max-width:15ch; margin:1.1rem auto 0}
  .hero h1 em{font-style:normal; color:var(--red)}
  .hero .sub{color:var(--ink-2); max-width:40ch; margin:0 auto 1.6rem; font-size:clamp(1rem,2vw,1.08rem)}
  .shots{display:grid; grid-template-columns:1fr; gap:clamp(.7rem,2vw,1.1rem); margin-top:clamp(1.75rem,4vw,2.5rem)}
  .shots .ph{aspect-ratio:4/3}

  /* fact strip */
  .facts{background:var(--paper); border-block:2px solid var(--ink)}
  .facts .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
  .ft{padding:1.15rem 0; text-align:center; border-top:1px solid var(--line)}
  .ft:nth-child(-n+2){border-top:0}
  .ft b{display:block; font-family:var(--disp); font-size:1.1rem; font-weight:800; letter-spacing:-.02em; min-height:1.5em}
  .ft span{display:block; margin-top:.15rem; font-size:.76rem; color:var(--ink-2); line-height:1.4; min-height:2.1em}

  .head{text-align:center; max-width:52ch; margin:0 auto clamp(1.9rem,4.5vw,2.75rem)}
  .head h2{font-size:clamp(1.7rem,5vw,2.5rem); margin-top:.9rem}
  .head p{color:var(--ink-2); margin-top:.7rem; font-size:.96rem}

  /* what we carry */
  .cards{display:grid; grid-template-columns:1fr; gap:clamp(1.1rem,2.5vw,1.6rem)}
  .card{text-align:center}
  .card .ph{aspect-ratio:4/3; margin-bottom:.95rem}
  .card h3{font-size:1.08rem; line-height:1.25; margin:.55rem 0 .5rem; min-height:2.5em}
  .card .br{font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); line-height:1.9}

  /* shop — the entry point. Stock is rendered by their system, never drawn here. */
  .why{max-width:56ch; margin:0 auto; text-align:left; border-top:2px solid var(--ink)}
  .why div{padding:1.05rem 0; border-bottom:1px solid var(--line)}
  .why b{display:block; font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;
         font-size:.63rem; font-weight:700; color:var(--red); margin-bottom:.35rem}
  .why p{color:var(--ink-2); font-size:.95rem}
  .liveline{display:flex; align-items:center; gap:.7rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap}
  .dot{width:9px; height:9px; border-radius:99px; background:var(--red); flex:0 0 auto}

  /* crew */
  .crew{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,2.2vw,1.5rem)}
  .who{text-align:center}
  .who .ph{aspect-ratio:3/4; margin-bottom:.8rem}
  .who h3{font-size:.92rem; text-transform:uppercase; letter-spacing:.02em}
  .who q{display:block; margin-top:.5rem; color:var(--ink-2); font-size:.84rem; line-height:1.55; quotes:none; min-height:5.6em}

  /* numbered rows — serif numerals as the only ornament */
  .rows{border-top:2px solid var(--ink)}
  .row{padding:clamp(1.25rem,3vw,2rem) 0; border-bottom:1px solid var(--line)}
  .row .n{font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-style:italic; font-size:1.9rem; color:var(--gold); line-height:1; margin-bottom:.5rem}
  .row h3{font-size:1.1rem; margin-bottom:.5rem}
  .row p{color:var(--ink-2); font-size:.94rem; max-width:60ch}
  .row q{display:block; margin-top:.7rem; color:var(--ink-3); font-size:.85rem; quotes:none; border-left:3px solid var(--gold); padding-left:.85rem}

  /* trade */
  .steps{display:grid; grid-template-columns:1fr; gap:1.2rem; margin:1.6rem 0}
  .step{background:var(--paper); border:2px solid var(--ink); border-radius:10px; padding:1.15rem; text-align:center}
  .step b{display:block; font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-size:1.5rem; color:var(--red); margin-bottom:.35rem}
  .step span{display:block; font-size:.9rem; min-height:2.9em}

  /* review panels */
  .wall{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
        scrollbar-width:thin; scrollbar-color:var(--line) transparent}
  .wall::-webkit-scrollbar{height:5px}
  .wall::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
  .wall::-webkit-scrollbar-track{background:transparent}
  .wall:focus-visible{outline:3px solid var(--red); outline-offset:6px}
  .rev{flex:0 0 84%; scroll-snap-align:start; display:flex; flex-direction:column;
       background:var(--paper); border:2px solid var(--ink); border-radius:10px; padding:1.15rem}
  .rev .st{color:var(--gold); letter-spacing:.2em; font-size:.72rem; margin-bottom:.55rem}
  .rev p{font-size:.9rem; line-height:1.55}
  .rev cite{display:block; margin-top:auto; padding-top:.85rem; font-style:normal; font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
  .swipe{margin-top:.9rem}

  /* visit */
  .visit{display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,3.5vw,2.5rem); align-items:start}
  .vrow{display:flex; gap:1rem; padding:.85rem 0; border-top:1px solid var(--line)}
  .vrow:last-of-type{border-bottom:1px solid var(--line)}
  .vrow b{flex:0 0 5.5rem; padding-top:.25rem}
  .vrow div{color:var(--ink-2); font-size:.92rem}
  .vrow strong{color:var(--ink); font-weight:700}
  .vrow a{color:var(--blue); text-decoration:none; border-bottom:2px solid var(--gold)}
  .map{aspect-ratio:1/1; min-height:200px}

  footer{background:var(--paper); border-top:2px solid var(--ink); padding:clamp(2rem,4.5vw,3rem) 0 1.5rem}
  .fcols{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; margin-bottom:clamp(1.75rem,4vw,2.5rem)}
  .fcol h4{margin-bottom:.8rem; color:var(--ink-3)}
  .fcol ul{list-style:none; display:flex; flex-direction:column; gap:.5rem}
  .fcol li{font-size:.8rem; color:var(--ink-2)}
  .fcol a{text-decoration:none}
  .fcol a:hover{color:var(--red)}
  .foot{display:flex; flex-direction:column; gap:.55rem; padding-top:1.25rem; border-top:1px solid var(--line);
        font-size:.82rem; color:var(--ink-2)}
  .foot .brand{font-size:1.02rem; color:var(--ink)}
  .prepared{margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--ink-3)}

  @media(min-width:640px){
    .shots{grid-template-columns:1fr 1fr}
    .facts .wrap{grid-template-columns:repeat(4,1fr)}
    .ft{border-top:0}
    .cards{grid-template-columns:repeat(3,1fr)}
    .crew{grid-template-columns:repeat(4,1fr)}
    .steps{grid-template-columns:repeat(3,1fr)}
    .rev{flex-basis:330px}
    .fcols{grid-template-columns:repeat(4,1fr)}
    .foot{flex-direction:row; justify-content:space-between; align-items:baseline}
  }
  @media(min-width:940px){
    .nav ul{display:flex}
    .menu-toggle{display:none}
    .status{flex:0 0 auto; order:0; margin-top:0}
    .nav ul.is-open{flex-direction:row; width:auto; order:0; margin-top:0; border-top:0; gap:1.4rem}
    .nav ul.is-open li{border-bottom:0}
    .nav ul.is-open a{min-height:0; color:var(--ink-2)}
    .row{display:grid; grid-template-columns:auto .85fr 1.4fr; gap:clamp(1.5rem,3.5vw,3rem); align-items:start}
    .rev{flex-basis:360px}
    .visit{grid-template-columns:1.1fr .9fr}
  }