/* =============================================================================
   barakahgames.com — chrome and shared components

   Loaded on every light-surface page. The page's own stylesheet loads after
   it: home.css on the homepage, shop.css on /shop.

   WHY THIS FILE EXISTS. The homepage and /shop both came from mockups that
   name their parts generically — .shop, .pcard, .price, .what, .when, .close,
   .promise — and the two pages mean different things by nearly all of them.
   Thirty-two selectors were identical across the two stylesheets. Sharing one
   file would have handed /shop the homepage's 24rem card cap and its centring,
   which is exactly what the shop page's left-edge alignment cannot survive.

   So the chrome and the genuinely shared components live here, each page's
   sections live in their own file, and only one page file is ever loaded. Add
   a page, add a file; nothing has to be renamed to stay out of the way.

   Anything in here is used by more than one page. If a rule is only true of
   one page, it belongs in that page's file.
   ============================================================================= */

.wrap{max-width:80rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

a{color:inherit}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--s-ground);color:var(--s-head);
  padding:var(--bg-space-sm) var(--bg-space-md);
  border:var(--bg-hairline) solid var(--s-hair);border-radius:var(--bg-radius)
}
.skip:focus{left:var(--bg-space-md);top:var(--bg-space-md)}

/* 9px uppercase reads better at 400 than at the 300 tokens.css sets, and the
   400 face is the uppercase subset, so a label is exactly what it covers. */
.label{font-weight:400}

/* The mockup's button is 48px rather than the token's 54px. Still above the
   44px touch floor; it sits inside the hero pill and the pill sets the height
   of the whole control. */
.btn{font-size:.75rem;letter-spacing:.18em;padding:.9375rem 1.625rem;min-height:48px}

/* The hand-drawn curve. Product content, never chrome — it appears in the hero
   and the close and nowhere else. */
.line{display:block;width:170px;height:auto;color:var(--s-rule)}


/* ---------- header ---------- */
.head{border-bottom:var(--bg-hairline) solid var(--s-hair);background:var(--s-ground);
  position:relative}
.head-in{max-width:80rem;margin-inline:auto;padding:1.25rem clamp(1.25rem,4vw,2.5rem);
  display:flex;align-items:center;justify-content:space-between;gap:var(--bg-space-md)}
/* Weight stated, not inherited. Only the 400 face of Playfair is self-hosted,
   and body is 300 — inheriting it asks for a face that does not exist. */
/* The wordmark is the supplied artwork, not set type. It paints with
   currentColor, so the forest comes from the surface and a second product
   that changes --s-head recolours it for free. */
.wordmark{display:block;color:var(--s-head);text-decoration:none;line-height:0}
.wordmark .mark{display:block;width:7rem;height:auto}
.wordmark--foot .mark{width:7.5rem}

/* ---------- navigation ----------
   Ships open. assets/site-nav.js adds the button and folds the list away on a
   phone, so a browser without JavaScript gets a stacked list it can actually
   use rather than a control it cannot operate. */
.nav{display:flex;gap:var(--bg-space-lg)}
.nav a{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);text-decoration:none;
  padding-bottom:var(--bg-space-2xs);border-bottom:var(--bg-hairline) solid transparent}
.nav a:hover{color:var(--s-head)}
/* The current page. Hung off aria-current rather than a class, so the state is
   announced and not only drawn — the underline is the visual half of an
   attribute that already carries the meaning. */
.nav a[aria-current]{color:var(--s-head);border-bottom-color:var(--s-rule)}

.navbtn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--s-ink-2)}
.navbtn:hover{color:var(--s-head)}
.navbtn__bars{display:flex;flex-direction:column;justify-content:center;gap:6px;width:20px}
.navbtn__bars i{display:block;height:var(--bg-hairline);background:currentColor;
  transition:transform var(--bg-motion-duration-fast) var(--bg-motion-ease),
             opacity var(--bg-motion-duration-fast) var(--bg-motion-ease)}
/* Open: the two rules cross. Two bars rather than three so the closed mark and
   the cross are the same two objects moving, not three becoming two. */
