/* =============================================================================
   barakahgames.com — the homepage

   Chrome, the waitlist, the media slot and the shared section intro are in
   site.css, which loads first. Only the homepage's own sections are here, so
   the generic names — .shop, .pcard, .price, .what, .when, .close — are the
   homepage's and cannot reach another page.
   ============================================================================= */

/* =============================================================================
   barakahgames.com — homepage and site chrome
   Light surface, forest bands. Ported from docs/home-mockup.html.

   Loaded by layout/theme.liquid only. assets/base.css is the old dark site
   and is loaded by layout/legacy.liquid instead — the two never meet, which
   is deliberate: base.css redefines body, html, h3, .btn, .field and .hint,
   and it would win on load order.

   tokens.css supplies *, html, body, h1-h3, p, a, .label, .hint, .row,
   .field, .btn, .btn-quiet, .slot, the focus ring and the motion primitives.
   Nothing here restates them. Where the mockup deliberately departs from a
   token value, the rule says so.
   ============================================================================= */

/* The mockup runs its display sizes larger than --bg-size-display-1/2, which
   are set for a page with more of them. The homepage carries one headline per
   section and they are the page's structure, so they take the mockup's scale. */
h1{font-size:clamp(2.5rem,5.4vw,4rem)}
h2{font-size:clamp(1.875rem,3.8vw,2.75rem)}

/* ---------- 1 · hero ----------
   The media is a still life on white, so it is CONTAINED rather than bled off
   the viewport edge. A bleed clips the box's cast shadow, and a product shot
   with a cut shadow reads as a cutout pasted down instead of an object resting
   on the page. The slot matches the file's 4:5 exactly. */
.hero{padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;gap:clamp(2.25rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:1.375rem}
.hero-copy > *{max-width:34rem}
.hero-media{width:100%}
@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem)}
}
.sub{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--s-ink-2);max-width:30rem}
h1 .ruled{border-bottom:3px solid var(--s-rule);padding-bottom:.06em}

.count{display:flex;gap:1.5rem;align-items:baseline}
.count div{display:flex;flex-direction:column;gap:var(--bg-space-2xs);min-width:2.5rem}
.count b{font-family:var(--bg-font-display);font-weight:400;font-size:1.5rem;
  color:var(--s-head);font-variant-numeric:tabular-nums;line-height:1}
.count span{font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-ink-3)}
.count .sec b{color:var(--s-accent)}

.hero .slot{aspect-ratio:4/5}
/* ---------- 2 · the shop row ----------
   Two products, two pages. Before launch the price slot carries the month and
   there is no Add to Cart; at launch both swap. A content change, not a
   deploy. No copy here counts the decks. */
.shop-sec{padding-block:clamp(3rem,7vw,5.5rem)}
/* The columns hug the cards rather than splitting the wrap, and the pair is
   centred. That matters for the gap: with 1fr columns inside a capped row, the
   space between the two photographs is the grid gap PLUS whatever slack each
   card has inside its column, so the gap is not actually the thing you set.
   Capping the column at the card's own width makes the gap exact and lets it
   go past the 64px that a 52rem row had room for.

   At 80rem with 1fr columns each card came out 574 wide and 718 tall — the
   same size as the hero still life, so a secondary row was rendering as large
   as the thing it sits under. */
.shop{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,7vw,6rem);justify-content:center}
@media(min-width:720px){.shop{grid-template-columns:repeat(2,minmax(0,24rem))}}
/* The card is bounded, not the media inside it — cap the slot alone and the
   hairline rule stays column-width, so at a 600px viewport a 384px photograph
   sits over a 552px rule. Capping the card keeps the two the same width and
   the card reads as one object. The cap is above a phone's column (350 at
   390px) so it only bites where the column gets wide enough to be a problem:
   the single-column state around 480-600, where the slot was 552x690 and the
   section ran 1872px tall. */
.pcard{display:flex;flex-direction:column;gap:1.25rem;text-decoration:none;color:inherit;
  max-width:24rem;margin-inline:auto;width:100%;
  transition:opacity var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.pcard:hover{opacity:.82}
.pcard .slot{aspect-ratio:4/5}
.pcard-foot{display:flex;flex-direction:column;gap:.4375rem;text-align:center;
  padding-top:var(--bg-space-md);border-top:var(--bg-hairline) solid var(--s-hair)}
.pcard h3{font-family:var(--bg-font-body);font-weight:500;font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--s-ink);margin:0;line-height:1.5}
.pcard .what{font-size:.9375rem;color:var(--s-ink-2);max-width:26rem;margin-inline:auto}
.pcard .when{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--s-accent);margin-top:var(--bg-space-2xs)}
.pcard .price{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-size:1.125rem;color:var(--s-head);margin-top:var(--bg-space-2xs);
  font-variant-numeric:tabular-nums}

