/* =====================================================================
   Vintage romance · dark academia · scrapbook
   Layered over app.css: same layouts, older materials.
   ===================================================================== */
:root{
  --head:"IM Fell English","Cormorant Garamond",Georgia,serif;
  --hand:"La Belle Aurore","Caveat",cursive;
  --type:"Special Elite","Courier New",monospace;
  --serif:"Cormorant Garamond","IM Fell English",Georgia,serif;
  --onWall:#efe2c4;
  --paperTex:radial-gradient(ellipse at 18% 12%,rgba(140,90,30,.12),transparent 42%),radial-gradient(ellipse at 88% 82%,rgba(120,70,20,.16),transparent 46%),radial-gradient(ellipse at 60% 40%,rgba(255,255,255,.18),transparent 55%),radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(90,55,15,.22)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --torn:polygon(0.0% 0.52%,2.2% 0.24%,4.3% 1.04%,6.5% 0.12%,8.7% 0.86%,10.9% 0.59%,13.0% 0.09%,15.2% 0.81%,17.4% 0.06%,19.6% 0.69%,21.7% 0.11%,23.9% 0.15%,26.1% 0.68%,28.3% 1.32%,30.4% 0.20%,32.6% 0.36%,34.8% 1.00%,37.0% 1.52%,39.1% 0.92%,41.3% 0.63%,43.5% 1.56%,45.7% 0.07%,47.8% 1.37%,50.0% 0.46%,52.2% 0.23%,54.3% 0.19%,56.5% 0.49%,58.7% 1.31%,60.9% 0.29%,63.0% 0.93%,65.2% 1.02%,67.4% 0.60%,69.6% 0.88%,71.7% 0.10%,73.9% 0.10%,76.1% 0.33%,78.3% 1.09%,80.4% 0.68%,82.6% 0.50%,84.8% 0.94%,87.0% 0.73%,89.1% 0.48%,91.3% 1.27%,93.5% 1.12%,95.7% 0.39%,97.8% 0.92%,100.0% 0.84%,98.95% 2.2%,99.12% 4.3%,99.65% 6.5%,98.82% 8.7%,99.86% 10.9%,99.50% 13.0%,99.09% 15.2%,99.82% 17.4%,99.41% 19.6%,99.95% 21.7%,99.20% 23.9%,99.08% 26.1%,99.31% 28.3%,98.95% 30.4%,99.62% 32.6%,99.17% 34.8%,99.29% 37.0%,99.30% 39.1%,99.45% 41.3%,98.99% 43.5%,98.87% 45.7%,99.43% 47.8%,99.20% 50.0%,99.93% 52.2%,99.16% 54.3%,99.22% 56.5%,98.81% 58.7%,99.01% 60.9%,99.66% 63.0%,99.54% 65.2%,99.20% 67.4%,99.97% 69.6%,99.45% 71.7%,99.80% 73.9%,99.86% 76.1%,99.93% 78.3%,99.08% 80.4%,99.84% 82.6%,99.70% 84.8%,99.53% 87.0%,98.95% 89.1%,99.90% 91.3%,99.46% 93.5%,99.34% 95.7%,98.94% 97.8%,100.0% 98.69%,97.8% 98.62%,95.7% 99.55%,93.5% 99.34%,91.3% 99.43%,89.1% 98.59%,87.0% 98.47%,84.8% 99.76%,82.6% 99.72%,80.4% 99.63%,78.3% 99.63%,76.1% 99.22%,73.9% 99.06%,71.7% 99.58%,69.6% 99.99%,67.4% 99.33%,65.2% 99.41%,63.0% 99.09%,60.9% 98.48%,58.7% 98.90%,56.5% 99.18%,54.3% 99.01%,52.2% 98.92%,50.0% 99.91%,47.8% 98.56%,45.7% 98.75%,43.5% 98.60%,41.3% 98.72%,39.1% 99.37%,37.0% 99.36%,34.8% 99.83%,32.6% 98.99%,30.4% 99.90%,28.3% 99.89%,26.1% 99.67%,23.9% 99.74%,21.7% 99.46%,19.6% 99.92%,17.4% 100.00%,15.2% 99.76%,13.0% 99.84%,10.9% 99.42%,8.7% 99.96%,6.5% 98.60%,4.3% 99.02%,2.2% 99.76%,0.0% 99.60%,0.42% 97.8%,0.44% 95.7%,0.15% 93.5%,1.02% 91.3%,1.19% 89.1%,0.56% 87.0%,0.58% 84.8%,0.10% 82.6%,0.12% 80.4%,0.41% 78.3%,0.32% 76.1%,0.99% 73.9%,0.19% 71.7%,0.03% 69.6%,1.14% 67.4%,0.63% 65.2%,0.18% 63.0%,0.65% 60.9%,0.03% 58.7%,0.63% 56.5%,1.17% 54.3%,1.04% 52.2%,0.84% 50.0%,0.31% 47.8%,0.44% 45.7%,0.20% 43.5%,0.93% 41.3%,0.64% 39.1%,0.93% 37.0%,0.40% 34.8%,0.27% 32.6%,0.97% 30.4%,1.18% 28.3%,1.02% 26.1%,0.97% 23.9%,0.98% 21.7%,0.89% 19.6%,0.27% 17.4%,0.62% 15.2%,0.43% 13.0%,0.03% 10.9%,0.03% 8.7%,0.34% 6.5%,0.31% 4.3%,0.83% 2.2%);
}
body{background:#1a120c;font-family:var(--serif);font-size:17px}
body::after{mix-blend-mode:multiply}
.eyebrow{font-family:var(--type);letter-spacing:.14em;font-weight:400}

/* ---------- paper, everywhere ---------- */
.paper-bg,.sheet,.md-card:not(.bare),.step,.inscription,.map-grid,.dist,.guide,.guestbook,.lockcard,.herb,.placard,.progress,.countdown,.helper,.example-bar{background:var(--paperTex),var(--mat)!important;color:var(--ink)!important}
.sheet,.md-card:not(.bare){border-radius:3px!important;clip-path:var(--torn);box-shadow:none!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.md-card:not(.bare)::before,.sheet::before{content:'';position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--frame) 70%,transparent);pointer-events:none;border-radius:2px}
.md-card:not(.bare){position:relative}
.md-card h3,.sheet h1,.sheet h2{font-family:var(--head)!important;font-weight:400!important;letter-spacing:.005em}
.md-card h3{font-size:36px!important}
.md-card .sub,.sub{color:color-mix(in srgb,var(--ink) 70%,transparent)!important;font-family:var(--serif);font-size:18px}
.md-card .md-actions{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mat) 96%,transparent) 30%)!important}
.field > span{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--ink) 75%,transparent)!important}
.field input,.field textarea,.field select{background:rgba(255,252,242,.72)!important;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)!important;border-radius:3px!important;font-family:var(--serif);font-size:18px;color:var(--ink)!important}
.field input:focus,.field textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)!important}
.field.big input{font-family:var(--head)!important}
textarea.hand,.hand{font-family:var(--hand)!important;font-size:22px!important;line-height:1.55!important}
.chip{font-family:var(--serif);font-size:15.5px;background:rgba(255,252,242,.7);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:3px;color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent)}
.kindbtn,.mi,.rrow,.answer,.mood{background:var(--paperTex),#f6ecd6!important;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)!important;border-radius:4px!important;color:var(--ink)!important}
.kindbtn b,.mi b,.rname b,.mood-t b{font-family:var(--head);font-weight:400;font-size:19px}
.kindbtn .ic{color:var(--accent)}
.drop{background:rgba(255,250,236,.6)!important;border:1.5px dashed color-mix(in srgb,var(--ink) 35%,transparent)!important;border-radius:4px!important}
.drop b{font-family:var(--head);font-weight:400;font-size:19px}

/* ---------- buttons: wax, brass and paper ---------- */
.btn{font-family:var(--head);font-weight:400;font-size:17px;letter-spacing:.01em;border-radius:3px}
.btn-main{background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 70%,#000));border:1px solid color-mix(in srgb,var(--accent) 60%,#000);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--frameHi) 45%,transparent),0 10px 20px -10px rgba(0,0,0,.6)}
.btn-soft{background:var(--paperTex),var(--mat);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.btn-soft:hover{filter:brightness(1.04)}
.btn-link{font-family:var(--serif);font-style:italic;font-size:16px}

/* ---------- the chrome ---------- */
.topbar .brand,.pills,.tb-r .btn-soft{background:var(--paperTex),var(--mat)!important;color:var(--ink)!important;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.topbar .brand{font-family:var(--head);border-radius:3px}
.pills{border-radius:3px}
.pill{font-family:var(--head);font-size:15.5px;border-radius:2px;color:var(--ink)}
.pill .n{font-family:var(--type)}
.pill.on{background:var(--accent)}
.progress,.countdown{font-family:var(--type);font-size:12.5px;border-radius:2px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.helper{border-radius:3px;clip-path:var(--torn);font-size:16px}
.helper b{color:var(--accent)!important}
.helper .x{background:rgba(0,0,0,.08);color:var(--ink)}
.toast{background:var(--paperTex),var(--mat);color:var(--ink);font-family:var(--hand);font-size:20px;border-radius:2px;clip-path:var(--torn);padding:12px 26px}
.example-bar{border-radius:3px}

/* ---------- the room: damask, panelling, parquet ---------- */
.sky{background:linear-gradient(180deg,var(--skyA),var(--skyB) 55%,var(--skyC))}
.dark-walls .cloud{opacity:.12!important}
.backwall{background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 70%,rgba(0,0,0,.25)),var(--damask) 0 0/72px 108px;box-shadow:inset 0 0 120px rgba(0,0,0,.45)}
.wall-l,.wall-r{background:var(--damask) 0 0/60px 90px!important}
.wall-l::after,.wall-r::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25))}
.wall-r::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.25))}
.backwall::before{height:14px;background:linear-gradient(180deg,var(--frameHi),var(--frame) 40%,var(--frameLo));box-shadow:0 4px 8px rgba(0,0,0,.4)}
.backwall::after{height:22%;min-height:60px;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 8%),repeating-linear-gradient(90deg,transparent 0 3.2%,rgba(0,0,0,.22) 3.2% 3.5%,rgba(255,255,255,.06) 3.5% 3.8%,transparent 3.8% 25%),linear-gradient(180deg,color-mix(in srgb,var(--trim) 100%,#fff 6%),var(--trim));border-top:6px solid var(--frame);box-shadow:inset 0 10px 18px -8px rgba(0,0,0,.6)}
.wainscot{position:absolute;left:3%;right:3%;bottom:4%;height:14%;min-height:34px;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 1%,color-mix(in srgb,var(--trim) 80%,#fff 12%) 1% 23%,transparent 23% 25%);opacity:.35;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.floor{background:#2a180e}
.floor::before{background:var(--parquet) 50% 0/84px 84px!important}
.floor::after{background:radial-gradient(ellipse 45% 22% at 50% calc(100% - var(--B)),rgba(255,200,120,.22),transparent),linear-gradient(180deg,rgba(0,0,0,.45),transparent 50%)}
.rug{position:absolute;left:18%;right:18%;top:calc(100% - var(--B) + 1.5%);height:calc(var(--B) * 1.2);background:var(--rug) 0 0/100% 100%;transform:perspective(380px) rotateX(58deg);transform-origin:50% 0;box-shadow:0 20px 30px rgba(0,0,0,.35);opacity:.92;filter:saturate(.85)}
.beams{display:none}
.door .gate{background:linear-gradient(180deg,#2a1a10,#120a06);box-shadow:inset 0 0 0 6px var(--frame),inset 0 0 0 9px var(--frameLo),0 0 40px rgba(255,190,110,.18)}
.door .gate::after{background:radial-gradient(ellipse at 50% 90%,rgba(255,196,120,.35),transparent 60%)}
.door span{background:var(--paperTex),var(--mat);color:var(--ink);font-family:var(--head);font-weight:400;font-size:14px;border-radius:2px}

/* plaque: roman numeral + parchment ribbon */
.plaque small{font-family:var(--type);letter-spacing:.3em;color:var(--onWall);opacity:.85;font-weight:400}
.ribbon{position:relative;display:inline-flex;align-items:center;gap:6px;margin:4px 0 2px;padding:8px 58px 10px;background:var(--paperTex),var(--mat);clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%,22px 50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.ribbon h2{font-family:var(--head)!important;font-weight:400!important;font-size:clamp(24px,2.5vw,36px)!important;color:var(--ink)!important;text-shadow:none!important}
.plaque em{font-family:var(--hand);font-style:normal;font-size:clamp(17px,1.5vw,22px);color:var(--onWall);opacity:.9}
.plaque h2.museum-name{font-family:var(--head);font-style:italic;font-weight:400;font-size:clamp(34px,4vw,58px);color:var(--onWall);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.edit-t{background:rgba(0,0,0,.06);color:var(--ink)}
.gc{position:absolute;top:18px;z-index:2;opacity:.9;pointer-events:none}
.gc.tl{left:14px}.gc.tr{right:14px;transform:scaleX(-1)}
.sconce-l,.sconce-r{position:absolute;top:26px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,190,110,.55))}
.sconce-l{left:9%}.sconce-r{right:9%}
.sconce-l::before,.sconce-r::before{content:'';position:absolute;left:50%;top:-10px;width:170px;height:170px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,196,120,.28),transparent 65%);pointer-events:none}
.orn .flame{transform-origin:30px 34px;animation:flicker 2.6s ease-in-out infinite}
@keyframes flicker{25%{transform:scaleY(1.08) skewX(2deg)}50%{transform:scaleY(.94) skewX(-2deg)}75%{transform:scaleY(1.04)}}
.still{position:absolute;bottom:calc(var(--B) - 2%);display:flex;align-items:flex-end;gap:0;z-index:4;pointer-events:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}
.still.l{left:calc(var(--L) + 1%)}.still.r{right:calc(var(--L) + 1%)}
.still .rose{transform:rotate(-12deg)}.still .fern{transform:rotate(8deg);margin-left:-18px}
.keys{position:absolute;top:calc(var(--T) + 16px);right:calc(var(--L) + 6%);display:flex;gap:14px;z-index:4;pointer-events:none}
.keys span{position:relative;animation:swing 4s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s);transform-origin:50% -40px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.4))}
.keys span::before{content:'';position:absolute;left:50%;top:-40px;width:3px;height:44px;background:#5a1e24;transform:translateX(-50%)}
@keyframes swing{50%{transform:rotate(5deg)}}
.rope::before{border-bottom-color:var(--accent)}

/* ---------- photographs & frames ---------- */
.vphoto,.vphoto-bg{filter:sepia(.3) saturate(.82) contrast(1.03) brightness(.97)}
.frame{background:linear-gradient(135deg,var(--frameHi),var(--frame) 30%,var(--frameLo) 55%,var(--frame) 75%,var(--frameHi));box-shadow:0 20px 28px -14px rgba(0,0,0,.7),inset 0 0 0 2px var(--frameLo),inset 0 0 0 4px var(--frameHi),inset 0 0 0 6px var(--frame);transform:rotate(var(--tilt,0deg))}
.frame .mat{background:var(--paperTex),var(--mat);box-shadow:inset 0 3px 8px rgba(0,0,0,.35)}
.f-ornate{padding:clamp(14px,1.5vw,20px)!important;box-shadow:0 20px 28px -14px rgba(0,0,0,.7),inset 0 0 0 3px var(--frameLo),inset 0 0 0 6px var(--frameHi),inset 0 0 0 9px var(--frame),inset 0 0 0 11px var(--frameLo),inset 0 0 0 13px var(--frameHi)}
.f-ornate::before{inset:-8px!important;background:radial-gradient(circle at 0 0,var(--frameHi) 0 10px,var(--frame) 11px 14px,transparent 15px),radial-gradient(circle at 100% 0,var(--frameHi) 0 10px,var(--frame) 11px 14px,transparent 15px),radial-gradient(circle at 0 100%,var(--frameHi) 0 10px,var(--frame) 11px 14px,transparent 15px),radial-gradient(circle at 100% 100%,var(--frameHi) 0 10px,var(--frame) 11px 14px,transparent 15px)!important}
.crest{position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.f-oval{padding:clamp(10px,1.1vw,14px)!important}
.f-arch{background:linear-gradient(160deg,#3a2718,#1e130b)!important;border-radius:3px!important;padding:10px 10px 30px!important;box-shadow:0 20px 28px -14px rgba(0,0,0,.7),inset 0 0 0 3px #1a0f08,inset 0 0 0 4px var(--frame)!important}
.f-arch .mat,.f-arch .art{border-radius:2px!important}
.f-arch::after{content:'Atelier · Paris';position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--head);font-style:italic;font-size:12px;color:var(--frameHi);opacity:.85}
.f-white{background:var(--paperTex),#efe3c8!important;padding:10px 10px 10px!important;aspect-ratio:1.15!important;box-shadow:0 16px 24px -12px rgba(0,0,0,.6)!important;transform:rotate(var(--tilt,0deg))}
.f-white .mat{padding:0!important;background:none!important;box-shadow:none!important;width:62%!important}
.pc-stamp{position:absolute;right:8px;top:8px;z-index:2}.pc-mark{position:absolute;right:18px;top:34px;z-index:2;opacity:.8}
.f-white::after{content:'';position:absolute;right:10px;bottom:16px;width:28%;height:40%;background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(60,40,20,.25) 14px 15px)}
.f-polaroid{background:var(--paperTex),#f3ead6!important;clip-path:var(--torn);padding:9px 9px 30px!important;transform:rotate(calc(var(--tilt,0deg) - 2deg))}
.f-polaroid .washi{top:-4px!important}
.placard{background:var(--paperTex),#e8d6ad!important;font-family:var(--type);border-radius:1px;padding:6px 12px 7px 20px;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.placard::before{content:'';position:absolute;left:7px;top:50%;width:6px;height:6px;border-radius:50%;background:#3a2718;transform:translateY(-50%);box-shadow:0 0 0 2px #b89a64}
.placard b{font-family:var(--type)!important;font-weight:400!important;font-size:13px!important;letter-spacing:.02em}
.placard span{font-family:var(--type);font-size:10.5px;letter-spacing:.04em;text-transform:none}

/* washi tape */
.washi{position:absolute;top:-10px;left:50%;width:76px;height:22px;margin-left:-38px;transform:rotate(var(--rot));z-index:3;opacity:.88;box-shadow:0 1px 2px rgba(0,0,0,.2);-webkit-mask:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent);pointer-events:none}
.washi-plaid{background:repeating-linear-gradient(90deg,rgba(110,31,36,.55) 0 5px,transparent 5px 14px),repeating-linear-gradient(0deg,rgba(110,31,36,.45) 0 4px,transparent 4px 11px),#efe2c4}
.washi-rose{background:radial-gradient(circle at 25% 50%,#9a3a4a 0 3px,transparent 4px) 0 0/18px 22px,radial-gradient(circle at 75% 30%,#6f7a52 0 2px,transparent 3px) 0 0/18px 22px,#f1e2c8}
.washi-kraft{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent),#b8925e}
.washi-check{background:repeating-conic-gradient(#2b2320 0 25%,#efe2c4 0 50%) 0 0/8px 8px;opacity:.75}
.washi-stripe{background:repeating-linear-gradient(45deg,#6e1f24 0 4px,#efe2c4 4px 9px)}

/* ---------- letters ---------- */
.envl{background:var(--paperTex),#e9dabb!important;border-radius:2px!important;box-shadow:0 16px 22px -12px rgba(0,0,0,.7)!important;padding:0 12px 14px!important}
.envl::before{background:color-mix(in srgb,#e9dabb 90%,#8a6a3a)!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.15))}
.envl .seal{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-8deg);z-index:3;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.envl-t{font-family:var(--hand)!important;font-size:clamp(16px,1.4vw,20px)!important;color:#2b2030!important}
.envl-stamp{position:absolute;right:8px;top:6px;z-index:1;opacity:.9}
.twine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - 1.5px),#9a7a4e calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(180deg,transparent calc(56% - 1.5px),#9a7a4e calc(56% - 1.5px) calc(56% + 1.5px),transparent calc(56% + 1.5px))}
.pin{background:radial-gradient(circle at 35% 30%,var(--frameHi),var(--frameLo))!important}
.env-add{border-radius:2px}

/* ---------- listening room ---------- */
.phono{position:relative;display:flex;flex-direction:column;align-items:center}
.phono .gramophone{filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));margin-bottom:-6px}
.phono .gram-rec{transform-origin:100px 137px;animation:gspin 3s linear infinite;animation-play-state:paused}
.listening:hover .gram-rec{animation-play-state:running}
@keyframes gspin{to{transform:rotate(360deg)}}
.phono-table{width:240px;height:14px;background:linear-gradient(180deg,#6b4428,#3a2314);border-radius:2px;box-shadow:0 12px 16px -6px rgba(0,0,0,.6)}
.onshelf::after{background:linear-gradient(180deg,#6b4428,#3a2314)!important;height:14px!important}
.sleeve{background:var(--paperTex),var(--c)!important;border-radius:2px;box-shadow:0 12px 18px -8px rgba(0,0,0,.6)!important;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;padding:10px!important;overflow:visible}
.sleeve .disc{background:radial-gradient(circle,#e8d6ad 0 13%,#141110 14% 16%,#1e1a18 17%)!important}
.sl-hole{position:absolute;left:50%;top:38%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#e8d6ad 0 26%,#1e1a18 28%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.sl-t{font-family:var(--head);font-size:16px;line-height:1.05;color:#f1e4c8;position:relative}
.sleeve small{font-family:var(--type);font-size:10px;color:rgba(241,228,200,.8);position:relative}
.tapebox{width:clamp(110px,10vw,150px);aspect-ratio:1.5;background:var(--paperTex),#c9a878;border-radius:3px;box-shadow:0 12px 18px -8px rgba(0,0,0,.6);position:relative;padding:10px;display:flex;flex-direction:column;gap:4px;border-top:10px solid var(--c)}
.tb-brand{font-family:var(--type);font-size:9px;letter-spacing:.2em;color:#4a3320}
.tb-t{font-family:var(--hand);font-size:17px;line-height:1.1;color:#2b1d14}
.tb-reel{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#c9a878 0 20%,#3a2a20 22% 60%,#c9a878 62%);box-shadow:-34px 0 0 0 #3a2a20}
.tin{width:clamp(100px,9vw,130px);aspect-ratio:1;border-radius:10px;background:linear-gradient(145deg,var(--frameHi),var(--frame) 40%,var(--frameLo));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 12px 18px -8px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.15)}
.tin-l{font-family:var(--type);font-size:10px;letter-spacing:.24em;color:#3a2718;background:#efe2c4;padding:2px 8px}
.tin-t{font-family:var(--head);font-size:15px;color:#2b1d14;text-align:center;padding:0 6px;line-height:1.1}
.tin .wave i{background:#3a2718}

/* ---------- the herbarium ---------- */
.t-conservatory .backwall{background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%),var(--damask) 0 0/72px 108px!important}
.t-conservatory .wall-scroll{background:none!important}
.herbarium{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.6vw,38px);padding:16px 0}
.herb-wrap{transform:rotate(var(--r));transition:transform .4s var(--ease)}
.herb-wrap:hover{transform:rotate(0) translateY(-6px) scale(1.03)}
.herb{position:relative;width:clamp(150px,13vw,190px);aspect-ratio:.72;padding:14px 12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:0 18px 24px -12px rgba(0,0,0,.65)!important}
.herb-plant{flex:1;display:flex;align-items:center;justify-content:center}
.herb-plant svg{height:100%;max-height:150px;width:auto;filter:saturate(.75) drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.herb-lbl{align-self:flex-end;width:78%;border:1px solid rgba(60,40,20,.5);padding:4px 7px;background:rgba(255,252,240,.55);text-align:left}
.herb-lbl b{display:block;font-family:var(--type);font-weight:400;font-size:12px;color:#2b1d14;line-height:1.2}
.herb-lbl span{display:block;font-family:var(--hand);font-size:13px;color:#4a3a2a;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.herb-add{width:clamp(150px,13vw,190px);aspect-ratio:.72;min-height:0}

/* ---------- cabinet of curiosities ---------- */
.case{background:linear-gradient(180deg,rgba(255,240,210,.14),rgba(255,240,210,.04))!important;border:3px solid var(--frame)!important;border-radius:3px!important;box-shadow:inset 0 0 40px rgba(255,220,160,.12),0 18px 24px -14px rgba(0,0,0,.7)!important}
.plinth{height:22px!important;background:linear-gradient(180deg,#6b4428,#3a2314)!important;border-top:3px solid var(--frame)}
.ks-ticket{background:#efd9a8!important;color:#5a2a1a!important;font-family:var(--type);border:none!important;outline:2px solid #9a3a2a;outline-offset:-6px}
.ks-ticket b{font-family:var(--head)!important;font-weight:400}
.ks-telegram{background:#eee1b6;padding:10% 9%;font-family:var(--type);color:#2b2a3a;box-shadow:0 6px 10px -6px rgba(0,0,0,.4);transform:rotate(2deg)}
.ks-telegram small{display:block;background:#2e3a5e;color:#efe1b6;font-size:9px;letter-spacing:.24em;padding:2px 6px;margin-bottom:6px;text-align:center}
.ks-telegram span{font-size:11.5px;line-height:1.35}
.ks-note{background:var(--paperTex),#f3e8cc!important;font-family:var(--hand)!important;font-size:16px!important;color:#2b1d14!important;clip-path:var(--torn);position:relative}
.tack{position:absolute;left:50%;top:6px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d95a5a,#7a1f26);transform:translateX(-50%)}
.ks-tag{position:relative;background:var(--paperTex),#d9bf8c;color:#3a2718;padding:22% 10% 12%;text-align:center;clip-path:polygon(18% 0,82% 0,100% 16%,100% 100%,0 100%,0 16%);display:flex;flex-direction:column;gap:3px;font-family:var(--type)}
.ks-tag small{font-size:9.5px;letter-spacing:.1em;color:#7a3a2a}
.ks-tag b{font-family:var(--head);font-weight:400;font-size:16px;line-height:1.1}
.ks-tag em{font-style:normal;font-size:10px}
.tag-hole{position:absolute;left:50%;top:6%;width:12px;height:12px;border-radius:50%;background:#3a2718;box-shadow:0 0 0 3px #b89a64;transform:translateX(-50%)}
.ks-photo{background:#f1e6cc!important;padding:6px 6px 18px!important;position:relative;overflow:visible!important}

/* ---------- observatory: an antique star chart ---------- */
.t-observatory .dome{background:radial-gradient(circle at 50% 50%,#1d2a52,#0e1430 70%);border:2px solid var(--frame);box-shadow:inset 0 0 0 6px #0e1430,inset 0 0 0 7px color-mix(in srgb,var(--frame) 60%,transparent),0 20px 40px -10px rgba(0,0,0,.6);border-radius:4px;overflow:hidden}
.chart{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(236,211,148,.10) calc(10% - 1px) 10%),repeating-linear-gradient(0deg,transparent 0 calc(12.5% - 1px),rgba(236,211,148,.10) calc(12.5% - 1px) 12.5%)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(236,211,148,.22);transform:translate(-50%,-50%)}
.ring.r1{width:30%;aspect-ratio:1}.ring.r2{width:58%;aspect-ratio:1;border-style:dashed}.ring.r3{width:88%;aspect-ratio:1}
.star-dot{background:radial-gradient(circle,#fff6d8 0 18%,rgba(236,211,148,.9) 26%,rgba(236,211,148,0) 70%)!important}
.star-t{font-family:var(--hand)!important;font-style:normal!important;font-size:17px!important;color:#ecd394!important}
.addstar{border-color:rgba(236,211,148,.5)!important;color:#ecd394!important;font-family:var(--head)}

/* ---------- distance: pocket watches ---------- */
.dist{border-radius:3px!important;clip-path:var(--torn);padding:22px 26px!important}
.clock{position:relative}
.clock svg{filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.clock svg circle:first-child{fill:#f3e8d2;stroke:var(--frame);stroke-width:7}
.clock::before{content:'';position:absolute;left:50%;top:-10px;width:14px;height:14px;border:3px solid var(--frame);border-radius:50%;transform:translateX(-50%)}
.clock b,.km,.until b{font-family:var(--head)!important;font-weight:400!important}
.clock small,.until{font-family:var(--type)}

/* ---------- secret room ---------- */
.t-secret .backwall{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25)),var(--damask) 0 0/72px 108px!important}
.vault-door{background:repeating-linear-gradient(90deg,#4a2c1a 0 18%,#3a2214 18% 19%),#4a2c1a!important;border:5px solid #2a1a10!important;border-radius:120px 120px 6px 6px!important}
.hinge{position:absolute;left:-4px;width:46%;height:12px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);border-radius:0 6px 6px 0}
.hinge.a{top:34%}.hinge.b{bottom:18%}
.keyhole{background:radial-gradient(circle at 50% 30%,#0a0604 0 42%,transparent 43%),linear-gradient(#0a0604,#0a0604) 50% 100%/40% 55% no-repeat;padding:6px;border-radius:40%;box-shadow:0 0 0 10px var(--frame),0 0 0 12px var(--frameLo)}
.vault-door p{font-family:var(--head)}
.curtain{background:repeating-linear-gradient(90deg,#5a141f 0 16px,#781c2a 16px 30px,#4a0f19 30px 40px)!important}

/* ---------- foyer ---------- */
.arch-wrap{position:relative}
.arch{box-shadow:inset 0 0 0 10px var(--frame),inset 0 0 0 13px var(--frameLo),inset 0 0 0 16px var(--frameHi),0 20px 50px rgba(0,0,0,.55)!important}
.arch-crest{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:3}
.inscription{border:none!important;border-radius:2px!important;clip-path:var(--torn);padding:26px 26px 20px!important;box-shadow:none!important;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45));position:relative}
.inscription p{font-family:var(--hand)!important;font-size:clamp(20px,1.8vw,26px)!important;line-height:1.6!important;color:#2b1d14!important}
.inscription .sig{font-family:var(--script);color:#2b1d14!important}
.insc-seal{position:absolute;right:-6px;bottom:-4px;transform:rotate(12deg)}
.map-grid{border:1px solid rgba(60,40,20,.45)!important;border-radius:2px!important;background-image:var(--paperTex)!important}
.map-h{font-family:var(--head);font-style:italic;letter-spacing:.05em;text-transform:none;font-size:17px;color:var(--onWall);text-align:center}
.map-room{font-family:var(--head)!important;color:#2b1d14!important;border:1px dashed rgba(60,40,20,.4)!important;border-radius:1px!important}
.map-room small{font-family:var(--type)!important;color:#7a5a3a!important}
.map-room .key{vertical-align:middle}
.map-room.here{background:var(--accent)!important;color:var(--onAccent)!important}

/* text that sits directly on the wall */
.first-t{font-family:var(--hand)!important;color:var(--ink)!important}
.addtile{background:var(--paperTex),color-mix(in srgb,var(--mat) 88%,transparent)!important;border:1.5px dashed color-mix(in srgb,var(--ink) 45%,transparent)!important;border-radius:3px!important;color:var(--ink)!important}
.addtile b{font-family:var(--head);font-weight:400;font-size:19px}
.addtile small{font-family:var(--serif);font-style:italic;color:color-mix(in srgb,var(--ink) 70%,transparent)!important}
.addtile .plus{border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 60%,#000))}
.lockcard{border-radius:2px!important}

/* ---------- viewers ---------- */
.vframe{box-shadow:0 40px 80px -24px rgba(0,0,0,.8),inset 0 0 0 3px var(--frameLo),inset 0 0 0 5px var(--frameHi)}
.vframe img{filter:sepia(.25) saturate(.85)}
.vplacard{background:var(--paperTex),var(--mat)!important;border-radius:2px;clip-path:var(--torn)}
.vplacard b{font-family:var(--head)!important;font-weight:400!important}
.vdate{font-family:var(--type);font-weight:400;letter-spacing:.08em}
.cnote{font-family:var(--hand)!important;font-size:21px!important;line-height:1.5!important}
.cnote span{font-family:var(--type)!important;font-weight:400}
.envelope{background:var(--paperTex),#e9dabb!important;border-radius:2px}
.envelope .ttl{font-family:var(--hand)!important}
.envelope .to{font-family:var(--script)}
.paper{background-color:#f1e4c8!important;background-image:repeating-linear-gradient(180deg,transparent 0 35px,rgba(110,70,40,.16) 35px 36px),var(--paperTex)!important;clip-path:var(--torn);border-radius:2px}
.paper .body{font-family:var(--hand)!important;font-size:clamp(20px,2.2vw,24px)!important;color:#221620!important}
.paper.poem{background-image:var(--paperTex)!important}
.paper h4{font-family:var(--head)!important;font-weight:400!important}
.view-music,.view-mem{background:var(--paperTex),var(--mat)!important;border-radius:3px!important;clip-path:var(--torn)}
.view-music h4,.view-mem h4,.view-dream h4{font-family:var(--head)!important;font-weight:400!important}
.view-mem .s{font-family:var(--hand)!important;font-size:22px!important;line-height:1.55!important}
.view-dream{background:radial-gradient(circle at 50% 30%,#1d2a52,#0e1430 70%)!important;border:2px solid var(--frame);border-radius:4px!important}
.view-dream .s{font-family:var(--hand)!important}
.deck{background:linear-gradient(160deg,#6b4428,#2e1c10)!important}
.aside{background:var(--paperTex),var(--mat)!important;border-radius:2px!important}

/* ---------- landing / setup / gate ---------- */
.landing,.setup{background:radial-gradient(ellipse at 70% 30%,rgba(255,196,120,.12),transparent 60%)}
.ld-h1{font-family:var(--head);font-weight:400;color:var(--onWall);text-shadow:0 2px 24px rgba(0,0,0,.4)}
.ld-h1 em{color:var(--frameHi);font-style:italic}
.ld-p{color:color-mix(in srgb,var(--onWall) 82%,transparent);font-family:var(--serif);font-size:clamp(18px,1.6vw,21px)}
.ld-note{color:color-mix(in srgb,var(--onWall) 65%,transparent);font-family:var(--type);font-size:12.5px}
.landing .eyebrow{color:var(--frameHi)}
.landing .brand{color:var(--onWall)}
.step{border-radius:2px!important;clip-path:var(--torn);border:none!important}
.step b{border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 60%,#000))!important;font-family:var(--head);font-weight:400}
.step h3{font-family:var(--head)!important;font-weight:400}
.step p{color:color-mix(in srgb,var(--ink) 78%,transparent)!important}
.collage{position:relative;aspect-ratio:1.08;max-width:620px;width:100%;margin:0 auto}
.collage > *{position:absolute}
.c-paper{inset:6% 4% 4% 6%;background:var(--paperTex),var(--mat);clip-path:var(--torn);transform:rotate(-2deg);filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.c-photo{left:10%;top:12%;width:40%;aspect-ratio:.82;background:#f1e6cc;padding:10px 10px 34px;transform:rotate(-6deg);box-shadow:0 14px 20px -8px rgba(0,0,0,.5)}
.c-photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.45) saturate(.8)}
.c-photo figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--hand);font-size:17px;color:#2b1d14}
.c-frame{right:9%;top:9%;width:30%;aspect-ratio:.8;padding:12px;background:linear-gradient(135deg,var(--frameHi),var(--frame) 35%,var(--frameLo) 60%,var(--frameHi));border-radius:50%;box-shadow:0 18px 24px -10px rgba(0,0,0,.6);transform:rotate(4deg)}
.c-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:sepia(.5)}
.c-env{left:30%;bottom:10%;width:46%;transform:rotate(3deg)}
.c-env .envl{width:100%!important}
.c-ticket{right:6%;bottom:30%;transform:rotate(-8deg);width:34%}
.c-rose{left:4%;bottom:6%;transform:rotate(-24deg)}
.c-fern{right:2%;bottom:4%;transform:rotate(18deg)}
.c-key{left:52%;top:6%;transform:rotate(28deg)}
.c-tag{left:4%;top:52%;transform:rotate(10deg)}
.c-seal{right:30%;top:46%}
.sheet h1{color:var(--ink)}
.mood .mini{border-bottom:1px solid rgba(0,0,0,.15)}
.mini{background:linear-gradient(180deg,var(--skyA),var(--skyC))}
.mini-wall{background:var(--wall)!important;box-shadow:inset 0 -18px 0 var(--trim)}
.mini-wall i{border-radius:3px!important;border-color:var(--frame)!important;background:var(--mat)!important;border-width:4px!important}
.mini-wall i.b{border-radius:50%/40%!important;background:var(--accent)!important}
.mini-floor{background:linear-gradient(90deg,var(--floorB),var(--floorA),var(--floorB))!important}
.gate-in .nm,.gate-in .l1{font-family:var(--head)!important;font-weight:400;color:var(--onWall)!important}
.gate-in .l2{color:color-mix(in srgb,var(--onWall) 78%,transparent)!important;font-family:var(--serif);font-style:italic;font-size:18px}
.sigline{color:var(--onWall)!important}
.gate-arch{background:radial-gradient(ellipse at 50% 80%,rgba(255,196,120,.4),transparent 60%),linear-gradient(180deg,#2a1a10,#120a06)!important;box-shadow:inset 0 0 0 10px var(--frame),inset 0 0 0 13px var(--frameLo),0 0 80px rgba(255,190,110,.2)!important}
.signed{font-family:var(--hand)!important;background:var(--paperTex),var(--mat)!important;clip-path:var(--torn);border-radius:2px}
.guestbook{border-radius:2px!important;clip-path:var(--torn)}
.guestbook textarea{font-family:var(--hand);font-size:20px;background:rgba(255,252,240,.6)}

/* the admission ticket */
.ticket{background:var(--paperTex),#ecd9ad!important;color:#3a2016!important;border-radius:3px!important;-webkit-mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;box-shadow:none!important;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.ticket::before{border:2px solid #8e2a2a!important;inset:9px!important}
.t-top,.t-bottom{font-family:var(--type)!important;font-weight:400!important;color:#8e2a2a!important}
.t-name{font-family:var(--head)!important;color:#3a2016}
.t-for{font-family:var(--hand)!important;font-style:normal!important}
.t-stub{border-left:2px dashed rgba(142,42,42,.6)!important;font-family:var(--type);font-weight:400;color:#8e2a2a!important}
.t-stub b{font-family:var(--head)!important;color:#3a2016!important}

/* mobile */
@media (max-width:760px){
  .sconce-l,.sconce-r,.gc,.still,.keys,.rug{display:none}
  .ribbon{padding:6px 34px 8px}
  .herb,.herb-add{width:42vw}
  .collage{aspect-ratio:1}
  .md-card:not(.bare),.sheet{clip-path:none}
}
@media (prefers-reduced-motion:reduce){.orn .flame,.keys span{animation:none!important}}

.wall-scroll{padding-bottom:24%!important}
.envl{aspect-ratio:1.42!important}
.envl .seal{top:47%!important;width:40px;height:40px}
.envl-t{margin-top:auto;position:relative;z-index:4!important;background:linear-gradient(90deg,transparent,#e9dabbcc 12%,#e9dabbcc 88%,transparent);padding:0 10px}
.placard b{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25!important}
.placard{max-width:100%}
.arch::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 10px var(--frame),inset 0 0 0 13px var(--frameLo),inset 0 0 0 16px var(--frameHi),inset 0 0 30px rgba(0,0,0,.4)}
.arch .inner-lbl{z-index:3}
.inscription{padding-bottom:34px!important}
.insc-seal{right:10px!important;bottom:-10px!important}
.inscription .sig{margin-right:60px}
.sleeve{width:clamp(120px,11vw,160px)!important}
.tapebox{width:clamp(130px,12vw,170px)!important;aspect-ratio:1.25!important}
.tb-reel{bottom:8px!important;right:14px!important}
.tb-t{padding-bottom:30px}
.tin{width:clamp(120px,10.5vw,150px)!important}
.phono .gramophone{width:clamp(180px,17vw,240px);height:auto}
.keys{top:calc(var(--T) + 130px)!important;right:calc(var(--L) + 2.2%)!important;flex-direction:column;gap:6px}
.hinge{width:24%!important}.hinge.a{top:16%!important}.hinge.b{top:auto!important;bottom:7%!important}
.vault-door{padding-top:36px!important;gap:12px!important}
.plaque em{display:block}
@media (max-width:760px){.ribbon h2{font-size:24px!important}}