/* miscusi marketing site — tile language on the field, clay light.
   Port of design_handoff_miscusi_board/website/site.css (2026-07-21).
   Deviations from the mock are marked `port:` — full audit in the runbook. */
*{box-sizing:border-box}
/* port: color was var(--text-body) — that name is a size token (16px), the
   intended color alias never survives the token import order; --on-field is
   the aliased value. font-size/line-height flatten base.css's body rule,
   which the mock got via ../styles.css. */
body{margin:0;background:var(--field);color:var(--on-field);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:hover{color:color-mix(in srgb,var(--accent) 80%,var(--on-field))}
/* ---- home: full-viewport board ---- */
/* tap to recolor (design website/AGENT_INSTRUCTIONS-tap-sweep.md, 2026-08-03):
   the timed pour is gone — the next theme spreads outward from the tapped tile,
   ring by ring (index.html recomputes every tile's --d from the tap point, then
   flips data-theme in the same frame). Supersedes the 2026-07-30 liquid sweep.
   port: the mock keeps the per-tile transitions on permanently (its board is
   static); here they would smear the ambient live-gives' 420ms bloom and the
   heartbeat's .on flips across up to ~1.2s of positional delay, so the tap
   handler opens a body.sweeping window around each wave and the normal motion
   rules hold between taps. The FIELD transition needs no window — body's
   background only ever changes on a theme swap — so it follows the mock.
   port: the reduced-motion mirror keeps .sweeping in its selectors — dropping
   it (as the mock does) loses on specificity to the .sweeping rule above.
   port: animation:none on .tapped backstops §4's "no press pulse"; the JS
   already guards it. */
body.home{overflow:hidden;height:100dvh;cursor:pointer;transition:background-color 2.2s linear .35s}
@keyframes tap-pulse{0%{transform:scale(1)}32%{transform:scale(.9)}100%{transform:scale(1)}}
body.home .tapped{animation:tap-pulse 440ms var(--ease-liquid,cubic-bezier(.3,.7,.3,1))}
body.home.sweeping .cell,body.home.sweeping .pt,body.home.sweeping .mt,body.home.sweeping .wm-tile{transition:background-color 1s var(--ease-liquid,cubic-bezier(.3,.7,.3,1)) var(--d,0ms),color 1s linear var(--d,0ms),box-shadow 1s linear var(--d,0ms),filter 300ms var(--ease-liquid,ease) 0ms,transform 120ms var(--ease-liquid,ease) 0ms}
@media(prefers-reduced-motion:reduce){body.home,body.home.sweeping .cell,body.home.sweeping .pt,body.home.sweeping .mt,body.home.sweeping .wm-tile{transition:none}body.home .tapped{animation:none}}
.board{position:fixed;inset:0;display:grid;gap:var(--tile-gap);padding:var(--tile-gap);grid-auto-rows:var(--tile-unit);align-content:start}
.cell{background:var(--tile-dormant);border-radius:var(--tile-radius);transition:filter 300ms var(--ease-liquid,ease)}
.cell:hover{filter:brightness(1.05)}
.cell.on{background:var(--tile-active)}
.cell.worded{box-shadow:inset 0 0 0 2px var(--ember)}
/* addition (KMI 2026-07-21): ambient live-gives — a give cell becomes a .pt
   giver tile (name over a count-up, like the halo's leo), blooming via the
   fill tokens; .fresh/.done fade the labels in and out. Reduced-motion: the
   JS loop never starts (static board) and --dur-fill zeroes the fade anyway. */
.cell{transition:filter 300ms var(--ease-liquid,ease),background-color var(--dur-fill,420ms) var(--ease-liquid,ease)}
.cell.giving b,.cell.giving small{transition:opacity var(--dur-fill,420ms) var(--ease-liquid,ease)}
.cell.giving.fresh b,.cell.giving.fresh small,.cell.giving.done b,.cell.giving.done small{opacity:0}
.wm-tile{background:var(--plate);color:var(--on-plate);border-radius:var(--tile-radius);display:flex;align-items:center;padding:0 var(--space-4);font-family:var(--font-word);font-style:italic;font-size:24px;text-decoration:none}
.wm-tile:hover{color:var(--on-plate)}
.pt{background:var(--tile-active);color:var(--on-tile);border-radius:var(--tile-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.pt b{font-weight:var(--weight-semibold);font-size:15px;line-height:1}
.pt small{font-size:var(--text-micro);opacity:.78;font-variant-numeric:tabular-nums}
.pt.worded{box-shadow:inset 0 0 0 2px var(--ember)}
.pt.big b{font-size:22px}
.pt.big small{font-size:var(--text-label)}
.pt.anon{background:var(--tile-dormant)}
.pt.anon b{font-family:var(--font-word);font-style:italic;font-weight:400;font-size:12px}
.overlay{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;padding:var(--space-5)}
/* menu tiles — option 1a (handoff-2026-07-21-website.md §Home 3), designed
   verbatim: in-grid cells, stores on --control, m/legal on --plate, sans 13px
   semibold with plate tracking, .press feedback, no shadows. Port delta:
   --sab feeds the last-row pick in fill() (safe-area, notched phones). */
.board{--sab:env(safe-area-inset-bottom,0px)}
.mt{border-radius:var(--tile-radius);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--weight-semibold);letter-spacing:var(--track-plate);text-decoration:none}
.mt.wm{background:var(--plate);color:var(--on-plate);font-family:var(--font-word);font-style:italic;font-size:22px;font-weight:400;letter-spacing:0}
.mt.wm:hover{color:var(--on-plate)}
.mt.store{background:var(--control);color:var(--on-control)}
.mt.store:hover{color:var(--on-control)}
.mt.legal{background:var(--plate);color:var(--on-plate)}
.mt.legal:hover{color:var(--on-plate)}
/* ---- legal pages ---- */
.wrap{max-width:1060px;margin:0 auto;padding:clamp(14px,4vw,44px) clamp(12px,3vw,24px)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--tile-gap)}
.tile{background:var(--plate);color:var(--on-plate);border-radius:var(--tile-radius);padding:var(--space-5)}
.press{transition:transform 120ms var(--ease-liquid,ease),filter 120ms}
.press:hover{filter:brightness(1.04)}
.press:active{transform:scale(.98);filter:brightness(.94)}
.wordmark{font-family:var(--font-word);font-style:italic;font-size:24px;line-height:1;color:inherit;text-decoration:none}
.t-mini{display:flex;align-items:center;gap:var(--space-3);grid-column:span 2;min-height:64px;padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--on-plate)}
.t-mini:hover{color:var(--on-plate)}
.t-label{grid-column:span 4;display:flex;align-items:center;background:var(--tile-dormant);color:var(--on-tile);font-size:var(--text-label);letter-spacing:var(--track-plate);font-weight:var(--weight-semibold)}
.doc{grid-column:1/-1;background:var(--plate);border-radius:var(--radius-sheet);padding:clamp(24px,5vw,56px)}
.doc>*{max-width:62ch}
.doc h1{font-family:var(--font-word);font-style:italic;font-weight:400;font-size:clamp(30px,4vw,42px);line-height:var(--leading-tight);margin:0 0 var(--space-2)}
/* port: .meta/.note opacity .65 → .75 — measured 4.16:1 on clay-light plate,
   below AA for 13px; .75 measures 5.52:1 (acceptance: contrast AA on all text). */
.doc .meta{font-size:var(--text-label);opacity:.75;margin:0 0 var(--space-6)}
.doc h2{font-size:var(--text-body);font-weight:var(--weight-semibold);letter-spacing:var(--track-label);margin:var(--space-6) 0 var(--space-2)}
.doc p{font-size:var(--text-body);line-height:var(--leading-body);margin:0 0 var(--space-3);text-wrap:pretty}
.doc .note{font-size:var(--text-label);font-style:italic;opacity:.75;margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid color-mix(in srgb,var(--on-plate) 14%,transparent)}
/* port: doc links follow the footer idiom (inherit + underline, ember on
   hover) — ember on clay-light plate measures 3.72:1, below AA for body text. */
.doc a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--accent)}
.foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-2);color:var(--on-field);font-size:var(--text-label)}
.foot nav{display:flex;gap:var(--space-5)}
/* port: ::after extends the footer links' tap area to ≥44px without moving pixels. */
.foot a{color:inherit;text-underline-offset:3px;position:relative}
.foot a::after{content:"";position:absolute;inset:-14px -8px}
@media(max-width:760px){.t-mini,.t-label{grid-column:1/-1}.foot{flex-direction:column;align-items:flex-start}}