/* Cobalt Poster — site-factory theme.py
   conferences, agencies, campaigns, bold B2B, design studios
   Regenerating overwrites this file. */

:root{
  color-scheme: light;
  --ink: #0a1033;
  --surface: #f2f4ff;
  --raised: #ffffff;
  --muted: #4a5488;
  --border: #d2d9ff;
  --accent: #1330d6;
  --accent-ink: #ffffff;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', -apple-system, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --radius: 0;
  --rule: 3px;
  --measure: 58ch;
  --maxw: 72rem;
  --space: 1.2rem;
  --split: 1.5fr 1fr;
  --section-pad: clamp(3rem, 7vw, 5.5rem);
  --t-display: clamp(3rem, 1.5rem + 6.4vw, 6.4rem);
  --t-h2: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  --t-h3: 1.2rem;
  --t-lede: clamp(1.12rem, 1rem + .6vw, 1.4rem);
  --t-body: 1.075rem;
  --t-small: .82rem;
  --lh: 1.55;
  --lh-head: .96;
  --track-display: -.038em;
  --weight-display: 900;
  --head-case: none;
  --grad: linear-gradient(168deg,#e4e9ff 0%,#f2f4ff 46%,#fff0f4 100%);
  --shadow: 6px 6px 0 #1330d6;
  --glow: rgba(19,48,214,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh);
  text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display);
  line-height:var(--lh-head);letter-spacing:var(--track-display);
  text-transform:var(--head-case);text-wrap:balance;margin:0 0 .45em}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:0;text-transform:none}
p{max-width:var(--measure);margin:0 0 1.15em}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img,svg,video{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
hr,.rule{border:0;border-top:var(--rule) solid var(--border);
  margin:calc(var(--space)*2) 0}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
section{padding-block:var(--section-pad)}

/* ── LAYOUT ARCHETYPES ─────────────────────────────────────────────────────
   Each register declares the composition it wants in `composition.prefer`.
   These are the structures that honour it. They differ in ALIGNMENT and
   HIERARCHY, not just in colour: a register is not a voice if every page
   built from it has the same skeleton. Apply one to <body>. */

/* split-editorial — display type in a narrow left column, prose right.
   Asymmetric on purpose: the eye lands on the head, then crosses. */
.L-split .lay{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:56rem){
  .L-split .lay{grid-template-columns:minmax(16rem,.85fr) minmax(0,1.15fr);
    gap:3.5rem;align-items:start}
  .L-split .lay > .lead{position:sticky;top:2rem}
  .L-split h1{font-size:calc(var(--t-display) * 1.05)}
}

/* stacked-rhythm — one centred column, every block full width.
   Nothing sits beside anything; pace comes from vertical spacing alone. */
.L-stack .lay{max-width:44rem;margin-inline:auto;text-align:center}
.L-stack .lay p{margin-inline:auto}
.L-stack .lay .btn-row{justify-content:center}
.L-stack h1,.L-stack h2{text-align:center}
.L-stack .block{padding-block:calc(var(--space)*2);
  border-top:var(--rule) solid var(--border)}
.L-stack .block:first-child{border-top:none}

/* table-forward — a real sidebar. Data is the page; navigation is furniture. */
.L-table .lay{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:60rem){
  .L-table .lay{grid-template-columns:13rem minmax(0,1fr);gap:2.5rem}
  .L-table .side{position:sticky;top:2rem;align-self:start;
    border-right:var(--rule) solid var(--border);padding-right:1.5rem;
    min-height:20rem}
}
.L-table .side nav{display:flex;flex-direction:column;gap:.55rem;
  font-family:var(--font-mono);font-size:var(--t-small)}
.L-table .side a{color:var(--muted);text-decoration:none}
.L-table .side a[aria-current]{color:var(--accent)}

/* specimen — one object, enormous margins, centred. The luxury move:
   whitespace carries the value, so the content column is deliberately narrow. */
.L-specimen .lay{max-width:38rem;margin-inline:auto;text-align:center}
.L-specimen .lay p{margin-inline:auto}
.L-specimen section{padding-block:calc(var(--section-pad) * 1.5)}
.L-specimen .object{margin:calc(var(--space)*2.5) auto;
  border:var(--rule) solid var(--border);border-radius:var(--radius);
  padding:calc(var(--space)*2.5) calc(var(--space)*2);background:var(--raised)}
.L-specimen .btn-row{justify-content:center}

/* index-list — a numbered document. Hanging numerals in the margin. */
.L-index .lay{max-width:58rem}
.L-index .entry{display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1.2rem;
  padding:1.2rem 0;border-bottom:var(--rule) solid var(--border)}
.L-index .entry:first-of-type{border-top:var(--rule) solid var(--border)}
.L-index .entry .n{font-family:var(--font-mono);font-size:var(--t-small);
  color:var(--muted);padding-top:.35rem}

/* hero-product — centred hero, then a band of cards. Consumer default,
   used ONLY where a register asks for it. */
.L-hero .lay{text-align:center}
.L-hero .lay > p{margin-inline:auto}
.L-hero .btn-row{justify-content:center}
.L-hero h1{max-width:18ch;margin-inline:auto}

/* manual-spread — two columns of body text with notes in the outer margin,
   the way a field manual or a critical edition sets a page. */
.L-manual .lay{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:58rem){
  .L-manual .lay{grid-template-columns:minmax(0,1fr) 14rem;gap:2.75rem}
  .L-manual .marginalia{border-left:var(--rule) solid var(--border);
    padding-left:1.1rem}
}
.L-manual .cols{column-gap:2.5rem}
@media(min-width:44rem){.L-manual .cols{column-count:2}}
.L-manual .cols p{max-width:none;break-inside:avoid}

.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}

