/* ============================================================================
   LinkkWinkk — Design System v2 (coral)
   One source of truth. Every deck imports this file; no deck declares :root.
   Type scale 1.25 · spacing 4-base · CTAs teal · 44px minimum touch target.

   CORAL IS RESERVED — two rules, one per ground.

   ON LIGHT GROUND coral means one of exactly three things:
     1. match quality   .match.hi · .bar i · .hl · why-you-matched terms
     2. the wink        .btn.wink · .wring.them · .wspark
     3. someone waiting .tab .badge · .unread · the "New" conversation tag
   Never a CTA, never a label, never a price, never a plain descriptor.

   ON DARK GROUND (.map, .dusk, the wink takeover) the roles invert: teal
   disappears into --teal-ink, so coral carries "yours / live" — your line,
   your terminus, the evening scene's running lights. Teal cannot do that
   job at this contrast, which is why this is a legibility rule, not a
   second opinion about the brand.

   Plus the brand mark itself: the right ring and the "winkk" wordmark.
   ========================================================================== */

:root{
  /* ---- brand ---------------------------------------------------------- */
  --ink:#0E2120;
  --teal:#0C8C8C;   --teal-deep:#0A6E6E;  --teal-tint:#E2F2F1; --teal-ink:#0B3B3B;
  --coral:#F4512C;  --coral-deep:#C23A1B; --coral-tint:#FDECE7;

  /* ---- surfaces ------------------------------------------------------- */
  --paper:#FBF7F4;      /* app canvas */
  --sheet:#FFFFFF;      /* raised content layer */
  --sunk:#F3EEE9;       /* recessed / informational */
  --line:#E7E2DC;       /* hairlines: inputs + separators ONLY */

  /* ---- text ----------------------------------------------------------- */
  --muted:#54615F;      /* darkened from #6C7D7C — now 4.5:1 on paper */
  --faint:#5F6A68;      /* darkened from #7C8886 — 5.6:1 on sheet, 5.26:1 on paper */
  --on-dark:#FBF7F4;
  --on-dark-soft:rgba(251,247,244,.72);

  /* ---- dark-ground equivalents ----------------------------------------
     Coral at --coral is 3.56:1 on --teal-ink and fails AA at body sizes. On
     dark grounds coral keeps its meaning ("yours / live") and only its value
     lifts: --coral mixed 40% toward --paper. 5.53:1 on ink, 6.34:1 on dusk.
     The three surface values below are opaque composites of translucent
     layers over --teal-ink. They live here as tokens, not inline, so a future
     recolour moves them — loose hex outside :root is what blocked the last one. */
  --coral-on-dark:#F7937C;
  --sheet-on-ink:#234E4E;        /* rgba(251,247,244,.10) over --teal-ink */
  --coral-tint-on-ink:#383F38;   /* rgba(244,81,44,.20)  over --teal-ink */
  --on-dark-soft-solid:#BEC8C6;  /* --on-dark-soft, flattened */

  /* ---- status --------------------------------------------------------- */
  --verify:#0B7A4E;  --verify-tint:#E4F2EB;
  --warn:#8F590E;    --warn-tint:#FBEFDC;   /* darkened from #B06E12 — 5.13:1 on its tint */
  --danger:#A3231B;  --danger-tint:#F7E2DF;   /* outside coral family */

  /* ---- type scale (1.25) ---------------------------------------------- */
  --t-xs:11px;   --t-s:13px;   --t-m:15px;
  --t-l:19px;    --t-xl:24px;  --t-xxl:34px;
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.5;
  --ls-display:-.02em; --ls-label:.14em;

  --disp:'Bricolage Grotesque',-apple-system,system-ui,sans-serif;
  --body:'Instrument Sans',-apple-system,system-ui,sans-serif;

  /* ---- space ---------------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- radius --------------------------------------------------------- */
  --r1:8px; --r2:12px; --r3:16px; --r4:24px; --rp:100px;

  /* ---- elevation (replaces borders as the container strategy) ---------- */
  --e1:0 1px 2px rgba(14,33,32,.05), 0 2px 8px rgba(14,33,32,.06);
  --e2:0 2px 6px rgba(14,33,32,.07), 0 12px 28px rgba(14,33,32,.10);
  --e3:0 -2px 20px rgba(14,33,32,.08);
  --glow-coral:0 8px 28px rgba(244,81,44,.32);

  /* ---- motion --------------------------------------------------------- */
  --ease:cubic-bezier(.2,.9,.3,1);
  --pop:cubic-bezier(.2,1.6,.4,1);
  --dur:.34s;   /* under the 400ms Doherty threshold */
}

