/* ==========================================================================
   golfzonfairvalue.com — Terton Capital
   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);max-width:24ch;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:baseline;justify-content:space-between;
  gap:1rem;padding:1.3rem var(--gutter)}
.mast-brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.04em}
.mast-brand .thin{font-weight:500;color:#8f8f8f}
.mast-right{display:flex;align-items:baseline;gap:1.5rem;
  font-size:.85rem;color:#a3a3a3}
.mast-right a:hover{color:#fff}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,12vh,8rem) var(--band-y)}
.hero .eyebrow{display:block;margin-bottom:1.4rem}

/* --------------------------------------------------------------------------
   Figures
   -------------------------------------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,6vh,4rem)}
.fig{padding-top:.9rem}
.fig dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-height:2.6em}
.fig .v{display:block;font-family:var(--display);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1;padding-bottom:.85rem;
  border-bottom:1px solid var(--rule)}
.fig .c{display:block;margin-top:.8rem;font-size:.85rem;line-height:1.55;color:var(--copy)}
/* currency as a unit mark so the numeral keeps the emphasis */
.cur{font-family:var(--sans);font-size:.42em;font-weight:600;letter-spacing:.1em;
  margin-left:.45em;color:var(--muted);vertical-align:.32em}
@media (max-width:880px){.figs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.figs{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   The gap plot — one dot = 500 KRW per share
   HTML dots, so the field wraps instead of scaling: no horizontal scroll and
   the labels stay at a real size.
   -------------------------------------------------------------------------- */
.plot{margin-top:.5rem}
.prow{padding:1.15rem 0;border-top:1px solid var(--rule)}
.prow:first-child{border-top:0;padding-top:0}
.prow.r1{--dot:var(--data-offer)}
.prow.r2{--dot:var(--fg)}
.prow.r3{--dot:var(--data-value)}
.prow .cite{margin-bottom:.4rem}
.prow .pv{font-family:var(--display);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.1;color:var(--dot)}
.dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:.85rem}
.dots i,.dots b{flex:none;width:7px;height:7px;border-radius:50%}
.dots i{background:var(--dot)}
.dots b{background:var(--rule)}
.plot-key{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.plot-key span{display:inline-flex;align-items:center;gap:.5rem}
.plot-key span i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dot,currentColor)}
.plot-key .r1{--dot:var(--data-offer)}
.plot-key .r2{--dot:var(--fg)}
.plot-key .r3{--dot:var(--data-value)}
.plot-key .u{color:var(--faint)}

.js .dots i{opacity:0}
.js .reveal.in .dots i{animation:plot .42s var(--ease) both;animation-delay:calc(var(--i,0)*14ms)}
@keyframes plot{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Governance: what the reform requires / what happened
   -------------------------------------------------------------------------- */
.gov{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--fg)}
.gov-head,.gov-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
.gov-head{border-bottom:1px solid var(--rule);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.gov-head span{padding:.9rem 0}
.gov-head span:last-child,.gov-row .did{padding-left:clamp(1.5rem,3vw,3rem);
  border-left:1px solid var(--rule)}
.gov-row{border-bottom:1px solid var(--rule);transition:background .4s var(--ease)}
.gov-row:hover{background:var(--tint)}
.gov-row > div{padding:1.7rem 0}
.gov-row .req{padding-right:clamp(1.5rem,3vw,3rem)}
.gov-row h3{margin-bottom:.6rem}
.gov-row p{font-size:.98rem;line-height:1.62;color:var(--copy)}
.gov-row strong{color:var(--fg);font-weight:700}
.gov-row em{font-style:italic}
.src{display:block;margin-top:.9rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
@media (max-width:860px){
  .gov-head{display:none}
  .gov-row{grid-template-columns:1fr;gap:0}
  .gov-row:hover{background:none}
  .gov-row > div::before{content:attr(data-l);display:block;margin-bottom:.7rem;
    font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--faint)}
  .gov-row .req{padding:1.5rem 0 1rem}
  .gov-row .did{padding:1rem 0 1.6rem 1rem;border-left:2px solid var(--rule)}
}

/* --------------------------------------------------------------------------
   Letters — .t-hub-item rows with an oversized folio numeral
   -------------------------------------------------------------------------- */
.letters{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--fg)}
.letter{display:grid;grid-template-columns:minmax(3.4rem,5.5rem) minmax(0,1fr) auto;
  gap:.4rem clamp(1.25rem,3vw,2.5rem);align-items:start;
  padding:1.9rem 0;border-bottom:1px solid var(--rule);
  transition:padding-left .4s var(--ease)}
