/* ============================================================
   New Media Marketing — design system
   Direction: THE LEDGER (annual report wired to live data)
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Futura New';
  src:url('../fonts/FuturaNewMedium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Futura New';
  src:url('../fonts/FuturaNewBold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  /* ink ladder — near-black at the navy's hue, navy reserved for panels.
     A saturated mid-navy page ground reads "corporate brochure"; near-black reads "instrument". */
  --ink-000:#02061F;   /* page ground — shade of the locked navy at its own hue (234°) */
  --ink-050:#01030E;   /* well / alternating band */
  --ink-100:#04093F;   /* LOCKED navy — cards, panels, chart plots */
  --ink-200:#0A1157;   /* raised / hover */

  /* brand */
  --cyan:#1f9bd7;      /* logo mark colour — data, strokes, live values */
  --electric:#020c9b;  /* LOCKED. 1.46:1 on dark: fills, gradients and glow ONLY. never text/strokes */
  --crimson:#f31550;   /* action + the single most important number */
  --peri:#989cd7;      /* body text, 7.7:1 on ground */
  --white:#ffffff;

  /* hairlines are periwinkle at alpha, never neutral grey —
     this is what makes the dark read as designed rather than defaulted */
  --line:rgba(152,156,215,.14);
  --line-hi:rgba(152,156,215,.28);
  --line-faint:rgba(152,156,215,.06);

  --text:var(--peri);
  --text-hi:var(--white);
  --text-dim:rgba(152,156,215,.62);

  /* type */
  --f-display:'Futura New',ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,'JetBrains Mono','Roboto Mono',Menlo,monospace;

  /* scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw:1240px;
  --gut:clamp(20px,4vw,48px);
  --r:2px;                 /* the ledger is square; radius is nearly absent */

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--ink-000);
  color:var(--text);
  font-family:var(--f-display);
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--text-hi);font-weight:700;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--crimson);color:#fff}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ---------- type scale ---------- */
.display{font-size:clamp(38px,5.4vw,72px);letter-spacing:-.035em;line-height:1.0}
.h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.028em;line-height:1.04}
.h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;line-height:1.15}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--text)}
.small{font-size:13px;line-height:1.5}

.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:'';width:6px;height:6px;flex:none;
  background:var(--crimson);
}

/* numerals are mono and tabular — the ledger's core typographic rule */
.num{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  color:var(--text-hi);
  font-weight:600;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,var(--s10));position:relative}
.section--band{background:var(--ink-050)}
.section + .section{border-top:1px solid var(--line-faint)}

/* the visible 12-column ledger rules running behind the page */
.rules{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);
}
.rules span{border-left:1px solid var(--line-faint)}
.rules span:last-child{border-right:1px solid var(--line-faint)}
@media (max-width:860px){ .rules{grid-template-columns:repeat(4,1fr)} }

main,header,footer{position:relative;z-index:1}

/* ---------- logo lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:.55em;font-size:17px;color:var(--cyan)}
.logo svg{width:1.95em;height:1.95em;flex:none}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .t{font-weight:700;letter-spacing:-.012em;white-space:nowrap}
.logo .t b{color:var(--cyan);font-weight:700}
.logo .t i{color:var(--white);font-style:normal}
.logo .sub{
  font-family:var(--f-mono);font-size:7.5px;font-weight:500;
  letter-spacing:.38em;color:var(--text-dim);margin-top:.42em;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--ink-000) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:64px}
.nav{display:flex;align-items:center;gap:var(--s6)}
.nav a{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text);
  padding-block:6px;position:relative;transition:color .2s var(--ease);
}
.nav a:hover{color:var(--white)}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--crimson);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:900px){ .nav{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 22px;border:1px solid transparent;border-radius:var(--r);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.btn--pri{background:var(--crimson);color:#fff}
.btn--pri:hover{background:#ff2b62;transform:translateY(-1px)}
.btn--gho{border-color:var(--line-hi);color:var(--text-hi)}
.btn--gho:hover{border-color:var(--cyan);color:var(--cyan)}
.btn svg{width:13px;height:13px}

/* ---------- panels / cards ---------- */
.panel{
  background:var(--ink-100);
  border:1px solid var(--line);
  border-radius:var(--r);
  position:relative;
}
.panel--flush{background:transparent}

/* corner ticks — the instrument detail grafted onto the ledger */
.ticked::before,.ticked::after{
  content:'';position:absolute;width:7px;height:7px;pointer-events:none;
  border-color:var(--line-hi);border-style:solid;
}
.ticked::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.ticked::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* ---------- stat ---------- */
.stat__k{
  display:block;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-dim);
}
.stat__v{
  display:block;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.4vw,50px);font-weight:600;letter-spacing:-.045em;
  color:var(--text-hi);line-height:1;margin-top:10px;
}
.stat__v .u{font-size:.52em;color:var(--cyan);margin-left:.1em;letter-spacing:0}
.stat__n{font-size:12.5px;color:var(--text-dim);margin-top:9px;line-height:1.45}

/* unverified figures are visibly marked so nothing ships as a fabricated claim */
.pending{
  border-bottom:1px dashed var(--crimson);
  cursor:help;
}
.pending::after{
  content:'?';font-size:.42em;vertical-align:super;color:var(--crimson);margin-left:.12em;
}

/* ---------- utility ---------- */
.grid{display:grid;gap:var(--s5)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.mono{font-family:var(--f-mono)}
.dim{color:var(--text-dim)}
.hi{color:var(--text-hi)}
.cy{color:var(--cyan)}
.cr{color:var(--crimson)}
.center{text-align:center}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rise{opacity:1;transform:none}
}