/* ============================================================
   sitekit, built. DO NOT EDIT.

   Generated by tools/build-sitekit.mjs from packages/sitekit. Change the
   files there and rebuild; a hand edit here is overwritten by the next build
   and fails `node tools/build-sitekit.mjs --check` in CI until then.

   Layers in this copy: primitives, skin-saarthm, base, shell, hero, buttons, cards
   ============================================================ */

/* ---- primitives: type, shape, motion (packages/sitekit/css/primitives.css) ---- */

/* ============================================================
   sitekit - primitives

   The constants every skin shares, and nothing that belongs to one palette:
   the type stacks, the shape and motion values. A skin brings its own
   colours (see skin-saarthm.css, skin-kitchen.css) and assigns them to the
   roles the components use. Base and components never mention a primitive
   or a palette name; they speak in roles, which is what lets a site with
   another palette reuse every component unchanged.
   ============================================================ */

:root {
  /* type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* The type scale.

     Before this existed the repo used 59 distinct font sizes, 31 of them in
     px, and fourteen of those sat within a pixel of a neighbour: 9 and 9.5,
     12 and 12.5, 16 and 16.5. Those pairs were never decisions, they were the
     residue of nudging one rule at a time for two years. Eleven steps cover
     every one of them.

     Named for the job, not the number, so a rule reads as intent and a step
     can be retuned in one place. The half-pixels are deliberately gone: they
     survived only because nobody could see the scale whole.

     docs/type-audit.md has the measurements these came from. */
  --fs-3xs: 10px;    /* eyebrows, the theme switch */
  --fs-2xs: 11px;    /* nav links, mono kickers */
  --fs-xs: 12px;     /* fine print, footers */
  --fs-sm: 13px;     /* labels, captions, dense tables */
  --fs-md: 15px;     /* ledes, secondary body */
  --fs-base: 16px;   /* body text */
  --fs-lg: 18px;     /* card titles, the brand */
  --fs-xl: 22px;     /* section headings */
  --fs-2xl: 28px;    /* small page headings */

  /* The two headings that scale with the viewport. A page heading and a hero
     headline are different jobs, so they are different tokens rather than one
     token bent by a media query. */
  --fs-h1: clamp(28px, 4vw, 40px);
  --fs-hero: clamp(30px, 4.8vw, 48px);

  /* shape & motion */
  --radius: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: .35s ease;
}

/* ---- skin "saarthm": the palette and its roles (packages/sitekit/css/skin-saarthm.css) ---- */

/* ============================================================
   sitekit - skin "saarthm"

   A skin is a palette plus an assignment of that palette to the roles every
   component uses, once per theme. This file is the whole definition of how
   saarthm.com looks in colour. To give a site its own colours, copy this
   file to skin-<name>.css, replace the palette, keep every role, and run
   `node tools/check-sitekit.mjs`, which refuses a skin that misses a role
   or fails contrast. The Kitchen is the worked example (skin-kitchen.css).

   Palette names are prefixed with the skin so two skins never collide when
   read side by side. This file assigns them to roles; a site with its own
   layout may also read one directly for a colour the roles do not cover
   (RootFor's "root for" green is --dark-head, the Kitchen's berry is
   --kitchen-berry), but never redefines one.

   One brand, two weathers: dark = Granite & Copper (Glaucous),
   light = Jet & Slate (Import 6, warmed with copper trims).
   Shared: Alice Blue + Muted Teal + Copper.

   Roles, and what they are for:
     --bg, --ink, --head        page ground, body text, headings and labels
     --card, --card-edge,
     --card-top                 raised surfaces, their border, their top rule
     --btn1-bg/--btn1-fg        the primary button pair
     --btn2-bg/--btn2-fg        the accent button pair
     --ghost-c/--ghost-b        the outline button
     --pill-bg/--pill-fg/
     --pill-b                   small tags and chips
     --trim                     rules, borders, underlines, icons; never text
     --tag                      secondary text: captions, meta, hints (AA on --bg)
     --rule                     hairlines between things
     --shadow                   the one shadow colour
     --glow                     the soft radial wash behind the hero, or none
   ============================================================ */