.letter:hover{padding-left:.6rem}
.letter .ord{font-family:var(--display);font-weight:500;letter-spacing:-.055em;
  font-size:clamp(3.2rem,7vw,5.4rem);line-height:.76;color:var(--fg);
  font-variant-numeric:lining-nums}
.letter .ord .on{display:block;margin-top:.6rem;font-family:var(--sans);font-weight:400;
  font-size:.8rem;letter-spacing:.02em;line-height:1.35;color:var(--faint)}
.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 p{margin-top:.5rem;font-size:.95rem;line-height:1.6;color:var(--copy);max-width:52ch}
.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:760px){
  .letter{grid-template-columns:auto minmax(0,1fr);gap:.2rem 1.1rem;padding:1.5rem 0}
  .letter .ord{font-size:3rem}
  .letter .ord .on{margin-top:.4rem}
  .letter .files{grid-column:2;margin-top:1rem}
}

/* --------------------------------------------------------------------------
   Close — the live article blockquote
   -------------------------------------------------------------------------- */
blockquote{margin-top:2.4rem;padding-left:1.2rem;border-left:2px solid var(--fg);max-width:46ch}
blockquote p{font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.2;margin-bottom:.9rem}
blockquote cite{font-size:.85rem;letter-spacing:.02em;font-style:normal;color:var(--muted)}

/* --------------------------------------------------------------------------
   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}
.foot-top{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline;
  font-size:.85rem;color:#a3a3a3;padding-bottom:2.2rem;border-bottom:1px solid #232323}
.foot-top a{color:#fff}
.notes{margin-top:2.2rem;font-size:.7rem;line-height:1.7;color:#737373;max-width:80ch}
.notes p{margin-bottom:1rem}
.notes b{color:#a3a3a3;font-weight:600}
.notes em{color:#a3a3a3;font-style:italic}
.notes ol{margin:0 0 1rem;padding-left:1.4rem}
.notes li{margin-bottom:.4rem}
.notes li::marker{color:#3a3a3a}
.pagemark{margin-top:2.5rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#5c5c5c;display:flex;justify-content:space-between;gap:1rem}

/* --------------------------------------------------------------------------
   Floating Terton pill — mechanics from the live site's #tv2-menu
   -------------------------------------------------------------------------- */
.pill{position:fixed;z-index:50;
  right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vh,1.8rem);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pill.show{opacity:1;transform:none;pointer-events:auto}
.pill a{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.04em;
  padding:.65rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.95);color:#0a0a0a;
  box-shadow:0 6px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .25s var(--ease),color .25s var(--ease)}
.pill a .go{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.06em;
  color:#5a5a5a;transition:color .25s var(--ease)}
.pill a:hover{background:#0a0a0a;color:#fff}
.pill a:hover .go{color:#b3b3b3}
.pill.dark a{background:rgba(10,10,10,.9);color:#fff;box-shadow:0 6px 30px rgba(0,0,0,.18)}
.pill.dark a .go{color:#b3b3b3}
.pill.dark a:hover{background:#fff;color:#0a0a0a}
.pill.dark a:hover .go{color:#5a5a5a}

/* --------------------------------------------------------------------------
   Reveal — visible by default; the .js class is what opts into hiding, so a
   script failure degrades to plain visible content. Same as the live site.
   -------------------------------------------------------------------------- */
.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 .dots i{opacity:1!important}
  .js .reveal.in .dots i{animation:none!important}
  .ul::after,.letter,.gov-row,.pill{transition:none}
}

/* --------------------------------------------------------------------------
   Small screens — structural only. No type or colour overrides, so phones get
   the same system the live site uses.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .mast{padding-block:1.1rem}
  .mast-right{gap:1.1rem;font-size:.8rem}
  .figs{gap:1.5rem}
  .fig dt{min-height:0}
  .dots{gap:5px}
  .dots i,.dots b{width:6px;height:6px}
  .notes ol{padding-left:1.15rem}
  .pagemark{flex-direction:column;gap:.4rem}
  .foot{padding-bottom:5.5rem}   /* clear the floating pill */
}