@font-face{font-family:"Courier Prime";src:url(fonts/CourierPrime-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/CourierPrime-Bold.woff) format("woff");font-weight:700;font-display:swap}
:root{--bg:#0a100e;--paper:#f1eadb;--ink:#26221d;--red:rgba(196,92,92,.55);--blue:rgba(110,150,190,.30);--lh:24px;--rule0:76px}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);font-family:"Courier Prime","Courier New",monospace;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:64px 24px 80px;gap:34px}
.brand{color:#e8f0ea;letter-spacing:.32em;font-size:14px;text-transform:lowercase;opacity:.85;text-decoration:none}
a.brand:hover{opacity:1}
.stack{display:flex;flex-direction:column;align-items:center;gap:36px}
.card{width:720px;height:432px;flex:none;position:relative;transform:rotate(-.4deg);
  border-radius:5px 3px 6px 4px / 4px 5px 3px 6px;background-color:var(--paper);
  box-shadow:0 1px 1px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.35),0 22px 48px rgba(0,0,0,.45);overflow:hidden}
.card.back{transform:rotate(.3deg) translateX(6px);--rule0:36px}
.card .rules{position:absolute;inset:0;
  background:
   linear-gradient(to bottom,transparent calc(var(--rule0) - 1px),var(--red) calc(var(--rule0) - 1px),var(--red) calc(var(--rule0) + .6px),transparent calc(var(--rule0) + .6px)),
   repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--blue) calc(var(--lh) - 1px) var(--lh));
  background-size:100% 100%,100% calc(100% - var(--rule0) - 12px);
  background-position:0 0,0 var(--rule0);background-repeat:no-repeat;filter:url(#rule-rough)}
.card.back .rules{background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh) - 1px),var(--blue) calc(var(--lh) - 1px) var(--lh));
  background-size:100% calc(100% - var(--rule0) - 12px);background-position:0 var(--rule0);background-repeat:no-repeat}
