/* =============================================================
   GHIL LABS — HOME  (index.html only)
   Requires ghil-tokens.css. Editorial Warm tone / ledger structure.
   ============================================================= */

/* ---------------- NAV ---------------- */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:var(--hair)}
.nav .gh-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);
  min-height:66px}
.brand{font:400 1.32rem/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center;list-style:none}
.nav-links a{font-size:var(--t-sm);color:var(--muted);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.nav-cta{font-size:var(--t-sm);font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--gold);padding:6px 0;white-space:nowrap}
.nav-cta:hover{color:var(--gold)}

/* ---------------- HERO ---------------- */
.hero{border-bottom:var(--hair);
  background-image:
    linear-gradient(var(--rule-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-grid) 1px,transparent 1px);
  background-size:56px 56px}
.hero .gh-wrap{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,68px);align-items:end;
  padding-block:clamp(50px,7.5vw,102px) clamp(42px,5.5vw,74px)}

.hero h1{font-size:var(--t-mega);line-height:.94;letter-spacing:-.018em;margin-top:18px}
.hero h1 em{font-style:italic;color:var(--gold)}
.lede{font-size:var(--t-lede);line-height:1.62;color:var(--ink-2);max-width:48ch;margin-top:26px}
.lede b{font-weight:600;color:var(--ink);box-shadow:inset 0 -.42em 0 var(--gold-bg)}

.hero-actions{margin-top:30px;display:flex;align-items:center;gap:var(--gap-sm);flex-wrap:wrap}
.gh-btn{display:inline-flex;align-items:center;gap:8px;
  font:600 var(--t-sm)/1 var(--sans);text-decoration:none;
  padding:14px 22px;border-radius:var(--radius);
  background:var(--ink);color:var(--paper-2);border:1px solid var(--ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.gh-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.gh-btn--ghost{background:transparent;color:var(--ink)}
.gh-btn--ghost:hover{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
/* [data-ghil-base] a{color:inherit} in ghil-tokens.css outranks a single class
   selector, so button colour needs matching specificity to actually apply */
[data-ghil-base] .gh-btn{color:var(--paper-2)}
[data-ghil-base] .gh-btn:hover{color:var(--ink)}
[data-ghil-base] .gh-btn--ghost{color:var(--ink)}
[data-ghil-base] .gh-btn--ghost:hover{color:var(--paper-2)}
.hero-actions .gh-note{flex-basis:100%}

/* hero brief — warm card, double frame, real data table */
.brief{position:relative;background:var(--card);border:var(--hair);padding:22px 22px 20px}
.brief::before{content:'';position:absolute;inset:7px -7px -7px 7px;
  border:var(--hair-soft);z-index:-1;pointer-events:none}
.brief figcaption{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:11px;border-bottom:var(--hair)}
.brief table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-top:4px}
.brief td{padding:10px 0;border-bottom:var(--hair-soft);vertical-align:baseline}
.brief td:first-child{color:var(--muted);font-size:var(--t-xs)}
.brief td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;padding-left:14px;white-space:nowrap}
.brief tr.lead td:last-child{font-size:clamp(1.5rem,1.1rem + 1.1vw,1.95rem);
  font-weight:700;color:var(--red);letter-spacing:-.03em}
.brief tr:last-child td{border-bottom:0}
.brief .gh-note{margin-top:14px}

/* ---------------- PRINCIPLE STRIP ---------------- */
.principles{background:var(--paper-2);border-bottom:var(--hair)}
.principles .gh-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.principles div{padding:22px 26px 22px 0;border-right:var(--hair-soft)}
.principles div:last-child{border-right:0}
.principles p+p{font-size:var(--t-sm);color:var(--ink-2);margin-top:8px;line-height:1.55}

/* ---------------- LEDGER ---------------- */
.ledger{padding-block:var(--pad-sect)}
.ledger-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(22px,4vw,60px);align-items:end;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.ledger-head h2{font-size:var(--t-h1);line-height:1.05;margin-top:12px}
.ledger-head>p:last-child{font-size:var(--t-sm);color:var(--muted)}

.case{display:grid;grid-template-columns:78px minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px);align-items:start;
  padding-block:clamp(26px,3.4vw,44px);border-bottom:var(--hair);
  transition:background var(--dur) var(--ease)}
.case:hover,.case:focus-within{background:var(--card)}
.case-n{font:700 clamp(1.5rem,1.1rem + 1.7vw,2.5rem)/1 var(--mono);
  color:var(--rule);letter-spacing:-.04em;transition:color var(--dur) var(--ease)}
.case:hover .case-n,.case:focus-within .case-n{color:var(--gold)}
.case-who{font:400 var(--t-xs)/1.5 var(--mono);color:var(--faint);margin-bottom:7px}
.case h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.28rem,1.02rem + 1.05vw,1.95rem);line-height:1.18;
  letter-spacing:-.012em;margin-bottom:13px}
.case-body{font-size:var(--t-sm);color:var(--ink-2);line-height:1.74;max-width:62ch}
.case-body+.case-body{margin-top:11px}
.case-body em{font-family:var(--display);font-style:italic;font-size:1.1em;color:var(--ink)}

.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px;list-style:none}
.tags li{font:500 var(--t-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 9px;background:var(--paper-2);border:var(--hair-soft);color:var(--muted)}

.case-links{margin-top:18px;display:flex;gap:var(--gap-md);flex-wrap:wrap;align-items:center}
.case-links a{font:600 var(--t-sm)/1 var(--sans);color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:3px}
.case-links a:hover{color:var(--gold)}
.case-links a.quiet{font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule)}
.case-links a.quiet:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* readout panel */
.readout{border:var(--hair);background:var(--card)}

