/* Hallmark · macrostructure: Letter · editorial · warm paper · green underline */
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;
}
::selection{background:oklch(86% 0.24 150 / .4)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.wrap{width:min(1100px,92vw);margin-inline:auto}
.measure{max-width:var(--measure)}

/* links: green with a hover-drawn underline */
a{color:var(--color-accent);text-decoration:none;background-image:linear-gradient(var(--color-accent),var(--color-accent));background-size:0% 1px;background-position:0 1.15em;background-repeat:no-repeat;transition:background-size var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
a:hover{color:var(--color-accent-h);background-size:100% 1px}

/* ===== N6 · newspaper masthead ===== */
.masthead{border-bottom:3px double var(--color-rule-2);padding-top:var(--sp-6)}
.masthead .kicker{display:flex;justify-content:center;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--color-neutral)}
.masthead h1.title{font-family:var(--font-display);font-weight:600;text-align:center;font-size:clamp(3.4rem,12vw,8rem);line-height:.9;letter-spacing:-0.03em;margin:var(--sp-3) 0 var(--sp-4);color:var(--color-ink)}
.masthead .dateline{border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:space-between;align-items:center;padding-block:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-neutral)}
.masthead .dateline a{color:var(--color-neutral);background:none}
.masthead .dateline a:hover{color:var(--color-accent)}
.masthead .dateline .c{color:var(--color-ink)}

/* ===== letter ===== */
.letter{padding-block:var(--sp-16) var(--sp-12)}
.letter .lead-in{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--sp-5)}
.letter h2.salut{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);letter-spacing:-0.02em;line-height:1.1;margin-bottom:var(--sp-8);max-width:20ch}
.letter p{margin-bottom:var(--sp-5);max-width:var(--measure);font-size:var(--text-md);line-height:1.62}
.letter p.first::first-letter{font-family:var(--font-display);font-weight:600;float:left;font-size:4.6rem;line-height:.72;padding:.1rem .5rem .1rem 0;color:var(--color-accent)}
.letter strong{font-weight:600;color:var(--color-ink)}
.letter .em{font-style:italic}
.pull{border-left:3px solid var(--color-accent);padding-left:var(--sp-6);margin:var(--sp-10) 0;font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);line-height:1.25;color:var(--color-ink);max-width:26ch}
.sign{margin-top:var(--sp-10)}
.sign .name{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-ink)}
.sign .role{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral);margin-top:var(--sp-1)}

/* ===== index of works ===== */
.works{border-top:3px double var(--color-rule-2);padding-block:var(--sp-16)}
.works .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.works h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);letter-spacing:-0.02em}
.works .sec-head .note{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-neutral)}
.index{list-style:none;counter-reset:w}
.work{counter-increment:w;display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-4) var(--sp-6);align-items:baseline;padding-block:var(--sp-6);border-top:1px solid var(--color-rule)}
.work:first-child{border-top:none}
.work .no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent)}
.work .no::before{content:counter(w,decimal-leading-zero)}
.work .body h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-0.01em;display:inline}
.work .body .state{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-neutral);margin-left:.6ch}
.work .body .state.live{color:var(--color-accent)}
.work .body p{max-width:60ch;color:var(--color-muted);margin-top:var(--sp-2);font-size:var(--text-base)}
.work .body .upd{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-neutral)}
.work .go{white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em}
@media(max-width:680px){.work{grid-template-columns:auto 1fr}.work .go{grid-column:2}}

/* ===== Ft6 · letter-close footer ===== */
.close{border-top:3px double var(--color-rule-2);padding-block:var(--sp-16) var(--sp-10);text-align:center}
.close .ps{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);max-width:34ch;margin:0 auto var(--sp-8);line-height:1.3}
.close .ps b{font-style:normal;color:var(--color-accent)}
.close .contact{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);justify-content:center;font-family:var(--font-mono);font-size:var(--text-sm)}
.close .fine{margin-top:var(--sp-10);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-neutral);display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap}
.close .fine a{color:var(--color-neutral);background:none}
.close .fine a:hover{color:var(--color-accent)}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  a{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}