@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=EB+Garamond:ital,wght@0,400;0,500;1,500&family=Manrope:wght@400;500;600&display=swap');

:root { --paper:#f2ede1; --ink:#1b2925; --green:#173d33; --gold:#b68a3d; --red:#8d3e2f; --line:rgba(27,41,37,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); z-index:10; }
a { color:inherit; }
.masthead { height:74px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font:600 18px/1 Manrope,sans-serif; letter-spacing:.32em; text-decoration:none; }
.edition,.eyebrow { font:300 10px/1.4 "DM Mono",monospace; letter-spacing:.18em; text-transform:uppercase; }
.hero { min-height:calc(100vh - 74px); padding:clamp(70px,10vh,130px) 24px 80px; text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; overflow:hidden; }
.hero::before,.hero::after { content:""; width:210px; height:1px; background:var(--line); position:absolute; top:48%; }
.hero::before { left:0; }.hero::after { right:0; }
.eyebrow { color:var(--red); margin:0 0 34px; }
h1 { font:500 clamp(72px,13vw,180px)/.72 "EB Garamond",serif; letter-spacing:-.065em; margin:0; }
h1 em { color:var(--green); font-weight:400; }
.seal { margin:48px 0 34px; width:76px; height:76px; border:1px solid var(--gold); border-radius:50%; padding:5px; display:grid; place-items:center; }
.seal::before { content:""; position:absolute; width:64px; height:64px; border:1px dotted var(--gold); border-radius:50%; }
.seal span { font:500 21px/1 "EB Garamond",serif; color:var(--gold); }
.lede { max-width:690px; margin:0; font:400 clamp(21px,2.5vw,31px)/1.35 "EB Garamond",serif; }
.rule { height:80px; display:flex; align-items:center; gap:18px; color:var(--gold); }
.rule::before,.rule::after { content:""; height:1px; background:var(--line); flex:1; }
.rule span { font-size:8px; }
.manifesto,.work,.commonplace-invite { max-width:1180px; margin:auto; padding:100px clamp(24px,5vw,70px) 130px; display:grid; grid-template-columns:1fr 2.2fr; gap:8vw; }
.section-label span { display:block; color:var(--gold); font:300 10px "DM Mono"; margin-bottom:14px; }
.section-label h2 { margin:0; font:500 18px "EB Garamond",serif; font-style:italic; }
.prose p { margin:0 0 30px; font:400 clamp(21px,2.1vw,30px)/1.45 "EB Garamond",serif; }
.dropcap::first-letter { float:left; font-size:4em; line-height:.72; padding:.12em .1em 0 0; color:var(--red); }
.principles { background:var(--green); color:var(--paper); padding:100px clamp(24px,6vw,90px) 120px; }
.principles .section-label { max-width:1060px; margin:0 auto 60px; }
.principle-grid { max-width:1060px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); }
.principle-grid article { padding:38px 44px; border-top:1px solid rgba(242,237,225,.24); }
.principle-grid article:nth-child(odd) { border-right:1px solid rgba(242,237,225,.24); }
.principle-grid span { color:var(--gold); font:300 10px "DM Mono"; }
.principle-grid h3 { font:500 29px "EB Garamond",serif; margin:14px 0 10px; }
.principle-grid p { opacity:.7; font:400 14px/1.65 Manrope,sans-serif; max-width:360px; }
.work-list>div { display:grid; grid-template-columns:1fr 1.4fr; gap:35px; padding:26px 0; border-top:1px solid var(--line); }
.work-list strong { font:500 25px "EB Garamond",serif; }
.work-list p { margin:0; font-size:13px; line-height:1.6; opacity:.72; }
.commonplace-invite { border-top:1px solid var(--line); }
.commonplace-invite>div:last-child>p { max-width:650px; margin:0 0 28px; font:400 clamp(24px,3vw,38px)/1.35 "EB Garamond",serif; }
.text-link { display:inline-block; font:400 11px "DM Mono"; text-transform:uppercase; letter-spacing:.12em; text-underline-offset:7px; }
.colophon { text-align:center; padding:120px 24px; border-top:1px solid var(--line); }
.colophon blockquote { margin:0 0 25px; font:italic 500 clamp(35px,6vw,70px) "EB Garamond",serif; color:var(--red); }
.colophon p { font-size:12px; }.colophon a { text-underline-offset:4px; }
footer { padding:30px clamp(24px,5vw,76px); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font:300 10px "DM Mono"; text-transform:uppercase; letter-spacing:.1em; }
.cheese { font-size:20px; }
@media (max-width:720px) { .edition{display:none}.hero::before,.hero::after{display:none}.manifesto,.work,.commonplace-invite{grid-template-columns:1fr;padding-top:70px;gap:50px}.principle-grid{grid-template-columns:1fr}.principle-grid article:nth-child(odd){border-right:0}.work-list>div{grid-template-columns:1fr;gap:8px}footer p span{display:none}h1{font-size:22vw}.hero{min-height:88vh}.principles{padding-inline:24px} }
@media (prefers-reduced-motion:no-preference) { .hero>* { animation:rise .8s both; }.hero h1{animation-delay:.08s}.hero .seal{animation-delay:.18s}.hero .lede{animation-delay:.25s}@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} }