@import url('https://api.fontshare.com/v2/css?f%5B%5D=satoshi@400,500,700,900&display=swap');
@import url('https://api.fontshare.com/v2/css?f%5B%5D=erode@400,401,500,501&display=swap');
@import url('https://api.fontshare.com/v2/css?f%5B%5D=stardom@400&display=swap');   /* her pick (3 Nov) for the studio line's changing word */

/* Spectralmoon Studio · Shopify edition · THE GRID CONTRACT
   ============================================
   Every number in this site is declared here once. Nothing downstream invents a value.
   If a section needs something not in this file, the answer is either "use the nearest
   token" or "we are adding a token on purpose" — never a one-off number.

   Verify with:  python3 tools/grid-check.py
   Source:       Learning/Web Design lessons 07, 09, 10 (Flux Academy fundamentals)
*/

:root{

  /* ---------- SPACING · strict 8px grid ----------
     8 divides cleanly by 4 and by 2, so we can get granular without muddy decimals.
     Allowed sub-grid values: 4px and 2px (hairlines, optical nudges). Nothing else. */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;
  --space-10:192px;

  /* ---------- SECTION RHYTHM · the half-padding system ----------
     A section carries HALF its rhythm value as padding, top and bottom. Two stacked
     sections then add up to the full value. This is what makes reordering sections
     free: every section carries the same padding, so any two always sum correctly.

     Note: the course teaches 88 / 128 / 200. Only 128 halves onto the 8px grid
     (88/2 = 44, 200/2 = 100, both off-grid). We use 96 / 128 / 192 so the trick
     actually holds. */
  --rhythm-s:  96px;   --pad-s: 48px;
  --rhythm-m: 128px;   --pad-m: 64px;
  --rhythm-l: 192px;   --pad-l: 96px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --margin:  64px;     /* outside margin, desktop */
  --gutter:  24px;     /* space between columns */
  --columns: 12;

  /* ---------- TYPE SCALE · four sizes plus one display ----------
     The cap is four (label · body · lede · heading). Display is the deliberate fifth,
     because the hero is the whole brand. Anything beyond these five has to argue
     for itself against this list. This is the cure for the 39-combo problem. */
  --text-label:   12px;
  --text-body:    16px;
  --text-lede:    18px;
  --text-heading: clamp(32px, 4vw, 48px);
  --text-display: clamp(48px, 9vw, 120px);

  /* line height: titles read as a solid block, body breathes */
  --leading-tight: 1;      /* titles, 100% */
  --leading-body:  1.4;    /* body, 140% */

  /* tracking: -2% is the default that makes Inter Tight look expensive, not cheap */
  --tracking:         -0.02em;
  --tracking-display: -0.03em;
  --tracking-label:    0.18em;   /* small caps labels want the opposite */

  /* weights: SemiBold, never Bold. Narrower weight gap reads more harmonious. */
  --weight-body: 400;
  --weight-mid:  500;
  --weight-bold: 600;

  /* ---------- FONTS · the studio pair ----------
     Satoshi for the interface and body, Stardom for headlines, film titles and quotes (her yes, 4 Nov: Erode read as AI to her,
     Stardom is the serif on every page, as live). Erode stays only in the logo wordmark. Stardom has one style, so font-synthesis
     is off (edition.css): nothing fakes italic or bold. */
  --font-ui:    'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Stardom', 'Erode', Georgia, serif;
  --font-logo:  'Erode', Georgia, serif;   /* the logo wordmark only */
  --font-word:  'Stardom', 'Erode', Georgia, serif;   /* only the studio line's changing word (websites, then films), her pick 3 Nov */

  /* ---------- COLOR · one warm family (her ask, 5 Nov: "a bit more creamy") ----------
     This edition moves away from white first (her lock of 16 Oct, paper #F6F3EE). Every light ground is one material: her
     cloudy cream, the base --cream-paper with her clouds on it. Its hue is the gold chapter's own (76), so gold and cream
     are one family. Ratios measured in the page: see HANDOVER-2026-11-04-EDITION.md. */
  --paper:#F4E9DA;         /* flat cream: the mean of her cloudy cream, for anything with no clouds behind it */
  --cream-paper:#F8EDDF;   /* the live About the Studio paper: the base under her clouds */
  --light:var(--cream-paper);   /* the one light ground: rows, websites, Work with us, Studio, footer */
  --foot:#D4BC97;          /* the footer's ground: an in-between, sand, cream's own hue, neither night nor the page (her QA 5 Nov) */
  --paper-deep:#E1D4C3;    /* her darkest cloud: the sheet a film's line drawing sits on when it meets cream, hairlines */
  --line-ink:#6B5439;      /* that drawing's line: sepia, softer than ink, the same hue as the gold */
  --espresso:#2A201A;
  --muted:#665950;
  --rose:#985A70;          /* large or decorative only on cream */
  --rose-ink:#8D5066;      /* the 12 px labels on cream */
  --gold:#AE8B4B;          /* DECORATIVE ONLY on cream */
  --night:#191512;         /* the ground under the films */
  --cream:#F6ECDC;         /* text on the films */
  --gold-light:#D6B26E;    /* text-legal on the dark films */
  --veil:rgba(25,21,18,.55);/* the shade that keeps words readable over a film */
  --veil-deep:rgba(25,21,18,.86);

  /* ---------- WHITE GOLD · the one title style (her rule, 3 Nov) ----------
     Every big title on a dark or film ground that was plain white: pale and cool with a soft warm band, laid over the whole
     text block, with the studio line's two soft shadows. Body text keeps its colour; the paper and cream chapters keep ink
     (her call). The class is .wg in edition.css; edition.js whiteGold() lays it over a block whose words move on their own. */
  --white-gold:linear-gradient(180deg,#FFFFFF,#F7EBCF 40%,#D7C39A 60%,#FFFFFF 80%,#B8A47E);
  --white-gold-glow:drop-shadow(0 2px 2px rgba(40,22,6,.45)) drop-shadow(0 10px 30px rgba(40,22,6,.35));

  /* ---------- MOTION · two curves, locked ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.33,0,0,1);
}

/* before and after, while she decides (5 Nov): today's values, ?ground=white or the flip on localhost. Delete with the flip */
:root.ground-white{--paper:#F6F3EE;--light:#F6F3EE;--muted:#75675F;--rose-ink:#985A70;--night:#0E0B09;--veil:rgba(14,11,9,.55);--veil-deep:rgba(14,11,9,.86)}

/* ---------- BREAKPOINTS ----------
   Design widths are 1440 / 810 / 390. The query boundaries sit above each design
   width so a 390 phone and an 810 tablet each land inside their own band. */
@media (max-width: 1023px){         /* tablet */
  :root{ --margin:32px; --gutter:24px; --columns:6; }
}
@media (max-width: 639px){          /* phone */
  :root{ --margin:24px; --gutter:24px; --columns:4; }
}


/* =========================================================
   LAYOUT PRIMITIVES
   Two of them. Every section uses these. A section that wants a different
   width says `grid-column: span N` — it does NOT get its own margin.
   ========================================================= */

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--margin);
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(var(--columns), 1fr);
  gap:var(--gutter);
}

/* span helpers, desktop. Below the tablet breakpoint the column count drops,
   so spans clamp themselves rather than overflowing. */
.span-2{grid-column:span 2}   .span-3{grid-column:span 3}
.span-4{grid-column:span 4}   .span-5{grid-column:span 5}
.span-6{grid-column:span 6}   .span-7{grid-column:span 7}
.span-8{grid-column:span 8}   .span-9{grid-column:span 9}
.span-12{grid-column:1 / -1}

@media (max-width: 1023px){
  .span-7,.span-8,.span-9{grid-column:1 / -1}
  .span-5,.span-6{grid-column:span 6}
  .span-3,.span-4{grid-column:span 3}
}
@media (max-width: 639px){
  [class*="span-"]{grid-column:1 / -1}
}

/* the section rhythm, applied as half-padding */
.section   { padding-block:var(--pad-m); }
.section--s{ padding-block:var(--pad-s); }
.section--l{ padding-block:var(--pad-l); }

/* type primitives, so no element sets a raw font-size */
.t-display{font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);}
.t-heading{font-size:var(--text-heading);line-height:var(--leading-tight);letter-spacing:var(--tracking);}
.t-lede   {font-size:var(--text-lede);   line-height:var(--leading-body); letter-spacing:var(--tracking);}
.t-body   {font-size:var(--text-body);   line-height:var(--leading-body); letter-spacing:var(--tracking);}
.t-label  {font-size:var(--text-label);  line-height:var(--leading-body); letter-spacing:var(--tracking-label);text-transform:uppercase;}