/* ============================================================
   Hppn — design system
   Editorial dark canvas · Antonio display · mono engineering labels
   Ported & rebranded from the Capability Atlas / Visualiser system.
   ============================================================ */

/* ---- local brand fonts ---- */
@font-face{
  font-family:"Antonio";
  src:url("../fonts/Antonio-Variable.ttf") format("truetype");
  font-weight:100 700; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"InterV";
  src:url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight:100 900; font-display:swap; font-style:normal;
}

:root{
  /* ---- ink / paper (dark, default) ---- */
  --ink:        #0f1317;
  --ink-1:      #141a20;
  --ink-2:      #1b232b;
  --ink-3:      #232e38;
  --paper:      #ece7dd;
  --paper-dim:  #a9b0b4;
  --paper-faint:#6c757d;
  --line:       rgba(236,231,221,0.12);
  --line-soft:  rgba(236,231,221,0.07);

  /* ---- signal: Hppn yellow ---- */
  --signal:     #EBC100;
  --signal-2:   #f4d23a;                 /* lifted, for glows */
  --signal-dim: rgba(235,193,0,0.16);
  --signal-text:#EBC100;                 /* yellow text is fine on dark */
  --ink-on-sig: #15110a;                 /* text that sits on yellow */

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 80px);

  --display:"Antonio", "Arial Narrow", system-ui, sans-serif;
  --sans:   "InterV", system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --logo: url("../brand/hppn-logo-white.png");
  color-scheme: dark;
}

/* ---- light theme ---- */
:root[data-theme="light"]{
  --ink:        #efe9dd;
  --ink-1:      #f6f1e7;
  --ink-2:      #e8e1d1;
  --ink-3:      #ddd4c0;
  --paper:      #16191c;
  --paper-dim:  #4c545b;
  --paper-faint:#7e858b;
  --line:       rgba(20,24,28,0.16);
  --line-soft:  rgba(20,24,28,0.08);

  --signal:     #EBC100;
  --signal-2:   #c89a00;
  --signal-dim: rgba(184,140,0,0.18);
  --signal-text:#9a7400;                 /* darkened gold for text on paper */
  --ink-on-sig: #15110a;

  --logo: url("../brand/hppn-logo-black.png");
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
}
::selection{ background:var(--signal); color:var(--ink-on-sig); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-weight:400; margin:0; }
button{ font:inherit; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--paper-faint);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow .tick{ color:var(--signal-text); }
.mono{ font-family:var(--mono); }
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.0;
  letter-spacing:0.0em;
  text-wrap:balance;
  text-transform:uppercase;
}
.display em{ font-style:normal; color:var(--signal-text); }
.lead{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.5;
  color:var(--paper);
  text-wrap:pretty;
}
.dim{ color:var(--paper-dim); }
.faint{ color:var(--paper-faint); }
.sig{ color:var(--signal-text); }
/* inline copy marks (from content.js): ==highlight== — wins over context colours */
.hl{ color:var(--signal-text) !important; font-style:inherit; }

/* discrete per-section prev/next (echo of the visualiser) */
.sect-nav{ display:flex; gap:30px; margin-top:32px; flex-wrap:wrap; }
.sect-link{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint); cursor:pointer; display:inline-flex; align-items:center; gap:.6em; transition:color .2s; background:none; border:0; padding:0; }
.sect-link:hover{ color:var(--signal-text); }
.sect-link .ar{ font-size:13px; line-height:1; transition:transform .25s ease; }
.sect-link.sect-next:hover .ar{ transform:translateY(2px); }
.sect-link.sect-prev:hover .ar{ transform:translateY(-2px); }
.sect-link.sect-top:hover .ar{ transform:translateY(-2px); }
/* per-step nav inside the Act I scrollytelling — inherits the step's own dimming */
.step-subnav{ margin-top:28px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, padding .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); padding-block:11px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{
  width:34px; height:34px; flex:none;
  background:var(--logo) center/contain no-repeat;
}
.brand .bwo{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--paper-faint);
  border-left:1px solid var(--line); padding-left:11px;
}
@media(max-width:560px){ .brand .bwo{ display:none; } }
.nav-right{ display:flex; align-items:center; gap:8px; }
.nav-links{ display:flex; gap:4px; margin-right:10px; }
.nav-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--paper-dim);
  padding:9px 13px; border-radius:2px; transition:.18s;
}
.nav-links a:hover{ color:var(--paper); background:var(--ink-2); }
.nav-links a.active{ color:var(--signal-text); }
@media(max-width:880px){ .nav-links{ display:none; } }

