:root{
  --paper:#f6f1e6; --ink:#211e18; --muted:#6e675a; --faint:#8a8273;
  --w-teal:#0c8e76; --w-violet:#6a4bd6; --w-line:#e2dac9;
}
html.day, .writing-page{background:var(--paper);}
.writing-page{margin:0;color:var(--ink);}

/* top chrome */
.w-top{max-width:660px;margin:0 auto;display:flex;justify-content:space-between;
  padding:22px 24px 0;font-family:"IBM Plex Mono",monospace;font-size:13px;}
.w-top a{color:var(--muted);text-decoration:none;}
.w-top .w-home{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.04em;color:var(--ink);}

/* essay reading surface (direction B) */
.rule{height:3px;background:linear-gradient(90deg,#2ee6c8,#56d8ff,#8b6bff);max-width:660px;margin:26px auto 0;}
.essay{max-width:660px;margin:0 auto;padding:46px 24px 0;}
.essay .tag{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w-teal);margin-bottom:18px;}
.essay .title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:43px;
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px;}
.essay .meta{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);margin-bottom:40px;}
.essay .body{font-family:"Newsreader",serif;font-size:21px;line-height:1.7;color:var(--ink);}
.essay .body p{margin:0 0 1.45em;}
.essay .body p:first-child{font-size:22px;}
.essay .body a{color:var(--w-teal);text-underline-offset:3px;}
.essay .body a:hover{color:var(--w-violet);}
.essay .body h2{font-family:"Space Grotesk",sans-serif;font-size:28px;margin:1.6em 0 .5em;}
.essay .body blockquote{border-left:3px solid var(--w-line);margin:1.4em 0;padding-left:18px;color:var(--muted);}

/* index */
.writing-index .wrap{max-width:720px;margin:0 auto;padding:0 24px 80px;}
.writing-index .rule{max-width:720px;}
.writing-index .head{padding:64px 0 30px;}
.writing-index .ey{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w-teal);margin-bottom:16px;}
.writing-index .head h1{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:52px;
  line-height:1;letter-spacing:-.02em;margin:0 0 18px;}
.writing-index .head p{font-family:"Hanken Grotesk",sans-serif;font-size:18px;line-height:1.5;color:var(--muted);max-width:600px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:14px 0 8px;border-top:1px solid var(--w-line);}
.chip{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);background:transparent;
  border:1px solid var(--w-line);border-radius:99px;padding:6px 13px;cursor:pointer;transition:.15s;}
.chip:hover{border-color:var(--w-teal);color:var(--ink);}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.list{margin-top:18px;}
.item{display:block;text-decoration:none;padding:26px 0;border-top:1px solid var(--w-line);}
.item:first-child{border-top:none;}
.item.hidden{display:none;}
.item .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w-teal);margin-bottom:10px;}
.item h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:26px;line-height:1.18;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 9px;transition:.15s;}
.item:hover h3{color:var(--w-violet);}
.item p{font-family:"Hanken Grotesk",sans-serif;font-size:16.5px;line-height:1.55;color:var(--muted);margin:0 0 11px;max-width:620px;}
.item .m{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--faint);}

/* subscribe (index + essay foot) */
.sub,.essay-sub{max-width:660px;margin:54px auto 0;background:#efe7d6;border:1px solid var(--w-line);
  border-radius:16px;padding:30px 32px;}
.writing-index .sub{max-width:none;}
.sub h2,.essay-sub h2{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:21px;margin:0 0 6px;}
.sub p,.essay-sub p{font-family:"Hanken Grotesk",sans-serif;font-size:15px;color:var(--muted);margin:0 0 18px;}
.subrow{display:flex;gap:10px;max-width:440px;}
.subrow input{flex:1;font-family:"Hanken Grotesk",sans-serif;font-size:15px;padding:12px 14px;
  border:1px solid #d8cfbb;border-radius:10px;background:#fbf7ee;color:var(--ink);}
.subrow button{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:15px;padding:12px 20px;
  border:none;border-radius:10px;background:var(--ink);color:var(--paper);cursor:pointer;}
.subnote{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint);margin-top:12px;}

/* night -> day transition overlay. Plays only when arriving from the dark site
   (the .arriving class is set by an inline head script when the entry flag is
   present and motion is allowed). Cold loads / direct links / reduced-motion
   never see it: the page just shows day. CSS is render-blocking, so when
   .arriving is set the dark overlay is up on first paint (no day flash). */
.dawn{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;background:#0a0b0d;overflow:hidden;}
.dawn .a{position:absolute;left:-10%;width:120%;height:340px;filter:blur(64px);will-change:transform,opacity;}
.dawn .a1{top:-40px;opacity:.55;transform:rotate(-8deg);background:linear-gradient(100deg,transparent,#2ee6c8 35%,#56d8ff 60%,transparent);}
.dawn .a2{top:30px;opacity:.4;transform:rotate(-4deg);background:linear-gradient(80deg,transparent,#6bf2a6 30%,#2ee6c8 55%,transparent);}
.dawn .a3{top:-10px;opacity:.45;transform:rotate(-6deg);background:linear-gradient(110deg,transparent,#9b8cff 40%,#e58cdc 65%,transparent);}
.dawn .glow{position:absolute;left:0;right:0;bottom:0;height:70%;opacity:0;background:radial-gradient(120% 90% at 50% 120%,#ffd9a8,#ff9e7d 30%,rgba(255,140,120,.2) 55%,transparent 75%);}
.arriving .dawn{opacity:1;}
.dawn.lift{opacity:0;transition:opacity 1.15s ease .5s;}
.dawn.lift .a{transform:translateY(-120px) scale(1.08) rotate(-10deg);opacity:0;transition:transform 1.6s cubic-bezier(.4,0,.2,1),opacity 1.3s ease;}
.dawn.lift .glow{animation:dawnSweep 1.7s ease forwards;}
@keyframes dawnSweep{0%{opacity:0}45%{opacity:.85}100%{opacity:0}}

@media(max-width:520px){
  .essay .title{font-size:34px;} .writing-index .head h1{font-size:40px;}
}
@media(prefers-reduced-motion:reduce){ .dawn{display:none!important;} }