@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");
:root{color-scheme:dark;--bg:#101314;--ink:#d2d3cc;--muted:#9a9f9d;--line:#343a3a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 Arial,sans-serif}.page{max-width:1340px;margin:auto;padding:0 6%}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #c5b59b;outline-offset:7px}.skip{position:fixed;top:-100px;background:#fff;color:#111;padding:10px;z-index:5}.skip:focus{top:10px}header{height:115px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.name{font-size:16px;letter-spacing:.07em}.name span{margin-left:16px;color:#9e9487}nav{display:flex;gap:36px;font-size:13px;color:var(--muted)}a:hover{color:#eee5d9}.intro{display:grid;grid-template-columns:1fr 1.08fr;gap:6%;padding:76px 0 82px;align-items:center}.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--muted);margin:0 0 30px}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em;font-size:clamp(48px,5.8vw,79px);line-height:1.08;margin:0}h1 em{font-weight:400;color:#aaa99e}.note{color:var(--muted);font-size:13px;line-height:1.9;margin:32px 0}.quiet-link{font-size:12px;display:inline-block;border-bottom:1px solid #68706b;padding-bottom:7px}.quiet-link span{padding-left:28px}figure{margin:0}figure img{display:block;width:100%;aspect-ratio: .91;object-fit:cover;border:1px solid #353b3a}figcaption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:13px;letter-spacing:.05em}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}h2{font:400 27px Georgia,serif;margin:0}.section-head p{font-size:12px;color:var(--muted);margin:0}.links{padding:25px 0 73px}.link-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:55px}.link-grid a{display:flex;justify-content:space-between;align-items:center;padding:19px 4px;border-top:1px solid var(--line);transition:background .2s,padding .2s}.link-grid a:hover{background:#1b2020;padding-left:13px;padding-right:13px}.link-grid small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.link-grid a>span:last-child{color:#9a9f96}#rooms{padding:24px 0 75px;border-top:1px solid var(--line)}.rooms{display:grid;grid-template-columns:repeat(3,1fr);margin-top:35px}.rooms article{padding:0 30px;border-left:1px solid var(--line)}.rooms article:first-child{padding-left:0;border:0}.number{font-size:10px;color:var(--muted)}h3{font:400 23px Georgia,serif;margin:19px 0 14px}.rooms p{font-size:13px;color:var(--muted);margin-bottom:25px}.later,.rooms a{font-size:11px}.later{color:var(--muted)}.rooms a{border-bottom:1px solid #68706b;padding-bottom:4px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:25px 0 35px;color:var(--muted);font-size:10px;letter-spacing:.04em}@media(max-width:700px){.page{padding:0 7%}header{height:86px}.name{font-size:12px}.name span{margin-left:5px}nav{gap:15px;font-size:11px}.intro{grid-template-columns:1fr;padding:46px 0;gap:38px}h1{font-size:61px}figure img{aspect-ratio:1.15}.link-grid{column-gap:20px}.link-grid a{font-size:13px}.link-grid small{font-size:10px}.section-head{display:block}.section-head p{margin-top:8px}.rooms{gap:15px}.rooms article{padding:0 0 0 15px}h3{font-size:18px}.rooms p{font-size:11px}.rooms a,.later{font-size:10px}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* A worn sleeve, an old tape, three frames from the same evening. */
body{background:#151817;background-image:radial-gradient(ellipse at 10% 20%,#353a3226,transparent 52%),linear-gradient(90deg,#080c0c55,transparent 10%,transparent 90%,#080c0c55)}
.paper-grain{position:fixed;inset:0;z-index:4;pointer-events:none;background:url(grain.svg);opacity:.095;mix-blend-mode:screen}
.page{border-left:1px solid #77796915;border-right:1px solid #77796915;position:relative}
header{border-bottom-style:double;border-bottom-width:3px;height:103px}nav a{font-family:Georgia,serif;font-style:italic;font-size:14px}
.intro{gap:7%;padding:65px 0 55px}.intro-copy{position:relative}.margin-mark{font:10px/1.65 'Courier New',monospace;letter-spacing:.025em;color:#9fa79c;margin-bottom:32px;padding-left:13px;border-left:1px solid #8b8d7980}.margin-mark span{color:#929588;display:block;margin-top:8px}
.eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:23px}h1{text-shadow:1px 0 #a3b7b51a,-1px 0 #ae958b22}h1 em{color:#b6b3a1}.note{margin:25px 0;font-family:Georgia,serif;font-style:italic;font-size:14px}
figure{transform:rotate(1.1deg);padding:12px 12px 0;background:#272b27;border:1px solid #777b6759;box-shadow:5px 9px 35px #0008,inset 0 0 0 3px #171c1955;position:relative}figure:before,figure:after{content:'';position:absolute;top:-13px;width:88px;height:28px;z-index:3;background:#7f806c38;border-left:1px solid #bab59b22;border-right:1px solid #bab59b22;transform:rotate(-9deg);backdrop-filter:blur(1px)}figure:before{left:20px}figure:after{right:14px;transform:rotate(13deg)}
.tape-frame{position:relative;overflow:hidden;background:#101818}.tape-frame img{aspect-ratio:.94;filter:grayscale(.7) sepia(.15) contrast(1.15) brightness(.87);border:0;transform:scale(1.025)}
.tape-frame:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 4px),url(grain.svg);background-size:auto,150px 150px;opacity:.4;mix-blend-mode:screen}
.tape-frame:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 65px 25px #0009;background:linear-gradient(90deg,#879c990d,transparent 25%,transparent 70%,#947b6c12)}
.tape-label{position:absolute;top:22px;left:20px;right:20px;display:flex;justify-content:space-between;font:11px 'Courier New',monospace;color:#d0d7cb;z-index:3;text-shadow:2px 1px #212a29,-1px 0 #a4aeb35c;letter-spacing:.08em}.frame-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;z-index:3;font:italic 14px Georgia,serif;color:#d8d5c2;text-shadow:0 1px 4px #000}
.tracking{position:absolute;left:0;right:0;height:13px;top:76%;z-index:3;opacity:.38;background:repeating-linear-gradient(0deg,transparent 0 2px,#c1c9bd77 2px 3px,transparent 3px 5px);transform:skewX(-12deg);animation:tape-drift 19s linear infinite}.tracking:after{content:'';position:absolute;left:12%;right:4%;top:20px;height:1px;background:#bec3ae44}figcaption{padding:2px 0 12px;font-family:'Courier New',monospace;font-size:9px;color:#b0b2a1}
.interlude{display:flex;align-items:center;gap:17px;padding:25px 0 44px;font:10px 'Courier New',monospace;color:#989d8e;letter-spacing:.08em}.interlude i{height:1px;flex:1;background:linear-gradient(90deg,#666e5655,transparent)}.interlude i:nth-of-type(2){transform:rotate(180deg)}
.links{border:1px solid #8c927633;background:linear-gradient(120deg,#94987e07,transparent 60%);padding:32px 30px 12px;margin-bottom:66px;position:relative}.links:before{content:'places / 01—10';position:absolute;top:-8px;right:22px;background:#171b18;padding:0 9px;color:#929987;font:9px 'Courier New',monospace;letter-spacing:.1em}.link-grid{column-gap:40px}.link-grid a{padding:17px 4px;border-color:#7f887137}.link-grid a:hover{background:#9b9b7910}.link-grid small{font-family:'Courier New',monospace;font-size:11px}.section-head h2{font-style:italic}.section-head p{font-family:Georgia,serif;font-style:italic;font-size:13px}
#rooms{border-top:0}.rooms article{border-color:#777e6940}.room-still{height:128px;margin-bottom:20px;position:relative;overflow:hidden;border:5px solid #383c32;background-image:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg),url(window.svg);background-size:auto,110px,220%;background-blend-mode:normal,soft-light,normal;box-shadow:0 4px 15px #0004;filter:grayscale(.65) sepia(.18)}.still-one{background-position:center,center,15% 75%;transform:rotate(-2deg)}.still-two{background-position:center,center,56% 22%;transform:rotate(1deg)}.still-three{background-position:center,center,90% 62%;transform:rotate(-1deg)}.room-still span{position:absolute;bottom:7px;left:9px;font:8px 'Courier New',monospace;letter-spacing:.035em;color:#d7d8c4;text-shadow:0 1px 3px #000}.rooms h3{margin-top:10px}footer{border-top-style:double;border-top-width:3px}
@keyframes tape-drift{0%,80%,100%{top:76%;opacity:.25;transform:translateX(0)}81%{top:77%;opacity:.5;transform:translateX(-3px)}82%{top:76%;transform:translateX(2px)}83%{top:76%;opacity:.25;transform:translateX(0)}}
@media(max-width:700px){.intro{padding-top:40px;gap:45px}.margin-mark{margin-bottom:26px}figure{margin:0 4px}.tape-frame img{aspect-ratio:1.1}.links{padding:28px 15px 10px}.link-grid{column-gap:17px}.link-grid small{font-size:9px}.tape-label{font-size:9px}.rooms{grid-template-columns:1fr;gap:38px}.rooms article,.rooms article:first-child{display:grid;grid-template-columns:115px 1fr;column-gap:25px;border:0;padding:0}.room-still{grid-row:1 / 5;height:145px;margin:0}.rooms h3{margin:3px 0 6px}.rooms p{font-size:13px;margin:0 0 10px}.rooms a,.later{font-size:11px;justify-self:start}.rooms .number{align-self:end}.interlude{font-size:8px;gap:9px}h1{font-size:clamp(47px,13vw,66px)}}
@media(prefers-reduced-motion:reduce){.tracking{animation:none}html{scroll-behavior:auto}}
/* Reference pass: late-night home video and an old scene-selection sleeve. */
:root{--bg:#0b0c0d;--ink:#d4d3cb;--muted:#a3a49c;--line:#56574d}body{background:#0b0c0d;background-image:linear-gradient(90deg,#393c3510 1px,transparent 1px),radial-gradient(ellipse at 80% 0,#3b333a30,transparent 60%);background-size:48px 100%,auto}.page{max-width:1400px;padding:0 4%;border-color:#787a6533}.paper-grain{opacity:.13}header{height:83px}.name{font-family:Georgia,serif;font-size:17px;letter-spacing:.12em}nav a{font-style:normal;font-family:'Courier New',monospace;font-size:11px}header:before{content:'†';position:absolute;left:12px;color:#777e73}.intro{grid-template-columns:.8fr 1.3fr;gap:5%;align-items:start;padding:45px 0 30px}.sleeve-stamp{font:clamp(38px,4.7vw,67px)/.86 Georgia,serif;letter-spacing:-.045em;border-top:1px solid #727464;border-bottom:1px solid #727464;padding:15px 0 12px;margin-bottom:23px;text-shadow:1px 0 #bda1b188,-1px 1px #99b5af55}.sleeve-stamp span{letter-spacing:.07em}.sleeve-stamp small{display:block;font:8px/1.4 'Courier New',monospace;letter-spacing:.14em;margin-top:15px;color:#a7a99b}.margin-mark{display:none}.eyebrow{font:8px/1.7 'Courier New',monospace;letter-spacing:.04em;margin-bottom:18px}h1{font-size:clamp(35px,4vw,53px);line-height:1.02;letter-spacing:-.035em}h1 br{display:none}h1 br:after{content:' '}.note{font-size:13px;line-height:1.6;margin:20px 0}.scene-menu{margin-top:25px;border-top:1px solid #74796655}.menu-title{display:block;color:#9fa390;font:9px 'Courier New',monospace;text-transform:lowercase;letter-spacing:.1em;padding:10px 0}.scene-menu a{display:flex;justify-content:space-between;border-top:1px dotted #85887555;padding:9px 0;font:12px Georgia,serif}.scene-menu a:hover{padding-left:8px;background:#c0b9a30a}.scene-menu a:before{content:'▷';color:#a0ae9a;margin-right:8px}.scene-menu a span{margin-left:auto}figure{padding:7px 7px 0;margin-top:10px;transform:rotate(-.5deg);background:#181a17;border:1px solid #7c7f6a99;box-shadow:0 0 0 4px #111413,0 0 0 5px #555a4d55,8px 10px 25px #0009}figure:before,figure:after{display:none}.tape-frame img{aspect-ratio:1;filter:saturate(.28) contrast(1.15) brightness(.9);transform:none}.tape-frame:after{box-shadow:inset 0 0 30px 10px #0007}.tape-label{top:15px;left:17px;right:17px;font-size:10px;opacity:.8}.frame-caption{font:italic 12px Georgia,serif;bottom:18px;background:#0007;padding:4px 0}figcaption{font-size:8px;letter-spacing:0;padding-bottom:8px}.interlude{padding:25px 0 32px}.links{padding:24px 20px 10px;border:1px solid #75796377;box-shadow:inset 0 0 0 3px #111510,inset 0 0 0 4px #676b5422;margin-bottom:38px;background:#11141177}.link-grid{grid-template-columns:repeat(3,1fr);column-gap:26px}.link-grid a{font:13px Georgia,serif;padding:15px 3px}.link-grid small{font-size:10px;margin-top:7px}.section-head{margin-bottom:20px}h2{font-size:25px}.section-head p{font-size:12px}.links:before{background:#10130f}#rooms{padding-bottom:40px}.room-still{height:170px;background-size:auto,110px,cover}.still-one{background-image:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg),url(night-street.jpg);background-position:center;transform:rotate(-1deg)}.still-two{background-image:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg),url(snow-street.jpg);background-position:center;transform:rotate(.5deg)}.still-three{background-image:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg),url(street-tape.jpg);background-position:center;transform:rotate(-.5deg)}.rooms article{padding:0 20px}.rooms h3{font-style:italic}.rooms p{font-size:12px}footer{font-family:'Courier New',monospace}footer:before{content:'end of side a';font-size:8px;color:#7f8775}
@media(max-width:800px){.intro{grid-template-columns:1fr;gap:30px;padding-top:30px}.intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.sleeve-stamp{grid-column:1;font-size:54px}.eyebrow{grid-column:1}.intro-copy h1{grid-column:1;font-size:37px}.note{grid-column:2;grid-row:1 / 3;align-self:end}.scene-menu{grid-column:2;grid-row:3 / 5;margin-top:0;align-self:start}.tape-frame img{aspect-ratio:1.23;object-position:center 39%}figure{margin:0 4px}.link-grid{grid-template-columns:1fr 1fr}.rooms article{padding:0}.room-still{height:145px}.page{padding:0 6%}footer:before{display:none}}
@media(max-width:480px){.intro-copy{display:block}.sleeve-stamp{font-size:52px}.intro-copy h1{font-size:42px;max-width:270px}.note{margin:18px 0}.scene-menu{margin-top:20px}.link-grid{column-gap:18px}.link-grid small{font-size:9px}.tape-label{font-size:8px}.section-head p{font-size:11px}.links{padding:20px 13px 8px}}
@media(prefers-reduced-motion:reduce){.tracking{animation:none}}

.sleeve-stamp .personal-name{display:block;font-family:"UnifrakturCook","Old English Text MT",serif;font-weight:700;font-size:clamp(76px,9vw,118px);line-height:1.06;letter-spacing:.015em;text-shadow:1px 0 #bda1b155,-1px 1px #99b5af33}.sleeve-stamp small{margin-top:12px}@media(max-width:800px){.sleeve-stamp .personal-name{font-size:94px}}

body{text-transform:lowercase}
.music-intro{padding:65px 0 10px;max-width:900px}.music-intro h1{font-size:clamp(38px,5.5vw,70px);line-height:1.1}.music-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:30px;font:12px Georgia,serif;color:var(--muted)}.music-meta a{border-bottom:1px solid #70765f;padding-bottom:4px}.playlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 28px;padding-bottom:35px}.playlist-card{min-width:0;border:1px solid #6b70534f;padding:10px 10px 18px;background:#22261c25;box-shadow:inset 0 0 0 3px #0c100c}.playlist-card>a{display:block}.playlist-cover{position:relative;overflow:hidden;background:#282c24;aspect-ratio:1}.playlist-cover img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.45) contrast(1.05);transition:filter .2s}.playlist-cover:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px);box-shadow:inset 0 0 25px #0007}.playlist-cover span{position:absolute;bottom:9px;left:10px;font:9px 'Courier New',monospace;color:#e2e0cd;text-shadow:0 1px 3px #000;z-index:1;background:#0008;padding:3px 5px}.playlist-card h2{font:400 21px/1.25 Georgia,serif;margin:17px 2px 14px;min-height:53px;overflow-wrap:anywhere}.playlist-action{font:10px 'Courier New',monospace;color:#aeb5a0;margin:0 2px}.playlist-card a:hover .playlist-cover img{filter:saturate(.8) contrast(1.05)}.playlist-card a:hover .playlist-action{color:#eee5d9}.collection-note{font:12px/1.6 Georgia,serif;color:var(--muted);padding:10px 0 45px}.music-page .interlude{padding-top:35px}.music-page h1 br{display:block}@media(max-width:800px){.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.music-intro{padding-top:40px}.playlist-card h2{font-size:19px}.music-meta{align-items:start}}@media(max-width:480px){.playlist-grid{grid-template-columns:1fr}.playlist-card{max-width:100%}.playlist-card h2{min-height:0}.music-meta{display:block}.music-meta p{margin-bottom:15px}.music-page nav{gap:12px}.music-page header .name{font-size:16px}}
/* Late-1990s personal homepage trial: narrow directory and dense handmade panels. */
:root{--bg:#080909;--ink:#c5c5b9;--muted:#a0a18f;--line:#626352}body{font:12px/1.55 'Times New Roman',serif;background-color:#060808;background-image:url(grain.svg),repeating-linear-gradient(45deg,#555c4710 0 1px,transparent 1px 5px);background-size:170px,auto;background-blend-mode:soft-light,normal}.paper-grain{opacity:.07}.page{max-width:1120px;padding:0 18px;margin:20px auto;border:1px solid #666954;background:#080a09e8;box-shadow:0 0 0 3px #020303,0 0 0 4px #44473880}header{height:54px;border-bottom:3px double #696c57}.name{font:13px 'Courier New',monospace;letter-spacing:.08em}header:before{display:none}header nav{gap:22px}header nav a{font:10px 'Courier New',monospace;text-decoration:underline}.homepage-layout,.music-layout{display:grid;grid-template-columns:165px minmax(0,1fr);gap:18px;padding-top:18px}.old-sidebar{padding:10px 9px;align-self:start;border:3px double #666b58;background:linear-gradient(#272b1b30,transparent),#0a0e0b;text-align:center}.side-name{font:48px/1.1 'UnifrakturCook','Old English Text MT',serif;color:#c7c5b6;text-shadow:1px 1px #716775}.side-subtitle{font:9px/1.5 'Courier New',monospace;color:#989f8b;margin:7px 0 14px}.side-photo{width:100%;height:115px;object-fit:cover;border:1px solid #70745c;padding:3px;background:#000;filter:grayscale(.6) contrast(1.3);margin-bottom:14px}.old-sidebar nav{display:flex;flex-direction:column;gap:0;text-align:left;border:1px solid #595e4b;background:#080b08}.panel-label{display:block;font:9px/1.5 'Courier New',monospace;padding:5px;background:#33392766;color:#b1b49d;border-bottom:1px solid #686d5366}.old-sidebar nav a{font:11px 'Times New Roman',serif;text-decoration:underline;padding:7px 6px;border-bottom:1px dotted #5c634955}.old-sidebar nav a:last-child{border:0}.old-sidebar nav a[aria-current]{color:#dedac4;background:#66704b22}.old-sidebar nav a:hover{background:#7c7b4b30}.side-fragment{margin-top:19px;border:1px solid #5a604b}.side-fragment p{font:italic 11px/1.8 Georgia,serif;padding:0 3px;color:#939986}.web-badge{width:103px;margin:24px auto 16px;border:2px ridge #737561;padding:4px 2px;font:9px/1.1 'Courier New',monospace;background:repeating-linear-gradient(0deg,#121a1255 0 1px,#070907 1px 3px);color:#afb7a0;transform:rotate(-3deg)}.web-badge b{font-size:9px;color:#cec9aa}.side-up{font-size:10px;text-decoration:underline}.homepage-layout main,.music-layout main{min-width:0}.intro{grid-template-columns:.78fr 1fr;gap:16px;padding:0 0 18px;align-items:start}.intro-copy{border:3px double #5c624d;padding:10px;background:#0d110c}.panel-strip{font:9px/1.5 'Courier New',monospace;letter-spacing:.04em;text-align:center;background:#343a2955;border-top:1px solid #757a5d;border-bottom:1px solid #757a5d;padding:5px 7px;color:#bdbea9}.intro-strip{margin:-8px -8px 14px}.sleeve-stamp{padding:0 0 12px;margin:0 0 13px;border-top:0;border-bottom:1px dotted #656e4c}.sleeve-stamp .personal-name{font-size:72px;line-height:1.05}.sleeve-stamp small{font-size:7px;margin-top:7px}.eyebrow{font-size:8px;line-height:1.5;margin:12px 0 17px}h1,.intro-copy h1{font:normal 34px/1.03 'Times New Roman',serif;letter-spacing:-.035em}.intro-copy h1 em{color:#a9ad98}.note{font:italic 11px/1.7 Georgia,serif;margin:17px 0}.scene-menu{margin-top:15px}.scene-menu a{font:11px 'Times New Roman',serif;padding:7px 0;text-decoration:underline}.menu-title{font-size:8px}figure{margin:0;padding:5px 5px 0;transform:rotate(.65deg);border:3px double #72745d;box-shadow:3px 4px #000}.tape-frame img{aspect-ratio:.82;filter:saturate(.2) contrast(1.35) brightness(.75)}.tape-label{font-size:8px;left:8px;right:8px;top:12px}.frame-caption{font-size:10px;bottom:12px}.tracking{opacity:.25}.interlude{font:8px 'Courier New',monospace;padding:17px 0 22px;gap:10px}.interlude i{background:repeating-linear-gradient(90deg,#9ca18077 0 3px,transparent 3px 8px)}.links{margin:0 0 19px;padding:8px 12px 7px;border:3px double #687054;background:#11160c55;box-shadow:none}.links:before{display:none}.links>.panel-strip{margin:-6px -10px 12px}.section-head{margin:9px 0 12px}h2{font:italic 21px 'Times New Roman',serif}.section-head p{font:10px 'Times New Roman',serif}.link-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.link-grid a{font:12px 'Times New Roman',serif;padding:9px 2px;text-decoration:underline;border-top:1px dotted #646b4e}.link-grid small{font:8px 'Courier New',monospace;margin-top:4px;color:#9ba38c}.link-grid a:hover{padding-left:6px;padding-right:6px}.link-grid a>span:last-child{font-size:11px}#rooms{padding:0 10px 14px;border:3px double #626c4e;background:#080d0855;margin-bottom:20px}#rooms>.panel-strip{margin:2px -8px 12px}.rooms{margin-top:15px;gap:13px}.rooms article,.rooms article:first-child{padding:0;border:0}.room-still{height:105px;border:3px ridge #4e5843}.room-still span{font-size:7px;left:4px;bottom:5px}.rooms h3{font:italic 18px 'Times New Roman',serif;margin:5px 0 10px}.rooms p{font-size:10px}.number{font-size:8px}.rooms a{font-size:10px;text-decoration:underline}.later{font-size:9px}footer{font:8px 'Courier New',monospace;padding:15px 0 18px}footer:before{font-size:7px}.music-intro{padding:0 0 12px}.music-intro>.panel-strip{margin-bottom:19px}.music-intro h1{font:normal 40px/1.05 'Times New Roman',serif;padding:0 8px}.music-intro .eyebrow{margin-left:8px}.music-meta{font:11px 'Times New Roman',serif;padding:8px 8px 0}.music-page .interlude{padding-top:12px}.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 13px}.playlist-card{padding:5px 5px 12px;border:3px double #5e684c;background:#11160d66}.playlist-card h2{font:normal 16px/1.2 'Times New Roman',serif;margin:11px 2px;min-height:58px}.playlist-action{font:8px 'Courier New',monospace;text-decoration:underline}.playlist-cover span{font-size:7px;left:4px;bottom:4px;padding:2px 3px}.playlist-cover img{filter:grayscale(.6) contrast(1.2)}.collection-note{font-size:10px;padding:0 0 25px}.music-page footer:before{content:'end of side b'}
@media(max-width:800px){.page{margin:12px 10px;padding:0 12px}.homepage-layout,.music-layout{grid-template-columns:140px minmax(0,1fr);gap:12px}.intro{grid-template-columns:1fr;gap:15px}.intro-copy{display:block}.sleeve-stamp .personal-name{font-size:62px}.intro-copy h1{font-size:34px;max-width:none}.tape-frame img{aspect-ratio:1.2}.note{margin:15px 0}.scene-menu{margin-top:15px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rooms{display:grid;grid-template-columns:1fr;gap:22px}.rooms article,.rooms article:first-child{display:grid;grid-template-columns:95px 1fr;gap:0 13px}.room-still{height:128px;grid-row:1/5}.rooms p{font-size:11px}.music-intro h1{font-size:34px}.music-meta{display:block}}
@media(max-width:520px){.page{margin:6px;padding:0 9px}.homepage-layout,.music-layout{display:block;padding-top:12px}.old-sidebar{display:grid;grid-template-columns:85px 1fr;gap:0 12px;margin-bottom:15px;padding:8px;text-align:left}.side-name{font-size:40px;grid-column:1}.side-subtitle{grid-column:1;font-size:7px}.side-photo{display:none}.old-sidebar nav{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr 1fr}.old-sidebar nav .panel-label{grid-column:1/-1}.old-sidebar nav a{font-size:10px;padding:6px}.side-fragment,.web-badge,.side-up{display:none}.intro{grid-template-columns:1fr}.intro-copy h1{font-size:38px}.sleeve-stamp .personal-name{font-size:70px}.link-grid{column-gap:14px}.section-head{display:block}.section-head p{margin-top:5px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.playlist-card h2{font-size:14px;min-height:65px}.playlist-action{font-size:7px}.playlist-cover span{font-size:6px}header nav{gap:10px}.name{font-size:11px}header nav a{font-size:9px}.music-meta p{font-size:11px}.music-intro h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){.tracking{animation:none}.playlist-cover img{transition:none}}
/* Neutral ash palette: preserve the handmade layout and analog texture. */
:root{--bg:#090909;--ink:#cececa;--muted:#a5a5a0;--line:#626260}
body{background-color:#080808;background-image:url(grain.svg),repeating-linear-gradient(45deg,#57575710 0 1px,transparent 1px 5px);color:var(--ink)}
.page{background:#0b0b0be8;border-color:#646462;box-shadow:0 0 0 3px #030303,0 0 0 4px #48484880}
header,footer{border-color:#6a6a66}.name span{color:#aaa9a5}a:hover{color:#eee}
.old-sidebar{border-color:#696966;background:linear-gradient(#30303030,transparent),#101010}
.side-name{color:#cdcdc7;text-shadow:1px 1px #777}.side-subtitle,.side-fragment p{color:#a4a49e}
.side-photo{border-color:#72726d;background:#050505;filter:grayscale(1) contrast(1.2)}
.old-sidebar nav{border-color:#60605c;background:#0b0b0b}.panel-label{background:#39393966;color:#bcbcb5;border-color:#6c6c6666}
.old-sidebar nav a{border-color:#62625c55}.old-sidebar nav a[aria-current]{color:#e0e0d7;background:#70707022}.old-sidebar nav a:hover{background:#80808030}.side-fragment{border-color:#62625e}
.web-badge{border-color:#757570;background:repeating-linear-gradient(0deg,#1c1c1c55 0 1px,#0a0a0a 1px 3px);color:#b3b3ac}.web-badge b{color:#d0d0c8}
.intro-copy{border-color:#62625e;background:#111}.panel-strip{background:#39393955;border-color:#767670;color:#c0c0b7}
.sleeve-stamp{border-color:#696962;text-shadow:none}.sleeve-stamp .personal-name{color:#d0d0c9;text-shadow:1px 1px #7777}.sleeve-stamp small{color:#aaa9a2}
h1{text-shadow:none}h1 em,.intro-copy h1 em{color:#afafa7}.scene-menu,.quiet-link,.rooms a,.music-meta a{border-color:#77776c}.scene-menu a{border-color:#85857b55}.scene-menu a:hover{background:#bcbcbc0a}.scene-menu a:before{color:#aaa9a2}.menu-title{color:#a7a79f}
figure{background:#171717;border-color:#75756d}.tape-frame{background:#101010}.tape-frame img{filter:grayscale(1) contrast(1.25) brightness(.8)}
.tape-frame:after{background:none;box-shadow:inset 0 0 30px 10px #0007}.tape-label{color:#d0d0c9;text-shadow:1px 1px #222}.frame-caption{color:#d8d8d0}.tracking{filter:grayscale(1)}figcaption{color:#b0b0a9}
.interlude{color:#a2a29b}.interlude i{background:repeating-linear-gradient(90deg,#a2a29a77 0 3px,transparent 3px 8px)}
.links{border-color:#6c6c62;background:#16161655}.link-grid a{border-color:#6b6b6255}.link-grid a:hover{background:#aaa9a010}.link-grid small,.link-grid a>span:last-child{color:#a4a49b}
#rooms{border-color:#696960;background:#10101055}.room-still{border-color:#58584f;filter:grayscale(1) contrast(1.08)}.room-still span{color:#deded4}
.playlist-card{border-color:#66665d;background:#17171766;box-shadow:inset 0 0 0 3px #101010}.playlist-cover{background:#2b2b29}.playlist-cover img{filter:grayscale(1) contrast(1.15)}.playlist-card a:hover .playlist-cover img{filter:grayscale(1) contrast(1.05) brightness(1.12)}.playlist-cover span{color:#deded5}.playlist-action{color:#b3b3aa}.playlist-card a:hover .playlist-action{color:#eee}footer:before{color:#929289}
a:focus-visible{outline-color:#d5d5cb}
/* The gray palette belongs to the interface; playlist art keeps its colors. */
.playlist-cover img,.playlist-card a:hover .playlist-cover img{filter:none}
.question-panel{border:3px double #66665e;padding:16px;margin:15px 0 30px;background:#17171766}.question-panel h2{font-size:24px;margin:0 0 15px}.question-panel p{font-size:13px;max-width:600px}.question-panel label{display:block;margin:20px 0 8px;font-size:13px}.question-panel textarea{display:block;width:100%;min-height:170px;resize:vertical;border:2px inset #696964;background:#0b0b0b;color:#d3d3cc;padding:12px;font:15px/1.6 Georgia,serif;text-transform:none}.question-panel button{padding:8px 18px;border:2px outset #767670;background:#242424;color:#dddcd3;font:12px 'Courier New',monospace;cursor:pointer}.question-panel button:disabled{cursor:wait;opacity:.55}.question-panel button:focus-visible,.question-panel textarea:focus-visible{outline:2px solid #d5d5cb;outline-offset:3px}.form-bottom{display:flex;align-items:center;justify-content:space-between;margin:12px 0;gap:15px}.form-count{font:10px 'Courier New',monospace;color:#aaa}.form-note,.form-status{font:12px/1.7 Georgia,serif;color:#b7b7ae}.form-status{padding:10px;border:1px solid #707068;min-height:42px}.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.inbox-question{border:1px solid #63635e;padding:14px;margin:15px 0;white-space:pre-wrap;overflow-wrap:anywhere;text-transform:none}.inbox-question time{display:block;color:#aaa;font:10px 'Courier New',monospace;margin-bottom:12px}
.music-intro h1 br{display:block}
/* Keep photographic wear, but align the actual frames. */
.homepage-layout .intro{align-items:start}.homepage-layout .intro>figure{transform:none;margin:0;align-self:start}
.rooms{align-items:start}.rooms .room-still{transform:none;margin-top:0;height:105px;aspect-ratio:auto}.rooms .room-still span{display:flex;align-items:center;left:0;right:0;bottom:0;min-height:22px;padding:3px 6px;background:#0008;font-size:7px;line-height:1.4}.rooms article{min-width:0}.rooms h3{line-height:1.2}
@media(max-width:800px){.rooms .room-still{height:128px}.rooms .room-still span{min-height:27px;font-size:7px}.homepage-layout .intro>figure{margin:0}}
.form-status:empty{display:none}
footer{align-items:center}.folded-note-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-12px 0;color:#aaa9a2}.folded-note-link span{font:17px/1 Georgia,serif;transform:rotate(-8deg)}.folded-note-link:hover{color:#e0d7c5}.folded-note-link:focus-visible{outline:1px dotted #d0d0c6;outline-offset:0}
.letter-wrap{max-width:690px;margin:45px auto 60px;padding:0 22px}.letter-back{display:inline-block;font:11px 'Courier New',monospace;color:#aaa99f;text-decoration:underline;padding:14px 0}.folded-letter{position:relative;overflow:hidden;border:3px double #73736a;background:linear-gradient(100deg,#28282833,transparent 50%),#131313;padding:42px 45px 30px;margin:12px 0 0;box-shadow:5px 7px #0006}.folded-letter:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#77776916;pointer-events:none}.folded-letter h1{font:italic 29px/1.35 Georgia,serif;letter-spacing:0;color:#d0cec4;margin:0 0 28px;text-shadow:none}.folded-letter p{font:16px/1.95 Georgia,serif;color:#c4c3ba;margin:0 0 23px}.letter-fold{position:absolute;top:0;right:0;width:24px;height:24px;background:linear-gradient(45deg,#282828 49%,#0b0b0b 51%);border-left:1px solid #5a5a5033;border-bottom:1px solid #5a5a5033}.letter-bottom{margin-top:12px}@media(max-width:520px){.letter-wrap{margin:15px auto 30px;padding:0 14px}.folded-letter{padding:30px 22px 15px}.folded-letter p{font-size:15px;line-height:1.85}.folded-letter h1{font-size:26px}.folded-note-link{margin:-10px 0}}
/* Original ornamental traces and clippings, inspired by a dense personal scrapbook. */
.collage-home{background-image:url(grain.svg),url(thorn-traces.svg),repeating-linear-gradient(45deg,#57575710 0 1px,transparent 1px 5px);background-size:150px,260px 420px,auto;background-blend-mode:soft-light,soft-light,normal}.collage-home .page{position:relative;border:3px double #85857a;box-shadow:0 0 0 4px #030303,0 0 0 5px #55554d,0 0 65px #000;background:#080909f5}.collage-home header{background:linear-gradient(90deg,#4b434817,transparent 55%,#4b434817);border-color:#8b8b7d}.collage-home .homepage-layout{gap:14px}.collage-home .old-sidebar{background-image:linear-gradient(#090a09ee,#090a09f5),url(thorn-traces.svg);background-size:auto,150px 270px;border:3px double #99998a;box-shadow:inset 0 0 0 3px #060706}.collage-home .side-name{font-size:54px;text-shadow:2px 1px #5d4c5e44,-1px -1px #ddd9c633}.collage-home .old-sidebar nav{border-style:double;border-width:3px;box-shadow:3px 4px #000}.collage-home .side-photo{filter:grayscale(1) contrast(1.4);padding:4px;border-style:double;border-width:3px;outline:1px dotted #77776a;outline-offset:3px}.sidebar-clipping{margin:22px 1px 12px;padding:5px 5px 11px;background:#a6a69c;color:#161616;border:1px solid #d0d0c1;transform:rotate(-3deg);box-shadow:4px 5px #0008}.sidebar-clipping img{display:block;width:100%;height:95px;object-fit:cover;filter:grayscale(1) contrast(1.5)}.sidebar-clipping span{font:8px/1.3 'Courier New',monospace;display:block;margin:6px 0}.sidebar-clipping i{font:italic 11px Georgia,serif;display:block;border-top:1px solid #52524d;padding-top:6px}.collage-home .side-fragment{position:relative;border:3px double #79796b;margin-top:24px}.collage-home .side-fragment:after{content:'✦';position:absolute;bottom:-12px;right:7px;font-size:22px;line-height:1;color:#999989;background:#0b0b0b;padding:0 3px}.collage-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;margin:0 0 11px;border-top:1px solid #858575;border-bottom:3px double #858575;background:repeating-linear-gradient(0deg,#8b8b7b08 0 1px,transparent 1px 3px);font:8px 'Courier New',monospace;color:#aaa99c}.collage-heading i{font:italic 12px Georgia,serif;letter-spacing:.05em}.collage-home .intro-copy{position:relative;overflow:hidden;border-color:#969685;background-image:linear-gradient(90deg,#111111ef,#111111fa),url(thorn-traces.svg);background-size:auto,220px 350px}.collage-home .intro-strip{border-style:double;border-width:3px 0;background:#a8a897;color:#101010;font:9px 'Courier New',monospace;letter-spacing:.1em}.collage-home .sleeve-stamp{position:relative;margin-top:19px;padding-right:35px}.collage-home .sleeve-stamp:after{content:'';position:absolute;right:-12px;top:-14px;width:75px;height:130px;background:url(thorn-traces.svg) center/95px 154px no-repeat;opacity:.65;pointer-events:none}.collage-home .personal-name{text-shadow:1px 1px #000,2px 0 #9b949d44,-1px -1px #e0e0cf33}.collage-home .intro>figure{position:relative;overflow:visible;border-color:#9a9a88;box-shadow:inset 0 0 0 1px #090a09,3px 4px #000,0 0 0 1px #30302a}.collage-home .intro>figure:before,.collage-home .intro>figure:after{display:block;content:'';position:absolute;z-index:3;width:43px;height:14px;top:-5px;background:repeating-linear-gradient(80deg,#a5a59433 0 1px,#84847430 1px 4px);border:1px solid #b2b29a33;backdrop-filter:none;pointer-events:none}.collage-home .intro>figure:before{left:16px;transform:rotate(-13deg)}.collage-home .intro>figure:after{right:16px;transform:rotate(11deg)}.collage-home .tape-frame:after{box-shadow:inset 0 0 40px 13px #0009;background:url(thorn-traces.svg) right -50px bottom -95px /150px 260px no-repeat;opacity:.7}.contact-fragments{display:grid;grid-template-columns:1fr 1.2fr 1.2fr .7fr;gap:9px;margin:6px 0 5px;align-items:stretch}.scrap-fragment{min-width:0;border:3px double #737366;position:relative;min-height:115px;background:#0d0e0d;overflow:hidden}.scrap-text{display:flex;flex-direction:column;justify-content:space-between;padding:12px 10px;color:#bbbbae;background-image:url(grain.svg);background-blend-mode:soft-light}.scrap-text>span{font:18px/.98 Georgia,serif;letter-spacing:-.04em}.scrap-text small{font:6px 'Courier New',monospace;border-top:1px dotted #aaa99b;padding-top:6px}.scrap-photo img{display:block;width:100%;height:115px;object-fit:cover;filter:grayscale(1) contrast(1.8)}.scrap-photo:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg);background-size:auto,95px;mix-blend-mode:screen;opacity:.3}.scrap-photo>span{position:absolute;bottom:4px;left:4px;right:4px;font:7px 'Courier New',monospace;background:#000b;color:#bfbfb2;padding:4px;z-index:1}.scrap-mark{background:url(thorn-traces.svg) center/100% 180% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}.scrap-mark>span{font:45px/.8 Georgia,serif;color:#cacabb}.scrap-mark small{font:italic 8px/1.2 Georgia,serif;background:#070807bd;padding:3px}.collage-home .interlude{padding:16px 0}.collage-home .links,.collage-home #rooms{position:relative;border-color:#969684;background:linear-gradient(100deg,#24242433,transparent),#090a09;box-shadow:3px 4px #000,0 0 0 1px #2c2c25}.collage-home .panel-strip{background:repeating-linear-gradient(90deg,#75756615 0 1px,transparent 1px 3px),#30302a77;border-color:#8a8a78;letter-spacing:.1em}.collage-home .section-head h2{font-size:27px;letter-spacing:-.06em;text-shadow:1px 0 #c1b8c522}.collage-home .link-grid{column-gap:12px}.collage-home .link-grid a{border:1px dotted #71716477;margin:0 0 6px;padding:9px 7px;background:#1e1e1922}.collage-home .link-grid a:hover{background:#6b636322;padding-left:11px;padding-right:11px}.collage-home .room-still{border:3px double #a2a28e;outline:1px dotted #77776a;outline-offset:2px}.collage-home footer{border-color:#9d9d87;background:url(thorn-traces.svg) 62% 55%/75px 120px no-repeat}.collage-home footer:before{content:'† places / traces †';font-size:7px;color:#a2a28e}
@media(max-width:800px){.collage-heading i{font-size:10px}.contact-fragments{grid-template-columns:1fr 1fr}.scrap-fragment{min-height:110px}.sidebar-clipping img{height:80px}.collage-home .sleeve-stamp:after{right:0}}@media(max-width:520px){.collage-home .old-sidebar{background:#0b0d0b}.sidebar-clipping{display:none}.collage-home .side-name{font-size:40px}.collage-heading{font-size:7px;padding:6px 4px}.collage-heading i{font-size:9px;letter-spacing:0}.collage-home .section-head h2{font-size:24px}.scrap-text>span{font-size:22px}.scrap-mark{background-size:90px 160px}.collage-home footer:before{display:none}.collage-home .link-grid a{font-size:12px;padding:10px 5px}}
.collage-home .panel-strip.intro-strip{background:#a8a897;color:#101010}
/* Finer curled edging and suspended details, developed from the individual references. */
.collage-home .page{background-image:linear-gradient(#090909f5,#090909fa),url(filigree-corner.svg);background-position:0 0,right top;background-size:auto,290px 290px;background-repeat:repeat,no-repeat}.collage-home .old-sidebar{position:relative}.collage-home .old-sidebar:before{content:'';display:block;position:absolute;top:-7px;right:-10px;width:90px;height:105px;background:url(filigree-corner.svg) center/100% 100% no-repeat;pointer-events:none;opacity:.58;z-index:1}.collage-home .sleeve-stamp:after{background-image:url(hanging-trace.svg);background-size:63px 110px;background-position:center;opacity:.7;height:135px;right:-6px;top:-17px}.collage-home .intro-copy{background-image:linear-gradient(#111111f7,#111111fc),url(filigree-corner.svg);background-position:center,left top;background-repeat:repeat,no-repeat;background-size:auto,205px}.collage-home .intro-strip{margin-bottom:20px}.collage-home .collage-heading{position:relative;overflow:visible}.collage-home .collage-heading:after{content:'';width:55px;height:65px;position:absolute;right:3px;top:-6px;background:url(filigree-corner.svg) center/100% 100% no-repeat;pointer-events:none;opacity:.6}.collage-home .links:before{display:block;content:'';position:absolute;top:-7px;right:-8px;width:91px;height:100px;background:url(filigree-corner.svg) center/100% 100% no-repeat;z-index:1;pointer-events:none;opacity:.6}.collage-home #rooms:after{content:'';position:absolute;right:-9px;bottom:-12px;width:115px;height:115px;background:url(filigree-corner.svg) center/100% 100% no-repeat;transform:rotate(180deg);opacity:.5;pointer-events:none}.collage-home .scrap-mark{background-image:url(hanging-trace.svg);background-size:72px 127px;background-position:center top;padding-top:83px;justify-content:end;min-height:130px}.scrap-mark>span{display:none}.scrap-mark small{font-size:8px;position:relative;z-index:1}.collage-home .scrap-text{border-style:solid;border-width:1px;border-color:#9e9e90;padding:11px;background-color:#b8b8aa;background-image:linear-gradient(105deg,#e0e0ce18,#00000009),url(grain.svg);color:#171715;transform:rotate(-1.5deg);margin:3px 1px;outline:1px solid #31312b;outline-offset:3px}.collage-home .scrap-text small{border-color:#55554c}.contact-fragments{gap:13px;padding:4px 3px}.collage-home .scrap-photo{border-color:#929280;background:#141413}.collage-home .scrap-photo img{height:130px;filter:grayscale(.95) contrast(1.45);object-position:center 65%}.collage-home .web-badge{background-image:linear-gradient(#080808dc,#080808dc),url(filigree-corner.svg);background-size:auto,100% 100%;outline:1px dotted #6f6f62;outline-offset:3px}.collage-home .link-grid a{box-shadow:inset 0 0 0 2px #05050555}.collage-home .link-grid a:nth-child(4n+1){border-left-style:solid}.collage-home .link-grid a:nth-child(4n+2){border-right-style:solid}.collage-home .room-still:before{content:'';position:absolute;inset:0;pointer-events:none;background:url(filigree-corner.svg) left top/55px 55px no-repeat;z-index:1;opacity:.45}.collage-home .room-still span{z-index:2}@media(max-width:520px){.collage-home .old-sidebar:before{width:65px;height:80px;right:-4px;opacity:.35}.collage-home .scrap-photo img{height:125px}.collage-home .scrap-mark{min-height:125px}.collage-home .links:before{width:66px;height:74px;opacity:.4}.collage-home .sleeve-stamp:after{right:4px}.collage-home #rooms:after{width:90px;height:90px;opacity:.3}.contact-fragments{gap:12px}}
.motion-toolbar{display:flex;justify-content:flex-end;padding:5px 0;min-height:38px}.motion-toggle{font:9px 'Courier New',monospace;color:#c3c3b9;background:#171717;border:2px outset #66665d;padding:7px 10px;min-height:30px;cursor:pointer}.motion-toggle[hidden]{display:none}.motion-toggle:focus-visible{outline:2px solid #d8d8ce;outline-offset:3px}.motion-toggle:disabled{cursor:default;color:#aaa99e}.motion-image{object-fit:cover;max-width:100%;height:auto}.motion-running .tracking{animation-play-state:running}html:not(.motion-running) .tracking{animation-play-state:paused!important}.collage-home .scrap-photo .motion-image{object-fit:contain;object-position:center;background:#070707;filter:none;height:130px}.music-motion-strip{display:flex;align-items:center;gap:18px;border:3px double #66665c;background:#0c0c0b;padding:6px;margin:13px 8px 2px;max-width:390px}.music-motion-strip img{width:135px;height:auto;display:block;filter:none;border:1px solid #74746b}.music-motion-strip span{font:11px/1.7 Georgia,serif;color:#afafa4}.letter-wrap>.motion-toolbar{padding-top:0;margin-top:-7px}.letter-motion{max-width:280px;margin:30px auto 10px;padding:6px;background:#101010;border:3px double #68685e;transform:none;box-shadow:none}.letter-motion:before,.letter-motion:after{display:none}.letter-motion img{display:block;width:100%;height:auto;aspect-ratio:auto;filter:none;transform:none;border:0}.folded-letter .letter-motion{position:relative;z-index:1}@media(max-width:520px){.motion-toolbar{padding:5px 0 0}.music-motion-strip{gap:10px;margin-left:0;margin-right:0}.music-motion-strip img{width:120px}.music-motion-strip span{font-size:10px}.collage-home .scrap-photo .motion-image{height:125px}.letter-motion{margin-top:25px}.motion-toggle{min-height:36px}}
/* A quiet letter; fuller moving collages in the public-facing rooms. */
.letter-page{background:#0d0d0d}.letter-page .paper-grain{display:none}.letter-page .folded-letter{background:#111;border:1px solid #52524e;box-shadow:none}.letter-page .folded-letter:after{display:none}.letter-page .letter-wrap{margin-top:30px}.collage-home .tape-frame .hero-motion-image{aspect-ratio:1.28;object-fit:contain;background:#080808;filter:none;transform:none}.tape-minis{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 3px 7px}.moving-clipping{position:relative;min-width:0;border:3px double #75756a;background:#080808;padding:4px;overflow:hidden}.moving-clipping .motion-image{display:block;width:100%;height:auto;aspect-ratio:1.356;object-fit:contain;filter:none}.moving-clipping>span{display:block;border-top:1px dotted #6c6c60;padding:5px 2px 1px;font:7px/1.4 'Courier New',monospace;color:#aaa99e;letter-spacing:.02em}.tape-minis .moving-clipping{padding:3px;border-width:1px}.tape-minis .moving-clipping>span{font-size:6px;padding-top:3px}.moving-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 8px 5px;max-width:100%}.moving-triptych .moving-clipping:nth-child(2){border-color:#9c9b89}.music-motion-strip{max-width:100%;justify-content:space-between}.music-motion-strip img{width:145px}.music-motion-strip span{flex:1;font-style:italic;letter-spacing:.02em}.question-movies{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 5px;max-width:490px}.question-movies .moving-clipping>span{font-size:8px}.old-sidebar .side-photo.motion-image{height:auto;aspect-ratio:1.356;object-fit:contain;filter:none}.tape-minis .moving-clipping:after,.moving-triptych .moving-clipping:after,.question-movies .moving-clipping:after{content:'';pointer-events:none;position:absolute;inset:3px;border:1px solid #ddd9b509;box-shadow:inset 0 0 12px #0003}@media(max-width:800px){.moving-triptych{gap:7px;margin-left:0;margin-right:0}.moving-triptych .moving-clipping{padding:3px}.moving-triptych .moving-clipping>span{font-size:6px}.tape-minis{gap:8px}.collage-home .tape-frame .hero-motion-image{aspect-ratio:1.356}}@media(max-width:520px){.moving-triptych{grid-template-columns:1fr 1fr;gap:10px}.moving-triptych .moving-clipping:last-child{grid-column:1/-1;max-width:210px;width:100%;justify-self:center}.moving-triptych .moving-clipping>span{font-size:7px}.question-movies{gap:8px}.question-movies .moving-clipping{padding:3px}.question-movies .moving-clipping>span{font-size:7px}.tape-minis .moving-clipping>span{font-size:7px}.music-motion-strip img{width:120px}.letter-page .letter-wrap{margin-top:15px}}
.motion-toolbar{align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;min-height:44px}.sound-panel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid #595952;background:#101010;padding:4px 7px;font:8px 'Courier New',monospace;color:#adada3}.sound-panel[hidden]{display:none}.sound-panel button{font:9px 'Courier New',monospace;min-height:29px;padding:5px 8px;background:#202020;color:#cdcdc2;border:2px outset #68685e;cursor:pointer}.sound-panel button:disabled{cursor:wait;opacity:.7}.sound-volume{display:flex;align-items:center;gap:5px}.sound-volume input{width:68px;height:26px;accent-color:#a8a89c;cursor:pointer}.sound-credit{padding-left:7px;border-left:1px dotted #646459;color:#96968b}.sound-panel button:focus-visible,.sound-volume input:focus-visible{outline:2px solid #d5d5ca;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:520px){.sound-panel{gap:5px;padding:3px 4px}.sound-credit{display:none}.sound-volume input{width:54px}.sound-panel button{min-height:34px;font-size:8px;padding:5px 6px}.sound-panel [data-sound-level]{font-size:7px}.motion-toolbar>.motion-toggle{font-size:8px;padding-left:6px;padding-right:6px;min-height:36px}}
/* The text clipping belongs to the same dark paper as the surrounding frames. */
.collage-home .scrap-text{background-color:#10110f;background-image:linear-gradient(125deg,#9999880a,transparent 45%,#0007),url(grain.svg);color:#c2c2b4;border:3px double #7c7c6d;outline:1px dotted #4c4c43;outline-offset:2px;box-shadow:inset 0 0 17px #0009,3px 4px #0008;padding:11px 9px;transform:rotate(-1deg)}.collage-home .scrap-text>span{text-shadow:1px 0 #aba79922}.collage-home .scrap-text small{border-color:#68685a;color:#9f9f91}
.button-box{margin:20px 0;border:3px double #68685d;background:#0e0e0c;padding:3px 9px 9px;box-shadow:3px 4px #0008}.button-box>.panel-strip{margin:0 -6px 7px}.button-tiles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;padding:4px 0}.badge-link,.badge-decoration{display:inline-flex;align-items:center;justify-content:center;width:88px;min-height:44px;flex:0 0 88px}.button-tiles img.badge-image{display:block;width:88px;height:31px;max-width:none;object-fit:contain;image-rendering:pixelated;filter:none;border:0;padding:0}.badge-link:focus-visible{outline:1px dotted #ddddcc;outline-offset:3px}.badge-link:hover{filter:brightness(1.12)}.button-credit{text-align:center;font:8px/1.5 'Courier New',monospace;color:#949487;margin:5px 0 2px}.button-credit a{text-decoration:underline;color:#adad9e}@media(max-width:520px){.button-tiles{gap:2px 14px}.button-box{padding-left:8px;padding-right:8px}.button-credit{font-size:8px}}

/* Sealed keepsake / password gate for folded note */
.letter-gate[hidden],.folded-letter[hidden]{display:none!important}
.letter-gate{position:relative;border:3px double #73736a;background:linear-gradient(100deg,#28282833,transparent 50%),#131313;padding:32px 35px 28px;margin:12px 0 0;box-shadow:5px 7px #0006;text-align:center;transition:opacity .25s ease,transform .25s ease}
.letter-page .letter-gate{background:#111;border:1px solid #52524e;box-shadow:none}
.letter-gate .panel-strip{margin:-22px -24px 22px}
.gate-seal{width:46px;height:46px;margin:0 auto 16px;border:1px solid #6b6b5d;background:#0e0f0e;display:flex;align-items:center;justify-content:center;font-size:20px;color:#aaa99e;transform:rotate(-4deg);box-shadow:2px 3px #0008}
.gate-body h1{font:italic 26px/1.3 Georgia,serif;letter-spacing:0;color:#d0cec4;margin:0 0 10px}
.gate-desc{font:13px/1.7 Georgia,serif;color:#a3a49c;margin:0 auto 22px;max-width:380px}
.gate-form{max-width:360px;margin:0 auto}
.gate-form label{display:block;font:9px/1.5 'Courier New',monospace;letter-spacing:.08em;color:#9a9b8f;text-transform:lowercase;margin-bottom:8px;text-align:left}
.gate-input-row{display:flex;gap:6px;align-items:center}
.gate-input-row input{flex:1;border:2px inset #595952;background:#090a09;color:#d3d3cc;padding:9px 12px;font:13px 'Courier New',monospace;letter-spacing:.05em;text-transform:none}
.gate-input-row input:focus-visible{outline:2px solid #d5d5cb;outline-offset:2px}
.gate-toggle-pw{padding:7px 11px;border:2px outset #68685e;background:#1e1f1c;color:#aaa99e;font:13px monospace;cursor:pointer;min-height:36px}
.gate-toggle-pw:hover{background:#282925;color:#eee}
.gate-toggle-pw:active{border-style:inset}
.gate-actions{margin-top:16px;display:flex;justify-content:center}
.gate-btn{padding:9px 24px;border:2px outset #6e7062;background:#232520;color:#d6d4c7;font:11px/1.2 'Courier New',monospace;letter-spacing:.06em;cursor:pointer;transition:background .15s,color .15s}
.gate-btn:hover{background:#2f322b;color:#f0ede2}
.gate-btn:active{border-style:inset}
.gate-btn:focus-visible,.gate-toggle-pw:focus-visible{outline:2px solid #d5d5cb;outline-offset:3px}
.gate-status{font:11px/1.5 'Courier New',monospace;letter-spacing:.04em;margin:15px 0 0;min-height:22px}
.gate-status.is-error{color:#c79494}
.gate-status.is-success{color:#9ec297}
.gate-noscript{font:italic 12px/1.6 Georgia,serif;color:#b08b8b;margin-top:15px}
.gate-footer{display:flex;justify-content:space-between;border-top:1px dotted #5e605255;margin-top:24px;padding-top:12px;font:8px 'Courier New',monospace;color:#85877b}
.letter-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px dotted #5e605255;margin-top:28px;padding-top:14px}
.letter-lock-btn{background:transparent;border:0;font:11px 'Courier New',monospace;color:#aaa99f;text-decoration:underline;cursor:pointer;padding:0}
.letter-lock-btn:hover{color:#eee5d9}
.letter-lock-btn:focus-visible{outline:1px dotted #d0d0c6;outline-offset:2px}
@keyframes gate-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.letter-gate.shake{animation:gate-shake .35s ease-in-out}
@keyframes unfold-appear{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.folded-letter.unfolded-anim{animation:unfold-appear .4s ease-out}
.letter-gate.is-unfolding{opacity:0;transform:scale(.98)}
@media(max-width:520px){.letter-gate{padding:24px 18px 20px}.letter-gate .panel-strip{margin:-16px -12px 18px}.gate-body h1{font-size:22px}.gate-desc{font-size:12px}.letter-actions{flex-direction:column;gap:12px;align-items:flex-start}}

/* Room 01: Photographs gallery */
.gallery-intro{padding:0 0 16px}
.gallery-intro h1{font:normal 38px/1.08 'Times New Roman',serif;margin:12px 0 8px;letter-spacing:-.03em}
.gallery-intro h1 em{color:#a9ad98}
.gallery-meta{font:italic 12px/1.6 Georgia,serif;color:var(--muted);margin-bottom:18px}
.gallery-interlude{display:flex;align-items:center;gap:12px;font:9px 'Courier New',monospace;color:#989d8e;letter-spacing:.08em;padding:12px 0 20px}
.gallery-interlude i{flex:1;height:1px;background:repeating-linear-gradient(90deg,#9ca18077 0 3px,transparent 3px 8px)}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;padding-bottom:35px}
.photo-card{position:relative;background:#101210;border:3px double #626854;padding:7px 7px 11px;box-shadow:3px 4px #0008;transition:border-color .2s,transform .2s;display:flex;flex-direction:column}
.photo-card:hover{border-color:#9a9f8b;transform:translateY(-2px)}
.photo-frame{position:relative;overflow:hidden;background:#080908;aspect-ratio:4/3;border:1px solid #4a4e40;cursor:pointer}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.15) brightness(.92);transition:filter .25s,transform .25s}
.photo-card:hover .photo-frame img{filter:grayscale(0) contrast(1.1) brightness(1);transform:scale(1.02)}
.photo-frame:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 3px),url(grain.svg);background-size:auto,120px;opacity:.35;mix-blend-mode:screen}
.photo-stamp{position:absolute;top:7px;left:7px;background:#000a;color:#c9cdba;font:7px/1.3 'Courier New',monospace;letter-spacing:.06em;padding:2px 5px;border:1px solid #6b705888;z-index:2}
.photo-caption{padding:10px 4px 2px;display:flex;flex-direction:column;gap:4px}
.photo-caption h2{font:italic 14px/1.3 Georgia,serif;color:#d8d6ca;margin:0;letter-spacing:0}
.photo-caption p{font:8px/1.4 'Courier New',monospace;color:#9b9f8d;margin:0;letter-spacing:.02em}
.photo-caption time{font:7px 'Courier New',monospace;color:#7e8272;letter-spacing:.04em}
.photo-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;width:100dvw;height:100dvh;z-index:100000;background:rgba(4,5,4,0.92);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;padding:24px 16px;box-sizing:border-box;overflow-y:auto}
.photo-modal[hidden]{display:none!important}
.photo-modal-box{position:relative;max-width:860px;width:100%;margin:auto;background:#0e100e;border:3px double #8a8e79;padding:14px;box-shadow:0 0 60px rgba(0,0,0,0.95);box-sizing:border-box}
.photo-modal-img-wrap{position:relative;max-height:72vh;max-height:72dvh;overflow:hidden;border:1px solid #505445;background:#040504;display:flex;align-items:center;justify-content:center}
.photo-modal-img-wrap img{display:block;max-width:100%;max-height:72vh;max-height:72dvh;width:auto;height:auto;margin:0 auto;object-fit:contain}
.photo-modal-info{padding:12px 6px 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;border-top:1px dotted #5e624f;margin-top:10px}
.photo-modal-title{font:italic 18px Georgia,serif;color:#e2dfd3;margin:0 0 5px}
.photo-modal-desc{font:10px/1.6 'Courier New',monospace;color:#a2a694;margin:0}
.photo-modal-close{padding:6px 14px;border:2px outset #6e7062;background:#20221d;color:#d5d4c6;font:10px 'Courier New',monospace;cursor:pointer}
.photo-modal-close:hover{background:#2d3029;color:#eee}
.photo-modal-close:active{border-style:inset}
@media(max-width:800px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:520px){.photo-grid{grid-template-columns:1fr;gap:16px}.gallery-intro h1{font-size:32px}.photo-modal{padding:10px}.photo-modal-info{flex-direction:column;gap:10px}}

/* Room 02: Writing room */
.writing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;padding-bottom:35px}
.writing-card{position:relative;background:linear-gradient(135deg,#131613 0%,#0c0e0c 100%);border:3px double #626852;padding:22px 22px 18px;box-shadow:3px 4px #0008;transition:border-color .2s,transform .2s;display:flex;flex-direction:column;justify-content:space-between}
.writing-card:hover{border-color:#999e87;transform:translateY(-2px)}
.writing-card-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted #595e49;padding-bottom:10px;margin-bottom:14px}
.writing-card-header h2{font:italic 17px/1.3 Georgia,serif;color:#e1dfd4;margin:0}
.writing-card-stamp{font:8px 'Courier New',monospace;color:#949987;letter-spacing:.08em}
.writing-card p{font:14px/1.85 Georgia,serif;color:#c6c5b9;margin:0 0 16px;text-align:justify;text-justify:inter-word}
.writing-card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px dotted #4f544255;padding-top:10px;font:8px 'Courier New',monospace;color:#858977}
.writing-card-footer span{color:#a0a493}
.writing-quote-banner{margin:15px 0 25px;border:3px double #6b7058;background:#101410;padding:18px 24px;text-align:center;box-shadow:inset 0 0 35px #0009}
.writing-quote-banner blockquote{margin:0;font:italic 16px/1.7 Georgia,serif;color:#d5d4c6}
.writing-quote-banner cite{display:block;margin-top:10px;font:9px 'Courier New',monospace;font-style:normal;color:#9ba08d;letter-spacing:.1em}
@media(max-width:750px){.writing-grid{grid-template-columns:1fr;gap:18px}.writing-card{padding:18px 16px}}

/* 90s Camcorder / VCR On-Screen Display HUD */
.vcr-hud{position:fixed;top:10px;left:14px;z-index:90;display:flex;align-items:center;gap:10px;font:bold 10px/1 'Courier New',monospace;letter-spacing:.08em;color:#9fd3a7;text-shadow:0 0 4px #458f50aa,1px 1px #000;pointer-events:none;user-select:none;opacity:.8}
.vcr-rec{display:inline-flex;align-items:center;gap:4px;color:#e06b6b;text-shadow:0 0 5px #e04848aa,1px 1px #000}
.vcr-dot{font-style:normal;font-size:10px;animation:vcr-blink 1.8s steps(2,start) infinite}
@keyframes vcr-blink{0%,100%{opacity:1}50%{opacity:.15}}
.vcr-mode{color:#c5cdb5;border:1px solid #55604a88;padding:1px 4px;background:#0b0d0bbb}
.vcr-tracking{color:#7e8774;font-size:9px;letter-spacing:.05em}
@media(max-width:700px){.vcr-hud{top:auto;bottom:8px;left:10px;font-size:8px;gap:6px;opacity:.65}.vcr-tracking{display:none}}

/* Thought of the Night / Fragment Drawer */
.fragment-drawer{margin-top:14px;border:1px solid #5a604b;background:#0a0c0a;padding:7px;text-align:center}
.drawer-trigger{width:100%;padding:6px 8px;border:2px outset #666c58;background:#1b1e19;color:#c8cbbe;font:9px 'Courier New',monospace;cursor:pointer;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s}
.drawer-trigger:hover{background:#272b22;color:#eee}
.drawer-trigger:active{border-style:inset}
.drawer-icon{font-size:11px;color:#a4ab96}
.drawer-content{margin-top:8px;padding:9px 7px 6px;border-top:1px dotted #595e49;background:#060806;text-align:left}
.drawer-meta{display:block;font:8px 'Courier New',monospace;color:#8f9482;letter-spacing:.06em;margin-bottom:6px;border-bottom:1px dotted #4d523f;padding-bottom:3px}
.drawer-text{font:italic 11px/1.65 Georgia,serif;color:#c9c7bb;margin:0 0 7px;text-align:left}
.drawer-sub{display:block;font:7px 'Courier New',monospace;color:#6f7464;text-align:center;letter-spacing:.04em}
@keyframes drawer-fade-in{0%{opacity:0;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}
.drawer-text.drawer-fade{animation:drawer-fade-in .3s ease-out}

/* Multi-track cassette selector */
.sound-track-select{font:9px 'Courier New',monospace;background:#181b16;color:#ccc;border:1px solid #585d4d;padding:3px 5px;cursor:pointer;outline:none;border-radius:0}
.sound-track-select:focus-visible{outline:1px dotted #d0d0c6;outline-offset:1px}
@media(max-width:520px){.sound-track-select{font-size:8px;padding:2px 3px}}

/* Old-Web Guestbook & Tagboard */
.guestbook-wrap{padding:0 0 35px}
.guestbook-card{border:3px double #6b7058;background:#111410;padding:20px;margin-bottom:28px;box-shadow:3px 4px #0008}
.guestbook-card h2{font:italic 18px Georgia,serif;color:#e0ddd2;margin:0 0 6px}
.guestbook-card p{font:12px/1.6 'Courier New',monospace;color:#9ca18d;margin:0 0 16px}
.guestbook-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.guestbook-field-full{grid-column:1/-1}
.guestbook-form label{display:block;font:8px/1.4 'Courier New',monospace;color:#949985;letter-spacing:.08em;margin-bottom:5px;text-transform:lowercase}
.guestbook-form input,.guestbook-form textarea{width:100%;background:#090b09;border:2px inset #525646;color:#d5d4c7;padding:8px 10px;font:12px 'Courier New',monospace;box-sizing:border-box}
.guestbook-form textarea{min-height:90px;resize:vertical}
.guestbook-form input:focus-visible,.guestbook-form textarea:focus-visible{outline:2px solid #d5d5ca;outline-offset:2px}
.guestbook-btn{padding:8px 20px;border:2px outset #6d725c;background:#20241c;color:#d7d5c8;font:10px 'Courier New',monospace;letter-spacing:.06em;cursor:pointer}
.guestbook-btn:hover{background:#2c3026;color:#eee}
.guestbook-btn:active{border-style:inset}
.guestbook-status{font:10px 'Courier New',monospace;color:#9dbf95;margin-top:10px;min-height:16px}
.tagboard-feed{display:flex;flex-direction:column;gap:16px}
.tag-entry{position:relative;border:1px solid #5a5f4d;background:#0d0f0c;padding:14px 16px;box-shadow:2px 3px #0006}
.tag-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted #4d523e;padding-bottom:6px;margin-bottom:10px;font:9px 'Courier New',monospace}
.tag-author{color:#dedac8;font-weight:bold}
.tag-loc{color:#8b907c;margin-left:8px;font-style:italic}
.tag-time{color:#767a68;font-size:8px}
.tag-body{font:13px/1.75 Georgia,serif;color:#c9c8bc;margin:0}
.tag-num{position:absolute;top:-8px;right:14px;background:#161914;border:1px solid #555b46;padding:1px 5px;font:7px 'Courier New',monospace;color:#8f947e}
@media(max-width:650px){.guestbook-form{grid-template-columns:1fr}}

/* 404 Lost Signal Page */
.page-404{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;box-sizing:border-box}
.tv-static-frame{position:relative;max-width:580px;width:100%;border:4px double #777b68;background:#0c0e0c;padding:35px 30px;box-shadow:0 0 45px #000,inset 0 0 50px #000b;text-align:center;overflow:hidden}
.tv-static-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none}
.tv-osd-strip{display:flex;justify-content:space-between;align-items:center;font:bold 9px 'Courier New',monospace;color:#94c99c;text-shadow:0 0 4px #52a65ecc;border-bottom:1px solid #4a544155;padding-bottom:12px;margin-bottom:28px}
.tv-static-frame h1{font:normal 32px/1.2 'Times New Roman',serif;color:#dedcd2;margin:0 0 14px;letter-spacing:-.02em}
.tv-static-frame h1 em{font-style:italic;color:#a8aba0}
.lost-note{font:italic 13px/1.8 Georgia,serif;color:#a9ad9c;margin:0 0 28px}
.lost-back{display:inline-block;padding:9px 24px;border:2px outset #6e725d;background:#20231d;color:#d7d5c8;font:11px 'Courier New',monospace;letter-spacing:.06em;text-decoration:none;transition:background .15s}
.lost-back:hover{background:#2c3026;color:#eee}
.lost-back:active{border-style:inset}

/* Hidden Keystones */
.keystone-dot{color:inherit;text-decoration:none;opacity:.35;transition:opacity .2s,color .2s;font-size:10px;margin-left:4px}
.keystone-dot:hover{opacity:1;color:#eee5d9;text-shadow:0 0 5px #c5b59b}

/* CRT & Scanline Mode */
.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:99990;display:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,0.65) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,0.45) 0px,rgba(0,0,0,0.45) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(90deg,rgba(255,0,0,0.02) 0px,rgba(0,255,0,0.015) 1px,rgba(0,0,255,0.02) 2px,transparent 3px);box-shadow:inset 0 0 100px rgba(0,0,0,0.85),inset 0 0 30px rgba(0,0,0,0.95);animation:crt-flicker .12s infinite alternate}
.crt-overlay:after{content:'';position:fixed;top:0;left:0;right:0;height:100px;background:linear-gradient(to bottom,transparent 0%,rgba(215,230,200,0.04) 50%,transparent 100%);animation:crt-roll 8s linear infinite;pointer-events:none}
@keyframes crt-roll{0%{transform:translateY(-100px)}100%{transform:translateY(100vh)}}
@keyframes crt-flicker{0%{opacity:.92}100%{opacity:.99}}
html.crt-mode .crt-overlay{display:block!important}
html.crt-mode body{text-shadow:0 0 2px rgba(220,228,210,0.45)}
.crt-toggle{background:#1a1e17;color:#adb29f;border:1px outset #5a604c;font:10px 'Courier New',monospace;padding:4px 8px;cursor:pointer;letter-spacing:.05em;transition:background .15s,color .15s}
.crt-toggle:hover{background:#252b21;color:#eee}
.crt-toggle[aria-pressed="true"]{background:#2b3324;color:#a4d49d;border-color:#6a7d5b;text-shadow:0 0 3px #5ea35ecc}

/* Retro Midnight Webring Widget */
.webring-widget{margin:30px 0 24px;border:2px outset #525845;background:#0d0f0c;padding:16px 18px;box-shadow:2px 3px 0 #000}
.webring-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dotted #4d533d;padding-bottom:6px;margin-bottom:10px;font:bold 10px 'Courier New',monospace;letter-spacing:.08em}
.webring-title{color:#ded9c6;display:flex;align-items:center;gap:6px}
.webring-id{color:#93b58c}
.webring-body{margin-bottom:12px}
.webring-current-name{font:bold 13px 'Courier New',monospace;color:#efece0;margin:0 0 4px}
.webring-current-desc{font:italic 12px Georgia,serif;color:#9da091;margin:0 0 6px}
.webring-status{font:9px 'Courier New',monospace;display:inline-block}
.webring-status.is-active{color:#8ed088}
.webring-status.is-remote{color:#7b8070}
.webring-controls{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px dotted #3c4230}
.webring-btn{padding:4px 10px;background:#171b14;border:1px outset #585e4a;color:#c9c7ba;font:10px 'Courier New',monospace;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.webring-btn:hover{background:#252b20;color:#f0eee2}
.webring-btn:active{border-style:inset}
.webring-drawer{margin-top:12px;padding:10px 12px;background:#090a08;border:1px inset #404633}
.webring-list{list-style:none;margin:0;padding:0;font:10px 'Courier New',monospace}
.webring-list li{padding:4px 0;border-bottom:1px dotted #272c21;color:#a4a999}
.webring-list li:last-child{border-bottom:none}
.webring-list li strong{color:#ddd9cc}

/* Seth 88x31 Button Showcase */
.own-button-zone{margin-top:24px;padding-top:18px;border-top:1px dashed #474d39;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.own-button-preview{display:flex;flex-direction:column;align-items:center;gap:6px}
.own-button-preview span{font:8px 'Courier New',monospace;color:#787d6b;text-transform:uppercase}
.own-button-code-box{display:flex;flex-direction:column;gap:6px}
.own-button-label{font:10px 'Courier New',monospace;color:#a4a997}
.own-button-input-wrap{display:flex;gap:6px}
.own-button-input{flex:1;background:#070907;border:1px inset #4d543e;color:#bfc3b4;padding:5px 8px;font:9px 'Courier New',monospace}
.own-button-input:focus{outline:1px solid #9fb896}
.own-button-copy-btn{background:#1e241b;border:1px outset #5a624d;color:#d6d4c7;font:9px 'Courier New',monospace;padding:5px 10px;cursor:pointer;white-space:nowrap}
.own-button-copy-btn:hover{background:#2b3327;color:#fff}
.own-button-copy-btn:active{border-style:inset}
@media (max-width:600px){.own-button-zone{grid-template-columns:1fr}}

/* Room 04 Wander Preview */
.still-four{background-image:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),url(grain.svg),url(after-rain.jpg);background-position:center;transform:rotate(.5deg)}

/* Luminous White Glow on Seth */
.side-name,
.sleeve-stamp .personal-name,
.collage-home .side-name,
.collage-home .personal-name {
  color: #ffffff !important;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 255, 255, 0.75),
    0 0 22px rgba(255, 255, 255, 0.5),
    0 0 38px rgba(255, 255, 255, 0.28) !important;
  transition: text-shadow 0.25s ease, filter 0.25s ease, color 0.2s ease;
}

.side-name:hover {
  color: #ffffff !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 1),
    0 0 15px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(255, 255, 255, 0.7),
    0 0 50px rgba(255, 255, 255, 0.45) !important;
}

header a.name {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 16px rgba(255, 255, 255, 0.35);
  transition: text-shadow 0.2s ease;
}

header a.name:hover {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Vintage 1990s Web Odometer Hit Counter */
.hit-counter {
  margin: 18px auto 14px;
  text-align: center;
  user-select: none;
  max-width: 140px;
}

.hit-counter-label {
  display: block;
  font: 9px/1.3 'Courier New', monospace;
  letter-spacing: 0.12em;
  color: #8c937f;
  text-transform: lowercase;
  margin-bottom: 5px;
}

.hit-counter-odometer {
  display: inline-flex;
  padding: 3px 4px;
  background: #050705;
  border: 2px inset #525a43;
  box-shadow: inset 0 0 6px #000, 2px 2px 0 #000;
  gap: 1px;
}

.hit-counter-digit {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 20px;
  line-height: 20px;
  font: bold 12px/20px 'Courier New', monospace;
  text-align: center;
  color: #9fe29b;
  text-shadow: 0 0 5px rgba(159, 226, 155, 0.75), 0 1px 0 #000;
  background: linear-gradient(180deg, #0e130c 0%, #1e2619 45%, #080a06 50%, #171f14 100%);
  border-right: 1px solid #080a07;
  border-left: 1px solid #283323;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
}

.hit-counter-digit:first-child {
  border-left: none;
}

.hit-counter-digit:last-child {
  border-right: none;
}

@keyframes odometer-roll {
  0% { transform: translateY(-40%); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}

.hit-counter-digit.is-rolling {
  animation: odometer-roll 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.footer-counter {
  font: 9px 'Courier New', monospace;
  color: #7d846e;
  letter-spacing: 0.06em;
}

.footer-counter span {
  color: #9fe29b;
  background: #080b07;
  padding: 1px 5px;
  border: 1px inset #444c37;
  letter-spacing: 0.15em;
  font-weight: bold;
}

@media(max-width:520px) {
  .old-sidebar .hit-counter {
    grid-column: 1 / -1;
    margin: 8px 0 4px;
    text-align: left;
  }
}

/* Custom Gothic Cursors */
html, body {
  cursor: url('cursors/gNormal.cur') 0 0, url('cursors/gNormal.png') 0 0, default;
}

a, button, [role="button"], input[type="submit"], input[type="button"], select, summary, .interactive, .btn-wander, .drawer-trigger, .webring-btn {
  cursor: url('cursors/gSelect.cur') 0 0, url('cursors/gSelect.png') 0 0, pointer;
}

input[type="text"], input[type="search"], textarea {
  cursor: url('cursors/gTextSelect.cur') 16 16, url('cursors/gTextSelect.png') 16 16, text;
}

/* Night Telemetry Panel (Moon Phase & Weather) */
.night-telemetry-panel {
  margin-top: 19px;
  border: 1px solid #5a604b;
  background: #080b08;
  text-align: left;
}

.night-telemetry-panel .panel-label {
  text-align: center;
  display: block;
}

.telemetry-body {
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.telemetry-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.telemetry-icon {
  font-size: 16px;
  line-height: 1;
  filter: grayscale(0.2) contrast(1.2);
}

.telemetry-data {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.telemetry-title {
  font: 10px/1.3 'Courier New', monospace;
  color: #d1d5c5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telemetry-sub {
  font: 8px/1.2 'Courier New', monospace;
  color: #7d846e;
}

/* ======================================================
   ANALOG MEDIA CONSOLE: AM RADIO TUNER & ANSWERING MACHINE
   ====================================================== */

.analog-console-section {
  margin: 22px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* --- AM Shortwave Radio Tuner Chassis --- */
.radio-tuner-card,
.ans-machine-card {
  border: 3px double #787e69;
  background: #0d110d;
  box-shadow: 3px 4px 0 #000, inset 0 0 0 1px #22291d;
  padding: 12px 14px 14px;
  position: relative;
  overflow: hidden;
}

.tuner-header,
.ans-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #444c37;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.tuner-model,
.ans-model {
  font: bold 10px 'Courier New', monospace;
  color: #cfd4c2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tuner-meta,
.ans-meta {
  font: 8px 'Courier New', monospace;
  color: #8c937f;
}

/* Radio Scale & Tuning Needle */
.tuner-display-box {
  background: #050705;
  border: 2px inset #474f3b;
  padding: 8px 10px;
  box-shadow: inset 0 0 8px #000;
  margin-bottom: 10px;
}

.tuner-frequency-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tuner-freq-digits {
  font: bold 16px 'Courier New', monospace;
  color: #a4f09d;
  text-shadow: 0 0 6px rgba(164, 240, 157, 0.7), 0 1px 0 #000;
  letter-spacing: 0.05em;
}

.tuner-indicators {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tuner-led {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 8px 'Courier New', monospace;
  color: #555e4b;
}

.tuner-led-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #252b20;
  border: 1px solid #141712;
  box-shadow: inset 0 0 2px #000;
  transition: background 0.15s, box-shadow 0.15s;
}

.tuner-led.is-tuned .tuner-led-dot {
  background: #50ff50;
  box-shadow: 0 0 8px #50ff50, 0 0 14px #50ff50aa;
}

.tuner-led.is-tuned {
  color: #c5ffd0;
}

.tuner-scale-track {
  position: relative;
  height: 28px;
  background: repeating-linear-gradient(90deg, #1b2217 0 1px, transparent 1px 12px), #070906;
  border: 1px solid #333a2a;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  margin-bottom: 4px;
}

.tuner-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ea4b4b;
  box-shadow: 0 0 5px #ff5050;
  pointer-events: none;
  transform: translateX(-50%);
  left: 32%;
}

.tuner-ticks-labels {
  display: flex;
  justify-content: space-between;
  font: 7px 'Courier New', monospace;
  color: #6d7560;
  letter-spacing: -0.02em;
}

.tuner-station-callsign {
  font: 9px/1.3 'Courier New', monospace;
  color: #a9b09d;
  background: #090c08;
  border: 1px dotted #363d2e;
  padding: 4px 6px;
  text-align: center;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tuner-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radio-btn-pwr {
  background: #171b14;
  border: 1px outset #5a624d;
  color: #d6d4c7;
  font: bold 9px 'Courier New', monospace;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.15s, color 0.15s;
}

.radio-btn-pwr[aria-pressed="true"] {
  background: #25331e;
  color: #a4f09d;
  border-style: inset;
  box-shadow: inset 0 0 5px #000;
}

.radio-btn-pwr:hover {
  background: #2c3625;
}

.tuner-presets {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tuner-preset-btn {
  background: #141712;
  color: #929986;
  border: 1px outset #474f3a;
  padding: 3px 6px;
  font: 8px 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tuner-preset-btn:hover {
  background: #232c1e;
  color: #fff;
  border-color: #7a8864;
}

.tuner-preset-btn:active {
  border-style: inset;
  transform: translateY(1px);
}

.radio-tuner-card.is-powered .tuner-display-box {
  background: radial-gradient(ellipse at center, #131d10 0%, #050705 100%);
  border-color: #5d6f4c;
  box-shadow: inset 0 0 15px rgba(164, 240, 157, 0.18), 0 0 8px rgba(164, 240, 157, 0.08);
}

.radio-tuner-card.is-powered .tuner-needle {
  box-shadow: 0 0 6px #ff4040, 0 0 12px rgba(255, 60, 60, 0.7);
}

.radio-tuner-card.is-powered .tuner-scale-track {
  background: repeating-linear-gradient(90deg, #25331f 0 1px, transparent 1px 12px), #090e07;
}

/* --- Panasonic Micro-Cassette Answering Machine --- */
.ans-window {
  background: #050705;
  border: 2px inset #474f3b;
  padding: 10px 12px;
  box-shadow: inset 0 0 10px #000;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ans-cassette-housing {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #121611;
  border: 1px solid #333a2a;
  padding: 6px 12px;
}

.ans-spool {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #5a624d;
  background: repeating-conic-gradient(#1b2118 0deg 30deg, #3a4233 30deg 60deg);
  box-shadow: inset 0 0 4px #000;
}

@keyframes spool-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ans-spool.is-spinning {
  animation: spool-spin 1.8s linear infinite;
}

.ans-counter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ans-counter-title {
  font: 7px 'Courier New', monospace;
  color: #7d846e;
  text-transform: uppercase;
}

.ans-counter-display {
  background: #1c0505;
  border: 1px inset #501515;
  padding: 2px 7px;
  font: bold 16px/1.1 'Courier New', monospace;
  color: #ff4545;
  text-shadow: 0 0 6px rgba(255, 69, 69, 0.8), 0 1px 0 #000;
  letter-spacing: 0.1em;
}

.ans-status-strip {
  font: 9px/1.3 'Courier New', monospace;
  color: #a4ad99;
  background: #090c08;
  border: 1px dotted #363d2e;
  padding: 4px 6px;
  text-align: center;
  margin-bottom: 10px;
}

.ans-buttons-cluster {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ans-btn {
  flex: 1;
  min-width: 48px;
  background: #171c14;
  border: 1px outset #58604b;
  color: #d1d4c7;
  font: bold 9px/1 'Courier New', monospace;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.1s, color 0.1s;
}

.ans-btn:hover {
  background: #252e20;
  color: #fff;
}

.ans-btn:active,
.ans-btn.is-active {
  border-style: inset;
  background: #222b1c;
  color: #9fe29b;
}

@media(max-width: 768px) {
  .analog-console-section {
    grid-template-columns: 1fr;
  }
}

/* Floating DVD Bouncing Animated Sticker */
.floating-dvd-sticker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9990;
  user-select: none;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
  transition: filter 0.2s ease;
  will-change: transform;
}

.floating-dvd-sticker:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.75));
}

.floating-dvd-sticker.is-grabbing {
  cursor: grabbing;
  filter: drop-shadow(0 0 14px #a4f09d);
}

@media (prefers-reduced-motion: reduce) {
  .floating-dvd-sticker {
    display: none;
  }
}

/* Elsewhere Link Buttons & Icons */
.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.collage-home .link-grid a.link-btn,
.link-grid a.link-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin: 0;
  background: linear-gradient(180deg, #161814 0%, #0d0f0c 100%);
  border: 1px solid #4d5341;
  box-shadow: inset 1px 1px 0 #ffffff14, inset -1px -1px 0 #000000aa, 2px 2px 4px #00000088;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

.collage-home .link-grid a.link-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a4f09d33, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.collage-home .link-grid a.link-btn:hover,
.link-grid a.link-btn:hover {
  background: linear-gradient(180deg, #22261e 0%, #131711 100%);
  border-color: #8c947e;
  box-shadow: inset 1px 1px 0 #ffffff22, inset -1px -1px 0 #000000, 0 0 12px rgba(164, 240, 157, 0.16);
  transform: translateY(-1px);
  padding-left: 10px;
  padding-right: 10px;
}

.collage-home .link-grid a.link-btn:hover:before {
  opacity: 1;
}

.collage-home .link-grid a.link-btn:active,
.link-grid a.link-btn:active {
  transform: translateY(1px);
  box-shadow: inset -1px -1px 0 #ffffff11, inset 1px 1px 3px #000000;
  background: #0d0f0c;
}

.link-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: #090b08;
  border: 1px solid #414736;
  box-shadow: inset 1px 1px 2px #000000;
  color: #adb29f;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.link-btn:hover .link-btn-icon {
  color: #ffffff;
  border-color: #9da68e;
  box-shadow: 0 0 8px rgba(164, 240, 157, 0.35);
  transform: scale(1.05);
}

.link-btn-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.link-platform {
  font-family: 'Times New Roman', serif;
  font-size: 13px;
  color: #dedcd2;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.link-handle {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #8f9582;
  margin-top: 2px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-btn:hover .link-platform {
  color: #ffffff;
}

.link-btn:hover .link-handle {
  color: #c0c6b1;
}

.link-btn-arrow {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #6a705c;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.link-btn:hover .link-btn-arrow {
  color: #a4f09d;
  transform: translate(1px, -1px);
}

/* Web Buttons Shelf */
.web-buttons-shelf {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dotted #59604c66;
}

.web-buttons-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 9px 'Courier New', monospace;
  letter-spacing: 0.08em;
  color: #929986;
  margin-bottom: 12px;
}

.web-buttons-header small {
  color: #6d7360;
  font-size: 8px;
}

.web-buttons-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  background: #080a08aa;
  border: 1px solid #3c4232;
  box-shadow: inset 0 0 10px #000000aa;
}

.web-buttons-track img {
  display: block;
  width: 88px;
  height: 31px;
  border: 1px solid #4a513d;
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 #000000;
  filter: contrast(1.05) brightness(0.92);
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.web-buttons-track img:hover {
  transform: translateY(-2px) scale(1.04);
  filter: contrast(1.15) brightness(1.1);
  border-color: #a4f09d;
  box-shadow: 0 0 10px rgba(164, 240, 157, 0.45), 2px 3px 0 #000000;
}

@media (max-width: 600px) {
  .link-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .web-buttons-track {
    gap: 6px;
  }
}

/* --- Secret Desk Drawer Easter Egg --- */
.drawer-key-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 14px 0 10px;
  padding: 5px 8px;
  background: #111410;
  border: 1px outset #535946;
  color: #9ea492;
  font: 9px/1 'Courier New', monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  transition: all 0.15s ease;
}

.drawer-key-trigger:hover {
  background: #1d221a;
  color: #e5e3d7;
  border-color: #8c967d;
  box-shadow: 0 0 8px rgba(164, 240, 157, 0.25);
}

.drawer-key-trigger:active {
  border-style: inset;
  transform: translateY(1px);
}

.drawer-key-trigger .key-icon {
  font-size: 11px;
  color: #c4b58e;
}

.secret-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.secret-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 4, 0.88);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.secret-drawer-case {
  position: relative;
  max-width: 660px;
  width: 100%;
  border: 3px double #787e69;
  background: #0d100c;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 4px 6px 0 #000;
  z-index: 1;
  user-select: none;
  animation: drawer-slide-in 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes drawer-slide-in {
  from {
    transform: translateY(40px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.secret-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #141812;
  border-bottom: 1px dotted #4e5541;
  font: 9px 'Courier New', monospace;
  color: #a4ad97;
  letter-spacing: 0.08em;
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-hint {
  color: #6d7560;
  font-size: 8px;
}

.drawer-close-btn {
  background: #1f251a;
  border: 1px outset #5a644c;
  color: #cfcbbe;
  font: 8px 'Courier New', monospace;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}

.drawer-close-btn:hover {
  background: #333d2c;
  color: #fff;
  border-color: #8fa078;
}

.secret-drawer-tabletop {
  position: relative;
  height: 380px;
  background: radial-gradient(ellipse at center, #1b2116 0%, #080a07 100%),
              repeating-linear-gradient(45deg, rgba(85, 92, 71, 0.04) 0 1px, transparent 1px 4px);
  border: 2px inset #2d3325;
  overflow: hidden;
}

.secret-drawer-footer {
  padding: 6px 12px;
  background: #0a0c09;
  border-top: 1px dotted #3d4333;
  font: 8px 'Courier New', monospace;
  color: #727a65;
  text-align: center;
  letter-spacing: 0.05em;
}

/* --- Relics Styling --- */
.drawer-relic {
  position: absolute;
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.15s, transform 0.1s;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.8));
}

.drawer-relic:hover {
  filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(164, 240, 157, 0.3));
}

.drawer-relic.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(6px 14px 22px rgba(0, 0, 0, 0.98)) scale(1.02);
}

/* Relic 1: Ticket */
.relic-ticket {
  width: 200px;
  background: #d8cfa8;
  color: #2b2519;
  padding: 10px 12px;
  border: 1px dashed #7a7051;
  box-shadow: inset 0 0 20px rgba(139, 114, 52, 0.25);
  font-family: 'Courier New', monospace;
}

.ticket-cutout {
  position: absolute;
  left: -8px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #151a11;
  transform: translateY(-50%);
}

.ticket-header {
  font: bold 9px 'Courier New', monospace;
  border-bottom: 1px solid #5a4e32;
  padding-bottom: 4px;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}

.ticket-route {
  font: 11px Georgia, serif;
  font-style: italic;
  margin-bottom: 6px;
}

.ticket-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  margin-bottom: 6px;
  color: #4b412b;
}

.ticket-barcode {
  font-size: 8px;
  letter-spacing: 2px;
  text-align: center;
  color: #3b3320;
}

.ticket-stamp {
  font: bold 8px 'Courier New', monospace;
  color: #b52c2c;
  border: 1px solid #b52c2c;
  padding: 1px 4px;
  display: inline-block;
  margin-top: 4px;
  transform: rotate(-4deg);
}

/* Relic 2: Matchbook */
.relic-matchbook {
  width: 140px;
  background: #1a1a1c;
  color: #eae5d8;
  border: 1px solid #3d3b38;
  box-shadow: 2px 3px 6px #000;
  font-family: 'Courier New', monospace;
}

.matchbook-cover {
  padding: 12px 10px;
  text-align: center;
}

.matchbook-brand {
  font: bold 11px Georgia, serif;
  letter-spacing: 0.1em;
  color: #d6caaa;
}

.matchbook-sub {
  font-size: 7px;
  color: #8c8677;
  margin: 3px 0 8px;
  letter-spacing: 0.08em;
}

.matchbook-scribble {
  font: italic 11px/1.3 Georgia, serif;
  color: #d85c5c;
  border-top: 1px dotted #4d463b;
  padding-top: 6px;
}

.matchbook-strip {
  height: 14px;
  background: repeating-linear-gradient(45deg, #443224 0 2px, #2a1f16 2px 4px);
  border-top: 1px solid #111;
}

/* Relic 3: Film Strip */
.relic-film-strip {
  width: 210px;
  background: rgba(18, 15, 12, 0.88);
  border: 1px solid #4a3e2c;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.sprocket-holes {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
}

.sprocket-holes span {
  width: 6px;
  height: 4px;
  background: #080a07;
  border: 1px solid #332b1f;
  border-radius: 1px;
}

.film-frames {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}

.film-frame {
  flex: 1;
  position: relative;
  background: #0a0806;
  border: 1px solid #382e20;
}

.film-content {
  height: 48px;
  background-size: cover;
  background-position: center;
  filter: invert(0.85) sepia(0.6) hue-rotate(180deg) contrast(1.4);
}

.film-content.frame-1 { background-image: url('night-street.jpg'); }
.film-content.frame-2 { background-image: url('snow-street.jpg'); }
.film-content.frame-3 { background-image: url('street-tape.jpg'); }

.frame-num {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font: 6px 'Courier New', monospace;
  color: #8c764a;
}

/* Relic 4: Diner Receipt */
.relic-receipt {
  width: 170px;
  background: #f0ede1;
  color: #2b2b28;
  padding: 12px 10px;
  font-family: 'Courier New', monospace;
  border-top: 2px dotted #8c897d;
  border-bottom: 2px dotted #8c897d;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  position: relative;
}

.receipt-coffee-stain {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(138, 92, 53, 0.22);
  pointer-events: none;
  box-shadow: inset 0 0 6px rgba(138, 92, 53, 0.15);
}

.receipt-head {
  font: bold 9px 'Courier New', monospace;
  text-align: center;
  margin-bottom: 4px;
}

.receipt-date {
  font-size: 7px;
  color: #6e6a5f;
  text-align: center;
  border-bottom: 1px dashed #aaa79a;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  margin-bottom: 3px;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  font: bold 9px 'Courier New', monospace;
  border-top: 1px solid #444;
  padding-top: 4px;
  margin-top: 6px;
}

.receipt-note {
  font: italic 9px Georgia, serif;
  color: #3f476b;
  margin-top: 8px;
  border-top: 1px dotted #aaa;
  padding-top: 4px;
}

/* Relic 5: Key */
.relic-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}

.key-shape {
  position: relative;
  width: 55px;
  height: 18px;
}

.key-bow {
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #2b2416 35%, #b59b5a 40%, #7d6837 100%);
  border: 1px solid #4a3e20;
}

.key-shaft {
  position: absolute;
  left: 13px;
  top: 7px;
  width: 38px;
  height: 4px;
  background: linear-gradient(180deg, #d4ba77, #7a6534);
}

.key-bit {
  position: absolute;
  right: 6px;
  top: 10px;
  width: 12px;
  height: 6px;
  background: #87713b;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 70% 50%, 40% 50%, 40% 100%, 0 100%);
}

.key-tag {
  background: #ebe5cf;
  color: #3b3424;
  border: 1px solid #8c7e5a;
  padding: 2px 6px;
  font: bold 8px 'Courier New', monospace;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  .secret-drawer-tabletop {
    height: 320px;
  }
  .relic-ticket { width: 160px; }
  .relic-matchbook { width: 120px; }
  .relic-film-strip { width: 170px; }
  .relic-receipt { width: 140px; }
}

/* --- Cassette J-Card Sleeve Generator Studio --- */
.jcard-generator-section {
  margin-top: 36px;
  padding-bottom: 25px;
}

.jcard-card {
  border: 3px double #6d755c;
  background: #0f120e;
  padding: 20px;
  box-shadow: 3px 4px 0 #000;
  margin-top: 15px;
}

.jcard-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dotted #484f3d;
  padding-bottom: 6px;
  margin-bottom: 12px;
  font: 9px 'Courier New', monospace;
  letter-spacing: 0.08em;
}

.jcard-tag {
  color: #ded9c6;
  font-weight: bold;
}

.jcard-meta {
  color: #7b826e;
}

.jcard-desc {
  font: italic 12px/1.6 Georgia, serif;
  color: #a4a899;
  margin: 0 0 20px;
}

.jcard-studio-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.jcard-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jcard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.jcard-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jcard-field label {
  font: 8px/1.3 'Courier New', monospace;
  letter-spacing: 0.08em;
  color: #8c937f;
  text-transform: lowercase;
}

.jcard-field input,
.jcard-field select,
.jcard-field textarea {
  background: #070907;
  border: 1px solid #4a523e;
  color: #dedcd2;
  font: 11px 'Courier New', monospace;
  padding: 6px 8px;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
}

.jcard-field input:focus,
.jcard-field select:focus,
.jcard-field textarea:focus {
  border-color: #8a9673;
  box-shadow: 0 0 6px rgba(164, 240, 157, 0.25);
}

.jcard-actions-bar {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.jcard-btn-primary {
  flex: 1;
  background: #242c1e;
  border: 1px outset #637050;
  color: #e5f5df;
  font: bold 10px 'Courier New', monospace;
  padding: 9px 12px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 #000;
}

.jcard-btn-primary:hover:not(:disabled) {
  background: #333f2a;
  border-color: #86996c;
  color: #fff;
}

.jcard-btn-primary:active:not(:disabled) {
  border-style: inset;
  transform: translateY(1px);
}

.jcard-btn-secondary {
  background: #171a14;
  border: 1px outset #4b523e;
  color: #c5c3b6;
  font: 10px 'Courier New', monospace;
  padding: 9px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.jcard-btn-secondary:hover {
  background: #23291d;
  color: #fff;
}

/* J-Card Live Preview Canvas Box */
.jcard-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jcard-preview-tag {
  font: 8px 'Courier New', monospace;
  color: #7b826f;
  letter-spacing: 0.08em;
}

.jcard-canvas-box {
  background: #060806;
  border: 2px inset #373e2e;
  padding: 16px;
  box-shadow: inset 0 0 14px #000;
  overflow-x: auto;
}

.jcard-cut-guide {
  position: relative;
  display: flex;
  background: #f4eee1;
  border: 1px solid #24211a;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.85);
  width: 100%;
  max-width: 490px;
  aspect-ratio: 4.06 / 4;
  height: auto;
  min-height: 285px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Crop marks */
.cut-guide-corner {
  position: absolute;
  width: 8px;
  height: 8px;
}
.cut-guide-corner.tl { top: -4px; left: -4px; border-top: 1px solid #888; border-left: 1px solid #888; }
.cut-guide-corner.tr { top: -4px; right: -4px; border-top: 1px solid #888; border-right: 1px solid #888; }
.cut-guide-corner.bl { bottom: -4px; left: -4px; border-bottom: 1px solid #888; border-left: 1px solid #888; }
.cut-guide-corner.br { bottom: -4px; right: -4px; border-bottom: 1px solid #888; border-right: 1px solid #888; }

.jcard-panel {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  color: #1a1a16;
}

.jcard-panel .panel-tag {
  position: absolute;
  top: -14px;
  left: 0;
  font: 6px 'Courier New', monospace;
  color: #727a66;
  white-space: nowrap;
}

.fold-indicator {
  position: absolute;
  right: -10px;
  bottom: 4px;
  font: 6px 'Courier New', monospace;
  color: #8c8574;
  pointer-events: none;
}

/* Panel 1: Flap */
.jcard-panel-flap {
  width: 25%;
  flex-shrink: 0;
  border-right: 1px dashed #7f7866;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.flap-tracks {
  font: 7px/1.3 'Courier New', monospace;
  color: #2b2a24;
}

.flap-tracks strong {
  display: block;
  font-size: 8px;
  border-bottom: 1px solid #5a5445;
  margin-bottom: 3px;
  letter-spacing: 0.05em;
}

.track-list div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flap-note {
  font: italic 7px/1.2 Georgia, serif;
  color: #555;
  border-top: 1px dotted #888;
  padding-top: 4px;
  margin-top: 4px;
}

/* Panel 2: Spine */
.jcard-panel-spine {
  width: 12.5%;
  flex-shrink: 0;
  border-right: 1px dashed #7f7866;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  overflow: hidden;
}

.spine-content {
  transform: rotate(-90deg);
  white-space: nowrap;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spine-title {
  font: bold 10px 'Courier New', monospace;
  letter-spacing: 0.1em;
  color: #111;
  text-transform: uppercase;
}

.spine-cat {
  font: 6px 'Courier New', monospace;
  color: #555;
}

/* Panel 3: Front Cover */
.jcard-panel-front {
  width: 62.5%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  justify-content: space-between;
  overflow: hidden;
}

.front-cover-art {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid #333;
  overflow: hidden;
  position: relative;
  background: #111;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

.front-cover-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.15) brightness(0.9);
}

.front-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  flex-shrink: 0;
}

.front-title {
  font: italic bold 15px/1.1 Georgia, serif;
  margin: 0;
  color: #111;
  letter-spacing: -0.02em;
}

.front-artist {
  font: 8px 'Courier New', monospace;
  color: #4b483f;
}

.front-type {
  font: 6px 'Courier New', monospace;
  color: #7a766c;
  letter-spacing: 0.05em;
}

/* Print Styles */
@media print {
  @page {
    margin: 10mm;
    size: auto;
  }
  html, body {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.crt-mode .crt-overlay, .crt-overlay, .paper-grain, .vcr-hud, .motion-toolbar, header, footer, .old-sidebar, .jcard-header, .jcard-desc, .jcard-form, .jcard-preview-tag, .playlist-grid, .music-intro, .collection-note, .interlude, #floatingDvdSticker {
    display: none !important;
  }
  .page, .music-layout, .homepage-layout, main, .jcard-generator-section, .jcard-card, .jcard-studio-layout, .jcard-preview-wrapper {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #jcardCanvasBox {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .jcard-cut-guide {
    display: flex !important;
    position: relative !important;
    width: 103mm !important;
    height: 101.6mm !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    background: #f4eee1 !important;
    border: 1px solid #000000 !important;
    margin: 10mm auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .jcard-panel {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .front-cover-art {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    height: auto !important;
    flex: 1 !important;
  }
  .front-cover-art img {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@media (max-width: 800px) {
  .jcard-studio-layout {
    grid-template-columns: 1fr;
  }
  .jcard-cut-guide {
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 270px;
  }
}

/* ==========================================================================
   RETRO PERSONAL DIGITAL AUDIO PLAYER (iPod-like Device on music.html)
   ========================================================================== */
.ipod-section {
  margin: 40px 0 30px;
}

.ipod-showcase {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* The iPod Chassis */
.ipod-chassis {
  width: 320px;
  background: linear-gradient(165deg, #262b2c 0%, #171b1c 38%, #0d0f10 100%);
  border-radius: 26px;
  border: 2px solid #3d4543;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.9),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.85);
  padding: 16px 18px 20px;
  box-sizing: border-box;
  position: relative;
  user-select: none;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.ipod-chassis:focus-visible {
  box-shadow:
    0 0 0 2px #a4c4b5,
    0 22px 50px rgba(0, 0, 0, 0.9);
}

/* Top Edge & Controls */
.ipod-top-rim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.ipod-jack {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #5a6360;
  box-shadow: inset 0 0 4px #000;
}

.ipod-top-label {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #5d6763;
  text-transform: uppercase;
}

.ipod-hold-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #0a0d0c;
  border: 1px solid #333937;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  color: #6a7470;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  transition: all 0.2s ease;
}

.ipod-hold-switch .hold-slider {
  width: 16px;
  height: 8px;
  border-radius: 2px;
  background: #2b3230;
  position: relative;
  display: inline-block;
}

.ipod-hold-switch .hold-slider::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  width: 6px;
  height: 6px;
  background: #dedcd2;
  border-radius: 1px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ipod-hold-switch.is-locked .hold-slider {
  background: #d4592a;
}

.ipod-hold-switch.is-locked .hold-slider::after {
  transform: translateX(8px);
  background: #fff;
}

/* LCD Screen Bezel */
.ipod-screen-bezel {
  background: #070908;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #1a201e;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.95),
    0 1px 1px rgba(255, 255, 255, 0.08);
}

.ipod-lcd {
  width: 100%;
  height: 168px;
  background: linear-gradient(180deg, #a4c4b5 0%, #87a799 100%);
  color: #101c16;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  font-family: 'Courier New', monospace, 'Lucida Console';
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.18);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Pixel Grid Overlay */
.ipod-lcd::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04) 0px,
    rgba(0, 0, 0, 0.04) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

.ipod-lcd.backlight-off {
  background: #2a3330;
  color: #19201d;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7);
}

/* LCD Header Status Bar */
.ipod-lcd-header {
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 10px;
  font-weight: bold;
}

.ipod-lcd-hold-badge {
  font-size: 8px;
  letter-spacing: 0.08em;
  background: #101c16;
  color: #a4c4b5;
  padding: 1px 4px;
  border-radius: 2px;
}

.ipod-lcd-battery {
  width: 16px;
  height: 8px;
  border: 1px solid #101c16;
  border-radius: 1px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px;
}

.ipod-lcd-battery::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 2px;
  width: 2px;
  height: 4px;
  background: #101c16;
  border-radius: 0 1px 1px 0;
}

.ipod-lcd-battery .bat-level {
  width: 75%;
  height: 100%;
  background: #101c16;
}

.ipod-view-menu[hidden],
.ipod-view-nowplaying[hidden],
#zineSpreadView[hidden],
#zineReaderView[hidden] {
  display: none !important;
}

/* View 1: Menu List */
.ipod-view-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100% - 20px);
}

.ipod-menu-header {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.06);
}

.ipod-menu-list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #101c16 transparent;
}

.ipod-menu-item {
  padding: 3px 8px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.ipod-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.ipod-menu-item.is-selected {
  background: #101c16;
  color: #a4c4b5;
  font-weight: bold;
}

.ipod-menu-item.is-selected .ipod-item-arrow {
  color: #a4c4b5;
}

/* View 2: Now Playing Screen */
.ipod-view-nowplaying {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 10px 8px;
  overflow: hidden;
  height: calc(100% - 20px);
  box-sizing: border-box;
}

.ipod-np-header {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 2px;
  margin-bottom: 4px;
}

.ipod-np-body {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ipod-np-cover {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: #000;
  overflow: hidden;
}

.ipod-np-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) grayscale(0.2);
}

.ipod-np-details {
  flex: 1;
  min-width: 0;
}

.ipod-np-title {
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.ipod-np-side {
  font-size: 9px;
  opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini Graphic Equalizer */
.ipod-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-top: 5px;
}

.ipod-eq-bar {
  width: 4px;
  height: 20%;
  background: #101c16;
  border-radius: 1px 1px 0 0;
  transition: height 0.08s ease;
}

/* Progress Scrubber */
.ipod-np-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  margin-top: 4px;
}

.ipod-progress-track {
  flex: 1;
  height: 5px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  overflow: hidden;
}

.ipod-progress-fill {
  height: 100%;
  background: #101c16;
  width: 0%;
  transition: width 0.2s linear;
}

/* Volume Slider Footer */
.ipod-np-vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  margin-top: 6px;
}

.ipod-np-vol-bar {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  overflow: hidden;
}

.ipod-np-vol-fill {
  height: 100%;
  background: #101c16;
  width: 75%;
}

/* Click Wheel Assembly */
.ipod-wheel-assembly {
  margin: 18px auto 8px;
  display: flex;
  justify-content: center;
}

.ipod-wheel {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #252a29 0%, #171b1a 65%, #0f1211 100%);
  border: 1px solid #363e3b;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.12),
    inset 0 -2px 5px rgba(0, 0, 0, 0.65);
  position: relative;
  cursor: grab;
}

.ipod-wheel:active {
  cursor: grabbing;
}

.ipod-wheel-btn {
  position: absolute;
  background: none;
  border: none;
  color: #8b9691;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.ipod-wheel-btn:hover {
  color: #dedcd2;
}

.ipod-wheel-btn:active {
  transform: scale(0.92);
}

.ipod-wheel-btn.btn-menu {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ipod-wheel-btn.btn-prev {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.ipod-wheel-btn.btn-next {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.ipod-wheel-btn.btn-play {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* Center Select Button */
.ipod-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #3e4644 0%, #202624 85%);
  border: 1px solid #495350;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ipod-center-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Bottom Rim & Controls */
.ipod-bottom-rim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 4px;
}

.ipod-serial {
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #555f5b;
}

.ipod-backlight-btn {
  background: #111514;
  border: 1px solid #333d39;
  border-radius: 4px;
  color: #8fa099;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ipod-backlight-btn:hover {
  background: #19201e;
  color: #a4c4b5;
  border-color: #53645e;
}

/* Side Console & Spotify Preview Dock */
.ipod-side-console {
  flex: 1;
  min-width: 290px;
  max-width: 480px;
}

.ipod-console-card {
  background: #0d100f;
  border: 1px solid #232a26;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ipod-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a201d;
}

.console-tag {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #dedcd2;
  font-weight: bold;
}

.console-badge {
  font-family: monospace;
  font-size: 9px;
  color: #8da496;
  background: #141c18;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #293830;
}

.ipod-console-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #9da59f;
  margin-bottom: 16px;
}

.ipod-active-indicator {
  background: #121614;
  border-left: 3px solid #8da496;
  padding: 8px 12px;
  margin-bottom: 16px;
  border-radius: 0 4px 4px 0;
}

.ipod-active-indicator .indicator-label {
  display: block;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #6c7871;
  margin-bottom: 2px;
}

.ipod-active-indicator strong {
  font-size: 13px;
  color: #dedcd2;
  font-family: monospace;
}

.ipod-actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ipod-spotify-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1db954;
  color: #05140b;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.ipod-spotify-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.ipod-dock-toggle {
  background: #181d1b;
  border: 1px solid #2e3834;
  color: #a4afa8;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.ipod-dock-toggle:hover {
  background: #232a27;
  color: #dedcd2;
  border-color: #4b5852;
}

.ipod-dock-toggle:active {
  transform: translateY(1px);
}

.ipod-spotify-dock-frame {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid #252e2a;
  transition: opacity 0.2s ease;
}

.ipod-spotify-dock-frame[hidden],
.ipod-spotify-dock-frame.is-hidden {
  display: none !important;
}

.ipod-spotify-dock-frame iframe {
  display: block;
  border: none;
  width: 100%;
}

/* ==========================================================================
   PRINTABLE MINI POCKET ZINE GENERATOR (on writing.html)
   ========================================================================== */
.zine-generator-section {
  margin: 40px 0 30px;
}

.zine-card {
  background: #0b0e0d;
  border: 1px solid #242c27;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

.zine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a221e;
  flex-wrap: wrap;
  gap: 8px;
}

.zine-tag {
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #dedcd2;
  font-weight: bold;
}

.zine-meta {
  font-family: monospace;
  font-size: 10px;
  color: #7d8981;
}

.zine-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #a4afa7;
  margin-bottom: 22px;
}

.zine-studio-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.zine-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0f1311;
  border: 1px solid #1f2722;
  border-radius: 6px;
  padding: 18px;
}

.zine-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.zine-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.zine-field label {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #849188;
}

.zine-field input,
.zine-field select,
.zine-field textarea {
  background: #141816;
  border: 1px solid #28322c;
  color: #dedcd2;
  font-family: monospace;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
}

.zine-field input:focus,
.zine-field select:focus,
.zine-field textarea:focus {
  border-color: #6a8274;
}

.zine-sublabel {
  display: block;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a4afa7;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #28322c;
}

.zine-pages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.zine-actions-bar {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.zine-btn-primary {
  flex: 1;
  min-width: 200px;
  background: #dedcd2;
  color: #0b0e0d;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 11px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.zine-btn-primary:hover {
  background: #fff;
  transform: translateY(-1px);
}

.zine-btn-secondary {
  flex: 1;
  min-width: 200px;
  background: #1a221e;
  color: #dedcd2;
  border: 1px solid #36443c;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 11px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.zine-btn-secondary:hover {
  background: #232f29;
}

.zine-folding-guide {
  background: #131715;
  border: 1px dashed #2d3832;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 10px;
}

.guide-title {
  display: block;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #c9cbbf;
  margin-bottom: 8px;
}

.guide-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: #8c978f;
}

.guide-steps li {
  margin-bottom: 4px;
}

.guide-steps strong {
  color: #dedcd2;
}

/* Zine Live Preview & Tabs */
.zine-preview-wrapper {
  background: #070908;
  border: 1px solid #1f2723;
  border-radius: 6px;
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
}

.zine-view-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #1a221e;
  padding-bottom: 10px;
}

.zine-tab-btn {
  background: #111513;
  border: 1px solid #232c27;
  color: #8a968e;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.zine-tab-btn.is-active {
  background: #232e28;
  color: #dedcd2;
  border-color: #495e52;
  font-weight: bold;
}

/* Unfolded Print Sheet */
.zine-canvas-box {
  background: #171b19;
  padding: 18px;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.zine-print-sheet {
  width: 100%;
  aspect-ratio: 11 / 8.5;
  background: #faf8f2;
  color: #121614;
  border: 2px solid #222;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.zine-sheet-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  min-height: 0;
}

.zine-sheet-row.row-top {
  border-bottom: 1px dashed #555;
}

/* The Panels */
.zine-panel {
  border-right: 1px dashed #555;
  padding: 8px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  min-height: 0;
}

.zine-sheet-row .zine-panel:last-child {
  border-right: none;
}

/* Inverted Top Row Panels */
.panel-inverted {
  transform: rotate(180deg);
}

.panel-guide-badge {
  font-size: 7px;
  color: #888;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #333;
  padding: 8px 10px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #777;
  padding-bottom: 3px;
  margin-bottom: 3px;
  flex-shrink: 0;
}

.panel-text {
  font-family: 'Georgia', serif, 'Times New Roman';
  font-size: 10.5px;
  line-height: 1.45;
  color: #1a1e1b;
  margin: 3px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  flex: 1;
}

.panel-footer {
  font-size: 8px;
  color: #666;
  border-top: 1px dotted #aaa;
  padding-top: 3px;
  margin-top: auto;
  flex-shrink: 0;
}

/* Back Cover Specific */
.panel-backcover .back-inner {
  background: #1e2220;
  color: #dedcd2;
  border-color: #555;
  text-align: center;
}

.panel-backcover .panel-header {
  border-bottom-color: #555;
  color: #dedcd2;
}

.panel-note {
  font-size: 9.5px;
  line-height: 1.45;
  margin: auto 0;
  white-space: pre-line;
  color: #c9d2cc;
}

.panel-colophon-stamp {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #9da7a0;
  border-top: 1px dotted #555;
  padding-top: 3px;
  flex-shrink: 0;
}

/* Front Cover Specific */
.panel-frontcover .cover-inner {
  background: #171b19;
  color: #dedcd2;
  border-color: #dedcd2;
  text-align: center;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover-stamp-top {
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #444;
  padding-bottom: 2px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

.cover-photo-frame {
  width: 100%;
  height: 82px;
  background: #000;
  overflow: hidden;
  border: 1px solid #555;
  margin: 3px 0;
  flex-shrink: 0;
}

.cover-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15) grayscale(0.25);
}

.cover-h3 {
  font-size: 12px;
  font-weight: bold;
  margin: 2px 0 1px;
  letter-spacing: 0.08em;
  color: #fff;
  flex-shrink: 0;
}

.cover-p {
  font-size: 8px;
  color: #a4afa7;
  margin: 0;
  flex-shrink: 0;
}

.cover-footer-meta {
  font-size: 7.5px;
  color: #7b857f;
  margin-top: auto;
  border-top: 1px dotted #444;
  padding-top: 2px;
  flex-shrink: 0;
}

/* Red Center Slit Indicator */
.zine-center-slit {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}

.slit-line {
  flex: 1;
  height: 2px;
  background: #b22222;
  border-top: 1px dashed #ff5555;
}

.slit-icon {
  font-size: 13px;
  color: #b22222;
  padding: 0 4px;
}

.slit-label {
  font-family: monospace;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #b22222;
  background: #faf8f2;
  padding: 2px 6px;
  border: 1px solid #b22222;
  border-radius: 2px;
}

/* Booklet Reader View */
.zine-reader-box {
  background: #111513;
  border-radius: 6px;
  padding: 16px;
}

.zine-reader-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid #232c27;
  padding-bottom: 10px;
}

.reader-nav-btn {
  background: #1c2420;
  border: 1px solid #334038;
  color: #dedcd2;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reader-nav-btn:hover {
  background: #28362e;
}

.reader-page-indicator {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #a4afa7;
  font-weight: bold;
}

.zine-reader-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
  background: #090c0b;
  border: 1px solid #1c221f;
  border-radius: 6px;
  padding: 24px;
  box-sizing: border-box;
}

.zine-reader-single-page {
  width: 270px;
  min-height: 370px;
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
}

.zine-reader-single-page.cover-style {
  background: #171b19;
  border: 2px solid #dedcd2;
  color: #dedcd2;
  text-align: center;
}

.reader-cover-stamp {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

.reader-cover-photo {
  width: 100%;
  height: 150px;
  background: #000;
  border: 1px solid #444;
  margin-bottom: 14px;
  overflow: hidden;
}

.reader-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reader-cover-title {
  font-size: 16px;
  font-family: monospace;
  font-weight: bold;
  margin: 0 0 6px;
}

.reader-cover-sub {
  font-size: 11px;
  color: #9ea9a2;
  margin: 0 0 14px;
}

.reader-cover-footer {
  margin-top: auto;
  font-family: monospace;
  font-size: 9px;
  color: #7b8680;
  border-top: 1px dotted #444;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
}

.zine-reader-single-page.back-cover-style {
  background: #1a1e1c;
  border: 2px solid #555;
  color: #dedcd2;
  text-align: center;
}

.reader-colophon-body {
  font-size: 13px;
  line-height: 1.6;
  margin: auto 0;
  color: #b5c0b9;
}

.reader-colophon-badge {
  margin-top: auto;
  border-top: 1px dotted #444;
  padding-top: 10px;
}

.reader-colophon-badge span {
  display: block;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #dedcd2;
}

.reader-colophon-badge small {
  font-size: 9px;
  color: #7b8680;
}

.zine-reader-spread {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 580px;
}

.reader-page {
  flex: 1;
  min-height: 350px;
  background: #faf8f2;
  color: #121614;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.reader-page-header {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  border-bottom: 1px solid #aaa;
  padding-bottom: 4px;
}

.reader-page-heading {
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  margin-top: 6px;
}

.reader-page-body {
  font-family: 'Georgia', serif, 'Times New Roman';
  font-size: 13px;
  line-height: 1.6;
  color: #151816;
  margin: 10px 0;
  flex: 1;
}

.reader-page-footer {
  font-family: monospace;
  font-size: 9px;
  color: #666;
  border-top: 1px dotted #ccc;
  padding-top: 6px;
  margin-top: auto;
}

/* ==========================================================================
   PRINT MEDIA RULES FOR POCKET ZINE (Letter & A4 Landscape)
   ========================================================================== */
@media print {
  @page {
    size: landscape;
    margin: 8mm;
  }

  body.collage-home {
    background: #fff !important;
    color: #000 !important;
  }

  header,
  footer,
  aside.old-sidebar,
  .crt-overlay,
  .paper-grain,
  .motion-toolbar,
  .gallery-intro,
  .writing-quote-banner,
  #writings,
  .gallery-interlude,
  .zine-header,
  .zine-desc,
  .zine-form,
  .zine-view-tabs,
  .zine-reader-box,
  .floating-sticker-container,
  .cursor-trail-dot {
    display: none !important;
  }

  .homepage-layout,
  main,
  .zine-generator-section,
  .zine-card,
  .zine-studio-layout,
  .zine-preview-wrapper,
  .zine-canvas-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .zine-print-sheet {
    display: flex !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 190mm !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .zine-panel {
    border-color: #777 !important;
    padding: 3mm 4mm !important;
  }

  .panel-inner {
    border: 1px solid #000 !important;
    background: #fff !important;
    padding: 3mm 4mm !important;
  }

  .panel-header {
    font-size: 10.5pt !important;
    font-weight: bold !important;
    border-bottom: 1px solid #000 !important;
    margin-bottom: 2mm !important;
  }

  .panel-header span {
    font-size: 10.5pt !important;
  }

  .panel-text {
    font-size: 11pt !important;
    line-height: 1.45 !important;
    font-family: 'Georgia', serif, 'Times New Roman' !important;
    color: #000 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin: 2mm 0 !important;
  }

  .panel-footer {
    font-size: 8.5pt !important;
    color: #444 !important;
    border-top: 1px dotted #888 !important;
    margin-top: auto !important;
  }

  .panel-frontcover .cover-inner {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    padding: 4mm !important;
  }

  .cover-stamp-top {
    font-size: 9.5pt !important;
    font-weight: bold !important;
    color: #fff !important;
  }

  .cover-photo-frame {
    height: 32mm !important;
    margin: 2mm 0 !important;
    border: 1px solid #fff !important;
  }

  .cover-h3 {
    font-size: 15pt !important;
    font-weight: bold !important;
    color: #fff !important;
    margin: 2mm 0 1mm !important;
  }

  .cover-p {
    font-size: 10pt !important;
    color: #ccc !important;
  }

  .cover-footer-meta {
    font-size: 8.5pt !important;
    color: #bbb !important;
  }

  .panel-backcover .back-inner {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    padding: 4mm !important;
  }

  .panel-backcover .panel-note {
    font-size: 10pt !important;
    line-height: 1.45 !important;
    color: #eee !important;
  }

  .panel-colophon-stamp {
    font-size: 8.5pt !important;
    color: #ccc !important;
  }

  .zine-center-slit {
    display: flex !important;
  }

  .slit-line {
    background: #000 !important;
    border-top: 1.5pt dashed #000 !important;
  }

  .slit-label {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    font-size: 8pt !important;
  }
}

@media (max-width: 900px) {
  .zine-pages-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .zine-row {
    grid-template-columns: 1fr;
  }
  .zine-pages-grid {
    grid-template-columns: 1fr;
  }
}