/* ---- dusk scene: evening commute window ------------------------------- */
.dusk{
  --paper:#0E2523; --sheet:#12302D; --sunk:#0B211F; --line:#1E413D;
  --ink:#FBF7F4;   --muted:#9DB0AD; --faint:#7B8F8C;
  --teal-tint:#12403F;  --coral-tint:#3A1B12;
  --e1:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --e2:0 2px 6px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4);
  /* body resolved color:var(--ink) against the LIGHT ink and children inherit
     that computed value, not the token — so the scene must re-apply it here
     or every unstyled string stays near-black on near-black. */
  color:var(--ink); background:var(--paper);
}
/* teal on --teal-ink is the illegible pairing the coral rule exists for */
.dusk .btn.quiet,.dusk .act{background:var(--teal-tint);color:#8FD8D2}
.dusk .tab.on{color:#8FD8D2}
.dusk .small{color:var(--muted)}

/* ============================ reset ==================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--body);color:var(--ink);background:var(--paper);
     -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}

/* ============================ phone frame ============================== */
.phone{width:393px;height:852px;background:var(--paper);border-radius:38px;
       overflow:hidden;position:relative;box-shadow:var(--e2);display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.scroll::-webkit-scrollbar{display:none}

/* status bar */
.sbar{display:flex;justify-content:space-between;align-items:center;
      padding:14px var(--s5) 4px;font-weight:700;font-size:var(--t-m);flex:none}
.sbar .notch{width:104px;height:26px;background:#000;border-radius:14px}
.sbar .sig{display:flex;gap:2px;align-items:flex-end;height:13px}
.sbar .sig i{width:3px;background:currentColor;border-radius:1px;display:block}
.sbar .sig i:nth-child(1){height:5px} .sbar .sig i:nth-child(2){height:8px}
.sbar .sig i:nth-child(3){height:11px} .sbar .sig i:nth-child(4){height:13px}

/* ============================ typography =============================== */
.display{font-family:var(--disp);font-weight:800;font-size:var(--t-xxl);
         line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.h1{font-family:var(--disp);font-weight:800;font-size:var(--t-xl);
    line-height:1.12;letter-spacing:var(--ls-display)}
.h2{font-family:var(--disp);font-weight:700;font-size:var(--t-l);
    line-height:1.2;letter-spacing:-.01em}
.body{font-size:var(--t-m);line-height:var(--lh-body)}
.small{font-size:var(--t-s);line-height:1.45;color:var(--muted)}
.label{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
       letter-spacing:var(--ls-label);color:var(--muted)}
.label.accent{color:var(--teal-deep)}
.label.onDark{color:var(--on-dark-soft)}
.hl{color:var(--coral-deep);font-weight:600}   /* the one different thing */

/* ============================ app chrome =============================== */
.apphead{display:flex;align-items:flex-start;justify-content:space-between;
         gap:var(--s3);padding:var(--s2) var(--s5) 0;flex:none}
.apphead .who{min-width:0}
.apphead .acts{display:flex;gap:var(--s2);flex:none}

/* 48dp targets with visual size < target */
.iconbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
         color:var(--teal-deep);position:relative}
.iconbtn::before{content:"";position:absolute;inset:2px;border-radius:50%;
         background:var(--sheet);box-shadow:var(--e1)}
.iconbtn svg{width:20px;height:20px;position:relative;z-index:1;
         fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.plain::before{display:none}
.iconbtn:active{transform:scale(.94);transition:transform .1s}

.navbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3) 0;flex:none}
.navbar .ttl{font-family:var(--disp);font-weight:700;font-size:var(--t-l)}

/* tab bar — 4 fixed destinations, badges, 48dp rows */
.tabs{flex:none;display:flex;padding:var(--s2) var(--s1) var(--s5);
      background:color-mix(in srgb,var(--paper) 92%,transparent);
      backdrop-filter:blur(12px);box-shadow:var(--e3)}
.tab{flex:1;min-height:48px;display:flex;flex-direction:column;align-items:center;
     justify-content:center;gap:3px;font-size:10.5px;font-weight:600;
     letter-spacing:.06em;color:var(--faint);position:relative}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
     stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--teal-deep)}
.tab .badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;
     padding:0 5px;border-radius:9px;background:var(--coral-deep);color:#fff;
     font-size:10px;font-weight:700;display:grid;place-items:center;letter-spacing:0}

