/* Collector edition: paper, foil, cinema. Shared tokens retain app contracts. */
:root,:root[data-theme="light"]{
 --primary:#51788b;--bg-brand-solid:#a9d8e7;--bg-brand-solid-hover:#d9f0f6;
 --bg-primary:#f2f0e8;--bg-primary-hover:#eae6db;--bg-secondary:#e7e3d9;
 --bg-secondary-hover:#dbd6c9;--bg-tertiary:#f9f7f0;--fg-primary:#20211f;
 --fg-secondary:#474941;--fg-muted:#64655d;--border-primary:#ccc9bf;--border-strong:#8c8c81;
 --fg-brand-primary:#b94019;--warning:#7b5004;--success:#246a46;--danger:#b52633;
 --paper:#f2f0e8;--ink:#20211f;--orange:#9edfff;--shell:1344px;
}
:root[data-theme="dark"]{
 --bg-primary:#171b1c;--bg-primary-hover:#232a2c;--bg-secondary:#252c2e;--bg-secondary-hover:#30393b;
 --bg-tertiary:#1d2426;--fg-primary:#f2f0e8;--fg-secondary:#d0d3c9;--fg-muted:#acb4b1;
 --border-primary:#475150;--border-strong:#83908b;--primary:#ff9873;--fg-brand-primary:#ff9873;--warning:#eac777;
}
html{scroll-padding-top:92px}
body.collector{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.015em}
.collector .shell{padding-inline:5%}
.collector .topbar{background:var(--bg-primary);border-bottom:1px solid var(--border-primary)}
.collector .topbar-inner{height:80px;max-width:1600px;padding-inline:4%;gap:32px}
.collector .logo{font-size:27px;letter-spacing:-1.8px;font-weight:900;font-style:normal}
.collector .logo .mark{width:33px;height:33px;border-radius:50%;background:var(--orange);box-shadow:none;color:#1c211e;font-size:25px}
.collector .logo .word em{color:inherit;font-style:italic}
.collector .logo sup{font-size:10px;vertical-align:top;margin-left:4px;letter-spacing:0}
.collector .nav-link{font-size:11px;letter-spacing:.04em;padding-inline:12px}
.collector .btn{min-height:46px;height:auto;padding:14px 20px;border-radius:3px;font-size:11px;letter-spacing:.015em;transition:transform .2s,background .2s;gap:22px}
.collector .btn:hover{transform:translateY(-2px)}
.collector .btn-brand{color:#1b1c19;background:var(--orange)}
.collector .btn-brand:hover{background:#d9f0f6}
.collector .btn-ghost{border-color:var(--border-primary)}
.collector .btn-sm{min-height:39px;padding:11px 15px;font-size:10px}
.collector .icon-btn{border-radius:50%}
.preview-chip{font:9px monospace;letter-spacing:.1em;border:1px solid var(--border-strong);border-radius:20px;padding:6px 9px;white-space:nowrap}
.collector .mega{width:270px;grid-template-columns:1fr;gap:8px;box-shadow:0 15px 30px #0002}
.opening-journey,.second-opening{position:relative;height:180svh;background:#060e14;color:#f5f3e9}
.opening-sticky{position:sticky;top:80px;height:calc(100svh - 80px);min-height:610px;overflow:hidden;isolation:isolate}
.cinema-media,.cinema-shade{position:absolute;inset:0;z-index:-2}
.cinema-media img,.cinema-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinema-canvas{opacity:0;transition:opacity .3s}
.cinema-canvas.ready{opacity:1}
.cinema-shade{z-index:-1;background:linear-gradient(90deg,#041019e8 0%,#041019bb 27%,#04101918 64%,#04101900),linear-gradient(0deg,#030a11b8,transparent 25%)}
.hero-topline{position:absolute;top:30px;left:4%;right:4%;display:flex;justify-content:space-between;gap:20px;font:9px monospace;letter-spacing:.15em;color:#c0c9cd}
.hero-copy{position:absolute;left:6%;top:19%;max-width:56%;z-index:2}
.eyebrow{font:10px monospace;letter-spacing:.12em;line-height:1.6}
.tiny-star{color:#a9d8e7;font-size:20px;vertical-align:middle;margin-right:8px}
.hero-copy h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;font-size:clamp(88px,10.3vw,174px);line-height:.96;letter-spacing:-.015em;margin:26px 0 0}
.hero-copy h1 span{color:#9fc8d8}
.handwritten{font-family:Georgia,serif;font-style:italic;font-size:clamp(20px,2.5vw,37px);transform:rotate(-5deg);color:#f4ddc5;margin:17px 0 34px 30px}
.hero-description{font-size:15px;line-height:1.65;color:#d2d5d4;margin:0 0 25px}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.text-action{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;font-size:12px;font-weight:700;border-bottom:1px solid currentColor}
.text-action span{font-size:21px}
.hero-fineprint{display:block;margin-top:21px;font:9px monospace;color:#c3c9cb;line-height:1.6}
.hero-bottom{position:absolute;left:4%;right:4%;bottom:25px;display:flex;align-items:center;gap:30px}
.scroll-cue{font:9px monospace;letter-spacing:.08em;display:flex;align-items:center;gap:14px;flex-shrink:0}
.scroll-cue>span{width:31px;height:31px;display:grid;place-items:center;border:1px solid #a5b4c15c;border-radius:50%;font-size:18px}
.opening-progress{height:1px;background:#ffffff40;flex:1}
.opening-progress i{display:block;background:#b1d5e1;height:2px;transform-origin:left;transform:scaleX(0)}
.frame-count{font:10px monospace;color:#c8d3d7}
.film-label{position:absolute;right:5%;bottom:16%;display:grid;text-align:right;gap:9px;font:10px monospace;letter-spacing:.13em}
.film-label b{font:italic 86px Georgia,serif;color:#e9dcca}
.film-label small{font-size:8px;color:#bcc7c9}
.memory-strip{display:flex;justify-content:space-around;align-items:center;gap:26px;background:#10212a;color:#d9e6e9;padding:22px 4%;overflow:hidden;white-space:nowrap;font:clamp(18px,2.6vw,38px) Impact,'Arial Narrow',sans-serif;letter-spacing:-.02em}
.memory-strip i{font-size:35px;font-style:normal}
.drops-section,.pool-section{padding-block:90px!important}
.section-kicker{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border-strong);padding-top:17px;font:9px monospace;letter-spacing:.09em;color:var(--fg-muted)}
.collection-heading{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin:40px 0}
.collection-heading h2,.memory-copy h2{font-size:clamp(32px,4.4vw,65px);font-weight:800;letter-spacing:-.065em;line-height:1.05;margin:0}
.collection-heading h2 em,.memory-copy h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}
.collection-heading>p{font-size:14px;line-height:1.65;color:var(--fg-muted);margin:0}
.drop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}
.drop-filters{display:flex;gap:7px}
.filter-btn{border:1px solid var(--border-primary);border-radius:25px;font-size:12px;padding:12px 20px;min-height:44px}
.filter-btn.active{background:var(--fg-primary);color:var(--bg-primary);border-color:var(--fg-primary)}
.filter-btn span{padding-left:10px}
.drop-count{font:10px monospace;color:var(--fg-muted)}
.collector-drops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 22px}
.collector-drops .pack{width:auto;border:0;background:none;border-radius:0;overflow:visible}
.collector-drops .pack-art{height:330px;border:1px solid var(--border-primary);background:var(--drop-bg,#dfdbd1);position:relative;overflow:hidden;display:grid;place-items:center;perspective:900px}
.collector-drops .pack-art::before{content:'CARDRIP';position:absolute;font:80px Impact,sans-serif;letter-spacing:-.06em;color:#ffffff45;transform:rotate(-90deg);left:-68px;top:115px}
.drop-foil{width:155px;height:235px;background:linear-gradient(115deg,#fbf8dc,#a9a29b 22%,#faf8e9 31%,#93938b 49%,#eae6d9 64%,#fffdf1 77%,#bdb4ad);box-shadow:14px 24px 22px #23232e33;transform:rotate(-9deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);position:relative;color:#202020;display:flex;align-items:center;flex-direction:column;justify-content:center;isolation:isolate}
.drop-foil::before,.drop-foil::after{content:'';position:absolute;left:0;right:0;height:15px;background:repeating-linear-gradient(90deg,#a5a5a5 0 1px,#e1ded4 2px 4px);border-block:1px solid #7775}
.drop-foil::before{top:0}.drop-foil::after{bottom:0}
.drop-foil .foil-small{font:8px monospace;letter-spacing:.08em;margin-bottom:10px}
.drop-foil .drop-symbol{font:68px Georgia,serif;line-height:1;color:var(--drop-ink,#473f80)}
.drop-foil strong{font:29px Impact,sans-serif;letter-spacing:-.03em;margin-top:12px;max-width:90%;overflow-wrap:anywhere;text-align:center}
.drop-foil .foil-series{font:7px monospace;letter-spacing:.2em;margin-top:12px}
.pack:hover .drop-foil{transform:rotate(0deg) translateY(-9px) rotateY(-13deg)}
.drop-index{position:absolute;left:16px;top:16px;font:10px monospace;color:#353833}
.collector-drops .left-pill{top:15px;right:14px;left:auto;background:#f5f3e9;color:#333b37;border-radius:2px;font:9px monospace}
.collector-drops .price-pill{right:16px;bottom:16px;background:#f4f1e5;color:#272c26;border-radius:50%;width:62px;height:62px;padding:0;display:grid;place-items:center;font-size:18px;transform:rotate(8deg);white-space:nowrap}
.collector-drops .pack-body{padding:18px 0 0}
.collector-drops .pack h3{font-size:18px;letter-spacing:-.035em;color:var(--fg-primary);margin:0 0 12px}
.collector-drops .progress-row{font:10px monospace;color:var(--fg-muted)}
.collector-drops .progress{background:var(--border-primary);height:2px;margin:10px 0 18px}
.collector-drops .progress i{background:var(--orange)}
.collector-drops .btn{background:none;color:var(--fg-primary);border:1px solid var(--border-strong);justify-content:space-between}
.collector-drops .btn:hover{background:var(--fg-primary);color:var(--bg-primary)}
.collector .legal-note{margin-top:35px;background:transparent;border:0;border-top:1px solid var(--border-primary);border-radius:0;padding:20px 0;font-size:11px;color:var(--fg-muted)}
.collector .legal-note b{color:var(--fg-primary);font-size:12px}
.collector .legal-note p{font-size:11px;line-height:1.6;margin-top:5px}
.second-opening{height:170svh}
.second-copy{position:absolute;left:6%;top:23%;max-width:55%}
.second-copy h2{font:clamp(62px,7vw,112px)/.96 Impact,'Arial Narrow',sans-serif;letter-spacing:-.03em;margin:23px 0}
.second-copy h2 em{font-style:normal;color:#a9c9d6}
.second-copy p{color:#c7d0d1;font-size:14px;line-height:1.6}
.second-copy .text-action{color:#c4dce4}
.memory-section{padding:110px 0;background:var(--bg-secondary)}
.memory-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%}
.memory-art{position:relative;background:#292b35;padding:28px 28px 28px 50px;border-radius:7px;transform:rotate(-6deg);box-shadow:20px 30px 0 #00000008,0 25px 60px #141a2d35;max-width:480px;margin:20px}
.album-spine{position:absolute;left:14px;top:10%;bottom:10%;width:8px;background:repeating-linear-gradient(0deg,transparent 0 70px,#aaa 71px 83px,transparent 84px 145px)}
.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.album-pocket{aspect-ratio:3/4;border:1px solid #ffffff44;padding:8px;position:relative;background:linear-gradient(125deg,#ffffff26,transparent 55%,#ffffff18);box-shadow:inset 2px 0 2px #fff2}
.album-pocket img{width:100%;height:100%;object-fit:cover}
.pocket-back{background:#78739b;background-clip:content-box;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e8e3d1}
.pocket-back span{font-size:20px;font-weight:900;font-style:italic;letter-spacing:-1px}
.pocket-back b{font:75px Georgia,serif}
.orange-back{background-color:#31586b}
.pocket-empty{display:grid;place-items:center;color:#fff6;font:18px/1.2 Impact,sans-serif}
.album-sticker{position:absolute;right:-24px;bottom:26px;background:#eae282;padding:17px;font:bold 12px/1.4 monospace;transform:rotate(12deg);color:#282c22;box-shadow:2px 3px 9px #0002}
.memory-copy>.eyebrow{color:var(--fg-muted);margin-bottom:25px}
.memory-copy>p{font-size:15px;line-height:1.6;color:var(--fg-muted);margin:25px 0}
.opening-steps{list-style:none;padding:0;margin:30px 0}
.opening-steps li{display:flex;gap:22px;padding:18px 0;border-top:1px solid var(--border-primary)}
.opening-steps li>span{font:12px monospace;color:var(--primary);padding-top:4px}
.opening-steps h3{font-size:15px;margin:0 0 6px}
.opening-steps p{font-size:12px;line-height:1.6;color:var(--fg-muted);margin:0}
.pool-picker{display:flex;flex-direction:column;gap:10px;min-width:220px}
.pool-picker label{font:10px monospace;color:var(--fg-muted)}
.pool-picker select{padding:14px;background:var(--bg-primary);color:var(--fg-primary);border:1px solid var(--border-strong);font:12px Arial;border-radius:2px;max-width:100%}
.pool-caption{font:11px monospace;color:var(--fg-muted);margin-bottom:20px}
.collector .pool-table{border-radius:0;background:transparent}
.collector .pool-table th{background:var(--bg-secondary);color:var(--fg-secondary);font:10px monospace;padding:18px}
.collector .pool-table td{padding:18px;border-color:var(--border-primary)}
.collector .pool-table tbody tr:nth-child(even){background:transparent}
.last-call{position:relative;background:#dcdccf;padding:80px 6%;overflow:hidden;color:#222b26}
.last-call h2{font:clamp(45px,7.7vw,120px)/.92 Impact,'Arial Narrow',sans-serif;letter-spacing:-.03em;margin:35px 0}
.last-call h2 em{font-family:Georgia,serif;font-weight:400}
.last-star{position:absolute;right:9%;top:18%;font:230px Georgia;color:#59644c;transform:rotate(15deg);opacity:.2;pointer-events:none}
.system-details{padding-block:25px!important;font-size:11px;color:var(--fg-muted);line-height:1.6}
.system-details summary{cursor:pointer;padding-block:10px}
.collector footer{background:var(--bg-primary);border-top:1px solid var(--border-primary)}
.collector .legal-footer-nav{font:10px monospace;line-height:1.6}
.collector-footer{display:flex;justify-content:space-between;gap:30px;padding-block:35px!important;align-items:center;font-size:12px}
.collector-footer p{font:italic 24px Georgia,serif}
.collector .foot-bottom{font:9px/1.6 monospace;color:var(--fg-muted);padding-block:20px}
.collector .modal,.collector .pay-box,.collector .card-box,.collector .panel,.collector .legal-doc{border-radius:5px}
.collector .modal-back{backdrop-filter:blur(10px);background:#07101abd}
.collector .modal h2{letter-spacing:-.045em;font-size:30px}
.collector .field input,.collector .field textarea{border-radius:3px}
.collector .toast{border-radius:4px}
.collector .vcard{border-radius:5px}
.collector .vcard .art{background:linear-gradient(130deg,#d6cec4,#b1b5c1)}
.collector .sec-head h1{font-size:clamp(32px,5vw,60px);letter-spacing:-.055em}
.collector .rip-back{background:radial-gradient(ellipse at center,#202c44,#060c15 75%)}
.collector .rip-pack{background:linear-gradient(120deg,#ddd7ce,#7b8290,#e7ded4);color:#18232d;border-radius:2px;box-shadow:0 0 70px #79aaf733}
.collector .rip-card{box-shadow:0 0 90px #819adc40}
@media(min-width:1600px){.hero-copy{top:21%}.opening-sticky{min-height:720px}}
@media(max-width:1100px){.preview-chip{display:none}.collector .topbar-inner{gap:16px}.collector .nav-link{padding-inline:8px}.hero-copy{max-width:65%}.collector-drops .pack-art{height:290px}.memory-layout{gap:6%}}
@media(max-width:760px){
 .collector .topbar-inner{height:68px;padding-inline:5%}.collector .topbar{height:68px}.collector .top-actions{gap:7px}
 .collector .logo{font-size:24px}.collector .icon-btn{width:36px;height:36px}
 .opening-journey,.second-opening{height:150svh}
 .opening-sticky{top:68px;height:calc(100svh - 68px);min-height:640px}
 .hero-topline{top:21px;left:6%;right:6%;font-size:8px}.hero-topline>span:last-child{display:none}
 .cinema-media{inset:21% -35% 0}.cinema-media img{object-fit:contain}.cinema-shade{background:linear-gradient(180deg,#041019ed,#04101955 45%,#0410190d 70%,#041019dd)}
 .hero-copy{top:10%;left:6%;max-width:88%;width:88%}
 .hero-copy h1{font-size:clamp(70px,15vw,113px);margin-top:16px}
 .hero-copy .eyebrow{font-size:8px}.tiny-star{font-size:16px}
 .handwritten{font-size:23px;margin:9px 0 20px 12px}
 .hero-description{font-size:12px;margin-bottom:16px}
 .hero-actions{gap:13px}.hero-actions .btn{min-height:44px;padding:12px;font-size:9px;gap:9px}
 .hero-actions .text-action{font-size:10px;gap:10px}
 .hero-fineprint{font-size:8px;max-width:260px}
 .film-label{bottom:15%;right:6%;font-size:8px}.film-label b{font-size:48px}.film-label small{font-size:6px}
 .hero-bottom{left:6%;right:6%;gap:12px;bottom:20px}.scroll-cue{font-size:7px;gap:7px}.frame-count{font-size:8px}
 .memory-strip{gap:20px;justify-content:flex-start;padding-block:17px;font-size:23px}
 .memory-strip i{font-size:24px}.memory-strip>span:last-of-type,.memory-strip>i:last-child{display:none}
 .drops-section,.pool-section{padding-block:55px!important}
 .section-kicker{font-size:8px}.section-kicker>span:last-child{display:none}
 .collection-heading{gap:20px;align-items:flex-start;flex-direction:column;margin:27px 0}
 .collection-heading h2,.memory-copy h2{font-size:40px}.collection-heading>p{font-size:12px}
 .collector-drops{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 13px}
 .collector-drops .pack-art{height:245px}.drop-foil{width:115px;height:180px}
 .drop-foil .foil-small{font-size:6px}.drop-foil .drop-symbol{font-size:48px}.drop-foil strong{font-size:22px}.drop-foil .foil-series{font-size:5px}
 .collector-drops .pack-art::before{display:none}.collector-drops .price-pill{width:48px;height:48px;font-size:15px;right:9px;bottom:10px}
 .collector-drops .left-pill{font-size:7px;right:8px;top:10px}.drop-index{font-size:8px;left:9px;top:12px}
 .collector-drops .pack h3{font-size:15px}.collector-drops .progress-row{font-size:8px}
 .collector-drops .btn{font-size:9px;gap:3px;padding:12px 9px}.filter-btn{padding:10px 15px;font-size:10px}
 .drop-count{font-size:8px}.second-copy{top:13%;max-width:90%;left:6%}.second-copy h2{font-size:66px}.second-copy .eyebrow{font-size:8px}
 .second-copy p{font-size:12px}.second-opening .cinema-media{inset:25% -35% -3%}
 .memory-section{padding:65px 0}.memory-layout{grid-template-columns:1fr;gap:65px}.memory-art{max-width:370px;margin:10px 8%;padding:23px 23px 23px 40px}
 .album-sticker{font-size:9px;right:-17px;padding:12px}.pocket-back b{font-size:55px}.pocket-back span{font-size:16px}
 .pool-picker{width:100%}.collector .pool-table td{padding:12px}
 .last-call{padding:60px 6%}.last-call h2{font-size:clamp(37px,8.8vw,65px)}.last-star{font-size:130px;right:2%;top:10%}
 .collector-footer{flex-wrap:wrap;gap:20px}.collector-footer p{font-size:20px}.collector .foot-bottom{gap:15px;flex-wrap:wrap}
}
@media(max-width:380px){.collector-drops .pack-art{height:210px}.drop-foil{width:100px;height:160px}.hero-actions{gap:8px}.hero-copy h1{font-size:70px}.hero-copy .eyebrow{font-size:7px}.drop-count{display:none}.collection-heading h2,.memory-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){
 html:not([data-motion="cinema"]){scroll-behavior:auto}
 html:not([data-motion="cinema"]) .opening-journey,html:not([data-motion="cinema"]) .second-opening{height:auto}
 html:not([data-motion="cinema"]) .opening-sticky{position:relative;top:0}
 html:not([data-motion="cinema"]) .collector .btn:hover,html:not([data-motion="cinema"]) .pack:hover .drop-foil{transform:none}
 html:not([data-motion="cinema"]) .cinema-canvas{transition:none}
}