@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--desk:#1f3a34;--desk2:#18302b;--paper:#f3ead8;--paper2:#e4d6b8;--paper3:#d6c49f;--ink:#2a2118;--wax:#a3271f;--wax2:#7d1a14;--ok:#bfe7cd;--bad:#ffb8ab;--cream:#f3ead8}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(120% 90% at 30% 0%,#26463f 0%,var(--desk) 45%,var(--desk2) 100%);color:var(--cream);font:16px/1.45 "Instrument Sans",system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
.desk{max-width:1180px;margin:0 auto;padding:28px 32px 40px}
.top{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:8px}
h1{font:400 64px/1 "Instrument Serif",Georgia,serif;margin:0;letter-spacing:-.01em}
h1 em{font-style:italic}
.lede{margin:0;font-size:20px;max-width:30ch}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:10px 0 6px}
.env{margin:0;display:flex;flex-direction:column;align-items:stretch;min-width:0}
.art{position:relative;width:100%;aspect-ratio:3/2.4;--t:transform .42s cubic-bezier(.3,1.3,.5,1),top .45s cubic-bezier(.3,1.25,.5,1),opacity .3s}
.art>div{position:absolute}
.back{left:0;right:0;top:30%;bottom:0;background:var(--paper3);border-radius:4px;box-shadow:0 14px 28px rgba(0,0,0,.35)}
.flap-open{left:0;right:0;top:4%;height:26.2%;background:linear-gradient(var(--paper3),#c8b48c);clip-path:polygon(0 100%,100% 100%,50% 0);transform-origin:50% 100%;transform:scaleY(0);transition:var(--t)}
.slip{left:7%;right:7%;top:36%;height:60%;background:#fffdf7;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25);overflow:hidden;transition:var(--t);display:flex;flex-direction:column}
.tail{flex:0 0 auto;max-height:46%;overflow:hidden;padding:5% 7% 3%;border-bottom:2px dashed var(--wax);color:var(--wax);font:600 13px/1.3 "Plex Mono",ui-monospace,monospace;display:none}
.tail-k{display:block;font:600 10px/1.2 "Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.tail-t{word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.slip-t{padding:5% 7%;color:#3a3128;font-size:10px;line-height:1.35;overflow:hidden;word-break:break-word}
.front{left:0;right:0;top:30%;bottom:0;background:linear-gradient(170deg,#f6eedd,var(--paper) 60%,var(--paper2));clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:4px}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(87,74,58,.18) 50%,transparent 50.4%),linear-gradient(to top left,transparent 49.6%,rgba(87,74,58,.18) 50%,transparent 50.4%)}
.flap-shut{left:0;right:0;top:30%;height:46%;background:linear-gradient(#efe3c9,var(--paper2));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:scaleY(0);transition:var(--t);filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.seal{left:50%;top:62%;width:27%;aspect-ratio:1;margin:-13.5% 0 0 -13.5%;border-radius:50% 46% 52% 48%;background:radial-gradient(circle at 38% 32%,#c8443a 0%,var(--wax) 45%,var(--wax2) 100%);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 0 0 4px rgba(0,0,0,.12),inset 0 0 0 7px rgba(255,255,255,.08);display:grid;place-items:center;opacity:0;transform:scale(1.9) rotate(-14deg);transition:transform .32s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.seal span{font:400 clamp(13px,2.6vw,30px)/1 "Instrument Serif",serif;font-style:italic;color:#fff3ee;text-shadow:0 -1px 0 rgba(0,0,0,.35)}
/* states */
.env.fits .flap-shut{transform:scaleY(1)}
.env.fits .seal{opacity:1;transform:scale(1) rotate(-8deg)}
.env.over .slip{top:4%}
.env.over .tail{display:block}
.env.over .flap-open{transform:scaleY(1)}
.env.empty .slip{top:36%}
.env.boot .slip{top:-30%;opacity:0}
.env.boot .seal{opacity:0;transform:scale(1.9) rotate(-14deg)}
.env.boot .flap-shut{transform:scaleY(0)}
figcaption{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;padding-top:10px}
.name{font-weight:600;font-size:15px}
.num{font:400 15px "Plex Mono",monospace;text-align:right}
.num b{font-weight:600;font-size:22px}
.verdict{grid-column:1/-1;font-size:15px;min-height:1.45em}
.fits .verdict{color:var(--ok)}
.over .verdict{color:var(--bad)}
button{font:600 15px "Instrument Sans",sans-serif;background:var(--cream);color:var(--desk);border:0;border-radius:999px;padding:9px 16px;min-height:44px;cursor:pointer}
button:hover{background:#fff}
button:focus-visible,textarea:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}
.trim{grid-column:1/-1;justify-self:start;margin-top:4px;background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream);padding:6px 14px;min-height:44px;min-width:44px}
.trim:hover{background:rgba(243,234,216,.12)}
.culprit{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;background:rgba(0,0,0,.2);border:1.5px dashed rgba(255,184,171,.6);border-radius:12px;padding:10px 14px;margin:8px 0 12px}
.culprit[hidden]{display:none}
.culprit p{margin:0;flex:1 1 300px}
.chips{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle}
.chip{font:600 18px/1 "Plex Mono",monospace;background:#fffdf7;color:var(--wax);border-radius:6px;padding:4px 8px;min-width:30px;text-align:center}
.chip.code{font-size:14px}
.chip small{font:400 11px "Instrument Sans",sans-serif;color:#5a4a3a;margin-left:4px}
.letter{background:#fffdf7;color:var(--ink);border-radius:6px;padding:14px 18px 12px;box-shadow:0 18px 40px rgba(0,0,0,.35);margin-top:8px}
.letter label{display:block;font:italic 400 22px "Instrument Serif",serif;margin-bottom:4px}
textarea{width:100%;border:0;background:repeating-linear-gradient(#fffdf7 0 29px,#e9e1cf 29px 30px);font:400 18px/30px "Instrument Sans",system-ui,sans-serif;color:var(--ink);resize:vertical;padding:0;min-height:120px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.bar button{background:var(--desk);color:var(--cream)}
.bar button:hover{background:#2b524a}
.status{margin:0;font-size:15px;flex:1 1 220px;color:#3d342a}
.err{margin:6px 0 0;color:#9c1f17;font-weight:600;min-height:0}
.err:empty{display:none}
.foot{margin-top:22px;font-size:14px;color:#dfd5c2;max-width:80ch}
.foot p{margin:0 0 6px}
@media (max-width:700px){
  .desk{padding:14px 14px 32px}
  .top{gap:4px 12px}
  h1{font-size:40px}
  .lede{font-size:15px}
  .row{gap:10px;margin-top:4px}
  .art{aspect-ratio:3/2.7}
  .tail{font-size:11px;line-height:1.2;padding:4% 6% 3%;max-height:none}
  .env.over .slip{top:0}
  .tail-t{-webkit-line-clamp:2}
  .tail-k{font-size:10px;letter-spacing:.04em}
  .tail-t{-webkit-line-clamp:1;line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}
  .slip-t{font-size:10px;line-height:1.25}
  figcaption{grid-template-columns:1fr;padding-top:6px}
  .name{font-size:12px;line-height:1.2}
  .num{text-align:left;font-size:12px}
  .num b{font-size:18px}
  .verdict{font-size:13px;line-height:1.25;min-height:2.5em}
  .trim{font-size:13px;padding:6px 12px;min-height:44px;min-width:44px}
  .culprit{padding:8px 10px;font-size:14px;margin:4px 0 8px}
  .chip{font-size:15px}
  textarea{font-size:16px;line-height:28px;background:repeating-linear-gradient(#fffdf7 0 27px,#e9e1cf 27px 28px);min-height:112px}
  .letter{padding:10px 12px}
  .letter label{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .art,.art *{transition:none!important;animation:none!important}
}

/* pending recount on long letters: never show a seal that may be stale */
.counting .env .seal{opacity:.25!important;filter:grayscale(.6);transition:none!important}
.counting .env .num,.counting .env .verdict{opacity:.45}
.counting .env .verdict::after{content:" \00B7 counting\2026";}
.counting .env .art{filter:saturate(.6)}
@media (prefers-reduced-motion:no-preference){.counting .env .num,.counting .env .verdict{transition:opacity .1s}}