/* ============================ containers =============================== */
/* interactive → fill + elevation. informational → sunk, no border. */
.card{background:var(--sheet);border-radius:var(--r4);box-shadow:var(--e1);padding:var(--s4)}
.note{background:var(--sunk);border-radius:var(--r3);padding:var(--s4);
      display:flex;gap:var(--s3);align-items:flex-start}
.note svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--teal-deep);
      stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.note.warn svg{stroke:var(--warn)}
.note .txt{font-size:var(--t-s);line-height:1.45;color:var(--muted)}
.note .txt b{color:var(--ink);font-weight:600}

/* the one dark anchor per screen */
.anchor{background:var(--teal-ink);border-radius:var(--r4);padding:var(--s5);
        color:var(--on-dark);position:relative;overflow:hidden}
.anchor::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(251,247,244,.10) 1px,transparent 1px);
  background-size:14px 14px;pointer-events:none}
.anchor > *{position:relative;z-index:1}

/* the spine: one continuous line in the user's colour */
.spine{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal-tint)}
.spine.live{background:linear-gradient(var(--teal),var(--teal-tint))}

/* ============================ buttons ================================== */
.btn{width:100%;min-height:54px;border-radius:var(--rp);background:var(--teal-deep);
     color:#fff;font-family:var(--disp);font-weight:700;font-size:17px;
     display:flex;align-items:center;justify-content:center;gap:var(--s2);
     box-shadow:var(--e1);transition:transform .12s var(--ease)}
.btn:active{transform:scale(.985)}
.btn:disabled{background:var(--sunk);color:var(--faint);box-shadow:none}
.btn.ghost{background:transparent;color:var(--teal-deep);box-shadow:none}
.btn.quiet{background:var(--sheet);color:var(--teal-deep)}
/* coral CTA is reserved: only the wink moment uses it */
.btn.wink{background:var(--coral-deep);box-shadow:var(--glow-coral)}
.btn.sm{min-height:44px;font-size:var(--t-m)}
.btn.loading{color:transparent;position:relative}
.btn.loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
     border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.ctabar{flex:none;padding:var(--s3) var(--s5) var(--s5);display:flex;gap:var(--s3)}
.ctabar .btn{flex:1}

/* inline row action — 44px floor, visual pill smaller than the target */
.act{min-height:44px;min-width:44px;padding:0 var(--s4);border-radius:var(--rp);
     background:var(--teal-tint);color:var(--teal-deep);
     font-size:var(--t-s);font-weight:700;display:inline-flex;align-items:center;
     justify-content:center}