:root {
  /* dark - Granite & Copper */
  --dark-bg: #3a4f41;  --dark-ink: #ebf2fa;  --dark-head: #abd6c6;
  --dark-copper: #ad8350; --dark-btn-copper: #8f6229;

  /* light - Jet & Slate (warmed) */
  --light-bg: #ebf2fa; --light-ink: #1f363d; --light-head: #53628d;
  --light-teal: #9dcbba; --light-copper: #c4a883; --light-copper-ink: #7c5c2e;
}

html[data-theme="dark"] {
  /* tells the browser to paint scrollbars and the overscroll gutter to match */
  color-scheme: dark;
  --bg: var(--dark-bg);
  --ink: var(--dark-ink);
  --head: var(--dark-head);
  --card: rgba(235, 242, 250, .05);
  --card-edge: rgba(235, 242, 250, .14);
  --card-top: var(--dark-copper);
  --btn1-bg: var(--dark-ink);   --btn1-fg: var(--dark-bg);
  --btn2-bg: var(--dark-btn-copper); --btn2-fg: var(--dark-ink);
  --ghost-c: var(--dark-ink);   --ghost-b: rgba(235, 242, 250, .65);
  --pill-bg: rgba(157, 203, 186, .14); --pill-fg: var(--dark-head); --pill-b: rgba(157, 203, 186, .42);
  --trim: var(--dark-copper);
  --tag: rgba(235, 242, 250, .78);
  --shadow: rgba(0, 0, 0, .4);
  --rule: rgba(235, 242, 250, .12);
  --glow: radial-gradient(46rem 24rem at 50% -8rem, rgba(173, 131, 80, .09), transparent 70%);
}

html[data-theme="light"] {
  /* tells the browser to paint scrollbars and the overscroll gutter to match */
  color-scheme: light;
  --bg: var(--light-bg);
  --ink: var(--light-ink);
  --head: var(--light-head);
  --card: #ffffff;
  --card-edge: #d8e2ee;
  --card-top: var(--light-copper);
  --btn1-bg: var(--light-ink);  --btn1-fg: var(--light-bg);
  --btn2-bg: var(--light-teal); --btn2-fg: var(--light-ink);
  --ghost-c: var(--light-ink);  --ghost-b: rgba(31, 54, 61, .6);
  --pill-bg: rgba(196, 168, 131, .18); --pill-fg: var(--light-copper-ink); --pill-b: rgba(196, 168, 131, .5);
  --trim: var(--light-copper);
  --tag: #3d4f58;
  --shadow: rgba(31, 54, 61, .14);
  --rule: #d8e2ee;
  --glow: radial-gradient(46rem 24rem at 50% -8rem, rgba(196, 168, 131, .16), transparent 70%);
}

/* ---- base: reset, typography, layout primitives (packages/sitekit/css/base.css) ---- */

/* ============================================================
   sitekit - base: reset, typography, layout primitives
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky topbar, with EQUAL air above and below the
   "// section" label.

   --nav-h is written by theme.js from the bar's measured height, so this stays
   exact at every width and if the bar ever changes; the literal here is only a
   no-JS fallback. --label-gap is then the one number that controls both sides:

     above the label = --nav-h + --label-gap - --sec-pad  (+ --sec-pad) - nav-h
                     = --label-gap
     below the label = --label-gap   (the .sec-label margin)

   so the two are equal by construction rather than by coincidence. */
:root { --nav-h: 67px; --label-gap: 32px; --sec-pad: 46px; }
#main, section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--label-gap) - var(--sec-pad));
}

body {
  background: var(--bg);
  background-image: var(--glow);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}

::selection { background: var(--trim); color: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--head); outline-offset: 3px; border-radius: 4px; }

/* a11y skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--btn1-bg); color: var(--btn1-fg);
  font-weight: 700; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 20;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--font-mono); }

main { flex: 1; }
section { padding: var(--sec-pad) 0 0; }

/* section label - the "// 01 ·" voice */
.sec-label {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--head); display: flex; align-items: center; gap: 12px; margin: 0 0 var(--label-gap);
  transition: color var(--transition);
}
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--trim); transition: background-color var(--transition); }

@media (max-width: 560px) {
  body { font-size: 16px; }
}

/* ---- theme boot ----------------------------------------------------
   The inline script in <head> resolves the theme before first paint and adds
   .theme-booting to <html> for two frames (theme.js removes it). While it is
   there nothing may animate: the theme is already right, so any transition
   running would only be a visible artefact. Every site that runs that
   script needs this rule, which is why it is here and not in a page. */