.navbtn[aria-expanded="true"] .navbtn__bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.navbtn[aria-expanded="true"] .navbtn__bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:759.98px){
  /* ---------- the list ----------
     Without a script this is what a phone gets: a plain stacked list in flow,
     under the wordmark, scrolling with the page. It is the fallback and it has
     to stay usable on its own — which is why NONE of the takeover below is in
     this rule. A fixed, full-bleed panel here would cover the page forever
     with no button to dismiss it. */
  .nav{flex-direction:column;gap:0;flex-basis:100%}
  .head-in{flex-wrap:wrap}

  /* Rows, not a line of links. Bigger than the desktop nav because on a phone
     this is the only thing being asked of the screen, and still the site's
     uppercase — it scales the language rather than changing it. */
  .nav a{display:flex;align-items:center;gap:.75rem;
    padding-block:1.375rem;
    border-bottom:var(--bg-hairline) solid var(--s-hair);
    font-size:.9375rem;letter-spacing:.2em;color:var(--s-ink)}
  .nav a:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
  /* A row already carries a hairline, so the current page cannot be marked
     with another one. It takes a terracotta dot instead — circles are the
     language the rest of the site marks things with. */
  .nav a[aria-current]{color:var(--s-head);border-bottom-color:var(--s-hair)}
  .nav a[aria-current]::before{content:"";flex:none;
    width:6px;height:6px;border-radius:var(--bg-radius-full);background:var(--s-rule)}

  /* ---------- the takeover ----------
     Everything from here needs the script, because everything from here needs
     a way out. A panel hanging under the header was 114px tall for two links
     and read as an afterthought; full bleed gives them the only job on the
     screen.

     The header stays put while it is open — the wordmark anchors the page and
     the button stays under the thumb that opened it. It is fixed only while
     open, and body carries the header's height as padding for exactly that
     long, so nothing shifts on the way in or out.

     Closed is visibility rather than display, so it can be faded at all, and
     visibility:hidden takes the list out of the focus order and the
     accessibility tree the same way the hidden attribute would. */
  .js .nav{
    position:fixed;inset:0;z-index:25;
    background:var(--s-ground);
    padding:calc(var(--head-h,5.25rem) + clamp(2rem,9vw,3.5rem))
            clamp(1.25rem,6vw,2.5rem) 2.5rem;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity var(--bg-motion-duration-fast) var(--bg-motion-ease),
               visibility 0s linear var(--bg-motion-duration-fast);
  }
  .js .nav.is-open{
    opacity:1;visibility:visible;
    transition:opacity var(--bg-motion-duration-fast) var(--bg-motion-ease),
               visibility 0s;
  }

  /* Fade and rise, the same primitive the rest of the site uses. The stagger
     is one delay per row rather than a keyframe per row. */
  .js .nav a{transform:translateY(var(--bg-motion-rise));
    transition:transform var(--bg-motion-duration) var(--bg-motion-ease),
               color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
  .js .nav.is-open a{transform:none;transition-delay:calc(var(--i,0) * 45ms)}

  .nav-open{overflow:hidden}
  .nav-open .head{position:fixed;top:0;left:0;right:0;z-index:30}
  .nav-open body{padding-top:var(--head-h)}

  /* The panel is INSIDE the header, so the header's own z-index cannot lift
     the wordmark and the button above it — a positioned descendant with a
     positive z-index paints over its ancestor's unpositioned content whatever
     the ancestor's z-index is. Left alone, the takeover covers the only
     control that closes it, and a full-bleed panel has no outside to tap.
     These two have to be positioned themselves to sit above it. */
  .nav-open .wordmark,
  .nav-open .navbtn{position:relative;z-index:26}
}

@media(max-width:759.98px) and (prefers-reduced-motion:reduce){
  /* Same content, no movement. */
  .js .nav a{transform:none}
}

/* Above the fold-away width the list is always the list, whatever the script
   left behind. */
@media(min-width:760px){
  .navbtn{display:none}
}


/* ---------- the waitlist ----------
   Shared: the hero and the close on the homepage, the close on /shop. */
/* The waitlist pill. The one input on the site that is not a transparent
   underline, and the one that is also the commercial action. Locked — see
   CLAUDE.md. The label is carried by aria-label, not by the placeholder. */
.pill{display:flex;align-items:center;gap:var(--bg-space-xs);background:var(--s-ground);
  border:var(--bg-hairline) solid var(--s-hair);border-radius:var(--bg-radius-full);
  padding:.4375rem .4375rem .4375rem 1.375rem;width:100%;max-width:27rem}
.pill input{flex:1;min-width:0;background:none;border:0;color:var(--s-ink);
  font:inherit;padding:var(--bg-space-sm) 0}
.pill input::placeholder{color:var(--s-ink-3);opacity:1}
.pill input:focus{outline:none}
.pill:focus-within{border-color:var(--s-ink-3)}

/* Autofill. WebKit and Blink repaint a remembered value onto a white box;
   on a white page that is invisible, but the pill's border would still be
   painted over. The inset shadow keeps the ground and the ink ours. */
.pill input:-webkit-autofill,
.pill input:-webkit-autofill:hover,
.pill input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--s-ink);
  -webkit-box-shadow:0 0 0 100px var(--s-ground) inset;
  caret-color:var(--s-ink)
}