/* ---------- 3 · a night ---------- */
.night{padding-block:clamp(3.5rem,8vw,6.5rem);border-top:var(--bg-hairline) solid var(--s-hair)}
.night-grid{display:grid;gap:clamp(2.25rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.night-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}}
.night figure{margin:0}
.night .slot{aspect-ratio:4/5}
.night .slot .ring svg{color:var(--s-ink-3)}
.night video{width:100%;height:100%;object-fit:cover;display:block}

.night-copy{display:flex;flex-direction:column;gap:1.125rem;max-width:34rem}
.night-copy .lede{max-width:31rem}

.moves{margin-top:.875rem;display:flex;flex-direction:column}
.move{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--bg-space-md);
  align-items:baseline;padding-block:var(--bg-space-md);
  border-bottom:var(--bg-hairline) solid var(--s-hair)}
.move:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
.move .n{font-family:var(--bg-font-display);font-weight:400;color:var(--s-accent);
  font-size:.9375rem;font-variant-numeric:tabular-nums;line-height:1.7}
.move h3{font-family:var(--bg-font-body);font-weight:500;font-size:.875rem;letter-spacing:.04em;
  color:var(--s-ink);margin:0 0 var(--bg-space-2xs);line-height:1.5}
.move p{font-size:.9375rem;line-height:1.6;color:var(--s-ink-2)}

/* ---------- 4 · the sealed year — full-bleed forest band ---------- */
.year{padding-block:clamp(5rem,11vw,9rem)}
.year-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.year-grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}

.year-copy{display:flex;flex-direction:column;gap:1.25rem;max-width:34rem}
.year-copy .lede{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-ink);font-size:clamp(1.125rem,2vw,1.4375rem);line-height:1.45;
  max-width:31rem;text-wrap:balance}
.sealed-note{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;
  margin-top:.375rem;padding-top:var(--bg-space-md);
  border-top:var(--bg-hairline) solid var(--s-hair);
  font-size:.875rem;color:var(--s-ink-3)}
.sealed-note a{color:var(--s-ink-2);text-underline-offset:3px}

/* The grid printed on the back of the box: 20 across, 19 down, 380 cells.
   365 are nights; the 15 that overrun stay as empty rings, as printed.
   The resting state is an unfilled ring — a real state, so nothing sits at
   opacity 0 waiting for an observer that may never fire. */
.year-field{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.ygrid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));
  gap:clamp(4px,.85vw,9px);width:100%;max-width:27rem}
.ygrid i{aspect-ratio:1;border-radius:var(--bg-radius-full);
  border:var(--bg-hairline) solid rgba(247,243,233,.28);background:transparent;
  transition:background-color 500ms var(--bg-motion-ease),
             border-color 500ms var(--bg-motion-ease)}
.ygrid.run i.kept{background:var(--c);border-color:var(--c);
  transition-delay:calc(var(--i) * 9ms)}
.ygrid i.void{border-color:rgba(247,243,233,.14)}

.tally{display:flex;flex-direction:column;gap:.375rem;max-width:none}
.tally b{font-family:var(--bg-font-display);font-weight:400;color:var(--s-head);
  font-size:clamp(1.25rem,2.2vw,1.625rem);font-variant-numeric:tabular-nums;line-height:1}
.tally span{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-ink-3)}
.tally em{font-style:normal;font-size:.875rem;letter-spacing:0;text-transform:none;
  color:var(--s-ink-3);margin-top:var(--bg-space-2xs);display:block;
  max-width:22rem;line-height:1.55}

/* ---------- 5 · barakah games — warm-paper band, full bleed ---------- */
.brand{background:var(--s-ground-2);padding-block:clamp(3.5rem,7vw,5.5rem)}
.brand-in{max-width:46rem;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;gap:1.25rem;align-items:center}
.brand-in p{max-width:38rem}
.quiet-link{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-head);text-decoration:none;
  border-bottom:var(--bg-hairline) solid var(--s-hair);
  padding-bottom:.375rem;margin-top:var(--bg-space-xs);
  transition:border-color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.quiet-link:hover{border-bottom-color:var(--s-ink-3)}

/* ---------- 6 · what they say ---------- */
.say{padding-block:clamp(3.5rem,8vw,6rem)}
.says{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.says{grid-template-columns:repeat(3,minmax(0,1fr))}}
.says blockquote{margin:0;padding-top:var(--bg-space-md);
  border-top:var(--bg-hairline) solid var(--s-hair);
  display:flex;flex-direction:column;gap:var(--bg-space-md)}
.says q{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  quotes:none;color:var(--s-ink);font-size:clamp(1.0625rem,1.7vw,1.1875rem);line-height:1.5}
.says footer{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-ink-3)}

/* ---------- 7 · the close ---------- */
.close{padding-block:clamp(4rem,9vw,7rem);
  border-top:var(--bg-hairline) solid var(--s-hair);text-align:center}
.close-in{max-width:40rem;margin-inline:auto;display:flex;flex-direction:column;
  gap:1.5rem;align-items:center}
.close .line{margin-inline:auto}
.close p{margin-inline:auto}
.close .pill{margin-inline:auto}
.close .promise{font-size:.875rem;color:var(--s-ink-3)}