/* Authored details — the things that read as designed rather than defaulted. */
.kicker{font-family:var(--font-mono);font-size:var(--t-small);
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  display:block;margin-bottom:.85rem}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink);
  max-width:var(--measure);opacity:.88}
.caption{font-family:var(--font-mono);font-size:var(--t-small);
  color:var(--muted);margin-top:.5rem}
.marginnote{font-family:var(--font-mono);font-size:var(--t-small);
  color:var(--muted);border-left:var(--rule) solid var(--border);
  padding-left:.9rem;margin:1.3rem 0;max-width:38ch}
.index-row{display:grid;grid-template-columns:3.4rem 1fr;gap:.15rem 1rem;
  padding:1.05rem 0;border-top:var(--rule) solid var(--border)}
.index-row .n{font-family:var(--font-mono);font-size:var(--t-small);
  color:var(--muted);padding-top:.3rem}
.index-row h3{margin:0 0 .2rem}
.index-row p{margin:0;color:var(--muted);font-size:.95em}
.split{display:grid;gap:calc(var(--space)*1.5);grid-template-columns:1fr}
@media(min-width:52rem){.split{grid-template-columns:var(--split);
  gap:calc(var(--space)*2.6);align-items:start}}
.specimen{background:var(--raised);border:var(--rule) solid var(--border);
  border-radius:var(--radius);padding:calc(var(--space)*1.6)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:var(--t-small);
  padding:.2rem .55rem;border:var(--rule) solid var(--border);
  border-radius:var(--radius);color:var(--muted)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem .8rem;
  border-bottom:var(--rule) solid var(--border)}
th{font-family:var(--font-mono);font-size:var(--t-small);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;
  padding:0 1.3rem;background:var(--ink);color:var(--surface);
  border:var(--rule) solid var(--ink);border-radius:var(--radius);
  font-family:var(--font-body);font-weight:600;text-decoration:none;
  cursor:pointer;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn--accent{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--border)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}}

/* ── PLAYFUL LAYER ─────────────────────────────────────────────────────────
   Gradient wash, pills, fat cards, device frame, ticker, sticker badges.
   These are the mechanisms that make consumer sites feel alive — the same
   moves plush.fun uses. Present only for playful registers. */
body{background:var(--grad),var(--surface);background-attachment:fixed}
.btn{border-radius:999px;font-weight:700;padding:0 1.6rem;min-height:52px;
  box-shadow:var(--shadow)}
.btn--accent:hover{filter:brightness(1.06)}
.btn--big{min-height:60px;font-size:1.08rem;width:100%;justify-content:center}

.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .95rem;
  border-radius:999px;background:var(--raised);border:var(--rule) solid var(--border);
  font-size:var(--t-small);font-weight:600;color:var(--ink)}
.pill--live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 0 var(--glow);
  animation:pulse 1.8s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 .55rem transparent}
  100%{box-shadow:0 0 0 0 transparent}}

.card{background:var(--raised);border:var(--rule) solid var(--border);
  border-radius:var(--radius);padding:calc(var(--space)*1.4);
  box-shadow:var(--shadow)}
.card-grid{display:grid;gap:var(--space);grid-template-columns:1fr}
@media(min-width:44rem){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.card-grid--4{grid-template-columns:repeat(4,1fr)}}

/* Product shown inside a phone/console bezel — reads as a real object. */
.device{background:var(--ink);border-radius:calc(var(--radius) + 10px);
  padding:.85rem;box-shadow:var(--shadow)}
.device__bar{display:flex;align-items:center;justify-content:space-between;
  padding:.2rem .7rem .75rem;color:var(--surface);font-size:var(--t-small);
  font-weight:700;letter-spacing:.02em}
.device__screen{background:var(--raised);border-radius:var(--radius);
  overflow:hidden}

/* Live numbers. Tabular so they don't jitter when they update. */
.stat-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-family:var(--font-mono);font-size:var(--t-small);color:var(--muted);
  font-variant-numeric:tabular-nums}
.stat-strip b{color:var(--ink)}
.progress{height:.6rem;border-radius:999px;background:var(--border);
  overflow:hidden;margin:.55rem 0}
.progress > i{display:block;height:100%;border-radius:999px;
  background:var(--accent)}

.ticker{overflow:hidden;border-block:var(--rule) solid var(--border);
  background:var(--raised);padding:.55rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;gap:2.5rem;width:max-content;
  animation:slide 28s linear infinite;font-family:var(--font-mono);
  font-size:var(--t-small);color:var(--muted);white-space:nowrap}
.ticker__track b{color:var(--ink)}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

.badge{display:inline-grid;place-items:center;width:4.6rem;height:4.6rem;
  border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-weight:var(--weight-display);
  line-height:1.05;text-align:center;font-size:.92rem;padding:.4rem;
  transform:rotate(-9deg);box-shadow:var(--shadow)}
.wiggle{display:inline-block;animation:wig 3.4s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}