:root{
  --bg:#EFE4D1; --surface:#F7EFE0; --ink:#2A2218; --muted:#6F6149;
  --terra:#BE4A2A; --green:#5C6B4C; --line:#CFC1A6; --line-soft:#DDD1B8;
  --grain:0.045;
}
[data-theme="dark"]{
  --bg:#13170E; --surface:#1A1F13; --ink:#ECE2CF; --muted:#9C9078;
  --terra:#D2683D; --green:#8FA06F; --line:#39402D; --line-soft:#2A301F;
  --grain:0.06;
}
*{box-sizing:border-box;margin:0;padding:0;}
.skip{position:absolute; left:-9999px; top:auto; background:var(--terra); color:var(--bg); padding:10px 16px; font-family:'IBM Plex Mono',monospace; font-size:13px; z-index:100; text-decoration:none;}
.skip:focus{left:8px; top:8px;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono{font-family:'IBM Plex Mono',monospace;}
.disp{font-family:'Fraunces',Georgia,serif;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.terra{color:var(--terra);}
.marginalia{font-family:'Fraunces',serif; font-style:italic; color:var(--terra); font-size:1.05rem; line-height:1.4;}

header.bar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.bar-in{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brandmark{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:16px; letter-spacing:.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px;}
.brandmark .dot{width:9px; height:9px; background:var(--terra); display:inline-block;}
nav.links{display:flex; align-items:center; gap:26px;}
nav.links a{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--muted); text-decoration:none; transition:color .2s;}
nav.links a:hover{color:var(--terra);}
.themebtn{background:none; border:1px solid var(--line); color:var(--ink); width:34px; height:34px; border-radius:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:border-color .2s, color .2s;}
.themebtn:hover{border-color:var(--terra); color:var(--terra);}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.03em; padding:13px 22px; text-decoration:none; cursor:pointer; border:1px solid var(--terra); transition:all .22s ease;}
.btn-fill{background:var(--terra); color:var(--bg); }
.btn-fill:hover{background:transparent; color:var(--terra);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--terra); color:var(--terra);}
.menubtn{display:none; background:none; border:1px solid var(--line); color:var(--ink); width:34px; height:34px; cursor:pointer; align-items:center; justify-content:center; font-size:17px; transition:border-color .2s,color .2s;}
.menubtn:hover{border-color:var(--terra); color:var(--terra);}
.mobile-menu{display:none;}
@media(max-width:720px){
  nav.links .navlink{display:none;}
  .menubtn{display:flex;}
  .mobile-menu{position:absolute; top:62px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:6px 28px 16px; z-index:49;}
  .mobile-menu[hidden]{display:none;}
  .mobile-menu:not([hidden]){display:flex; flex-direction:column;}
  .mobile-menu a{font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.04em; color:var(--ink); text-decoration:none; padding:12px 0; border-bottom:1px dotted var(--line);}
  .mobile-menu a:last-child{border-bottom:0;}
}

.hero{padding:70px 0 84px; position:relative;}
.platenum{position:absolute; top:18px; right:0; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(7rem,22vw,16rem); line-height:.8; color:var(--line-soft); opacity:.55; z-index:0; pointer-events:none; user-select:none;}
.hero-grid{display:grid; grid-template-columns:1.45fr 1fr; gap:54px; align-items:start; position:relative; z-index:2;}
.hero h1{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(3.1rem,7.4vw,5.7rem); line-height:.98; letter-spacing:-0.015em; margin:18px 0 0;}
.hero h1 em{font-style:italic; color:var(--terra);}
.hero .lede{font-size:1.18rem; color:var(--muted); max-width:30ch; margin-top:26px;}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}

.plate{background:var(--surface); border:1px solid var(--line); padding:26px 26px 24px; position:relative;}
.plate .corner{position:absolute; width:9px; height:9px; border:1px solid var(--terra);}
.plate .corner.tl{top:-1px; left:-1px; border-right:0; border-bottom:0;}
.plate .corner.tr{top:-1px; right:-1px; border-left:0; border-bottom:0;}
.plate .corner.bl{bottom:-1px; left:-1px; border-right:0; border-top:0;}
.plate .corner.br{bottom:-1px; right:-1px; border-left:0; border-top:0;}
.plate-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:15px;}
.plate-title{font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem; line-height:1.1;}
.fieldmarks dt{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-top:13px;}
.fieldmarks dd{font-size:.97rem; color:var(--ink); margin-top:2px;}
.spec-list{list-style:none;}
.spec-row{display:flex; justify-content:space-between; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 0; border-bottom:1px dotted var(--line);}
.spec-row .k{color:var(--green); white-space:nowrap;}
.spec-row .v{color:var(--ink); text-align:right;}

