:root{
  --ink:#253028;--muted:#6f776f;--paper:#fbfaf6;--soft:#f0ede4;
  --line:rgba(37,48,40,.15);--accent:#82907b;--deep:#354139;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
body.issue2{--ink:#342c2b;--muted:#7c6f6b;--soft:#f2e9e4;--line:rgba(52,44,43,.15);--accent:#b78379;--deep:#433735}
img{display:block;width:100%;height:auto}
a{color:inherit}
.wrap{width:min(1140px,calc(100% - 44px));margin:auto}
.serif{font-family:Georgia,"Times New Roman",serif}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.topbar{position:absolute;z-index:3;top:0;left:0;right:0;color:#fff}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:22px}
.topbar a{text-decoration:none;font-size:12px;letter-spacing:.08em}
.issue-links{display:flex;gap:7px}.issue-links a{display:flex;min-width:32px;height:32px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(20,24,21,.18);backdrop-filter:blur(8px)}.issue-links a.current{background:#fff;color:var(--deep);border-color:#fff}
.hero{position:relative;min-height:84svh;display:flex;align-items:flex-end;overflow:hidden;background:#222}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 45%,rgba(0,0,0,.72))}
.hero-copy{position:relative;z-index:2;color:#fff;padding:44px 0 52px;max-width:760px}
.hero-copy .eyebrow{color:rgba(255,255,255,.75)}
.hero h1{font-size:clamp(42px,7vw,78px);line-height:.94;font-weight:500;margin:11px 0 13px}
.hero h1 small{display:block;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(14px,2vw,19px);font-weight:400;letter-spacing:.08em;margin-top:14px}
.hero p{font-size:clamp(15px,2vw,19px);margin:0;max-width:620px}
.intro{padding:64px 0 48px}
.intro-grid,.project-head{display:grid;grid-template-columns:1fr .9fr;gap:42px;align-items:end}
.intro h2{font-size:clamp(34px,5vw,56px);line-height:1.03;font-weight:500;margin:8px 0 0}
.intro p,.concept{font-size:17px;color:var(--muted);margin:0}
.project{padding:46px 0 82px;border-top:1px solid var(--line)}
.project-head{margin-bottom:25px}
.project h3{font-size:clamp(34px,4.5vw,51px);line-height:1;font-weight:500;margin:7px 0 0}
.thai-title{font-size:17px;color:var(--muted);margin-top:8px}
.concept strong{color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 12px}
.item{grid-column:span 6;align-self:start}
.item.wide{grid-column:span 7}.item.narrow{grid-column:span 5}.item.full{grid-column:1/-1}
.photo{margin:0;background:var(--soft);overflow:hidden}
.photo img{width:100%;height:auto;object-fit:contain}
.caption{padding:11px 2px 4px}
.caption b{display:block;font-size:13px;letter-spacing:.04em}
.caption span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.mood{margin-top:28px;background:var(--soft);border:1px solid var(--line);padding:16px}
.mood-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:13px}
.mood-head h4{font-size:28px;font-weight:500;margin:4px 0 0}
.mood-head p{font-size:13px;color:var(--muted);margin:0}
.mood-split{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.mood-panel{background:var(--paper);padding:14px;border:1px solid var(--line)}
.mood-panel img{max-height:360px;object-fit:cover}
.palette{display:flex;gap:8px;margin-top:15px}.swatch{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.09)}
.materials{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.material{height:88px;background:var(--paper);border:1px solid var(--line)}
.mini{font-size:13px;color:var(--muted);margin:12px 0 0}
.daynight{display:grid;grid-template-columns:1fr 1fr;gap:12px}.daynight figure{margin:0}.daynight figcaption{font-size:12px;letter-spacing:.08em;color:var(--muted);padding-top:8px}
.end{padding:60px 0 92px;text-align:center;border-top:1px solid var(--line)}
.end h5{font-size:38px;font-weight:500;margin:0}.end p{color:var(--muted);margin:10px auto 0;max-width:650px}
.sharebar{position:sticky;bottom:0;z-index:20;background:rgba(251,250,246,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sharebar .wrap{display:flex;gap:10px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.btn{flex:1;text-align:center;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:12px 14px;font-size:13px;font-weight:600}.btn.primary{background:var(--ink);color:#fff}
@media(max-width:760px){
  .wrap{width:min(100% - 28px,1140px)}
  .hero{min-height:76svh}.hero-copy{padding-bottom:42px}.topbar .wrap{padding-top:17px}
  .intro{padding:50px 0 40px}.intro-grid,.project-head,.mood-split{grid-template-columns:1fr}.intro-grid,.project-head{gap:14px}
  .project{padding:38px 0 66px}.grid{grid-template-columns:1fr;gap:24px}.item,.item.wide,.item.narrow,.item.full{grid-column:1/-1}
  .mood-head{display:block}.mood-head p{margin-top:5px}.daynight{grid-template-columns:1fr}
  .sharebar .wrap{width:100%;padding-left:11px;padding-right:11px}.btn{font-size:12px}
}