html.theme-booting, html.theme-booting *,
html.theme-booting *::before, html.theme-booting *::after {
  transition: none !important; animation: none !important;
}

/* ---- shell: topbar, brand, nav, theme switch, monogram, footer (packages/sitekit/css/shell.css) ---- */

/* ============================================================
   sitekit - shell: the topbar, brand, nav, theme switch, monogram and
   footer. The part of the kit every page that "looks like a saarthm site"
   wears, whatever its palette; a tool with its own layout (the panel,
   RootFor) leaves it out. Reads roles only.
   ============================================================ */

/* ---------- topbar ----------

   The header contract. `.topbar > .inner` takes exactly three children, in
   this order:

     .brand         the mark and the wordmark, a link home
     .nav           the page links
     .top-actions   everything that acts: the theme switch first, then
                    whatever the site adds (the Kitchen's diet toggle and
                    "add a recipe", Spreads' profile link)

   The order is the source order, because that is what the stacking below
   reorders. Anything that is not one of those three, nested in one of them
   rather than added as a fourth: the hub once put its nav inside
   .top-actions and the stacked bar spent three rows on what fits in two.

   A skin with one theme has no switch. The Kitchen is light only until a
   dark kitchen skin exists, so its .top-actions starts with the diet toggle
   instead. That is a fact about the skin, not a gap in the header. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* 95%, not 88%: mobile body type is large enough that at 88% it read
     through the bar rather than behind it. Still frosted, just quieter. */
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--transition), border-color var(--transition);
}
.topbar .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 22px; max-width: 920px; margin: 0 auto; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .01em; color: var(--head); text-decoration: none; min-width: 0; }
.brand .logo { height: 36px; width: auto; display: block; flex: none; }
html[data-theme="light"] .brand .logo { filter: brightness(0) opacity(.8); }  /* near-white logo → readable on light */
.brand .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--trim); margin: 0 3px; vertical-align: 2px; transition: background-color var(--transition); }
.nav { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-wrap: wrap; }
.nav a { font-weight: 400; color: var(--tag); text-decoration: none; transition: color .25s ease; white-space: nowrap; line-height: 1.3; }
.nav a:hover, .nav a:focus-visible { color: var(--head); }

/* The current page, underlined. Every link reserves the rule so nothing
   jumps when the underline moves; the current one colours it in. A site
   sets .on on the link for the page it is rendering (Spreads, the Kitchen)
   or, on a one-page site, on the section in view (www's scroll spy). */
.nav a { border-bottom: 2px solid transparent; padding-bottom: 3px; }
.nav a.on { color: var(--head); border-color: var(--trim); }

/* ---------- the two-line wordmark ----------
   The Kitchen's header, offered to any site: a larger mark beside a name
   with the address beneath it. Opt in with the markup, not a class:

     <a class="brand" href="/">
       <svg class="mark">…</svg>
       <span class="brand-text">
         <span class="brand-name">Spreads</span>
         <span class="brand-url">fantasy<span class="dot"></span>saarthm<span class="dot"></span>com/spreads</span>
       </span>
     </a>

   A brand without .brand-text (the hub, the galleries) keeps the 38px mark
   and the single-line wordmark above. The 26px name is the Kitchen's own
   number, kept rather than rounded to a step because the look was asked
   for as it is. On a phone the address goes first, then the mark and the
   name step down together. */