.act.done{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.act.decline{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

/* ============================ chips ==================================== */
.chip{display:inline-flex;align-items:center;min-height:44px;min-width:44px;
      justify-content:center;padding:0 var(--s4);
      border-radius:var(--rp);background:var(--sunk);color:var(--muted);
      font-size:var(--t-s);font-weight:600;white-space:nowrap}
.chip.on{background:var(--teal-deep);color:#fff}
.chip.pick{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.chip.add{background:transparent;box-shadow:inset 0 0 0 1px var(--line);
      border-style:dashed;color:var(--faint)}
.chip:disabled{opacity:.4}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips.scroll-x{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}

/* tag — non-interactive descriptor */
.tag{display:inline-flex;align-items:center;padding:5px var(--s3);border-radius:var(--rp);
     background:var(--sunk);color:var(--muted);font-size:var(--t-xs);font-weight:600}
.tag.intent{background:var(--sunk);color:var(--ink);font-weight:700}
.tag.level{background:var(--teal-tint);color:var(--teal-deep)}

/* ============================ match pill =============================== */
/* graded quiet-teal → coral, WITH a word so it is never colour-only */
.match{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;
       border-radius:var(--rp);font-size:var(--t-xs);font-weight:700;flex:none}
.match b{font-family:var(--disp);font-size:var(--t-s)}
.match.hi{background:var(--coral-tint);color:var(--coral-deep)}
.match.mid{background:var(--teal-tint);color:var(--teal-deep)}
.match.lo{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line)}

/* ============================ avatar =================================== */
.av{width:44px;height:44px;border-radius:50%;flex:none;position:relative;
    background:var(--teal-tint);display:grid;place-items:center;
    font-family:var(--disp);font-weight:700;font-size:var(--t-m);color:var(--teal-deep)}
.av.ph{background-size:cover;background-position:center;
    /* duotone: unifies mismatched stock lighting across the feed */
    filter:grayscale(1) contrast(1.05) sepia(.35) hue-rotate(135deg) saturate(1.5)}
.av.full{filter:none}          /* profile reveals true colour — meeting = colour event */
.av .vf{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;
    background:var(--verify);display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--sheet)}
.av .vf svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.av.lg{width:96px;height:96px;font-size:var(--t-xl)}
.av.lg .vf{width:28px;height:28px;right:2px;bottom:2px}
.av.lg .vf svg{width:14px;height:14px}
.av.sm{width:36px;height:36px;font-size:var(--t-s)}

/* ============================ fields =================================== */
/* borders live here and nowhere else */
.field{position:relative;background:var(--sheet);border-radius:var(--r3);
       box-shadow:inset 0 0 0 1px var(--line);padding:var(--s4);min-height:60px;
       display:flex;align-items:center}
.field .lb{position:absolute;top:-8px;left:var(--s3);padding:0 6px;background:var(--paper);
       font-size:var(--t-xs);font-weight:600;color:var(--teal-deep)}
.field .val{font-size:var(--t-l);font-weight:600}
.field.focus{box-shadow:inset 0 0 0 2px var(--teal)}
.field.err{box-shadow:inset 0 0 0 2px var(--danger)}
.errmsg{display:flex;gap:6px;align-items:center;margin-top:var(--s2);
       font-size:var(--t-s);color:var(--danger);font-weight:600}

.otp{display:flex;gap:var(--s3)}
.otp i{flex:1;height:68px;border-radius:var(--r2);background:var(--sheet);
       box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;
       font-family:var(--disp);font-size:var(--t-xl);font-weight:700;color:var(--teal-deep);font-style:normal}
.otp i.on{box-shadow:inset 0 0 0 2px var(--teal)}
.otp i.empty{color:var(--faint)}

.switch{width:52px;height:32px;border-radius:var(--rp);background:var(--line);
        position:relative;flex:none;transition:background var(--dur) var(--ease)}
/* the track stays 52x32; ::before carries the 44px hit area the finger needs */
.switch::before{content:"";position:absolute;inset:-6px 0;border-radius:inherit}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;
        border-radius:50%;background:#fff;box-shadow:var(--e1);transition:transform var(--dur) var(--ease)}
.switch.on{background:var(--teal)}
.switch.on::after{transform:translateX(20px)}

.seg{display:flex;background:var(--sunk);border-radius:var(--r2);padding:4px}
.seg button{flex:1;min-height:44px;border-radius:var(--r1);font-size:var(--t-s);
        font-weight:600;color:var(--muted)}
.seg button.on{background:var(--sheet);color:var(--teal-deep);box-shadow:var(--e1)}

.stepper{display:flex;align-items:center;gap:var(--s4)}
.stepper button{width:48px;height:48px;border-radius:50%;
        box-shadow:inset 0 0 0 1px var(--line);color:var(--teal-deep);font-size:var(--t-l)}
.stepper .n{font-family:var(--disp);font-size:var(--t-xl);font-weight:700;min-width:28px;text-align:center}

/* ============================ list rows ================================ */
.rows{background:var(--sheet);border-radius:var(--r4) var(--r4) 0 0;
      box-shadow:var(--e1);min-height:100%}
.row{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);position:relative;align-items:flex-start}
.row + .row{box-shadow:inset 0 1px 0 var(--line)}
.row .stop{position:absolute;left:calc(var(--s5) + 21px);top:0;bottom:0;width:2px;
      background:var(--teal-tint);z-index:0}
.row:first-child .stop{top:30px}
.row:last-child .stop{bottom:auto;height:30px}
.row .av{z-index:1;box-shadow:0 0 0 3px var(--sheet)}
.row .main{flex:1;min-width:0}
.rowtop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.rowmeta{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2);flex-wrap:wrap}
.rowmeta .m{font-size:var(--t-xs);color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.rowmeta .m svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.rowmeta .push{margin-left:auto}

/* ============================ progress ================================= */
.prog{height:4px;border-radius:2px;background:var(--sunk);overflow:hidden}
.prog i{display:block;height:100%;background:var(--teal);border-radius:2px;
        transition:width var(--dur) var(--ease)}
.bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:3px;
        background:linear-gradient(90deg,var(--teal),var(--coral))}

