/* ───────────────────────── SAKONTI ───────────────────────── */
:root{
  --paper:#f4f0e6;
  --paper-deep:#e7e0cd;
  --ink:#1d2a24;
  --ink-soft:#4d5c53;
  --verm:#d8491f;
  --pine:#24593f;
  --gold:#e0a521;
  --rule:#c9c0a8;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Karla",sans-serif;
  font-size:17px; line-height:1.7;
  color:var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(29,42,36,.04) 31px 32px),
    radial-gradient(120% 90% at 50% 0%, #faf7ee 0%, var(--paper) 55%, #efe9da 100%);
  background-attachment:fixed;
}
::selection{background:var(--verm); color:var(--paper)}
.wrap{max-width:840px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
a{color:var(--pine)}

/* paper grain */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{padding-top:1.1rem}
.mast-strip{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.55rem; border-bottom:2px solid var(--ink);
}
.mast-strip a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--verm); transition:.2s}
.mast-strip a:hover{color:var(--verm)}
.mast-main{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:1rem; padding:1.4rem 0 .4rem;
}
.mast-name{
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(3.4rem,11vw,7.4rem); line-height:.95; letter-spacing:-.02em;
}
.mast-name .ltr{display:inline-block; animation:rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i)*60ms)}
.mast-name .pen-dot{color:var(--verm)}
.caret{display:inline-block; width:.08em; height:.7em; margin-left:.08em; background:var(--verm); transform:translateY(.05em); animation:blink 1.1s steps(1) infinite}
@keyframes rise{from{opacity:0; transform:translateY(.35em) rotate(4deg)}}
@keyframes blink{50%{opacity:0}}
@media (hover:hover){
  .mast-name:hover .ltr{animation:hop .45s both; animation-delay:calc(var(--i)*45ms)}
  @keyframes hop{40%{transform:translateY(-.12em) rotate(-3deg)}}
}
.folio{
  display:grid; gap:.3rem; text-align:right; padding-right:.9rem;
  border-right:4px double var(--ink);
  font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.squiggle{display:block; width:min(560px,82%); height:22px; margin:.2rem 0 .9rem}
.squiggle path{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.4s ease .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.masthead.slim .mast-name{font-size:clamp(2rem,6vw,3.4rem)}

/* ── ticker ───────────────────────────────────────────────── */
.ticker{overflow:hidden; background:var(--ink); color:var(--paper); border-block:1px solid var(--ink)}
.ticker-track{display:flex; width:max-content; animation:tick 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-half{display:flex; align-items:center; gap:2.5rem; padding:.5rem 2.5rem .5rem 0; white-space:nowrap}
.ticker a{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:inherit; text-decoration:none}
.ticker a:hover{color:var(--gold)}
.ticker .star{color:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── entries ──────────────────────────────────────────────── */
.entries{padding-top:3.2rem; min-height:40vh}
.entry{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.entry.in{opacity:1; transform:none}
.entry + .divider + .entry, .entry + .entry{margin-top:0}
.entry-head{margin-bottom:1.3rem}
.entry-meta{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.7rem;
}
.entry-meta .spark{color:var(--verm)}
.entry-meta .num{border:1px solid var(--ink); border-radius:999px; padding:.25em .7em; color:var(--ink)}
.entry-title{
  font-family:"Fraunces",serif; font-weight:700;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.06; letter-spacing:-.01em;
}
.entry-title a{
  color:var(--ink); text-decoration:none;
  background:linear-gradient(var(--verm),var(--verm)) no-repeat 0 100% / 0% 4px;
  transition:background-size .35s ease;
}
.entry-title a:hover{background-size:100% 4px}
.entry-body{max-width:66ch; font-size:1.06rem; line-height:1.75}
.entry-body p{margin:0 0 1.1em}
.entry-body > p:first-of-type::first-letter{
  font-family:"Fraunces",serif; font-weight:900; font-size:3.6em;
  float:left; line-height:.8; padding:.06em .12em 0 0; color:var(--verm);
}
.entry-body h3{font-family:"Fraunces",serif; font-size:1.5rem; font-weight:700; margin:1.6em 0 .6em}
.entry-body h3::before{content:"✳ "; color:var(--verm)}
.entry-body blockquote{
  margin:1.4em 0; padding:.7em 1.2em; border-left:4px solid var(--verm);
  background:var(--paper-deep); font-family:"Fraunces",serif; font-style:italic; font-size:1.15rem;
}
.entry-body ul,.entry-body ol{margin:0 0 1.1em; padding-left:1.5em}
.entry-body li{margin-bottom:.35em}
.entry-body li::marker{color:var(--verm); font-weight:700}
.entry-body a{color:var(--pine); text-decoration-color:var(--verm); text-underline-offset:3px; transition:color .2s}
.entry-body a:hover{color:var(--verm)}
.entry-body img{max-width:100%; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--paper-deep)}
.entry-body hr{border:0; margin:2.2em auto; width:60%}
.entry-body hr::after{content:"✳ ✳ ✳"; display:block; text-align:center; color:var(--verm); letter-spacing:.6em}
.empty{text-align:center; font-family:"Space Mono",monospace; padding:3rem 0}

.divider{display:flex; align-items:center; gap:1.2rem; margin:3.2rem 0; color:var(--verm)}
.divider::before,.divider::after{content:""; flex:1; border-top:2px dotted var(--rule)}
.divider span{letter-spacing:.6em; font-size:.8rem; transform:translateX(.3em)}

/* ── pager (bottom) ───────────────────────────────────────── */
.pager{margin:4rem auto 2rem; padding-top:1.6rem; border-top:4px double var(--ink)}
.pager-row{display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap}
.pbtn{
  font-family:"Space Mono",monospace; font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:2px solid var(--ink); background:var(--paper);
  padding:.65em 1.1em; transition:transform .18s, box-shadow .18s, background .18s;
}
a.pbtn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); background:var(--gold)}
.pbtn.dead{opacity:.3; pointer-events:none}
.pnums{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center}
.pnum{
  width:2.5em; height:2.5em; display:grid; place-items:center;
  font-family:"Space Mono",monospace; font-weight:700; font-size:13px;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  text-decoration:none; transition:.18s;
}
a.pnum:hover{background:var(--gold); transform:translateY(-2px)}
.pnum.cur{background:var(--ink); color:var(--paper)}
.dots{font-family:"Space Mono",monospace; color:var(--ink-soft)}
.home-btn{
  width:3em; height:3em; margin-left:.4rem; border-radius:50%;
  display:grid; place-items:center; color:var(--paper);
  background:var(--verm); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s, background .2s;
}
.home-btn:hover{transform:scale(1.1) rotate(-6deg); background:var(--pine)}
.pager-note{
  margin-top:1.1rem; text-align:center;
  font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* ── footer ───────────────────────────────────────────────── */
.colophon{
  border-top:4px double var(--ink); margin-top:1rem; padding:1.4rem 0 2.4rem;
  text-align:center; font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.colophon a{color:var(--ink); border-bottom:2px solid var(--verm); text-decoration:none}
.colophon a:hover{color:var(--verm)}

/* ── compose room (write.html) ────────────────────────────── */
.desk{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.6rem; align-items:start; padding-top:2.2rem}
.sheet{
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:8px 8px 0 0 var(--paper-deep), 8px 8px 0 2px var(--ink);
  padding:clamp(1rem,3vw,2rem);
}
.title-input{
  width:100%; background:transparent; border:0; border-bottom:2px dashed var(--rule);
  font-family:"Fraunces",serif; font-weight:700; font-size:clamp(1.5rem,4vw,2.3rem);
  color:var(--ink); padding:.2em 0 .3em; outline:none; transition:border-color .2s;
}
.title-input:focus{border-color:var(--verm)}
.title-input::placeholder{color:var(--rule); font-style:italic}
.meta-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:.9rem 0 1.1rem; font-family:"Space Mono",monospace; font-size:12px}
.meta-row input[type=date]{font-family:"Space Mono",monospace; font-size:12px; border:2px solid var(--ink); background:var(--paper); padding:.35em .5em; color:var(--ink)}
.mini-btn{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:2px solid var(--ink); background:var(--paper-deep); padding:.35em .7em; cursor:pointer; transition:.15s}
.mini-btn:hover{background:var(--gold); transform:translateY(-1px)}
#draft-status{margin-left:auto; color:var(--ink-soft); letter-spacing:.08em}

.toolbar{display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem; background:var(--paper-deep); border:2px solid var(--ink); border-bottom:0}
.tbtn{
  min-width:2.3em; padding:.4em .55em; cursor:pointer;
  font-family:"Space Mono",monospace; font-weight:700; font-size:13px; color:var(--ink);
  border:2px solid var(--ink); background:var(--paper); transition:.15s;
}
.tbtn:hover{background:var(--gold); transform:translateY(-2px); box-shadow:2px 3px 0 var(--ink)}
.tbtn:active{transform:translateY(1px); box-shadow:none}
.editable{
  min-height:320px; padding:1.1rem 1.2rem;
  border:2px solid var(--ink); background:#fbf8f0; outline:none; position:relative;
}
.editable:focus{box-shadow:inset 0 0 0 3px rgba(216,73,31,.25)}
.editable.blank::before{content:attr(data-ph); position:absolute; top:1.1rem; left:1.2rem; color:var(--ink-soft); font-style:italic; pointer-events:none}

.actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem}
.abtn{
  font-family:"Space Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.05em;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:.7em 1.1em; cursor:pointer; transition:.18s;
}
.abtn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); background:var(--gold)}
.abtn.primary{background:var(--pine); color:var(--paper)}
.abtn.primary:hover{background:var(--verm)}
.abtn.ghost{border-style:dashed; background:transparent}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.howto{border:2px solid var(--ink); background:var(--paper-deep); padding:1.3rem 1.3rem 1.5rem}
.howto h2{font-family:"Fraunces",serif; font-size:1.4rem; margin-bottom:.8rem}
.howto h2::before{content:"✳ "; color:var(--verm)}
.howto ol{padding-left:1.3em; font-size:.95rem}
.howto li{margin-bottom:.7rem}
.howto code{font-family:"Space Mono",monospace; font-size:.85em; background:var(--paper); border:1px solid var(--rule); padding:.1em .4em}
.howto .tip{margin-top:1rem; padding-top:.9rem; border-top:2px dotted var(--rule); font-size:.85rem; color:var(--ink-soft)}