.brand:has(.brand-text) .mark { width: 60px; height: 60px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-name { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.brand-url { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; color: var(--head); line-height: 1; }
.brand-url .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--trim); margin: 0 2px; vertical-align: 1px; }
@media (max-width: 760px) {
  .brand:has(.brand-text) .mark { width: 54px; height: 54px; }
  .brand-name { font-size: 22px; white-space: normal; }
}
@media (max-width: 430px) {
  .brand-url { display: none; }
  .brand:has(.brand-text) .mark { width: 44px; height: 44px; }
  .brand:has(.brand-text) { gap: 8px; }
  .brand-name { font-size: 20px; }
}
@media (max-width: 375px) {
  .brand:has(.brand-text) .mark { width: 40px; height: 40px; }
  .brand-name { font-size: 17px; }
}
.top-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* theme segmented control - sliding highlight thumb */
.seg { --seg-pad: 3px; position: relative; display: flex; gap: 2px; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-pill); padding: var(--seg-pad); transition: background-color var(--transition), border-color var(--transition); }
.seg-thumb {
  /* Inset by the pill's own padding (one property, read by both), since
     theme.js measures this `left` to place the thumb. */
  position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); left: var(--seg-pad); width: 0;
  border-radius: var(--radius-pill); background: var(--btn1-bg);
  box-shadow: 0 1px 3px var(--shadow);
  pointer-events: none; z-index: 0;
  transition: transform .28s var(--ease), width .28s var(--ease), background-color var(--transition);
}
.seg button {
  position: relative; z-index: 1;
  border: none; background: transparent; font-family: var(--font);
  font-size: 10px; font-weight: 600; border-radius: var(--radius-pill);
  /* Stated, not inherited. The pill's height is its font, its line-height and
     this padding, so a site with tighter body copy was getting a shorter
     switch than the site next door: RootFor's 1.5 made it 30px against
     everyone else's 32. The control should be the same object everywhere. */
  line-height: 1.6;
  padding: 4px 10px; cursor: pointer; color: var(--tag);
  transition: color .2s ease;
}
.seg button.on { color: var(--btn1-fg); }

/* ---------- the account menu ----------
   The signed-in name, last in .top-actions, as the Kitchen first drew it:
   a <details>, so no script. The summary (avatar + name) opens a small card
   with a hint, any links the site wants, and a link-like sign-out button.
     <details class="who"><summary><span class="avatar">S</span><span class="who-name">Saarth</span></summary>
       <div class="who-menu"><div class="who-hint">Signed in on this device</div>
         <form method="post" action="/signout">...<button class="linklike">Sign out</button></form></div></details>
   Everything sits in :where(), so a site's own rules (the Kitchen's avatar,
   say) win at any specificity, and only details.who is touched: a site whose
   .who is still a link or a button keeps its own look. The card lays
   --card over --bg because a dark skin's --card is see-through. */
:where(details.who) { position: relative; }
:where(details.who) summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--head); min-height: 32px; }
:where(details.who) summary::-webkit-details-marker { display: none; }
:where(details.who) .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--btn2-bg); color: var(--btn2-fg); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
:where(details.who) .who-menu { position: absolute; right: 0; top: calc(100% + 8px); background: linear-gradient(var(--card), var(--card)), var(--bg); border: 1px solid var(--card-edge); border-radius: 12px; padding: 12px 14px; min-width: 190px; box-shadow: 0 8px 24px var(--shadow); z-index: 1200; display: flex; flex-direction: column; gap: 8px; }
:where(details.who .who-menu) a { color: var(--head); text-decoration: none; }
:where(details.who .who-menu) a:hover { color: var(--trim); }
:where(details.who) .who-hint { font-size: 12px; color: var(--tag); }
:where(details.who) .linklike { background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--head); cursor: pointer; }
:where(details.who) .linklike:hover { color: var(--trim); }

/* ---------- footer ---------- */
footer { margin-top: 56px; padding: 26px 0 44px; border-top: 1px solid var(--rule); text-align: center; transition: border-color var(--transition); }
footer .line { font-size: 12.5px; color: var(--tag); transition: color var(--transition); }
footer .line a { color: var(--head); text-decoration: none; }
footer .line a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trim); }
footer .fine { margin-top: 8px; font-size: 12px; color: var(--tag); opacity: .85; transition: color var(--transition); }
footer .fine a { color: var(--head); text-decoration: none; }
footer .fine a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .copyright { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--tag); opacity: .75; transition: color var(--transition); }

@media (max-width: 560px) {
  .topbar .inner { padding: 10px 16px; }
  .top-actions { gap: 8px; }
}

/* ============================================================
   shell refinements

   These were written for the homepage and sat in its inline <style>, but
   they describe the shared shell, not the page: the nav's typographic voice,
   the copper rules on the bar and footer, the monogram, phone touch targets
   and how the sticky bar stacks on a narrow screen. Every saarthm site with
   a topbar wants them, so they live here. Appended at the end of the file
   deliberately: the homepage applied them after everything above, and this
   keeps that order.
   ============================================================ */