@media(max-width:479px){
  .pill{flex-direction:column;border-radius:16px;padding:var(--bg-space-md);
    align-items:stretch;gap:var(--bg-space-sm)}
  .pill input{text-align:center;border-bottom:var(--bg-hairline) solid var(--s-hair);
    padding-bottom:var(--bg-space-sm)}
  .pill .btn{width:100%}
}

.form-note{font-size:var(--bg-size-small);color:var(--s-ink-3)}
.form-state[hidden]{display:none}


/* ---------- media slots ----------
   Shared by every page that carries a photograph. The per-page sizing (which
   slot is 4:5, which is eager) stays with the section that owns it. */
.slot{gap:.875rem;padding:1.5rem}

/* A slot with a photograph in it drops its frame entirely — the shot is
   already on white, so a border and a tint would only fence it in. And it is
   CONTAINED, never covered: cover crops the cast shadow off a still life and
   the object stops sitting on the page. contain letterboxes into white, which
   this ground hides, and a future file at a slightly different ratio can
   never silently lose an edge. tokens.css sets cover for the general case;
   this is the rule that matters here. See docs/media-slots.md. */
.slot--filled{padding:0;border-color:transparent;background:none;
  border-radius:var(--bg-radius-sharp)}
.slot--filled > img{object-fit:contain}
.slot--filled picture{display:block;width:100%;height:100%}
.slot--filled picture img{width:100%;height:100%;object-fit:contain;display:block}
/* --s-ink-3 is checked at 4.7 against white, but a slot sits on --s-ground-2,
   where it measures 4.24 and fails AA on type this small. --s-ink-2 is 5.51
   there. The mockup uses ink-3 throughout; this is the one place the warm
   ground changes the answer, and these three are 8-10px. */
.ring{width:54px;height:54px;border-radius:var(--bg-radius-full);
  border:var(--bg-hairline) solid var(--s-hair);display:grid;place-items:center}
.ring span{font-size:.5rem;letter-spacing:.28em;color:var(--s-ink-2);text-transform:uppercase}
.slot p{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);line-height:2;max-width:none}
.slot code{font-family:var(--bg-font-body);font-size:.5625rem;letter-spacing:.1em;
  color:var(--s-ink-2);border:var(--bg-hairline) solid var(--s-hair);
  border-radius:3px;padding:.1875rem .375rem;text-transform:none}


/* shared section intro */
.intro{max-width:44rem;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;gap:1.125rem;margin-bottom:clamp(2.75rem,6vw,4.5rem)}
.intro p{max-width:37rem;margin-inline:auto}


/* ---------- footer — brand chrome, not product ----------
   No terracotta curve here: it belongs to One Step Closer and would need
   surgical removal the day product #2 ships. No /app link either — /app stays
   live and unlinked, reached by QR or typed. */
.foot{border-top:var(--bg-hairline) solid var(--s-hair);
  padding-block:clamp(3rem,6vw,4.5rem) var(--bg-space-lg);background:var(--s-ground)}
.foot-top{display:grid;gap:clamp(2.25rem,5vw,4rem);grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(2.25rem,5vw,3.5rem)}
@media(min-width:760px){.foot-top{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bg-space-lg) 1.5rem}
@media(min-width:760px){
  .foot-nav{grid-template-columns:repeat(3,auto);justify-content:end;gap:3.5rem}
}
.foot-col{display:flex;flex-direction:column;gap:var(--bg-space-sm)}
.foot-col .label{color:var(--s-ink-3);margin-bottom:.125rem}
.foot-col a{font-size:.875rem;color:var(--s-ink-2);text-decoration:none;line-height:1.5;
  /* anywhere, not break-word: the support address is a single 24-character
     token and the column is sized by its min-content, so the intrinsic size
     has to be breakable or the address pushes the whole page 79px wide below
     480. break-word wraps but does not change min-content, so it would not
     help here. */
  overflow-wrap:anywhere;
  transition:color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.foot-col a:hover{color:var(--s-head)}
.foot-bot{display:flex;flex-wrap:wrap;gap:var(--bg-space-sm) 1.75rem;align-items:center;
  justify-content:space-between;padding-top:1.5rem;
  border-top:var(--bg-hairline) solid var(--s-hair);font-size:.75rem;color:var(--s-ink-3)}
.foot-bot nav{display:flex;gap:1.5rem}
.foot-bot a{color:var(--s-ink-3);text-decoration:none}
.foot-bot a:hover{color:var(--s-ink-2)}