.output{margin:2.2rem 0 3rem; border:2px solid var(--ink); background:var(--ink); color:var(--paper); padding:1.5rem}
.output h2{font-family:"Fraunces",serif; font-size:1.6rem; margin-bottom:.9rem}
.output h2 span{color:var(--gold)}
.output .steps{padding-left:1.3em; font-size:.95rem; margin-bottom:1.2rem}
.output .steps li{margin-bottom:.4rem}
.codebar{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; font-family:"Space Mono",monospace; font-size:12px}
.codebar button,.codebar a{font-family:"Space Mono",monospace; font-size:12px; font-weight:700; border:2px solid var(--paper); background:transparent; color:var(--paper); padding:.45em .9em; cursor:pointer; text-decoration:none; transition:.15s}
.codebar button:hover,.codebar a:hover{background:var(--gold); color:var(--ink); border-color:var(--gold)}
.code{background:#141d18; border:1px solid #3a4a41; padding:1rem; overflow:auto; max-height:380px; font-family:"Space Mono",monospace; font-size:12.5px; line-height:1.6; white-space:pre}

/* ── preview modal ────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1.5rem}
.modal[hidden]{display:none}
.modal-back{position:absolute; inset:0; background:rgba(29,42,36,.65)}
.modal-sheet{position:relative; background:var(--paper); border:2px solid var(--ink); box-shadow:10px 10px 0 rgba(0,0,0,.3); max-width:760px; width:100%; max-height:85vh; overflow:auto; padding:clamp(1.2rem,4vw,2.4rem)}
.modal-x{position:absolute; top:.7rem; right:.7rem; width:2.2em; height:2.2em; border:2px solid var(--ink); background:var(--paper); font-family:"Space Mono",monospace; font-weight:700; cursor:pointer; transition:.15s}
.modal-x:hover{background:var(--verm); color:var(--paper)}

@media (max-width:720px){
  .desk{grid-template-columns:1fr}
  .folio{display:none}
  .mast-strip{justify-content:center; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .entry{opacity:1; transform:none}
  .ticker{overflow-x:auto}
}