/* Touch targets. On a phone the nav links render at 13px tall and the patents
   label at 11px, both below the 24x24 WCAG 2.2 minimum and nowhere near a
   comfortable thumb. Grow the HIT AREA with a pseudo-element rather than
   padding, so nothing moves visually. The extents are sized against the real
   gaps measured on device (10px between nav links, 16px below the brand) so
   neighbouring targets never overlap and you cannot tap the wrong one. */
@media (hover: none) {
  .nav a, .stat-pat .pat-label { position: relative; }
  .nav a::after { content: ""; position: absolute;
                  left: -4px; right: -4px; top: -8px; bottom: -20px; }
  .stat-pat .pat-label::after { content: ""; position: absolute;
                  left: -6px; right: -6px; top: -7px; bottom: -7px; }
}


/* Contrast: copper (--trim) measures 2.59:1 on the dark ground and 2.01:1 on
   the light one, so it never carries words. The mono labels take --head
   (4.92:1 / 5.32:1) and keep copper as an underline, which has no contrast
   requirement. --trim is for rules, borders, underlines and icons only. */

/* saarthm hub - the control panel: dense, tool-like, no wasted air */
.nav { flex-direction: row; flex-wrap: nowrap; gap: 14px; }

/* The nav's one size, everywhere, at every width.

   It used to be three: 13.5px here, 11px in this block, 10px in the phone
   query below, all three in this file. Then the Kitchen overrode the phone
   size to 12.5px under a comment reading "nothing smaller than ~13px", and
   Spreads overrode it to 13px at both widths, twice. Two of the four sites
   taking this shell had rejected the default, which is a reasonably clear
   verdict on the default.

   13px is what both of them independently picked. One declaration now, and
   no site carries an override. */
.nav a { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.topbar { border-bottom: 3px solid var(--trim); }
footer { border-top: 3px solid var(--trim); }

/* the monogram - one symbol, tinted by whatever colour it inherits */
.mark { display: block; width: 38px; height: 38px; color: var(--trim); flex: none;
        transition: color var(--transition); }
.brand:hover .mark { color: var(--head); }
.mark-foot { width: 34px; height: 34px; margin: 0 auto 12px; opacity: .9; }

/* The footer mark as a link home. Wrap the mark in
   <a class="foot-mark-link" href="https://saarthm.com" aria-label="saarthm.com">
   and it stays centred (inline-block inside the centred footer) and dims on
   hover. The Kitchen had this as its own rule; the fantasy hub wanted it too,
   which is the point at which a rule moves into the kit. */
.foot-mark-link { display: inline-block; border-radius: 12px; transition: opacity .15s ease; }
.foot-mark-link:hover { opacity: .72; }

/* the sticky bar stacked brand / nav / toggle on three rows - 143px of a phone
   screen permanently spent. Brand and toggle share row one; nav takes row two. */
@media (max-width: 640px) {
  .topbar .inner { justify-content: space-between; row-gap: 6px; padding-bottom: 6px; }
  .nav { order: 3; width: 100%; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .brand { font-size: var(--fs-md); }
  .mark { width: 32px; height: 32px; }
}

/* The stacked bar, as a state rather than a width: brand and actions on the
   first row, the nav centred beneath. shell.js puts is-stacked on .topbar
   whenever the one-row layout would overflow, whatever the width and
   whatever is in the bar (a signed-in Kitchen carries more than a signed-out
   one). These are the same rules the 640px query above applies by width;
   that query stays as the answer without JavaScript.

   The nav wraps here rather than refusing to. It used to be nowrap, which was
   safe while phone links were 10px and stopped being safe at 13px: www puts
   five links on that row, and on a 360px screen they no longer fit. A second
   centred line is a better answer than a bar the page can scroll sideways.

   The brand steps down to --fs-md here for the same reason the bar stacked
   at all: the row is short of space. The hub's wordmark is the longest in
   the system, "fantasy.saarthm.com", and at the full --fs-lg it plus the
   theme switch overrun a 390px row by nine pixels, which sends the bar back
   to the three rows the stacking exists to avoid. Stepping the brand down is
   the kit's job rather than the hub's, because any site can grow a longer
   name and none of them should have to discover this the same way.

   (Two of these paragraphs once sat outside the comment, each ending in a
   stray closing marker. A CSS parser reads unclosed prose as the prelude of
   the next rule and throws that rule away, which is how the .inner rule
   below silently stopped applying on four sites while every byte-for-byte
   check passed. check-sitekit.mjs now refuses a stray closing marker.) */
.topbar.is-stacked .inner { justify-content: space-between; row-gap: 6px; padding-bottom: 6px; }
.topbar.is-stacked .nav { order: 3; width: 100%; justify-content: center; gap: 10px; flex-wrap: wrap; }
.topbar.is-stacked .brand { font-size: var(--fs-md); }
:where(.topbar.is-stacked details.who) .who-name { display: none; }

/* ---- hero: hero block, kicker, display h1, stat chips, quotes (packages/sitekit/css/hero.css) ---- */

/* ============================================================
   sitekit - hero: the page-top furniture the homepage and the fantasy hub
   share: hero block, kicker, the display h1, subhead, stat chips, quotes.
   A site with its own page layout (the Kitchen) leaves this out; it sets
   its own h1. Reads roles only.
   ============================================================ */

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 9vw, 88px) 0 44px; }
.kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--head); transition: color var(--transition);
}
/* Scoped to the hero, and it has to be.

   This was a bare `h1` at clamp(36px, 6.4vw, 60px), so it claimed every
   heading on the page and both sites that load this layer shadowed it with a
   `.hero h1` of their own: www at 46px, the hub at 48px. The kit's own
   headline size never painted anywhere. It is the hero's headline now, at
   the hero's size, and the two sites have stopped restating it. */