.card .grain{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='432'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .16 0'/></filter><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .42  0 0 0 0 .3  0 0 0 -.9 .55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/><rect width='100%' height='100%' filter='url(%23f)' opacity='.14'/></svg>")}
.card.back .grain{background-position:37% 61%}
.card .age{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(ellipse 120% 115% at 50% 48%,transparent 62%,rgba(150,118,70,.10) 88%,rgba(120,90,50,.20) 100%),
   radial-gradient(circle at 0 0,rgba(120,92,55,.16),transparent 38px),
   radial-gradient(circle at 100% 100%,rgba(120,92,55,.14),transparent 46px),
   radial-gradient(circle at 100% 0,rgba(120,92,55,.08),transparent 30px),
   linear-gradient(100deg,rgba(255,255,255,.05),transparent 40%,rgba(90,70,40,.04))}
.card.back .age{transform:scaleX(-1)}
.typed{position:absolute;font-size:15px;line-height:var(--lh);color:var(--ink);filter:url(#ink);white-space:nowrap}
.row{height:var(--lh)}
.small{font-size:13px;opacity:.88}
.title{left:42px;top:calc(var(--rule0) - 35px);font-size:22px;line-height:34px;font-weight:700;letter-spacing:.01em}
.meta{right:42px;top:calc(var(--rule0) - 23px);font-size:13px;line-height:24px}
.foot{right:42px;font-size:13px}
a.typed{text-decoration:none;color:var(--ink)}
a.toc:hover{background:linear-gradient(to bottom,transparent 82%,rgba(196,92,92,.35) 82% 90%,transparent 90%)}
.grid{display:grid;grid-template-columns:repeat(2,720px);gap:48px 56px}
.grid .card{transform:rotate(-.4deg)}
.grid .cell:nth-child(3n+2) .card{transform:rotate(.35deg)}
.grid .cell:nth-child(4n) .card{transform:rotate(-.15deg)}
.tw-word{white-space:nowrap}
.tw-c{display:inline-block;transform-origin:50% 80%;text-indent:0}
.tw-worn-top{background:linear-gradient(to bottom,rgba(38,34,29,.58) 0 50%,var(--ink) 52%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-left-heavy{background:linear-gradient(to right,var(--ink) 0 45%,rgba(38,34,29,.55) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-heavy{text-shadow:.45px .1px 0 rgba(38,34,29,.85)}

/* ---------- page chrome ---------- */
.nav{display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:lowercase}
.nav a,.foot-link{color:#9fb3a8;text-decoration:none;border-bottom:1px solid rgba(159,179,168,.25);padding-bottom:2px}
.nav a:hover,.foot-link:hover{color:#e8f0ea;border-color:rgba(232,240,234,.6)}
.dim{color:#6a7f74;font-size:12px;letter-spacing:.08em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- index: one index card per category ---------- */
.stack.wide{width:100%;max-width:1000px;gap:30px}
.finder{width:100%;display:flex;align-items:baseline;gap:14px;color:#9fb3a8;font-size:13px;letter-spacing:.08em}
.finder input{flex:1;max-width:360px;background:transparent;border:0;border-bottom:1px solid rgba(159,179,168,.35);border-radius:0;color:#e8f0ea;font:15px/24px "Courier Prime","Courier New",monospace;padding:0 2px;outline:none;-webkit-appearance:none;appearance:none}
.finder input:focus{border-color:#e8f0ea}
.finder input::placeholder{color:#4f6158}
.finder .count{margin-left:auto;color:#6a7f74;font-size:12px;white-space:nowrap}
.cats{display:grid;grid-template-columns:repeat(2,480px);gap:32px 40px;justify-content:center;width:100%}
.card.cat{--lh:20px;--rule0:50px;width:480px;height:288px}
.card.cat .rules{background-size:100% 100%,100% calc(100% - var(--rule0) - 10px)}
.cats .cat:nth-child(4n+2){transform:rotate(.3deg)}
.cats .cat:nth-child(4n+3){transform:rotate(-.15deg)}
.cats .cat:nth-child(4n){transform:rotate(.5deg)}
.ct{left:28px;top:calc(var(--rule0) - 29px);font-size:17px;line-height:28px;font-weight:700}
.cm{right:28px;top:calc(var(--rule0) - 21px);font-size:11.5px;line-height:20px;opacity:.75}
.toc{list-style:none;padding:0;margin:0}
.ent{left:28px;font-size:15px;line-height:20px}
.ent .tl{display:block;height:20px}
.ent a{color:var(--ink);text-decoration:none;display:block}
.ent a:hover .tl,.ent a:focus-visible .tl{text-decoration:underline;text-decoration-color:rgba(196,92,92,.75);text-underline-offset:3px;outline:none}
.ent[hidden],.cat[hidden],.empty[hidden]{display:none}
.empty{color:#9fb3a8;font-size:14px}

/* ---------- submit: a long ruled card ---------- */
.sheet{--rule0:72px;width:720px;height:auto;min-height:432px;padding:0 42px 48px;transform:rotate(-.25deg)}
.sheet .rules{background-size:100% 100%,100% calc(100% - var(--rule0) - 24px)}
.sheet .stitle{position:absolute;left:42px;top:calc(var(--rule0) - 35px);font-size:22px;line-height:34px;font-weight:700}
.sheet .smeta{position:absolute;right:42px;top:calc(var(--rule0) - 23px);font-size:13px;line-height:24px}
.sheet form,.sheet .done{position:relative;z-index:2;padding-top:calc(var(--rule0) + 5px)}
.f{display:block}
.f .lab{display:block;height:24px;line-height:24px;font-size:12.5px;opacity:.75}
.f .lab em{font-style:normal;opacity:.7}
.f input[type=text],.f input[type=email],.f textarea{display:block;width:100%;border:0;border-radius:0;background:transparent;color:var(--ink);
  font:15px/24px "Courier Prime","Courier New",monospace;padding:0;margin:0;outline:none;resize:vertical;height:24px}
.f textarea{height:120px;min-height:72px;overflow:auto}
.f textarea.tall{height:168px}
.f input:focus,.f textarea:focus{background:rgba(110,150,190,.07)}
.f input::placeholder,.f textarea::placeholder{color:rgba(38,34,29,.38)}
.gap{height:24px}
.file{display:flex;gap:16px;align-items:center;height:24px;font-size:14px}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.btn{font:700 15px/24px "Courier Prime","Courier New",monospace;color:var(--ink);background:transparent;border:0;padding:0;cursor:pointer;height:24px}
.btn:hover,.file label:hover{text-decoration:underline;text-decoration-color:rgba(196,92,92,.7);text-underline-offset:4px}
.file label{cursor:pointer;font-weight:700}
.file input:focus-visible + label{outline:1px dotted var(--ink)}
.fname{opacity:.7;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.row24{height:24px;line-height:24px;font-size:12.5px;opacity:.8}
.err{color:#8a2a22;height:auto;min-height:24px;line-height:24px;font-size:13px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.done{font-size:15px;line-height:24px}
.done p{min-height:24px}
.ink{filter:url(#ink)}
.contact .grid{grid-template-columns:repeat(4,720px);gap:44px 48px}
.done .again{color:var(--ink);font-size:13px}

/* ---------- small screens: scale fixed cards, keep the form fluid ---------- */
.sheet{width:min(720px,100%)}
@media (max-width:1060px){.cats{grid-template-columns:480px}}
@media (max-width:779px){body{padding:40px 12px 60px}.stack>.card:not(.sheet){zoom:.74}.cats .cat{zoom:.9}}
@media (max-width:565px){.stack>.card:not(.sheet){zoom:.6}.cats .cat{zoom:.8}.sheet{padding:0 20px 40px}.sheet .stitle{left:20px}.sheet .smeta{display:none}.finder{flex-wrap:wrap}}
@media (max-width:479px){.stack>.card:not(.sheet){zoom:.48}.cats .cat{zoom:.72}}
@media (max-width:379px){.stack>.card:not(.sheet){zoom:.44}.cats .cat{zoom:.66}}