/* ===== Tareef Jafferi · Speaker Profile · base.css =====
   Continuum design system tokens (subset).
   Dark canvas, amber-only accent, hairline modules,
   Inter + Source Serif 4 + JetBrains Mono.
============================================================ */

:root{
  /* canvas */
  --bg:#0A0A0F;
  --bg-2:#0E0E15;
  --bg-card:#12121A;
  --bg-card-hi:#16161F;

  /* hairlines */
  --line:rgba(255,255,255,0.08);
  --line-hi:rgba(255,255,255,0.16);
  --line-strong:rgba(255,255,255,0.24);

  /* accent (one amber per section, max) */
  --amber:#FFC93C;
  --amber-2:#FFD65C;
  --amber-soft:rgba(255,201,60,0.10);
  --amber-rim:rgba(255,201,60,0.32);

  /* semantic data */
  --data-up:#22C77A;
  --data-flat:#6B6B78;
  --data-down:#E85545;

  /* ink */
  --ink:#F5F5F7;
  --ink-2:#A0A0B0;
  --ink-3:#6B6B78;
  --ink-4:#4A4A55;

  /* champagne (wordmark only) */
  --champagne:linear-gradient(168deg,#C7B890 0%,#F5EDD4 28%,#EFE4C3 48%,#C7B890 70%,#7A6E58 100%);

  /* type stack */
  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Source Serif 4',Georgia,serif;

  /* scale + radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-pill:999px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:56px;
  --s-9:96px; --s-10:128px;

  /* layout */
  --wrap:1240px;
  --gutter:56px;

  /* halos (status dot only) */
  --halo-amber:0 0 0 3px var(--amber-rim);

  /* shadow (cards) */
  --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 40px rgba(0,0,0,0.35);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11';
}

img,svg,video{display:block;max-width:100%;height:auto}

a{
  color:inherit;
  text-decoration:none;
  transition:color 120ms ease;
}
a:hover{color:var(--ink)}

button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:0}
input,textarea,select{font:inherit;color:inherit}

/* ===== Layout primitive ===== */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ===== Section ===== */
.section{
  padding:var(--s-9) 0;
  border-top:1px solid var(--line);
}
.section:first-of-type{border-top:none}

/* ===== Opener (CH · 0X / TITLE) ===== */
.opener{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s-5);
}
.opener .ch{color:var(--ink-2)}
.opener .bar{flex:0 0 32px;height:1px;background:var(--amber)}
.opener .label{color:var(--ink-2)}

/* ===== Section H2 ===== */
.section-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(28px, 3vw, 40px);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin-bottom:var(--s-3);
  color:var(--ink);
}
.section-title .accent{color:var(--amber);font-weight:700}
.section-title em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--ink);
}
.section-sub{
  font-size:16px;
  color:var(--ink-2);
  max-width:680px;
  margin-bottom:var(--s-7);
  line-height:1.55;
}
.section-sub em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink)}

/* ===== Signature pull-quote (serif italic, amber rule) ===== */
.signature{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.45;
  color:var(--ink);
  border-left:2px solid var(--amber);
  padding-left:var(--s-5);
  max-width:780px;
}

/* ===== Pills / chips ===== */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  border-radius:var(--radius-pill);
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.pill .dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--data-up);
  box-shadow:0 0 0 3px rgba(34,199,122,0.18);
}

/* ===== Buttons ===== */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;
  background:var(--amber);
  color:#0A0A0F;
  border-radius:var(--radius-pill);
  font-weight:600;font-size:14px;
  letter-spacing:-0.005em;
  white-space:nowrap;
  transition:background 120ms ease,transform 120ms ease;
}
.btn-primary:hover{background:var(--amber-2);color:#0A0A0F}

.btn-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 0;
  font-size:14px;font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--line-hi);
  transition:border-color 120ms ease;
}
.btn-link .arrow{
  color:var(--amber);
  transition:transform 160ms ease;
}
.btn-link:hover{border-color:var(--amber-rim)}
.btn-link:hover .arrow{transform:translate(2px,-2px)}

/* ===== P-01 big-number ===== */
.stat{display:flex;flex-direction:column;gap:8px}
.stat-label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.stat-num{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(40px, 4.4vw, 64px);
  letter-spacing:-0.04em;
  line-height:0.95;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat-num.amber{color:var(--amber)}
.stat-num .suffix{
  font-family:var(--mono);
  font-size:0.42em;font-weight:500;
  color:var(--ink-3);
  margin-left:6px;
  vertical-align:0.45em;
  letter-spacing:0.08em;text-transform:uppercase;
}
.stat-delta{
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  color:var(--ink-3);
  letter-spacing:0.04em;
}
.stat-delta.up{color:var(--data-up)}

/* ===== Cards (hairline modules · P-06) ===== */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--s-6);
  transition:border-color 160ms ease,background 160ms ease;
}
.card:hover{border-color:var(--line-hi);background:var(--bg-card-hi)}

.card-id{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s-4);
}
.card-title{
  font-family:var(--sans);font-weight:600;font-size:18px;
  letter-spacing:-0.01em;line-height:1.25;
  color:var(--ink);
  margin-bottom:var(--s-3);
}
.card-body{
  font-size:14px;color:var(--ink-2);line-height:1.55;
}
.card-footer{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.card-footer strong{color:var(--ink-2);font-weight:500}

/* ===== Generic em / suffix throughout copy ===== */
section em,p em,h1 em,h2 em,h3 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--ink);
}
.amber{color:var(--amber)}
.suffix{
  font-family:var(--mono);
  font-size:0.42em;font-weight:500;
  color:var(--ink-3);
  margin-left:6px;
  vertical-align:0.45em;
  letter-spacing:0.08em;text-transform:uppercase;
}

/* ===== Skip link ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--bg);
  padding:10px 14px;border-radius:6px;
  font-size:14px;font-weight:600;
  z-index:100;
}
.skip-link:focus{left:16px;top:12px}