.hero h1 {
  font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.07; max-width: 14ch; margin: 14px 0 18px; color: var(--ink);
  transition: color var(--transition);
}
.hero h1 .em { color: var(--head); transition: color var(--transition); }
.sub { font-size: 15.5px; max-width: 58ch; color: var(--tag); transition: color var(--transition); }
.sub strong { color: var(--ink); font-weight: 600; }

/* stat chips */
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.stat {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  border: 1px solid var(--pill-b); background: var(--pill-bg); color: var(--pill-fg);
  border-radius: var(--radius-pill); padding: 5px 12px;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* ---------- quotes ---------- */
.quote {
  margin-top: 18px; background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--radius); padding: 22px 24px;
  font-size: 14.5px; color: var(--tag); line-height: 1.65;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.quote b { color: var(--head); font-weight: 600; transition: color var(--transition); }
.quote .who { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--tag); opacity: .85; }

@media (max-width: 560px) {
  .hero { padding-top: 54px; }
}

/* ---- buttons: .btn and its fills (packages/sitekit/css/buttons.css) ---- */

/* ============================================================
   sitekit - buttons: .btn and its three fills. Reads roles only.
   ============================================================ */

/* buttons */
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-pill); padding: 14px 24px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform .08s ease, box-shadow .15s ease,
              background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--btn1-bg); color: var(--btn1-fg); box-shadow: 0 3px 14px var(--shadow); }
.btn-accent  { background: var(--btn2-bg); color: var(--btn2-fg); box-shadow: 0 3px 14px var(--shadow); }
.btn-ghost   { background: transparent; color: var(--ghost-c); border: 1.5px solid var(--ghost-b); }

/* ---- cards: the tile grid (packages/sitekit/css/cards.css) ---- */

/* ============================================================
   sitekit - cards: the tile grid the homepage and the fantasy hub use.
   Reads roles only.
   ============================================================ */

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--card-edge);
  border-top: 3px solid var(--card-top); border-radius: var(--radius); padding: 20px;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition),
              transform .12s ease, box-shadow .2s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--shadow); }
.card .pill {
  align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--pill-bg); color: var(--pill-fg); border: 1px solid var(--pill-b);
  border-radius: var(--radius-pill); padding: 3px 10px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.card .pill.archived { background: var(--btn2-bg); color: var(--btn2-fg); border-color: transparent; }
.card h2 { font-size: 16.5px; font-weight: 700; color: var(--head); transition: color var(--transition); }
.card .tag { font-family: var(--font-mono); font-size: 11px; color: var(--tag); } /* --tag, not --trim: copper is a rule colour and read 2.3:1 as text on a dark card */
.card .desc { font-size: 13px; color: var(--tag); line-height: 1.55; transition: color var(--transition); }
.card .go { margin-top: auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--head); transition: color var(--transition); }