@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&family=Instrument+Sans:wght@400;500;600;650;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root { --paper:#f3f0eb; --ink:#211f1c; --muted:#544f4a; --blue:#0088ff; --readable-blue:#20588a; --rule:#211f1c2b; --nav-height: 12.7rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font: 400 18px/1.6 'Instrument Sans',system-ui,sans-serif; }
:lang(th) { font-family:'Instrument Sans','Noto Sans Thai',system-ui,sans-serif; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:.2em; }
a:hover { color:var(--readable-blue); }
:focus-visible { outline:2px solid var(--readable-blue); outline-offset:4px; border-radius:2px; }
.skip { position:fixed; top:1rem; left:1rem; padding:.5rem 1rem; background:var(--ink); color:white; transform:translateY(-200%); z-index:2; }
.skip:focus { transform:none; }
.wrap { width:min(100% - 96px,1014px); margin-inline:auto; }
.header { border-bottom:1px solid var(--rule); }
.header-inner { min-height:var(--nav-height); display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.brand { font:700 52px/.79 Gaegu,cursive; letter-spacing:-.07em; text-decoration:none; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:1.6rem; padding-top:1.75rem; }
.languages { font-size:14px; display:flex; gap:.45em; align-items:center; white-space:nowrap; }
.languages a { padding:.2rem .2rem; }
.languages [aria-current] { font-weight:700; }
nav { display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; justify-content:flex-end; }
nav a { text-decoration:none; padding:.2rem 0; }
nav a:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:minmax(0,.66fr) minmax(0,1fr); gap:2rem; align-items:center; padding-top:4rem; padding-bottom:3rem; }
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { font-weight:700; }
.hero h1 { font-size:clamp(3rem,7.6vw,5.25rem); line-height:1.04; letter-spacing:-.06em; margin:.3em 0; }
.hero h1 span { display:block; }
.accent { color:var(--blue); }
.hero h1:lang(th) { font-size:clamp(2.9rem,7.2vw,5.25rem); line-height:1.17; letter-spacing:-.035em; }
.eyebrow,dt,.section-label,small { font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; }
.eyebrow { max-width:24em; color:var(--muted); }
.lead { color:var(--muted); max-width:29ch; font-size:21px; line-height:1.52; }
.actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.65rem; }
.pill { display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--ink); padding:.25rem 1.2rem; border-radius:999px; font-size:15px; text-decoration:none; }
.primary { background:var(--ink); color:var(--paper); }
.primary:hover { background:var(--readable-blue); color:white; }
.hero-art { position:relative; width:100%; }
.hero-art img,.cards img,.closing img { mix-blend-mode:multiply; width:100%; }
.hero-art .heart-path { position:absolute; inset:0; width:100%; height:100%; }
.heart-path path,.divider path { fill:none; stroke:var(--blue); stroke-linecap:round; stroke-linejoin:round; }
.heart-path path { stroke-width:4.5; }
.hero-notes { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:2rem; border-top:1px solid var(--rule); padding-top:1rem; margin-top:.35rem; }
.hero-notes dd { font-size:15px; }
.hero-notes a:not(:hover) { text-decoration:none; }
dt,small { color:var(--readable-blue); }
.divider { display:block; width:min(100%,1300px); margin:auto; height:clamp(32px,7vw,83px); overflow:visible; }
.divider path { stroke-width:1.35; vector-effect:non-scaling-stroke; }
.section { display:grid; grid-template-columns:minmax(0,245px) minmax(0,1fr); gap:2rem; padding-block:clamp(4.5rem,11.5vw,9rem); scroll-margin-top:1.5rem; }
.section-label { display:flex; align-items:center; gap:.65em; align-self:start; margin-top:.6rem; }
.section-label span { color:var(--readable-blue); }
.section-label i { width:1.8rem; height:1px; background:var(--rule); flex:none; }
.section h2 { font-size:clamp(2.65rem,6.6vw,4.85rem); line-height:.99; letter-spacing:-.063em; max-width:16ch; margin-bottom:.35em; }
.section h2:lang(th) { line-height:1.21; letter-spacing:-.045em; max-width:19ch; }
.section p { font-size:clamp(1.1rem,2.2vw,1.45rem); line-height:1.55; max-width:51ch; }
.work { border-top:1px solid var(--rule); }
.cards { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.cards img { aspect-ratio:1.6; object-fit:contain; }
.card-rule { border-top:1px solid var(--rule); padding-top:.55rem; }
.cards h3 { font-size:1.45rem; letter-spacing:-.025em; }
.cards p { font-size:1rem; }
.section p.status { display:inline-block; color:var(--readable-blue); border:1px solid #0088ff66; border-radius:999px; padding:.2rem .65rem; font-size:.75rem; font-weight:700; margin-bottom:1.2rem; }
.project-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,190px); gap:1.65rem; align-items:start; }
aside { border:1px solid var(--rule); border-radius:12px; padding:1rem; }
aside p,aside dd { font-size:.88rem!important; }
aside dt { margin-top:.75rem; border-top:1px solid var(--rule); padding-top:.5rem; font-size:.66rem; }
.text-link { display:inline-block; margin-top:.9rem; font-weight:600; }
.email { margin-top:2rem; }
.email .eyebrow { font-size:.75rem; }
.email a { font-size:clamp(1.15rem,4vw,2.7rem); font-weight:700; letter-spacing:-.04em; overflow-wrap:anywhere; }
#collaborate { padding-bottom:2.2rem; }
.closing img { max-height:365px; object-fit:contain; }
.footer { border-top:1px solid var(--rule); padding:1.65rem 0 2rem; }
.footer-brand { display:block; font-size:clamp(2.2rem,13vw,9.4rem); line-height:.98; font-weight:700; letter-spacing:-.077em; text-align:center; white-space:nowrap; text-decoration:none; }
.footnotes { display:flex; justify-content:space-between; gap:1rem; }
.footnotes,.social { margin-top:1rem; font-size:.82rem; color:var(--muted); }
.article-bar,.article { width:min(100% - 40px,805px); margin:auto; padding-inline:clamp(0px,6vw,64px); }
.article-bar { display:flex; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; padding-top:2.5rem; align-items:center; font-size:1rem; }
.article { padding-top:.8rem; padding-bottom:4rem; font-size:1.125rem; }
.article-art img { margin-inline:auto; }
.article h1 { font-size:clamp(2.45rem,6vw,3.625rem); line-height:1.13; letter-spacing:-.045em; margin:.25em 0; }
.article .subtitle { font-size:clamp(1.15rem,3vw,1.65rem); margin-bottom:1.4rem; }
.article p { margin-bottom:1.15rem; overflow-wrap:break-word; }
.article h2 { font-size:1.55rem; margin-top:1.5rem; }
.article h3 { font-size:1.12rem; margin-top:1.1rem; }
.signature { margin:1.35rem 0; }
.article-cta { text-align:right; }
.draw path { stroke-dasharray:1; stroke-dashoffset:1; }
.draw.drawn path { stroke-dashoffset:0; transition:stroke-dashoffset 1.65s ease-in-out; }
@media(max-width:800px) {
  .wrap { width:calc(100% - 48px); }
  .header-inner { min-height:8.2rem; }
  .brand { font-size:43px; }
  .header-right { gap:.75rem; padding-top:0; }
  nav { font-size:.88rem; gap:.15rem .9rem; }
  .hero { padding-top:2.55rem; gap:1.25rem; }
  .hero h1 { font-size:clamp(2.7rem,8vw,4.1rem); }
  .lead { font-size:1.1rem; }
  .section { grid-template-columns:9rem minmax(0,1fr); gap:1rem; }
}
@media(max-width:560px) {
  .wrap { width:calc(100% - 40px); }
  .header-inner { min-height:0; padding-block:1rem; align-items:start; gap:1rem; }
  .brand { margin-top:.4rem; font-size:36px; }
  .header-right { gap:.35rem; }
  nav { display:grid; grid-template-columns:repeat(2,auto); text-align:right; }
  .hero,.section,.project-grid { grid-template-columns:minmax(0,1fr); }
  .hero h1 { font-size:clamp(3.1rem,12vw,4.2rem); }
  .hero h1:lang(th) { font-size:clamp(2.85rem,11.1vw,4.2rem); }
  .hero-notes { gap:1rem; }
  .hero-notes dd { font-size:.89rem; }
  .section { padding-block:3.2rem; }
  .section-label { margin:0; }
  .cards { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .cards img { max-height:185px; }
  .footnotes { display:block; }
  .footnotes span { display:block; }
  .footer-brand { font-size:clamp(1.6rem,12vw,4.3rem); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .draw path { stroke-dashoffset:0; transition:none; }
}