/* ==========================================================================
   dongaforall.com — Terton Capital (styling lifted from golfzonfairvalue.com)
   Typography, colour and spacing taken from the LIVE Webflow site
   (www.tertoncapital.com, terton.webflow.shared.b0d1f9fd6.css). That file is
   the source of truth, not the Astro repo and not the brand guide PDF.
   Two faces only — Bricolage Grotesque (display) and Hanken Grotesk (body).
   The live site uses no monospace and no serif; neither does this page.
   ========================================================================== */

/* Self-hosted, SHA-256 identical to the files tertoncapital.com serves.
   Copied locally rather than hot-linked, so this site does not depend on an
   external project staying alive. unicode-range splits match the source. */
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* lifted from the live site */
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --maxw:1180px;
  --rail:200px;
  --band-y:clamp(5rem,11vh,9rem);
  --foot-y:clamp(3.5rem,7vh,5.5rem);
  --ease:cubic-bezier(0.16,1,0.3,1);

  --data-offer:#f1a45a;   /* --color-data-2 */
  --data-value:#4086aa;   /* --color-data-4 — the live site uses this for source links */

  /* Hangul falls through to the Korean system faces; Bricolage and Hanken
     carry no Hangul, and the live site has no Korean pages to copy from. */
  --kr:'Apple SD Gothic Neo','Pretendard','Malgun Gothic';
  --sans:'Hanken Grotesk',var(--kr),ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque',var(--kr),ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:var(--sans);font-optical-sizing:auto;
  font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.62;
  background:#000;color:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dd,dl{margin:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.6rem;z-index:100;background:#fff;color:#000;padding:.5rem .8rem}

/* --------------------------------------------------------------------------
   Bands. Palette is redefined per band as local custom properties, so every
   component below is written once and inverts for free.
   -------------------------------------------------------------------------- */
.band{padding-block:var(--band-y);padding-inline:var(--gutter);position:relative;
  background:var(--bg);color:var(--fg)}
.band-dark{--bg:#000;--fg:#fff;--rule:#232323;--muted:#8f8f8f;--faint:#5c5c5c;
  --copy:#cbcbcb;--hero-copy:#c9c9c9;--panel:#0c0c0c;--tint:#0a0a0a}
.band-light{--bg:#fff;--fg:#0a0a0a;--rule:#e6e6e6;--muted:#6b6b6b;--faint:#9a9a9a;
  --copy:#333;--hero-copy:#333;--panel:#fafafa;--tint:#f7f7f7}

/* Texture: a dot lattice at the gap plot's own pitch, barely present. */
.band-dark::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.5) 1px,transparent 0);
  background-size:14px 14px;opacity:.045}
.band-light::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.5) 1px,transparent 0);
  background-size:14px 14px;opacity:.035}
.band > *{position:relative}

/* --------------------------------------------------------------------------
   The rail — the live site's grid2 + sticky label, and the colon device
   -------------------------------------------------------------------------- */
.rail{max-width:var(--maxw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4.5rem);align-items:start}
.label{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.03em;
  line-height:1;position:sticky;top:var(--band-y);color:var(--fg)}
.wide{max-width:var(--maxw);margin-inline:auto}
@media (max-width:860px){
  .rail{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .rail > *{min-width:0}
  .label{position:static;margin-bottom:.2rem}
}

/* --------------------------------------------------------------------------
   Type. Every value here has a counterpart in the live stylesheet.
   -------------------------------------------------------------------------- */
/* .t-eyebrow — Hanken, .7rem, 600, .14em, uppercase */
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--muted)}
/* Caps need the tracking opened back up; title-case eyebrows do not. */
.eyebrow-caps{letter-spacing:.14em}
/* .t-th-meta — .74rem, 600, .12em, uppercase */
.cite{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.55rem}
/* .t-hero-h1 */
h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(1.65rem,5.25vw,4.2rem);max-width:28ch;overflow-wrap:break-word}
/* .t-lede — the live section heading */
h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(1.5rem,3.4vw,2.7rem);overflow-wrap:break-word}
h3{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.4}
/* .t-hero-copy — 52ch, clamp(1.05rem,1.4vw,1.25rem), 1.5 */
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;max-width:52ch;
  color:var(--hero-copy);margin-top:1.8rem}
.lede strong{color:var(--fg);font-weight:700}
/* .t-copy — 46ch, 1.62 */
.prose{max-width:46ch;color:var(--copy)}
.prose p{margin-bottom:1.2rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--fg);font-weight:700}
.sub{max-width:46ch;color:var(--copy);margin-top:1.2rem}
.num{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em}
.is-offer{color:var(--data-offer)}
.is-value{color:var(--data-value)}
/* footnote marks */
.fn{font-size:.62em;vertical-align:super;line-height:0;color:var(--muted);padding-left:.12em}
a.fn:hover{color:var(--fg)}

/* the live site's link underline and arrow nudge */
.ul{position:relative}
.ul::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.ul:hover::after{transform:scaleX(1)}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arrow{transform:translateX(4px)}


/* --------------------------------------------------------------------------
   Masthead — .t-brand
   -------------------------------------------------------------------------- */
