/* ===== LAYOUT: asymmetric axis, broken grid, act rhythm ===== */

/* background layers */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.06}

.skip-link{position:absolute;left:var(--s-4);top:-48px;z-index:100;padding:var(--s-2) var(--s-4);
  background:var(--text);color:var(--bg);font:600 var(--step--1) var(--font-text);
  border-radius:var(--radius);transition:top var(--t-fast)}
.skip-link:focus{top:var(--s-4)}

/* header */
.site-head{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-3) var(--gutter);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px)}
.wordmark{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;
  font:500 var(--step-0) var(--font-display)}
.site-head nav{display:flex;align-items:center;gap:var(--s-6)}
.site-head nav>a:not(.btn){text-decoration:none;font:500 var(--step--1) var(--font-text);
  color:var(--text-muted);position:relative;padding:var(--s-1) 0;transition:color var(--t-fast)}
.site-head nav>a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--color-accent);transition:width var(--t) var(--ease-out)}
.site-head nav>a:not(.btn):hover{color:var(--text)}
.site-head nav>a:not(.btn):hover::after{width:100%}

main{display:block}
section{padding:0 var(--gutter);max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto}
section + section{margin-top:var(--act-gap)}

/* ACT 1 · hero: 60/40 asymmetric, instrument bleeds right */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);
  gap:var(--s-12);align-items:start;padding-top:clamp(56px,9vh,110px);min-height:78vh}
.hero-copy{max-width:34em}
.hero h1{font-size:var(--step-4);font-weight:700;margin:var(--s-6) 0 var(--s-6)}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--text-muted);max-width:30em}
.hero-cta{display:flex;gap:var(--s-4);margin:var(--s-8) 0 var(--s-6);flex-wrap:wrap}
.trust-line{font-size:var(--step--1);color:var(--text-muted);max-width:36em}
.hero-numeral{position:absolute;left:31%;bottom:-.14em;z-index:-1;
  font:700 clamp(8rem,19vw,16rem)/1 var(--font-display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none;user-select:none}

/* the instrument: no card frame; hairline rules that bleed off the right edge */
.instrument{position:relative;font-family:var(--font-mono);
  padding:var(--s-6) 0 var(--s-6) var(--s-6);border-left:2px solid var(--color-accent)}
.instrument::before{content:"";position:absolute;top:0;left:0;right:calc(-1*var(--gutter));
  border-top:1px solid var(--line)}
.instrument::after{content:"";position:absolute;bottom:0;left:0;right:calc(-1*var(--gutter));
  border-bottom:1px solid var(--line)}
.instr-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-6)}
.instr-title{font-size:var(--step--1);letter-spacing:.12em;color:var(--text-muted)}
.instr-state{font-size:var(--step--1);color:var(--color-primary)}
.instr-state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--color-accent);margin-right:6px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.instr-state.is-done::before{animation:none}
.readings{margin:0;display:grid;gap:var(--s-4)}
.reading{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--s-2) var(--s-4)}
.reading dt{font-size:var(--step--1);color:var(--text-muted)}
.reading dd{margin:0;text-align:right}
.val{font-size:var(--step-2);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.unit{font-size:var(--step--1);color:var(--text-muted);margin-left:4px}
.bar{grid-column:1/-1;height:2px;background:var(--line);overflow:hidden;display:block}
.bar-fill{display:block;height:100%;width:0;background:var(--color-accent);
  transition:width var(--t-slow) var(--ease-out)}
.instr-note{margin-top:var(--s-6);font-size:var(--step--1);color:var(--text-muted);font-family:var(--font-text)}

/* section heads: kicker + rule motif (the SEAM between acts) */
.sec-head{max-width:44em;margin-bottom:var(--s-16)}
.kicker{display:flex;align-items:center;gap:var(--s-3);font:500 var(--step--1) var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.tick{width:34px;height:2px;background:var(--color-accent);flex:none}
.sec-head h2,.contact h2{font-size:var(--step-3);font-weight:700;margin-top:var(--s-4)}

/* ACT 2 · principles: staggered editorial run, NOT an equal card grid */
.principles{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--s-12) var(--s-6)}
.principle{position:relative;padding-top:var(--s-6);border-top:1px solid var(--line)}
.principle:nth-child(1){grid-column:1/6}
.principle:nth-child(2){grid-column:7/13;margin-top:var(--s-16)}
.principle:nth-child(3){grid-column:2/7;margin-top:calc(-1*var(--s-8))}
.principle:nth-child(4){grid-column:8/13;margin-top:var(--s-8)}
.p-index{position:absolute;top:var(--s-6);right:0;font:500 var(--step-2) var(--font-mono);
  color:transparent;-webkit-text-stroke:1px var(--gray-300)}
[data-theme="dark"] .p-index{-webkit-text-stroke:1px #3a3e48}
.principle h3{font-size:var(--step-1);margin-bottom:var(--s-3)}
.principle p{color:var(--text-muted);max-width:30em}

/* ACT 3 · work: three DIFFERENT treatments */
.case{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-8) var(--s-6);align-items:center}
.case + .case{margin-top:var(--act-gap)}
.case-fig{margin:0;overflow:hidden;border-radius:var(--radius-lg)}
.case-fig svg{width:100%;height:auto}
/* 1: figure bleeds off the LEFT edge, text overlaps it */
.case--bleed .case-fig{grid-column:1/8;margin-left:calc(-1*var(--gutter));border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.case--bleed .case-body{grid-column:8/13;margin-left:calc(-1*var(--s-16));position:relative;z-index:2;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(4px);
  padding:var(--s-8);border-top:2px solid var(--color-accent)}
/* 2: text hangs into the margin, figure right */
.case--hang .case-body{grid-column:1/6}
.case--hang .case-fig{grid-column:6/13}
/* 3: full-bleed figure, body offset under it */
.case--wide .case-fig--full{grid-column:1/13;margin-inline:calc(-1*var(--gutter));border-radius:0}
.case--wide .case-body{grid-column:6/13;margin-top:calc(-1*var(--s-8));position:relative;z-index:2;
  background:color-mix(in srgb,var(--bg) 88%,transparent);padding:var(--s-8);border-top:2px solid var(--color-accent)}
.case-meta{font:500 var(--step--1) var(--font-mono);letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--s-3)}
.case h3{font-size:var(--step-2);margin-bottom:var(--s-4)}
.case-body>p{color:var(--text-muted)}
.case-stats{list-style:none;display:flex;gap:var(--s-8);padding:0;margin:var(--s-6) 0 0}
.stat-val{font:500 var(--step-2) var(--font-mono);color:var(--color-primary);font-variant-numeric:tabular-nums}
.stat-unit{display:block;font-size:var(--step--1);color:var(--text-muted)}

/* ACT 4 · engage: asymmetric pair, recommended offer larger */
.engage-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-6);align-items:start}
.offer{padding:var(--s-8);border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);display:flex;flex-direction:column;gap:var(--s-4);
  transition:border-color var(--t),transform var(--t) var(--ease-out)}