/* theme toggle */
.theme-toggle{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:2px; background:transparent;
  color:var(--paper-dim); cursor:pointer; transition:.18s;
}
.theme-toggle:hover{ color:var(--signal-text); border-color:var(--signal); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .moon{ display:none; }
:root[data-theme="light"] .theme-toggle .sun{ display:none; }
:root[data-theme="light"] .theme-toggle .moon{ display:block; }

/* progress rail */
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:90;
  background:var(--signal); width:0%;
  box-shadow:0 0 12px var(--signal);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:13px; letter-spacing:0.08em;
  padding:13px 20px; border:1px solid var(--line);
  border-radius:2px; color:var(--paper); background:transparent;
  cursor:pointer; transition:.22s; text-transform:uppercase; white-space:nowrap;
}
.btn:hover{ border-color:var(--signal); color:var(--signal-text); transform:translateY(-1px); }
.btn-solid{ background:var(--signal); color:var(--ink-on-sig); border-color:var(--signal); }
.btn-solid:hover{ color:var(--ink-on-sig); filter:brightness(1.07); border-color:var(--signal); }
.btn .arr{ transition:transform .22s; }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================================================
   SECTION SHELLS / DIVIDERS
   ============================================================ */
.band{ padding-block:clamp(80px,12vh,150px); }
.band-1{ background:var(--ink-1); }
.act-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--paper-faint); padding:8px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px 20px; flex-wrap:wrap;
}
.act-tag b{ color:var(--signal-text); font-weight:400; }
.section-head{ max-width:54rem; margin-bottom:60px; }
.section-head h2{ font-size:clamp(36px,5.4vw,76px); margin:.22em 0 .4em; }
.section-head .lead{ max-width:44ch; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:140px 92px; position:relative; overflow:hidden;
}
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grad{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(115% 80% at 72% 26%, transparent 38%, var(--ink) 76%);
}
.hero-tag{
  position:absolute; top:96px; right:var(--gut); z-index:2;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-faint); text-align:right; line-height:1.7;
}
@media(max-width:880px){ .hero-tag{ display:none; } }
.hero h1{
  font-size:clamp(48px, 8.2vw, 114px);
  line-height:0.99; margin:.1em 0 .34em; max-width:100%;
}
.hero .sub{ font-size:clamp(19px,2.1vw,25px); line-height:1.5; max-width:40ch; color:var(--paper); }
.hero .meta{ margin-top:42px; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.hero .meta .tagline{ flex-basis:100%; margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--paper-faint); }
.hero .meta .tagline b{ color:var(--signal-text); font-weight:500; }
.scroll-cue{
  position:absolute; bottom:24px; right:var(--gut); z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--paper-faint); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .bar{ width:1px; height:36px; background:linear-gradient(var(--paper-faint), transparent); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ============================================================
   SCROLLYTELLING : sticky figure + stepped prose
   ============================================================ */
.scrolly{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.scrolly .sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--gut); }
.scrolly .steps{ padding:16vh var(--gut) 16vh; }
.step{ min-height:80vh; display:flex; flex-direction:column; justify-content:center; max-width:32rem; opacity:.32; transition:opacity .4s; }
.step.is-active{ opacity:1; }
.step .stepnum{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--signal-text); margin-bottom:20px; }
.step h3{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:clamp(26px,3.2vw,40px); line-height:1.02; letter-spacing:0; margin-bottom:18px; }
.step h3 em{ color:var(--signal-text); font-style:normal; }
.step p{ color:var(--paper-dim); font-size:17px; }
.step p strong{ color:var(--paper); font-weight:600; }
.figure-stage{ width:100%; max-width:540px; aspect-ratio:1/1; position:relative; }
.figure-stage svg{ width:100%; height:100%; overflow:visible; }
@media(max-width:860px){
  .scrolly{ grid-template-columns:1fr; }
  .scrolly .sticky{ height:58vh; top:0; order:-1; }
  .scrolly .steps{ padding:4vh var(--gut); }
  .step{ min-height:62vh; }
}