/* screenshot of the tool's signature view — cropped to 16:10.
   Reserve the box with width/height on the <img> so nothing reflows on load. */
.shot{margin:0;border-bottom:var(--hair);background:var(--paper-2);position:relative}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:center top}
.shot figcaption{position:absolute;left:0;bottom:0;
  padding:5px 9px;background:rgba(20,17,12,.82);color:var(--paper-2);
  font:500 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.case:hover .shot img,.case:focus-within .shot img{filter:saturate(1.04) contrast(1.02)}

.readout-h{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;background:var(--paper-2);border-bottom:var(--hair)}
.readout-b{padding:16px 14px}
.metric{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.metric b{font:700 clamp(1.85rem,1.35rem + 1.7vw,2.6rem)/1 var(--mono);
  color:var(--teal);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.metric b.loss{color:var(--red)}
.metric s{font:400 1.15rem/1 var(--mono);color:var(--faint);text-decoration:line-through}
.metric i{font-style:normal;font:400 var(--t-xs)/1.4 var(--mono);color:var(--muted)}
.readout-b>p{font-size:var(--t-xs);color:var(--muted);margin-top:10px;line-height:1.62}
.kv{width:100%;border-collapse:collapse;font-size:var(--t-xs);margin-top:14px;
  border-top:var(--hair);padding-top:12px}
.kv caption{text-align:left;padding:12px 0 4px;font:500 var(--t-label)/1 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.kv td{padding:6px 0;border-bottom:1px dotted var(--rule)}
.kv td:first-child{color:var(--muted)}
.kv td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;padding-left:10px}
.kv tr:last-child td{border-bottom:0}

/* ---------------- METHOD (credibility, not badges) ---------------- */
.method{border-top:2px solid var(--ink);background:var(--paper-2);padding-block:var(--pad-sect)}
.method-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,64px);align-items:start}
.method h2{font-size:var(--t-h1);line-height:1.05;margin:12px 0 20px}
.method-prose p{font-size:var(--t-body);line-height:1.76;color:var(--ink-2);max-width:56ch}
.method-prose p+p{margin-top:14px}
.method-prose em{font-family:var(--display);font-style:italic;font-size:1.08em;color:var(--ink)}
.method-list{list-style:none;border-top:var(--hair)}
.method-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:18px 0;border-bottom:var(--hair-soft)}
.method-list b{font:700 var(--t-label)/1.9 var(--mono);color:var(--gold);letter-spacing:.1em}
.method-list h3{font-size:var(--t-h3);margin-bottom:5px}
.method-list p{font-size:var(--t-sm);color:var(--muted);line-height:1.62}

/* ---------------- DARK STAGE PREVIEW ---------------- */
.stage{padding-block:var(--pad-sect)}
.stage h2{font-size:var(--t-h2);margin:12px 0 8px}
.stage>.gh-wrap>p{font-size:var(--t-sm);color:var(--on-stage-3);max-width:60ch;margin-bottom:26px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--stage-line);border:1px solid var(--stage-line)}
.kpi{background:var(--stage-2);padding:17px 17px 15px}
.kpi dt{font:500 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-stage-3)}
.kpi dd{margin:11px 0 0;font:700 clamp(1.42rem,1.1rem + 1vw,1.85rem)/1.1 var(--mono);
  color:var(--on-stage);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi small{display:block;font:400 var(--t-xs)/1 var(--mono);margin-top:7px}
.bars{margin-top:20px;border:1px solid var(--stage-line);background:var(--stage-2);padding:20px 18px}
.bar{display:grid;grid-template-columns:minmax(96px,132px) 1fr 84px;gap:14px;align-items:center;
  padding:8px 0;font-size:var(--t-xs)}
.bar>span:first-child{color:var(--on-stage-2)}
.bar i{display:block;height:10px;background:#3E7F6E}
.bar i.warn{background:#8A6A22}
.bar i.loss{background:#7E3A34}
.bar>span:last-child{text-align:right;font-family:var(--mono);color:var(--on-stage);
  font-variant-numeric:tabular-nums}

/* ---------------- CLOSE ---------------- */
.close{padding-block:var(--pad-sect);border-top:var(--hair)}
.close .gh-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,60px);align-items:end}
.close h2{font-size:var(--t-h1);line-height:1.05;margin-top:12px}
.close p{font-size:var(--t-sm);color:var(--muted);max-width:48ch;margin-bottom:18px}

/* ---------------- FOOTER ---------------- */
.foot{background:var(--stage);color:var(--on-stage-3);padding-block:34px}
.foot .gh-wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;
  justify-content:space-between;font:400 var(--t-xs)/1.7 var(--mono);letter-spacing:.04em}
.foot a{color:var(--on-stage-2);text-decoration:none}
.foot a:hover{color:var(--gold-on)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .hero .gh-wrap,.ledger-head,.method-grid,.close .gh-wrap{grid-template-columns:1fr}
  .brief{margin-top:6px}
  .brief::before{display:none}
  .ledger-head,.close .gh-wrap{gap:16px;align-items:start}
}
@media (max-width:820px){
  .nav-links{display:none}
  .case{grid-template-columns:46px minmax(0,1fr);gap:14px}
  .case .readout{grid-column:1/-1;margin-top:16px}
  .principles div{border-right:0;border-bottom:var(--hair-soft);padding:18px 0}
  .principles div:last-child{border-bottom:0}
}
@media (max-width:520px){
  .hero{background-size:38px 38px}
  .case{grid-template-columns:1fr}
  .case-n{font-size:1.35rem;margin-bottom:-6px}
  .case .readout{grid-column:auto}
  .bar{grid-template-columns:1fr 78px;row-gap:4px}
  .bar i{grid-column:1/-1;order:3}
}