@font-face { font-family:"Poiret One"; src:url("../assets/fonts/PoiretOne-Regular.woff2") format("woff2"), url("../assets/fonts/PoiretOne-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Anti Grotesk"; src:local("Anti Grotesk"),local("AntiGrotesk"); font-display:swap; }
:root { color-scheme:dark; --plum:#302536; --mint:#e3f0da; --muted:#bdb4c2; --lime:#dcfa91; --line:#e3f0da30; --display:"Anti Grotesk","Poiret One",sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--plum); color:var(--mint); font:400 1rem/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; text-underline-offset:4px; }
button,input { font:inherit; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
::selection { color:var(--plum); background:var(--mint); }
[hidden] { display:none!important; }
.page { max-width:1500px; margin:auto; padding-inline:clamp(20px,4.5vw,72px); }
.header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header a,.footer a { text-decoration:none; }
.skip-link { position:absolute; top:-100px; left:20px; padding:12px 18px; z-index:100; background:var(--mint); color:var(--plum); }
.skip-link:focus { top:20px; }
.eyebrow,.article-meta { font-size:.75rem; letter-spacing:.075em; color:var(--muted); }
.journal-hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(28px,6vw,90px); padding:50px 0 72px; }
.journal-hero h1 { font:400 clamp(3.4rem,7.6vw,8rem)/1.02 var(--display); letter-spacing:-.045em; margin:20px 0 24px; }
.journal-hero .lead { max-width:35rem; color:var(--muted); font-size:clamp(1rem,1.5vw,1.2rem); }
.journal-hero img { display:block; width:100%; height:auto; }
.article-hero h1 { font-size:clamp(2.5rem,5.3vw,5.6rem); line-height:1.08; }
.article-hero { padding-bottom:48px; }
.article-hero .article-meta { margin-top:24px; }
.notes-list { border-top:1px solid var(--line); }
.note { display:grid; grid-template-columns:50px minmax(0,1fr) 220px; align-items:center; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); }
.note-number { align-self:start; color:var(--muted); font-size:.8rem; padding-top:4px; }
.note h2 { max-width:24ch; font:400 clamp(2rem,3.3vw,3.4rem)/1.12 var(--display); letter-spacing:-.025em; margin:10px 0 14px; }
.note h2 a { text-decoration:none; }
.note h2 a:hover { text-decoration:underline; text-decoration-thickness:1px; }
.note p:not(.eyebrow) { max-width:38rem; color:var(--muted); }
.note-image img { display:block; width:100%; height:auto; }
.article-body { max-width:760px; margin:0 auto; }
.article-body>p,.article-body>ul,.article-body>ol { margin-block:20px; }
.article-body h2 { font:400 clamp(2rem,3.6vw,3.2rem)/1.15 var(--display); letter-spacing:-.025em; margin:52px 0 20px; }
.article-body h3 { font-size:1.1rem; line-height:1.4; margin:30px 0 12px; }
.article-body li { padding-left:5px; margin:12px 0; }
.article-body strong { font-weight:600; }
.article-body .source-note { font-size:.875rem; color:var(--muted); }
.takeaway { border-left:2px solid var(--mint); padding:16px 0 16px 24px; margin-block:32px; }
.experiment { padding:clamp(18px,4vw,32px); border:1px solid var(--line); margin-block:28px; }
.experiment-label { font-size:.75rem; letter-spacing:.08em; margin-bottom:16px; color:var(--muted); }
.demo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.demo-actions button { border:1px solid var(--line); padding:10px 16px; min-height:44px; background:transparent; color:var(--mint); border-radius:0; }
.demo-actions button:hover { background:var(--mint); color:var(--plum); }
.demo-note { font-size:.875rem; color:var(--muted); margin-top:16px; }
.hierarchy-poster { background:#dce9cd; color:#302536; padding:clamp(24px,5vw,56px); min-height:280px; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.hierarchy-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.hierarchy-main { max-width:12ch; font-size:clamp(2.3rem,6vw,4.2rem); line-height:1.05; letter-spacing:-.05em; font-weight:650; }
.hierarchy-detail { font-size:16px; }
.hierarchy-poster.is-flat p { font-size:18px; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.5; max-width:none; }
.color-controls { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.color-controls label { display:flex; align-items:center; gap:12px; font-size:.875rem; }
.color-controls input { width:48px; height:44px; padding:2px; border:1px solid var(--line); background:transparent; cursor:pointer; }
.contrast-preview { padding:32px 24px; background:#dce9cd; color:#302536; font-size:18px; }
.contrast-preview p:first-child { font-size:32px; line-height:1.15; margin-bottom:16px; }
.contrast-result { display:block; margin-top:18px; font-size:.875rem; }
.content-plan { border-top:1px solid var(--line); margin-block:28px; }
.content-plan>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.content-plan dt { font-weight:600; }
.content-plan dd { margin:0; }
.inquiry { margin-block:72px 40px; padding:clamp(24px,4vw,48px); background:var(--mint); color:var(--plum); }
.inquiry .eyebrow { color:inherit; }
.inquiry h2 { max-width:22ch; font:400 clamp(2.3rem,4vw,4rem)/1.1 var(--display); letter-spacing:-.035em; margin:16px 0 20px; }
.inquiry p { max-width:42rem; }
.inquiry-links { display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; margin-top:24px; }
.inquiry-links a { display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; }
.related { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding-block:32px; border-block:1px solid var(--line); font-size:.9rem; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:28px; color:var(--muted); font-size:.8rem; }
@media(max-width:760px) {
  .journal-hero { grid-template-columns:1fr; gap:28px; padding:28px 0 48px; }
  .journal-hero img { max-width:520px; }
  .journal-hero h1 { font-size:clamp(3rem,11vw,5rem); }
  .article-hero h1 { font-size:clamp(2.4rem,9vw,4rem); }
  .note { grid-template-columns:28px minmax(0,1fr); gap:16px; }
  .note-image { grid-column:2; max-width:260px; }
  .note h2 { font-size:2.2rem; }
  .article-body h2 { margin-top:40px; }
}
@media(max-width:400px) { .content-plan>div { grid-template-columns:1fr; gap:4px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }