/* KOHAUS draft site v2: plain CSS, no build step.
   Palette per brand/KOHAUS_BRAND_IDENTITY.md §5; type per §6 (self-hosted, OFL).
   Thai-capable system fallbacks are listed after the brand fonts. */
@font-face{font-family:"Inter";src:url("../fonts/Inter-var-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("../fonts/CrimsonPro-var-latin.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("../fonts/CrimsonPro-Italic-var-latin.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --ink:#1B1D1F; --graphite:#3B3F43; --slate:#4E6372; --slate-mid:#697F90;
  --cool:#9DA5AC; --mist:#C5C8CC; --hair:#EAEAEC; --paper:#FEFEFE; --warm:#F6F4F0;
  --serif:"Crimson Pro","Iowan Old Style","Palatino Linotype",Georgia,"Noto Serif Thai","Thonburi",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Thai","Sukhumvit Set","Leelawadee UI",sans-serif;
  --wrap:76rem; --measure:36rem;
  --space:clamp(4.5rem,9vw,8rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--slate);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.measure{max-width:var(--measure)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The single draft bar */
.preview-bar{background:var(--ink);color:#D9DCDF;font:500 .72rem/1.4 var(--sans);letter-spacing:.06em;text-align:center;padding:.45rem 1rem}
.preview-bar strong{color:var(--paper);letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/* Header */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-top:1.5rem;padding-bottom:1.5rem;flex-wrap:wrap}
.wordmark{font:400 1.45rem/1 var(--serif);letter-spacing:.34em;color:var(--ink);text-decoration:none;margin-right:-.34em}
.wordmark:hover{color:var(--ink)}
.labs{letter-spacing:.02em;color:var(--slate)}
/* Author site: the wordmark is KT's name (KT, 2026-11-01); same serif, tighter tracking for a long name */
.wordmark-name{letter-spacing:.06em;margin-right:0}
.site-footer .fw-name{letter-spacing:.06em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.75rem}
.nav a{font:450 .88rem/1.3 var(--sans);color:var(--graphite);text-decoration:none;padding:.25rem 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--mist)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav .short{display:none}

/* Type system */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0 0 .5em;text-wrap:balance}
.display{font-size:clamp(3rem,7.2vw,5.75rem);line-height:.98;letter-spacing:-.02em;margin-bottom:.35em}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.01em}
h3{font-size:1.45rem;line-height:1.2}
p{margin:0 0 1.1em}
.eyebrow{font:500 .74rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin:0 0 1.4rem}
.spaced{font:500 .8rem/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--graphite)}
.lede{font:400 clamp(1.3rem,2.1vw,1.6rem)/1.4 var(--serif);color:var(--graphite);text-wrap:pretty}
.small{font-size:.86rem;color:var(--graphite)}
.subtitle{font:400 1.25rem/1.4 var(--sans);color:var(--slate);margin:0 0 1.4rem}
cite{font-style:italic}
.muted{color:var(--cool)}

/* Sections: fewer, larger */
section{padding:var(--space) 0}
.band{background:var(--warm)}
.rule{border:0;height:1px;background:var(--hair);margin:0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.section-head h2{margin:0}

/* Buttons and links */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:2.25rem 0 0}
.btn{display:inline-block;font:500 .95rem/1 var(--sans);text-decoration:none;padding:1rem 1.5rem;border:1px solid var(--ink);color:var(--ink);background:transparent;letter-spacing:.01em}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--graphite);border-color:var(--graphite)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.arrow-link{display:inline-block;font:500 .95rem/1.4 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mist);padding-bottom:.15rem}
.arrow-link:hover{border-bottom-color:var(--ink)}