.offer:hover{border-color:var(--color-accent);transform:translateY(-3px)}
.offer--reco{border-left:3px solid var(--color-accent)}
.offer-flag{font:500 var(--step--1) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary)}
.offer h3{font-size:var(--step-2)}
.offer-desc{color:var(--text-muted)}
.offer-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.offer-list li{padding-left:var(--s-6);position:relative;font-size:var(--step--1);color:var(--text-muted)}
.offer-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;background:var(--color-accent)}
.offer .btn{align-self:start;margin-top:var(--s-2)}

/* ACT 5 · contact: split, form on the axis */
.contact{display:grid;grid-template-columns:6fr 6fr;gap:var(--s-16)}
.contact-copy .lede{margin:var(--s-6) 0}
.contact-form{display:grid;gap:var(--s-6);align-content:start;
  padding:var(--s-8) 0 var(--s-8) var(--s-8);border-left:2px solid var(--color-accent)}

/* footer */
.site-foot{margin-top:var(--act-gap);padding:var(--s-12) var(--gutter);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.foot-mark{font:500 var(--step--1) var(--font-display)}
.foot-note{font-size:var(--step--1);color:var(--text-muted)}
.site-foot a{color:var(--color-primary)}

/* ===== responsive: designed, not shrunk ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;gap:var(--s-12)}
  .hero-numeral{display:none}
  .instrument{padding-right:0}
  .principles{display:grid;grid-template-columns:1fr;gap:var(--s-8)}
  .principle,.principle:nth-child(n){grid-column:1/-1;margin-top:0}
  .case,.case + .case{grid-template-columns:1fr}
  .case--bleed .case-fig,.case--hang .case-fig,.case--wide .case-fig--full{grid-column:1/-1;margin-inline:calc(-1*var(--gutter));border-radius:0}
  .case--bleed .case-body,.case--hang .case-body,.case--wide .case-body{grid-column:1/-1;margin:calc(-1*var(--s-6)) var(--s-4) 0;padding:var(--s-6)}
  .engage-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:var(--s-8)}
  .contact-form{padding-left:var(--s-6)}
}
@media (max-width:640px){
  .site-head nav{gap:var(--s-4)}
  .site-head nav>a[href="#method"],.site-head nav>a[href="#engage"]{display:none}
  .case-stats{gap:var(--s-6);flex-wrap:wrap}
}