/* ============================ skeleton ================================= */
.sk{background:linear-gradient(90deg,var(--sunk) 25%,rgba(255,255,255,.6) 50%,var(--sunk) 75%);
    background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r1)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ============================ empty state ============================== */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
       text-align:center;padding:var(--s5) var(--s6);gap:var(--s4)}
.empty .glyph{width:104px;height:104px;border-radius:50%;background:var(--sunk);
       display:grid;place-items:center}
.empty .glyph svg{width:40px;height:40px;fill:none;stroke:var(--teal-deep);
       stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============================ sheet ==================================== */
.sheetwrap{position:absolute;inset:0;background:rgba(14,33,32,.45);
       display:flex;align-items:flex-end;backdrop-filter:blur(2px)}
.bsheet{width:100%;background:var(--paper);border-radius:var(--r4) var(--r4) 0 0;
       padding:var(--s3) var(--s5) var(--s5);box-shadow:var(--e2);
       animation:rise .4s var(--ease) both}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto var(--s4)}

/* ============================ snackbar ================================= */
.snack{position:absolute;left:var(--s5);right:var(--s5);bottom:96px;
       background:var(--teal-ink);color:var(--on-dark);border-radius:var(--r2);
       padding:var(--s3) var(--s4);font-size:var(--t-s);display:flex;
       align-items:center;gap:var(--s3);box-shadow:var(--e2)}
.snack b{color:var(--on-dark);font-weight:700}

/* ============================ beck map ================================= */
/* Octolinear only: 0° / 45° / 90°. Equal stop spacing. Every stop labelled.
   Your line is always the heaviest weight and the only warm colour.
   This is the one place teal does NOT mean "you": on --teal-ink ground teal
   reads as noise, so the map inverts and your line takes the coral.         */
.map{background:var(--teal-ink);border-radius:var(--r4);position:relative;overflow:hidden}
.map::after{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:radial-gradient(rgba(251,247,244,.10) 1px,transparent 1px);
  background-size:16px 16px}
.map svg{display:block;width:100%;height:auto;position:relative;z-index:1}
.map .ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map .ln.mine{stroke:var(--coral);stroke-width:7}
.map .ln.other{stroke:rgba(251,247,244,.30);stroke-width:4}
.map .ln.draw{stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.1s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.map .stopdot{fill:var(--teal-ink);stroke:var(--coral);stroke-width:4}
.map .stopdot.plain{stroke:rgba(251,247,244,.55);stroke-width:3}
.map .term{fill:var(--coral);stroke:var(--on-dark);stroke-width:3}
.map .lbl{font-family:var(--body);font-size:10px;font-weight:600;fill:var(--on-dark-soft);letter-spacing:.02em}
.map .lbl.key{fill:var(--on-dark);font-weight:700}
.map .foot{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.map .legend{display:flex;gap:var(--s3);flex-wrap:wrap;z-index:2}
.map .legend span{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);
  font-weight:600;color:var(--on-dark-soft)}
.map .legend i{width:16px;height:4px;border-radius:2px;display:block}

/* ============================ deck page ================================ */
body.deck{background:#E9E4DE;padding:var(--s7) var(--s5) 96px}
.deckhead{max-width:1280px;margin:0 auto var(--s6)}
.deckhead h1{font-family:var(--disp);font-size:var(--t-xxl);font-weight:800;letter-spacing:var(--ls-display)}
.deckhead p{color:var(--muted);font-size:var(--t-m);margin-top:var(--s2);max-width:70ch;line-height:1.5}
.grid{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s7) var(--s6);justify-content:flex-start}
.frame{width:393px}
.cap{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3)}
.cap .num{font-family:var(--disp);font-weight:800;font-size:var(--t-s);color:#fff;
     background:var(--teal-deep);border-radius:var(--rp);padding:3px 10px}
.cap .nm{font-family:var(--disp);font-weight:700;font-size:var(--t-m)}
.cap .note2{font-size:var(--t-xs);color:var(--muted);margin-left:auto}

/* ============================ utilities ================================ */
/* Last in the file on purpose: these override component colour, and every
   component selector here is also (0,1,0), so source order is what decides. */
.onDarkCoral{color:var(--coral-on-dark)}