/* Discreet "to come" markers (full list in README) */
.todo{font:500 .78rem/1.5 var(--sans);letter-spacing:.01em;color:#6E5314;background:#F8F1DE;padding:.12em .5em;border-radius:2px;white-space:normal}
.todo::before{content:"◦ ";color:#B08A2E}
.draft-tag{display:inline-block;font:600 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8A3B12;border:1px solid #D9B8A6;padding:.32rem .45rem;vertical-align:middle}

/* Hero */
.hero{padding:clamp(3rem,6vw,5.5rem) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.hero .lede{max-width:27em;color:var(--graphite)}
.hero .kicker{font:400 .95rem/1.5 var(--sans);color:var(--graphite);margin-top:1.75rem}
.cover{margin:0;justify-self:center}
.cover img{width:100%;max-width:360px;box-shadow:0 1px 2px rgba(27,29,31,.12),0 24px 48px -18px rgba(27,29,31,.35),0 60px 80px -60px rgba(78,99,114,.35);background:var(--paper)}
.cover figcaption{font:400 .78rem/1.5 var(--sans);color:var(--cool);margin-top:1.1rem;text-align:center}

/* Proof strip: verifiable facts only */
.proof{margin-top:clamp(3.5rem,6vw,5rem);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.proof dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.proof div{padding:1.4rem 1.25rem 1.4rem 0}
.proof div+div{padding-left:1.25rem;border-left:1px solid var(--hair)}
.proof dt{font:500 .68rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cool);margin-bottom:.35rem}
.proof dd{margin:0;font:400 1.05rem/1.35 var(--serif);color:var(--ink)}

/* Pull quote band with the brushstroke used once */
.quote-band{position:relative;overflow:hidden;background:var(--warm)}
.quote-band .brush{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:46%;max-width:760px;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.quote-band .wrap{position:relative}
.pull{margin:0;max-width:min(40rem,60%)}
.pull p{font:400 clamp(1.9rem,4.2vw,3.25rem)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0 0 1.5rem;text-wrap:balance}
.pull footer{font:500 .74rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.pull.center{margin:0 auto;text-align:center;max-width:52rem}

/* Two-column layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.split-56{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}

/* Compact lists */
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.list li{padding:1.25rem 0;border-bottom:1px solid var(--hair)}
.list h3{font-size:1.35rem;margin:.55rem 0 .3rem}
.list h3 a{color:var(--ink);text-decoration:none}
.list h3 a:hover{text-decoration:underline;text-decoration-color:var(--mist)}
.list p{margin:0;color:var(--graphite);font-size:.95rem}

/* Book page */
.book-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.book-hero .cover{position:sticky;top:2rem}
.buybox{margin-top:2.25rem;padding:1.5rem 0 0;border-top:1px solid var(--hair)}
.buybox .actions{margin-top:0}
.audience{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);margin-top:2.5rem}
.audience div{padding:1.5rem 1.5rem 0 0}
.audience div+div{padding-left:1.5rem;border-left:1px solid var(--hair)}
.audience h3{font-size:1.4rem;margin-bottom:.6rem}
.audience p{font-size:.92rem;color:var(--graphite);margin:0}
.covers{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.covers li{padding-left:1.6rem;position:relative}
.covers li::before{content:"";position:absolute;left:0;top:.8em;width:.9rem;height:1px;background:var(--slate)}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem clamp(2.5rem,6vw,6rem);margin-top:3rem}
.part-label{font:500 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin:0 0 .4rem}
.part h3{font-size:1.75rem;margin:0 0 1rem}
.part ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.part li{padding:.85rem 0;border-bottom:1px solid var(--hair)}
.part .ch{font:400 1.12rem/1.35 var(--serif);color:var(--ink);display:block}
.part .ch b{font:500 .78rem/1 var(--sans);color:var(--cool);margin-right:.6rem;letter-spacing:.04em}
.part .hl{display:block;font:400 .86rem/1.5 var(--sans);color:var(--graphite);margin-top:.25rem}
.excerpts{display:grid;gap:3rem;max-width:44rem}
.excerpts blockquote{margin:0;padding-left:1.75rem;border-left:1px solid var(--mist)}
.excerpts blockquote p{font:400 1.55rem/1.38 var(--serif);margin:0 0 .7rem}
.excerpts blockquote footer{font-size:.84rem;color:var(--slate)}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 2rem;margin:0;font-size:.95rem}
dl.facts dt{color:var(--cool);font-size:.86rem;padding-top:.08rem}
dl.facts dd{margin:0}

/* Author */
.portrait-slot{aspect-ratio:4/5;background:var(--warm);border:1px solid var(--hair);display:flex;align-items:flex-end;padding:1.25rem;max-width:420px}
/* Author photo: dark studio portrait shown as-is (no filters), cropped to a circle with a quiet hairline ring (KT, 2026-11-01) */
.portrait{margin:0;max-width:360px}
.portrait picture{display:block;padding:8px;background:var(--paper);border:1px solid var(--hair);border-radius:50%}
.portrait img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;border-radius:50%;background:var(--ink)}
.portrait figcaption{margin-top:.7rem;font-size:.78rem;color:var(--cool);text-align:center}
.portrait-sm{max-width:160px;margin-bottom:2rem}
.portrait-sm picture{padding:5px}
@media (max-width:560px){.portrait{max-width:260px}.portrait-sm{max-width:130px}}
.bio p{max-width:var(--measure)}

/* Press kit */
.kit-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2rem;font-size:.9rem}
.bio-block{border-top:1px solid var(--hair);padding:1.75rem 0}
.bio-block:last-child{border-bottom:1px solid var(--hair)}
.bio-block h3{font:500 .74rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin:0 0 .8rem}
.bio-block h3 span{color:var(--cool);letter-spacing:.06em;text-transform:none;font-weight:400;margin-left:.5rem}
.bio-block p{font:400 1.18rem/1.55 var(--serif);max-width:40rem}
.downloads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.dl-card{display:flex;flex-direction:column;gap:.9rem}
.dl-card .thumb{aspect-ratio:3/4;background:var(--warm);display:flex;align-items:center;justify-content:center;padding:1.5rem;border:1px solid var(--hair)}
.dl-card .thumb img{max-height:100%;width:auto;box-shadow:0 14px 30px -14px rgba(27,29,31,.4)}
.dl-card .thumb.photo img{box-shadow:none;width:100%;height:100%;object-fit:cover}
.dl-card .thumb.photo{padding:0}
.dl-card h3{font-size:1.2rem;margin:0}
.topics{list-style:none;margin:0;padding:0;counter-reset:t;border-top:1px solid var(--hair)}
.topics li{counter-increment:t;display:grid;grid-template-columns:3rem 1fr;gap:0 1rem;padding:1.4rem 0;border-bottom:1px solid var(--hair)}
.topics li::before{content:counter(t,decimal-leading-zero);font:400 1.4rem/1.2 var(--serif);color:var(--cool)}
.topics h3{font-size:1.3rem;margin:0 0 .3rem}
.topics p{margin:0;font-size:.92rem;color:var(--graphite)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.quotes blockquote{margin:0;padding-top:1.25rem;border-top:1px solid var(--ink)}
.quotes p{font:400 1.25rem/1.4 var(--serif);margin:0 0 .8rem}
.quotes footer{font-size:.8rem;color:var(--slate)}


/* Footer */
.site-footer{background:var(--warm);border-top:1px solid var(--hair);padding:3.5rem 0 3rem;font-size:.86rem;color:var(--graphite)}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:2rem}
.site-footer p{margin:0 0 .45rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.site-footer a{color:var(--graphite);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.site-footer .fw{font:400 1.2rem/1 var(--serif);letter-spacing:.34em;color:var(--ink);margin-bottom:.9rem}

@media (max-width:900px){
  .hero-grid,.split,.split-56,.book-hero,.footer-grid{grid-template-columns:1fr}
  .proof dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof div,.proof div+div{padding:1.1rem 1rem 1.1rem 0;border-left:0}
  .proof div:nth-child(even){padding-left:1rem;border-left:1px solid var(--hair)}
  .proof div:nth-child(n+3){border-top:1px solid var(--hair)}
  .audience{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audience div,.audience div+div{padding:1.5rem 1rem 1.5rem 0;border-left:0}
  .audience div:nth-child(even){padding-left:1rem;border-left:1px solid var(--hair)}
  .parts,.downloads,.quotes{grid-template-columns:1fr}
  .book-hero .cover{position:static}
  .quote-band .brush{position:relative;right:auto;top:auto;transform:none;width:120%;max-width:none;margin:-2rem -10% -1rem auto;opacity:.75}
  .cover img{max-width:300px}
}
@media (max-width:560px){
  body{font-size:1rem}
  .nav .long{display:none}.nav .short{display:inline}
  .site-header .wrap{gap:.9rem 1.25rem}
  .nav ul{gap:.3rem 1.1rem}
  .wordmark{font-size:1.3rem}
  .wordmark-name{font-size:1.15rem}
  .proof dd{font-size:.98rem}
  .audience{grid-template-columns:1fr}
  .audience div:nth-child(even){padding-left:0;border-left:0}
  .audience div+div{border-top:1px solid var(--hair)}
  dl.facts{grid-template-columns:1fr;gap:.05rem}
  dl.facts dd{margin-bottom:.7rem}
  .cover img{max-width:240px}
}
@media print{.preview-bar,.nav{display:none}}
.art-col{align-self:start;justify-self:end;max-width:300px}
.art-col img{width:100%;height:auto}
@media (max-width:900px){.art-col{display:none}}
@media (max-width:900px){.pull{max-width:none}}