section{position:relative; z-index:2;}
.band{border-top:1px solid var(--line); padding:78px 0;}
.sec-label{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
.sec-label .ln{flex:1; height:1px; background:var(--line);}
h2.sec{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.04; letter-spacing:-0.01em;}

.thesis{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.32; max-width:24ch;}
.thesis em{font-style:italic; color:var(--terra);}
.thesis-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.offer{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; margin-bottom:46px;}
.offer.flip{grid-template-columns:1fr 1.4fr;}
.offer.flip .offer-body{order:2;}
.offer-body h3{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.02; letter-spacing:-0.01em; margin:8px 0 0;}
.offer-body p{color:var(--muted); margin-top:18px; max-width:44ch;}
.offer-body .btn{margin-top:26px;}

.note{border-left:2px solid var(--terra); padding:6px 0 6px 30px; max-width:62ch;}
.note .obs{font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(1.5rem,3.3vw,2.3rem); line-height:1.34;}
.note .obs .hit{color:var(--terra); font-style:normal; font-weight:500;}

.observer-grid{display:grid; grid-template-columns:.85fr 1.4fr; gap:50px; align-items:center;}
.obs-frame{aspect-ratio:4/5; border:1px solid var(--line); background:var(--surface); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.obs-frame .mono{position:absolute; bottom:14px; left:16px; font-size:10.5px; letter-spacing:.1em; color:var(--muted);}
.obs-frame .ph-mark{font-size:clamp(3rem,7vw,5rem); color:var(--line);}

.form-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:start;}
form.entry{display:flex; flex-direction:column; gap:16px;}
form.entry label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:-8px;}
form.entry input, form.entry textarea{background:var(--surface); border:1px solid var(--line); color:var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size:1rem; padding:13px 15px; border-radius:0; transition:border-color .2s;}
form.entry input:focus, form.entry textarea:focus{outline:none; border-color:var(--terra);}
form.entry textarea{resize:vertical; min-height:120px;}
form.entry button{align-self:flex-start; margin-top:6px;}
.entry-thanks{border:1px solid var(--terra); background:var(--surface); padding:30px 30px;}
.entry-thanks h3{font-family:'Fraunces',serif; font-weight:500; font-size:1.6rem;}
.entry-thanks p{color:var(--muted); margin-top:10px;}

footer{border-top:1px solid var(--line); padding:54px 0 60px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.foot-tag{font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; max-width:24ch; margin-top:10px;}
.colophon{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--muted); line-height:1.9; text-align:right;}

.rv{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
html.js .rv{opacity:0; transform:translateY(22px);}
html.js .rv.in{opacity:1; transform:none;}

.post-cards{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.post-card{display:block; background:var(--surface); border:1px solid var(--line); padding:26px 26px 24px; text-decoration:none; color:var(--ink); transition:border-color .25s ease, transform .25s ease;}
.post-card:hover{border-color:var(--terra); transform:translateY(-3px);}
.post-card-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px;}
.post-card-date{font-size:11px; color:var(--muted); letter-spacing:.06em;}
.post-card-title{font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; line-height:1.12; letter-spacing:-0.005em;}
.post-card-ex{color:var(--muted); margin-top:12px; font-size:1rem; line-height:1.6;}
.post-card-more{display:inline-flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.05em; color:var(--terra); margin-top:18px;}

.post{padding:48px 0 84px;}
.post-back{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--muted); text-decoration:none; display:inline-flex; gap:8px; align-items:center; transition:color .2s;}
.post-back:hover{color:var(--terra);}
.post-title{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.2rem,5vw,3.7rem); line-height:1.04; letter-spacing:-0.012em; margin-top:14px; max-width:20ch;}
.post-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; color:var(--muted); margin-top:18px;}
.post-body{max-width:64ch; margin-top:38px; font-size:1.15rem; line-height:1.8;}
.post-body p{margin-top:1.3em; color:var(--ink);}
.post-body p:first-child{margin-top:0;}
.post-body h2{font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; line-height:1.2; margin-top:1.9em; letter-spacing:-0.01em;}
.post-body h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; margin-top:1.5em;}
.post-body em{font-style:italic;}
.post-body strong{font-weight:600;}
.post-body blockquote{border-left:2px solid var(--terra); padding-left:24px; margin:1.6em 0; font-family:'Fraunces',serif; font-style:italic; font-size:1.35rem; line-height:1.4; color:var(--ink);}
.post-body ul{margin-top:1.2em; padding-left:1.25em;}
.post-body li{margin-top:.55em;}
.post-body code{font-family:'IBM Plex Mono',monospace; font-size:.88em; background:var(--surface); padding:2px 6px; border:1px solid var(--line);}
.post-foot{max-width:64ch; margin-top:54px; padding-top:30px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:24px; align-items:flex-start;}

@media(max-width:860px){
  .hero-grid,.thesis-grid,.offer,.offer.flip,.observer-grid,.form-grid,.post-cards{grid-template-columns:1fr;}
  .offer.flip .offer-body{order:0;}
  .hero .lede{max-width:none;}
  .platenum{font-size:34vw; top:-6px;}
  .colophon{text-align:left;}
  .observer-grid .obs-frame{max-width:280px;}
}