.mast{background:#000;color:#fff;border-bottom:1px solid #232323;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.6rem 1.5rem;padding:1.3rem var(--gutter)}
.mast-brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.04em;white-space:nowrap}
.mast-brand .thin{font-weight:500;color:#8f8f8f}
.mast-nav{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:600;color:#a3a3a3}
.mast-nav a{display:inline-flex;align-items:center;min-height:44px}
.mast-nav a:hover{color:#fff}
.label .thin{color:var(--muted);font-weight:500}

/* --------------------------------------------------------------------------
   Materials — Golfzon's .letter rows
   -------------------------------------------------------------------------- */
#materials .eyebrow{display:block}
.letters{margin-top:clamp(1.25rem,3vh,2rem);border-top:1px solid var(--fg)}
.letter{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.4rem clamp(1.25rem,3vw,2.5rem);align-items:center;
  padding:1.6rem 0;border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease)}
.letter:hover{padding-left:.6rem}
.letter h3{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:-.015em;line-height:1.2}
.letter .kind{margin:0 0 .4rem;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.letter .meta{margin-top:.45rem;font-size:.9rem;color:var(--muted)}
.letter .files{display:flex;gap:.5rem;flex-wrap:wrap;white-space:nowrap}
.letter .files a{font-size:.85rem;padding:.42rem .95rem;border:1px solid var(--rule);
  border-radius:999px;transition:.25s var(--ease)}
.letter .files a:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media (max-width:560px){
  .letter{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .letter:hover{padding-left:0}
}

/* --------------------------------------------------------------------------
   The case — numbered points with an oversized folio numeral
   -------------------------------------------------------------------------- */
.points{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.point{display:grid;grid-template-columns:3.2rem minmax(0,1fr);
  gap:1rem clamp(1.25rem,3vw,2.75rem);align-items:start;
  padding:clamp(2rem,5vh,3rem) 0;border-bottom:1px solid var(--rule)}
.folio{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:.9;letter-spacing:-.04em;color:var(--fg);font-variant-numeric:lining-nums}
.pt-text h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.pt-text p{margin-top:1rem;max-width:46ch;color:var(--copy)}
.pt-side{margin:0;padding-top:.35rem}

/* 1 — fact list */
.facts > div{padding:1rem 0;border-top:1px solid var(--rule)}
.facts > div:first-child{border-top:0;padding-top:0}
.facts dt{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.015em}
.facts dd{margin:.3rem 0 0;font-size:.95rem;line-height:1.55;color:var(--copy)}

/* 2 — price vs value bars */
.bars{display:grid;gap:.7rem}
.bar-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);align-items:center;gap:1rem}
.bar-l{font-size:.9rem;color:var(--copy)}
.bar{display:block;height:2.4rem}
.bar i{display:flex;align-items:center;justify-content:flex-end;height:100%;width:var(--w);
  min-width:max-content;border-radius:2px;
  clip-path:inset(0);transition:clip-path 1s var(--ease) .2s}
.bar i.is-offer{background:var(--data-offer);color:#0a0a0a}
.bar i.is-value{background:var(--data-value);color:#fff}
.bar b{font-style:normal;padding:0 .75rem;font-weight:700;font-size:.95rem;white-space:nowrap}
.js .point:not(.in) .bar i{clip-path:inset(0 100% 0 0)}
.cap{margin-top:1rem;font-size:.8rem;line-height:1.5;color:var(--muted)}

/* 3, 6 — figures (Golfzon .figs) */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem clamp(1.25rem,3vw,2.25rem)}
.fig dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-height:2.6em}
.fig dd{margin:0}
.fig .v{display:block;font-family:var(--display);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;white-space:nowrap;
  font-size:clamp(1.35rem,2.3vw,2rem);line-height:1;padding:.5rem 0 .85rem;
  border-bottom:1px solid var(--rule)}
.fig .v .to{font-weight:400;color:var(--muted)}
.fig .c{display:block;margin-top:.7rem;font-size:.85rem;line-height:1.55;color:var(--copy)}

/* 4, 5 — ruled lists */
.list{list-style:none;padding:.35rem 0 0}
.list li{padding:.95rem 0;border-top:1px solid var(--rule);font-size:.98rem;line-height:1.55;color:var(--copy)}
.list li:first-child{border-top:0;padding-top:0}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;color:var(--fg)}

@media (max-width:1100px){
  .point{grid-template-columns:3.2rem minmax(0,1fr)}
  .pt-side{grid-column:2}
}
@media (max-width:560px){
  .point{grid-template-columns:minmax(0,1fr);gap:1rem}
  .pt-side{grid-column:1;padding-top:.5rem}
  .figs{gap:1.4rem 1rem}
  .fig dt{font-size:.64rem}
  .fig .v{font-size:1.45rem}
  .bar-row{grid-template-columns:5.5rem minmax(0,1fr);gap:.6rem}
  .bar b{font-size:.85rem;padding:0 .5rem}
}

/* --------------------------------------------------------------------------
   Footer — .t-foot
   -------------------------------------------------------------------------- */
.foot{background:#000;color:#fff;border-top:1px solid #232323;
  padding:var(--foot-y) var(--gutter)}
.foot-in{max-width:var(--maxw);margin-inline:auto}
.notes{font-size:.7rem;line-height:1.7;color:#737373;max-width:80ch}
.notes p{margin-bottom:1rem}
.notes p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Reveal — visible by default; .js opts into hiding (same as Golfzon)
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .js .point .bar i{clip-path:none!important;transition:none!important}
  .ul::after,.letter{transition:none}
}

@media (max-width:640px){
  .mast{padding-block:1rem}
  .mast-nav{gap:1.2rem;font-size:.85rem}
}

/* Tighter top: Materials sits right under the header */
#materials{padding-top:clamp(2.5rem,5vh,3.5rem)}

/* Terton logo + site name, split by a hairline */
.mast-id{display:flex;align-items:center;gap:1rem}
.mast-logo{display:inline-flex;padding-right:1rem;border-right:1px solid #333}
.mast-logo img{height:22px;width:auto;display:block}
@media (max-width:420px){.mast-logo{padding-right:.75rem}.mast-id{gap:.75rem}.mast-brand{font-size:1.05rem}}
@media (max-width:560px){.mast-nav{display:none}.mast-logo img{height:18px}}