@font-face{font-family:'Home Video';src:url('../assets/home-video-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
*{box-sizing:border-box}
html{background:#080808}
body{margin:0;background:#080808;color:#eeeae1}
.archive-main{padding:25svh 0 40px;overflow:hidden}
.archive-heading{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.archive-drawer{position:relative;margin:0;padding:0;list-style:none;user-select:none;animation:archive-rise 1.2s .55s both}
/* The 442px folders are packed only 72px apart, front to back. */
.archive-folder{--tab-width:min(clamp(220px,32vw,420px),calc(100% - 48px));--tab-slot:0;--hover-tilt:5deg;--tab-left:calc(24px + (100% - 48px - var(--tab-width)) * var(--tab-slot));position:relative;isolation:isolate;z-index:var(--depth);height:72px;color:#352919;outline:none}
.archive-folder:nth-child(3n+2){--tab-slot:.5;--hover-tilt:0deg}
.archive-folder:nth-child(3n){--tab-slot:1;--hover-tilt:-5deg}
.archive-folder:last-child{height:442px}
.archive-folder-button{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.archive-folder-assembly{position:absolute;left:0;right:0;top:0;height:442px;pointer-events:none;transform-origin:calc(var(--tab-left) + var(--tab-width) / 2) 45px;transition:transform .55s cubic-bezier(.17,.89,.32,1.3)}
/* A hovering folder keeps its place behind the folders in front of it. */
.archive-folder.is-hovered .archive-folder-assembly{transform:translateY(-45px) rotate(var(--hover-tilt))}
.archive-folder-back{position:absolute;inset:60px 0 0;z-index:0;border:1px solid #a5824b;border-radius:13px 13px 5px 5px;background:linear-gradient(180deg,#d5b678,#c6a264 120px);box-shadow:inset 0 1px 0 #f0d8a1}
/* The tab grows directly out of the back sheet, with no separate lower edge. */
.archive-folder-tab{position:absolute;left:var(--tab-left);top:-57px;z-index:1;width:var(--tab-width);height:58px;margin:0;padding:6px 28px 6px;border:1px solid #a5824b;border-bottom:0;border-radius:14px 20px 0 0;background:#d5b678;box-shadow:inset 0 1px 0 #f0d8a1;text-align:center}
.archive-folder-tab::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#d5b678}
.archive-folder-tab img{display:block;width:100%;height:46px;object-fit:contain}
.folder-number{position:absolute;top:7px;right:10px;font:9px/1 'Home Video',monospace;opacity:.58}
.archive-folder-button:focus-visible .archive-folder-tab{outline:2px solid #ff5433;outline-offset:6px}
.archive-folder-front{position:absolute;inset:75px 0 0;z-index:2;border:1px solid #a5824b;border-radius:12px 12px 5px 5px;background:repeating-linear-gradient(0deg,#6e542508 0 1px,transparent 1px 4px),repeating-linear-gradient(92deg,#ffedc50a 0 1px,transparent 1px 3px),linear-gradient(110deg,#d7bb83,#e0c894 48%,#d2b278);box-shadow:inset 0 1px 0 #f4dfb1,0 -6px 12px #4b371525}
.archive-folder-front::before{content:'';position:absolute;left:0;right:0;top:12px;height:1px;background:#a6854f42;box-shadow:0 1px 0 #fae7bf38}
.archive-return{display:block;width:fit-content;margin:48px auto 0;padding:12px;color:#aaa69e;font:12px/1.5 'Home Video',monospace;text-decoration:none}
.archive-return:hover{color:#eeeae1}
.archive-return:focus-visible{outline:2px solid #ff5433;outline-offset:4px}
.archive-error{margin:24px;text-align:center;font:13px/1.5 'Home Video',monospace}
body.folder-open{overflow:hidden}
.font-folder{width:min(1080px,calc(100% - 32px));max-height:calc(100svh - 48px);margin:auto;padding:48px 24px 24px;overflow:auto;border:1px solid #a5824b;border-radius:18px 22px 8px 8px;background:repeating-linear-gradient(0deg,#6e542506 0 1px,transparent 1px 4px),linear-gradient(115deg,#dcc08b,#e7d2a5 50%,#cfaf75);color:#281d11;box-shadow:0 30px 100px #000a}
.font-folder::backdrop{background:#080808dd;backdrop-filter:blur(5px)}
.font-folder[open]{animation:folder-open .35s cubic-bezier(.2,.85,.32,1.08)}
.open-folder-tab{position:absolute;top:18px;left:26px;font:11px/1.5 'Home Video',monospace;letter-spacing:.04em}
.open-folder-tab span{margin-left:16px;opacity:.65}
.folder-close{position:sticky;top:0;float:right;z-index:3;display:grid;place-items:center;width:36px;height:36px;margin-top:-40px;margin-right:-12px;border:1px solid #60442450;border-radius:50%;background:#e2c995;color:#3e2e18;font:25px/1 Georgia,serif;cursor:pointer}
.folder-close:hover{background:#60442416}
.folder-close:focus-visible,.font-download:focus-visible,.font-reference a:focus-visible,.font-sources a:focus-visible,.font-sources summary:focus-visible{outline:2px solid #ac3026;outline-offset:4px}
.folder-sheet{padding:32px;background:#f4eddd;box-shadow:0 3px 10px #694e2630;border:1px solid #fff8e5;border-radius:2px}
.archive-eyebrow{margin:0 0 20px;font:10px/1.7 'Home Video',monospace;letter-spacing:.045em;color:#6c6354}
#font-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:-1px}
.font-name-art{display:block;width:100%;height:120px;object-fit:contain;object-position:left center}
.font-description{max-width:680px;margin:24px 0 20px;font:20px/1.5 Georgia,serif}
.font-download{display:inline-flex;align-items:center;gap:18px;padding:13px 18px;border:1px solid #281d11;background:#281d11;color:#f4eddd;text-decoration:none;font:12px/1.5 'Home Video',monospace;transition:background .2s}
.font-download:hover{background:#574028}
.font-downloads{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.font-download-count{margin-left:4px;color:#6c6354;font:11px/1.6 'Home Video',monospace;font-variant-numeric:tabular-nums}
.font-download-count[data-state="loading"],.font-download-count[data-state="unavailable"]{color:#75664c}
.font-download.secondary{background:transparent;color:#281d11}
.font-download.secondary:hover{background:#e4d8bf}
.font-download span{font-size:10px;opacity:.7}
.font-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:32px;margin-top:36px;padding-top:30px;border-top:1px solid #b3a78e}
.font-story h3{margin:0 0 14px;font:italic 26px/1.2 Georgia,serif;font-weight:400}
.font-story>p{margin:0 0 20px;font:16px/1.7 Georgia,serif}
.font-story .font-note{padding-left:14px;border-left:2px solid #b59765;color:#75664c;font-size:14px}
.font-note:empty{display:none}
.font-facts{margin:28px 0 24px;padding:0;border-block:1px solid #c8bba3}
.font-facts>div{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:13px 0}
.font-facts>div+div{border-top:1px solid #d9cfbc}
.font-facts dt{font:10px/1.5 'Home Video',monospace;color:#79684d}
.font-facts dd{margin:0;font:14px/1.5 Georgia,serif}
.font-specimen{overflow-wrap:anywhere;border:1px solid #d0c4ad;padding:18px;background:#e9dfca55}
.font-specimen p{margin:0;font-size:27px;line-height:1.8;font-weight:400;font-style:normal;font-synthesis:none;white-space:pre-line}
.font-specimen img{display:block;width:100%;height:auto}
.font-specimen [hidden]{display:none}
.font-sources{margin-top:24px;font:13px/1.6 Georgia,serif}
.font-sources summary{cursor:pointer;font:11px/1.6 'Home Video',monospace}
.font-sources ul{padding-left:18px;margin:14px 0}
.font-sources a{color:#715327;text-underline-offset:3px}
.font-sources li{padding:3px 0}
.font-story .restoration-note{margin:24px 0 0;font:12px/1.6 Georgia,serif;color:#857862}
.font-reference{min-width:0;margin:0;align-self:start}
.font-reference a{display:block}
.font-reference img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;background:#e9dfca}
.font-reference figcaption{margin:12px 0 0;font:12px/1.6 Georgia,serif;color:#75664c}
.font-reference .reference-source{display:inline-block;margin-top:8px;color:#715327;text-underline-offset:3px}
.reference-note{display:block;margin-top:8px;font-size:11px;opacity:.8}
#font-reference-detail{margin-top:20px}
.reference-detail-label{margin:0 0 8px;font:10px/1.5 'Home Video',monospace;color:#75664c}
.font-reference img.sideways{width:100%;height:auto;aspect-ratio:1;object-fit:contain;transform:rotate(-90deg);margin:0}
@keyframes folder-open{from{opacity:0;transform:translateY(45px) rotate(-1deg)}to{opacity:1;transform:none}}
@media(max-width:700px){.font-folder{padding:44px 12px 12px;max-height:calc(100svh - 24px);width:calc(100% - 20px)}.folder-close{margin-top:-36px;margin-right:0}.folder-sheet{padding:24px 20px}.font-name-art{height:96px}.font-description{font-size:18px}.font-content{grid-template-columns:1fr;gap:28px}.font-reference{grid-row:2}.font-reference img{max-height:600px}.archive-eyebrow{font-size:9px}.font-specimen p{font-size:24px}}
/* Arrive, pause at the stop, then give one short upward jerk. */
@keyframes archive-rise{
  0%{opacity:0;transform:translateY(100svh);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  8%{opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  74%{opacity:1;transform:translateY(0);animation-timing-function:linear}
  82%{transform:translateY(0);animation-timing-function:ease-out}
  91%{transform:translateY(-12px);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.archive-drawer{animation:none}.archive-folder-assembly{transition:none}.archive-folder.is-hovered .archive-folder-assembly{transform:none}.font-folder[open]{animation:none}}

.font-family-controls{display:grid;grid-template-columns:auto minmax(0,360px);align-items:center;gap:14px;margin:22px 0 12px}
.font-family-controls label{font:11px/1.5 'Home Video',monospace}
.font-family-controls select{min-width:0;width:100%;padding:10px 36px 10px 12px;border:1px solid #b3a78e;border-radius:2px;background:#f4eddd;color:#281d11;font:15px/1.5 Georgia,serif}
.font-family-controls select:focus-visible{outline:2px solid #ac3026;outline-offset:3px}
.font-family-included{max-width:680px;margin:0 0 18px;color:#75664c;font:13px/1.6 Georgia,serif}
.font-family-controls[hidden],.font-family-included[hidden]{display:none}
.font-download .download-label{font-size:inherit;opacity:1}
@media(max-width:420px){.font-family-controls{grid-template-columns:1fr;gap:6px}}