/* ============================================================
   TWIN CONSTELLATION (graph)
   ============================================================ */
.graph-stage{ position:relative; width:100%; height:72vh; min-height:540px; border:1px solid var(--line);
   background:radial-gradient(120% 120% at 50% 28%, var(--ink-1), var(--ink)); overflow:hidden; }
.graph-stage svg{ width:100%; height:100%; display:block; cursor:grab; }
.graph-stage svg:active{ cursor:grabbing; }
.gnode circle{ transition:fill-opacity .25s, stroke-opacity .25s, r .25s; }
.glink{ fill:none; transition:stroke .25s, stroke-opacity .25s; }
.glabel{ font-family:var(--mono); font-size:10px; fill:var(--paper-dim); pointer-events:none; opacity:0; transition:opacity .25s; }
.graph-controls{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; align-items:center; }
.graph-controls .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); margin-right:4px; white-space:nowrap; }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; white-space:nowrap;
  padding:9px 14px; border:1px solid var(--line); border-radius:2px; color:var(--paper-dim);
  cursor:pointer; transition:.18s; background:transparent; display:inline-flex; gap:8px; align-items:center;
}
.chip:hover{ color:var(--paper); border-color:var(--paper-dim); }
.chip .cnt{ font-size:10px; color:var(--paper-faint); border:1px solid var(--line); border-radius:10px; padding:1px 7px; }
.chip.active{ background:var(--signal); color:var(--ink-on-sig); border-color:var(--signal); }
.chip.active .cnt{ color:var(--ink-on-sig); border-color:rgba(0,0,0,.25); }
.graph-caption{
  position:absolute; left:20px; bottom:20px; width:min(420px,calc(100% - 40px));
  background:color-mix(in srgb,var(--ink) 86%, transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-left:2px solid var(--signal);
  padding:16px 18px; opacity:0; transform:translateY(8px); transition:.3s; pointer-events:none; z-index:4;
}
.graph-caption.show{ opacity:1; transform:none; }
.graph-caption .gc-name{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal-text); margin-bottom:8px; }
.graph-caption .gc-body{ font-size:14px; color:var(--paper-dim); line-height:1.45; }
.graph-caption .gc-body b{ color:var(--paper); }
.graph-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--paper-dim); }
.graph-legend .lg{ display:flex; align-items:center; gap:8px; }
.swatch{ width:11px; height:11px; border-radius:50%; }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.tri-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tcard{ background:var(--ink-1); padding:34px 30px; display:flex; flex-direction:column; min-height:300px; transition:.25s; position:relative; }
.tcard:hover{ background:var(--ink-2); }
.tcard .tk{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal-text); }
.tcard h3{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:clamp(24px,2.4vw,30px); line-height:1.04; letter-spacing:0; margin:16px 0 14px; }
.tcard p{ font-size:15px; color:var(--paper-dim); line-height:1.5; margin:0; }
.tcard .foot{ margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--paper-faint); }
.tcard .foot b{ color:var(--paper); font-weight:500; }
@media(max-width:820px){ .tri-grid{ grid-template-columns:1fr; } }

/* engage / steps list */
.engage{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.estep{ background:var(--ink-1); padding:34px 30px; display:flex; flex-direction:column; gap:12px; }
.estep .en{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--signal-text); }
.estep h3{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:26px; letter-spacing:0; line-height:1.04; }
.estep p{ font-size:15px; color:var(--paper-dim); line-height:1.55; margin:0; }
@media(max-width:760px){ .engage{ grid-template-columns:1fr; } }

