/* ════════════════════════════════════════════════════════════════════
   33prime.io · MAGIC HOUR — shared site components
   Requires /brand/tokens.css. Pages add their own layout on top.
   ════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased;
  transition:background var(--t-soft) var(--ease),color var(--t-soft) var(--ease)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.disp{font-family:var(--disp)} .hand{font-family:var(--hand)} .tnum{font-variant-numeric:tabular-nums}

/* eyebrow — mono caps with a teal tick */
.eyebrow{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:14px;height:2px;border-radius:2px;background:var(--lived)}

/* buttons — pill, Zen Maru; ONE coral CTA per screen */
.btn{display:inline-block;border:0;background:var(--action);color:var(--action-text);font-family:var(--disp);font-weight:700;font-size:.84rem;
  padding:11px 22px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;text-align:center;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.btn.warm{background:var(--now);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn.quiet{background:transparent;color:var(--lived-ink);padding:11px 10px}
.btn.sm{font-size:.74rem;padding:7px 15px}

/* pills — colour = proof; teal, coral, neutrals ONLY */
.pill{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--radius-pill);display:inline-block}
.pill.lived{background:var(--lived-tint);color:var(--lived-ink)}
.pill.settled{background:var(--lived-ink);color:var(--bg)}
.pill.now{background:var(--now-tint);color:var(--now-ink)}
.pill.asserted{background:transparent;border:1px dashed var(--ink-mute);color:var(--ink-soft)}
.pill.fading{background:var(--panel-2);color:var(--ink-mute)}

/* cards — flat inside, horizon rim on the top edge */
.mh-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-rest);
  position:relative;overflow:hidden;transition:box-shadow var(--t-soft) var(--ease),border-color var(--t-soft) var(--ease)}
.mh-card::before{content:'';position:absolute;top:0;left:10%;right:26%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--card-rim-a) 30%,var(--card-rim-b) 75%,transparent)}
.mh-card:hover{box-shadow:var(--shadow-hover)}

/* chips */
.chip{font-family:var(--mono);font-size:.64rem;padding:4px 10px;border-radius:var(--radius-xs);
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-faint);display:inline-block}

/* recall / hand voice */
.recall-q{font-family:var(--hand);font-size:1.08rem;line-height:1.65;color:var(--ink)}
.prov{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.prov b{color:var(--lived-ink);font-weight:600}

/* horizon divider glyph (replaces hr) */
.hdiv{display:flex;align-items:center;gap:12px;color:var(--ink-mute)}
.hdiv::before,.hdiv::after{content:'';flex:1;height:1px;background:var(--line)}

/* forced-dusk island — a section that stays at magic hour in any mode
   (mirror of tokens.css :root dusk values) */
.dusk-scope{
  --bg:#0f1424; --panel:#171d33; --panel-2:#202844; --panel-3:#293252;
  --line:#2c3552; --line-2:#242c47;
  --ink:#eef1f8; --ink-soft:#aeb6cf; --ink-faint:#7a83a3; --ink-mute:#525b7a;
  --lived:#2fb3bd; --lived-ink:#4ecdd6; --lived-tint:rgba(47,179,189,.14);
  --now:#e07a58; --now-ink:#f09a7c; --now-tint:rgba(224,122,88,.14);
  --action:#ede6d4; --action-text:#1a2138;
  --card-rim-a:rgba(94,212,221,.4); --card-rim-b:rgba(240,154,124,.3);
  --shadow-rest:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(3,6,18,.45);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 18px 44px rgba(3,6,18,.55);
  --sky-0:#0c1122; --sky-1:#182448; --sky-2:#25445e; --sky-glow:#3f8a92;
  --sun:#f0906c; --sun-core:#ffd9b0;
  --ridge-1:#2b4a66; --ridge-2:#20344f; --ridge-3:#16243c; --ridge-4:#0e1730;
  --rim-teal:rgba(126,220,226,.5); --rim-warm:rgba(240,144,108,.55); --rim-faint:rgba(126,220,226,.18);
  --star:#f3e9d2; --cloud:#26355a;
  background:var(--bg);color:var(--ink)
}

/* ── light-chips: typed, expandable knowledge — shared by the golden hour and the twin ──
   ⬡ skill = an abstraction/capability (how we think) · ▸ feat = a built feature (what exists) */
.lchip{font-family:var(--mono);letter-spacing:.04em;cursor:pointer;font-weight:500;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.lchip:hover{transform:translateY(-1px)}
.lchip.skill{font-size:13px;padding:9px 17px;border-radius:999px;color:var(--lived-ink);
  background:color-mix(in srgb,var(--panel) 86%,transparent);
  border:1.5px solid color-mix(in srgb,var(--lived) 50%,transparent)}
.lchip.skill::before{content:'⬡ ';opacity:.85}
.lchip.feat{font-size:13px;padding:9px 15px;border-radius:11px;color:var(--now-ink);
  background:color-mix(in srgb,var(--now) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--now) 38%,transparent)}
.lchip.feat::before{content:'▸ ';opacity:.85}
.lcard{max-width:640px;width:min(640px,92vw);margin-top:22px;position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-float);
  animation:lcardin .45s var(--ease)}
.lcard::before{content:'';position:absolute;top:0;left:10%;right:26%;height:1px;
  background:linear-gradient(90deg,transparent,var(--card-rim-a),var(--card-rim-b),transparent)}
@keyframes lcardin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.lcard .lct{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.lcard.skill .lct{color:var(--lived-ink)}
.lcard.feat .lct{color:var(--now-ink)}
.lcard .lcn{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 8px;color:var(--ink)}
.lcard .lcd{font-size:15px;line-height:1.7;color:var(--ink-soft)}
.lcard .lch{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

/* scene motion (scenes.js emits these classes) */
@media (prefers-reduced-motion: no-preference){
  .drift{animation:mh-drift 26s ease-in-out infinite alternate}
  .drift2{animation:mh-drift 34s ease-in-out infinite alternate-reverse}
  .st{animation:mh-tw 4s ease-in-out infinite alternate}
  .sunglow{animation:mh-breathe 9s ease-in-out infinite alternate}
}
@keyframes mh-drift{from{transform:translateX(0)}to{transform:translateX(-18px)}}
@keyframes mh-tw{from{opacity:.4}to{opacity:1}}
@keyframes mh-breathe{from{opacity:.75}to{opacity:1}}

/* reduced motion — one global kill switch (pattern from partner.html) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}