/* work / proof cards */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.work{ border:1px solid var(--line); background:var(--ink-1); overflow:hidden; transition:.25s; display:flex; flex-direction:column; }
.work:hover{ border-color:color-mix(in srgb,var(--signal) 45%, var(--line)); transform:translateY(-3px); }
.work .shot{ aspect-ratio:16/10; background:var(--ink-2); position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.work .shot img{ width:100%; height:100%; object-fit:cover; }
.work .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint);
  background:repeating-linear-gradient(135deg, var(--ink-2) 0 11px, var(--ink-1) 11px 22px);
}
.work .wbody{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; }
.work .wk{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal-text); }
.work h3{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:26px; letter-spacing:0; line-height:1.05; }
.work p{ font-size:14.5px; color:var(--paper-dim); line-height:1.5; margin:0; }
.work .wmeta{ margin-top:6px; display:flex; gap:18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--paper-faint); flex-wrap:wrap; }
.work .wmeta b{ color:var(--signal-text); font-weight:400; }
@media(max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

/* ============================================================
   INTERLUDE / QUOTE
   ============================================================ */
.interlude{ padding-block:clamp(90px,16vh,190px); text-align:center; background:var(--ink-1); }
.interlude blockquote{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:clamp(30px,4.8vw,60px); line-height:1.04; max-width:22ch; margin:0 auto; letter-spacing:0; text-wrap:balance;
}
.interlude blockquote em{ font-style:normal; color:var(--signal-text); }
.interlude .attrib{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); margin-top:34px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:start; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }
.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:520px){ .form-row.two{ grid-template-columns:1fr; } }
.form-row label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); }
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--sans); font-size:16px; color:var(--paper);
  background:var(--ink-1); border:1px solid var(--line); border-radius:2px;
  padding:13px 15px; transition:.18s; width:100%; resize:vertical;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:none; border-color:var(--signal); background:var(--ink-2); }
.form-row input::placeholder, .form-row textarea::placeholder{ color:var(--paper-faint); }
.form-note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--paper-faint); margin-top:6px; }
.form-ok{ display:none; border:1px solid var(--signal); background:var(--signal-dim); padding:16px 18px; border-radius:2px; font-size:15px; color:var(--paper); }
.form-ok.show{ display:block; }
.contact-aside .ca-item{ padding:22px 0; border-top:1px solid var(--line); }
.contact-aside .ca-item .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:8px; }
.contact-aside .ca-item .v{ font-size:17px; }
.contact-aside .ca-item a:hover{ color:var(--signal-text); }

/* ============================================================
   CLOSE / FOOTER
   ============================================================ */
.close{ padding-block:clamp(90px,16vh,170px); text-align:center; }
.close h2{ font-size:clamp(46px,8.2vw,124px); margin-bottom:.28em; }
.close .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.footer{ border-top:1px solid var(--line); padding:48px var(--gut); display:flex; justify-content:space-between; flex-wrap:wrap; gap:26px; }
.footer .fcol{ display:flex; flex-direction:column; gap:10px; }
.footer .fbrand{ display:flex; align-items:center; gap:11px; }
.footer .fbrand .mark{ width:40px; height:40px; background:var(--logo) center/contain no-repeat; }
.footer .fcol .ft{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:4px; }
.footer .fcol a, .footer .fcol span{ font-size:14px; color:var(--paper-dim); }
.footer .fcol a:hover{ color:var(--signal-text); }
.footer .legal{ font-family:var(--mono); font-size:11px; color:var(--paper-faint); letter-spacing:.04em; line-height:1.7; max-width:30ch; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:1; }
.reveal.in{ animation: riseIn .7s cubic-bezier(.2,.6,.2,1) both; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media(max-width:540px){
  body{ font-size:17px; }
  .hero{ padding-block:128px 80px; }
  .hero h1{ font-size:clamp(42px,12vw,72px); }
  .hero .meta .btn{ flex:1 1 auto; justify-content:center; }
  .scroll-cue{ display:none; }
  .section-head{ margin-bottom:40px; }
  .graph-stage{ height:64vh; min-height:440px; }
  .tcard, .estep, .work .wbody{ padding:26px 22px; }
}