@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root{--bg:#141311;--paper:#f4f0e8;--muted:#aaa79f;--line:#ffffff20;--accent:#dfedab;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--paper);font:15px/1.55 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:focus:not(:focus-visible){outline:0}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{position:fixed;top:8px;left:8px;z-index:200;background:var(--accent);color:#111;padding:12px}.topbar{height:105px;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid var(--line)}.wordmark{display:flex;gap:13px;align-items:center;font-size:23px;font-weight:650;letter-spacing:-1px;line-height:1.1}.light{font-weight:300}.wordmark small{display:block;font-size:8px;font-weight:500;letter-spacing:2px;margin-top:7px}.brand-icon{border:1px solid #e9e8d6;width:37px;height:46px;transform:rotate(-9deg);border-radius:5px;font:italic 30px var(--serif);text-align:center;line-height:38px}.brand-icon span{font-size:21px;margin-left:-3px}nav{display:flex;gap:35px;align-items:center;font-size:13px}nav a{padding:10px 0}nav button{background:none;border:0;padding:10px 0;color:var(--muted)}nav .active{border-bottom:1px solid var(--paper)}nav span{font-size:10px;border:1px solid var(--line);border-radius:50%;padding:2px 6px;margin-left:5px}.about-link{font-size:12px}.about-link span{margin-left:25px;color:var(--accent)}.hero{max-width:1440px;margin:auto;padding:74px 6% 70px;display:grid;grid-template-columns:1.1fr 1fr;min-height:660px;gap:50px;align-items:center}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:600;color:var(--accent)}.status-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:8px}h1{font-size:clamp(48px,5.1vw,78px);font-weight:450;letter-spacing:-4px;line-height:1.06;margin:29px 0 25px}h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-3px;color:var(--accent)}.hero-copy>p{color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:31px}.primary{background:var(--accent);color:#202515;border:1px solid var(--accent);padding:14px 21px;display:inline-flex;align-items:center;justify-content:space-between;gap:45px;font-size:12px;font-weight:600;border-radius:3px}.primary:hover{background:#edf5ce}.hero-foot{font-size:8px;letter-spacing:1.2px;color:var(--muted);display:flex;align-items:center;gap:12px;margin-top:55px}.line{width:30px;height:1px;background:#ffffff60}.hero-art{height:480px;position:relative;display:grid;place-items:center}.orbit{position:absolute;inset:8px 5px;border:1px solid #ffffff0f;border-radius:50%;transform:rotate(-30deg)}.orbit-two{inset:80px -55px;transform:rotate(-40deg)}.hero-card{height:415px;width:290px;position:relative;transform:rotate(9deg);padding:0;border:1px solid #eac99675;border-radius:10px;overflow:hidden;background:#37291c;box-shadow:0 35px 60px #0009;transition:transform .35s}.hero-card:hover{transform:rotate(5deg) translateY(-6px)}.portrait{position:absolute;inset:0;background:linear-gradient(0deg,#1b130bdd 0%,transparent 70%),url('event-portrait.png?v=20261020-visual-01') center/cover,#49352e}.card-top{position:absolute;top:20px;left:20px;right:20px;font-size:9px;letter-spacing:2px;display:flex;justify-content:space-between}.card-top>span{font-size:20px;line-height:12px}.card-bottom{position:absolute;left:22px;right:22px;bottom:20px;text-align:left}.card-bottom>span{font-size:7px;letter-spacing:1.4px}.card-bottom strong{display:block;font:italic 38px/1.05 var(--serif);margin:12px 0 21px}.card-bottom>small{display:flex;justify-content:space-between;border-top:1px solid #ffffff45;padding-top:10px;font-size:8px}.poster-back{height:400px;width:280px;position:absolute;transform:rotate(-10deg) translate(-45px,5px);border-radius:9px;background:#dedabf;color:#333223;padding:30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 30px #0008}.poster-back>span{font:italic 36px/1.05 var(--serif)}.poster-back small{font-size:9px;letter-spacing:1px}.floating-tag{position:absolute;bottom:4px;left:0;background:#272621;border:1px solid #5f5d4b;padding:13px 18px;border-radius:4px;font-size:10px;transform:rotate(-5deg);box-shadow:0 10px 30px #0004}.floating-tag>span{color:var(--accent);margin-right:8px;font-size:18px}.vertical-caption{position:absolute;right:-24px;top:30%;writing-mode:vertical-rl;font-size:7px;letter-spacing:1.6px;color:var(--muted)}.occasion-strip{display:flex;justify-content:center;align-items:center;gap:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:75px;padding:15px 6%;font-size:12px;color:#cfcdc4}.occasion-strip>span:first-child{font-size:8px;letter-spacing:1.3px;margin-right:20px;color:var(--muted)}.occasion-strip i{font-size:12px;color:#77775b}.collection{max-width:1440px;margin:auto;padding:65px 6% 55px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px}h2{font:400 37px/1.15 var(--serif);letter-spacing:-1px;margin:12px 0 0}.gallery-tools{display:flex;align-items:center;gap:18px}.gallery-tools input{background:none;border:0;border-bottom:1px solid var(--line);color:var(--paper);width:200px;font-size:11px;padding:10px 0}.text-button{border:0;background:none;padding:10px 0;color:var(--muted);font-size:11px}.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.filter{background:none;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:9px 16px;font-size:10px}.filter.active{background:var(--paper);color:var(--bg);border-color:var(--paper)}.filter:hover{border-color:var(--paper)}.feed-status{font-size:10px;color:var(--muted);min-height:16px;margin:18px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}.tile{border:0;background:none;text-align:left;padding:0;min-width:0}.tile-art{aspect-ratio:3/3.65;border-radius:5px;position:relative;overflow:hidden;transition:transform .25s;background:#34352c}.tile:hover .tile-art{transform:translateY(-5px)}.tile-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.tile-gradient{position:absolute;inset:0;background:linear-gradient(0deg,#111b,transparent 80%)}.tile-badge{position:absolute;top:17px;left:17px;border:1px solid #ffffff70;border-radius:25px;padding:5px 9px;font-size:7px;letter-spacing:1px}.tile-arrow{position:absolute;right:17px;top:16px;font-size:18px}.tile-caption{position:absolute;bottom:23px;left:23px;right:23px;color:#fff}.tile-caption small{font-size:8px;letter-spacing:1.6px}.tile-caption strong{display:block;font:italic 34px/1.05 var(--serif);margin:10px 0}.tile-caption p{font-size:9px;margin:16px 0 0;display:flex;justify-content:space-between;border-top:1px solid #ffffff50;padding-top:10px}.tile-label{display:flex;justify-content:space-between;gap:8px;margin-top:13px}.tile-label strong{font-size:12px;font-weight:450}.tile-label span{font-size:9px;color:var(--muted)}.poster-art{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:center;background:var(--poster-bg);color:var(--poster-ink);overflow:hidden}.poster-art:before,.poster-art:after{content:'';position:absolute;inset:12% -30%;border:1px solid currentColor;opacity:.22;border-radius:50%;transform:rotate(35deg)}.poster-art:after{inset:22% -10%;transform:rotate(-35deg)}.poster-art .poster-symbol{font-size:110px;line-height:1;opacity:.8;position:absolute;right:-12px;top:35px;transform:rotate(15deg)}.poster-art .poster-heading{font:italic 48px/1 var(--serif);position:relative;margin-top:-70px;white-space:pre-line}.poster-art .poster-edition{position:absolute;top:23px;font-size:8px;letter-spacing:2px}.gallery-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:35px;color:var(--muted);font-size:9px}.how{margin:15px auto 0;max-width:1440px;padding:65px 6%;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:90px}.how h2{font-size:48px}.how ol{list-style:none;padding:0;margin:0}.how li{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}.how li>span{color:var(--accent);font-size:10px;padding-top:4px}.how h3{font-size:15px;font-weight:450;margin:0 0 8px}.how p{font-size:12px;color:var(--muted);max-width:355px;margin:0;line-height:1.8}footer{max-width:1440px;padding:35px 6%;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-brand{font-size:20px;letter-spacing:-1px}.footer-brand span{font-weight:300}footer p,footer small{font-size:9px;color:var(--muted)}footer small span{margin-left:30px}dialog{width:min(1050px,94vw);max-height:94dvh;padding:0;border:1px solid #555248;border-radius:12px;background:#1b1a16;color:var(--paper);overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}.detail{display:grid;grid-template-columns:1fr 1fr;position:relative}.close{position:absolute;right:14px;top:10px;font-size:26px;background:none;border:0;z-index:8;width:40px;height:40px}.card-side{padding:45px 30px 30px;background:#10100e}.card-stage{width:min(310px,100%);aspect-ratio:3/4.2;margin:auto;perspective:1500px}.flip-card{height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.flip-card.flipped{transform:rotateY(180deg)}.face{position:absolute;inset:0;border-radius:9px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #ffffff35;background:#29291f}.front{transform:translateZ(1px)}.back{transform:rotateY(180deg);background:#dedac7;color:#25271a;padding:24px}.front>img:first-child{width:100%;height:100%;object-fit:cover}.detail-poster{position:absolute;inset:0}.front:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090907cf,transparent 75%);pointer-events:none}.edition{position:absolute;z-index:2;top:20px;left:20px;font-size:8px;letter-spacing:1.5px}.front-caption{position:absolute;z-index:2;bottom:22px;left:22px;right:22px}.front-caption small{font-size:8px;letter-spacing:1px}.front-caption strong{display:block;font:italic 34px/1.1 var(--serif);margin-top:8px}.signature{position:absolute;width:55%;height:90px;object-fit:contain;bottom:100px;left:20px;z-index:3}.back-brand{font-size:8px;letter-spacing:1.3px}.back-story{margin-top:35px}.back-story>span{font-size:8px;letter-spacing:1px}.back h3{font:italic 32px/1 var(--serif);margin:15px 0}.back p{font-size:11px}.back dl{font-size:10px;border-top:1px solid #25271a40;padding-top:12px}.back dl div{margin-bottom:10px}.back dt{font-size:7px;letter-spacing:1px;opacity:.65}.back dd{margin:2px 0}.back>small{position:absolute;bottom:20px;font-size:8px}.back video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#111}.back video[hidden]{display:none}.card-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:25px}.card-actions button{font-size:10px;background:none;border:1px solid #ffffff35;padding:9px 11px;border-radius:3px}.card-actions .accent{background:var(--accent);color:#252719;border-color:var(--accent)}.story-side{padding:70px 40px 35px}.story-side h2{font-size:43px}.story-side>p{font-size:13px;color:var(--muted);line-height:1.8}.memory-meta{display:flex;flex-direction:column;gap:5px;color:var(--accent);font-size:10px;padding:18px 0;border-bottom:1px solid var(--line)}.capture-note{display:flex;gap:15px;align-items:center;padding:20px 0}.capture-note>span{font-size:24px;color:var(--accent)}.capture-note p{font-size:11px;color:var(--muted)}.share-actions{display:flex;flex-wrap:wrap;gap:9px}.share-actions .primary{gap:15px}.secondary{background:none;border:1px solid var(--line);padding:13px 16px;border-radius:3px;font-size:11px}.card-status{min-height:20px}.privacy-note{font-size:9px;color:var(--muted)}[hidden]{display:none!important}@media(min-width:1500px){.hero{min-height:730px}.hero-art{height:530px}.hero-card{width:320px;height:460px}.poster-back{width:300px;height:440px}}@media(max-width:950px){.topbar{padding:0 5%;height:85px}.hero{padding:55px 5%;gap:20px;min-height:580px}h1{font-size:53px;letter-spacing:-2.8px}.hero-art{height:400px}.hero-card{width:230px;height:335px}.poster-back{width:220px;height:325px;transform:rotate(-10deg) translate(-20px,0)}.card-bottom strong{font-size:30px}.vertical-caption{display:none}.floating-tag{font-size:8px;left:0;bottom:0}.occasion-strip{gap:17px}.occasion-strip>span:first-child{display:none}.collection{padding:50px 5%}.section-top{align-items:start;flex-direction:column;gap:20px}.gallery-tools{width:100%;justify-content:space-between}.grid{gap:22px 15px}.tile-caption{left:16px;right:16px;bottom:16px}.tile-caption strong{font-size:26px}.poster-art .poster-heading{font-size:36px}.how{gap:40px;padding:45px 5%}.how h2{font-size:40px}nav{gap:18px}.about-link{display:none}}@media(max-width:640px){.wordmark{font-size:19px}.wordmark small{font-size:6px}.brand-icon{width:30px;height:38px;line-height:32px;font-size:24px}nav{font-size:10px;gap:15px}.hero{grid-template-columns:1fr;padding:45px 6% 30px;gap:30px}.hero-copy>p{font-size:13px}h1{font-size:52px}.hero-foot{margin-top:28px;font-size:7px}.hero-art{height:380px;max-width:360px;width:100%;justify-self:center}.hero-card{width:245px;height:345px}.poster-back{width:235px;height:335px}.occasion-strip{justify-content:flex-start;overflow:auto;white-space:nowrap;font-size:10px;min-height:55px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 13px}.tile-art{aspect-ratio:3/4.1}.tile-caption{left:12px;right:12px;bottom:14px}.tile-caption strong{font-size:23px}.tile-caption small{font-size:6px}.tile-caption p{font-size:7px}.tile-badge{font-size:6px;left:10px;top:10px}.tile-arrow{right:10px;top:8px}.tile-label{flex-direction:column;gap:2px}.tile-label strong{font-size:10px}.poster-art{padding:16px}.poster-art .poster-heading{font-size:30px}.poster-art .poster-symbol{font-size:90px}.poster-art .poster-edition{font-size:6px;top:18px}.filter-row{gap:7px}.filter{font-size:9px;padding:8px 11px}h2{font-size:31px}.gallery-bottom{font-size:8px}.gallery-bottom>span:last-child{max-width:140px;text-align:right}.how{grid-template-columns:1fr;gap:20px}.how h2 br{display:none}.how h2{font-size:35px}.how li{padding:18px 0}.detail{grid-template-columns:1fr}.card-side{padding:45px 25px 25px}.story-side{padding:30px 25px}.story-side h2{font-size:35px}.card-stage{max-width:280px}footer{flex-wrap:wrap}footer p{width:100%;order:3;margin:0}.floating-tag{bottom:-3px}.hero-art .orbit-two{inset:70px -10px}.hero-art .orbit-one{inset:0 5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Keep decorative orbit lines inside the page and let each sample title appear once. */
html,body{overflow-x:clip}.tile .poster-heading,.tile .poster-edition{display:none}.tile .poster-symbol{top:12%;right:6%;font-size:165px;opacity:.55}.tile .poster-art:before{inset:2% -20%}.tile .poster-art:after{inset:15% -15%}@media(max-width:640px){.tile .poster-symbol{font-size:105px;top:11%;right:4%}.how h2{line-height:1.2}.how h2 br:after{content:' '}.tile-badge{font-size:6px;letter-spacing:.6px}.topbar{gap:12px}nav{gap:12px}.wordmark{flex-shrink:0}}
/* Live-event palette: bright stage lighting against a deep blue canvas. */
:root{--bg:#070d20;--paper:#f5f8ff;--muted:#a9b9d7;--line:#9bbcff30;--accent:#68f5ed}
body{background:radial-gradient(ellipse at 85% 15%,#36237c55,transparent 38%),radial-gradient(ellipse at 10% 45%,#007c9a22,transparent 42%),var(--bg)}
.hero-art{background:radial-gradient(ellipse,#6854ff30,transparent 68%)}
.orbit{border-color:#7e91ff38}.orbit-two{border-color:#68f5ed25}
.poster-back{background:linear-gradient(145deg,#7663ff,#4433ad);color:#fff;box-shadow:0 20px 50px #4032dc45}
.hero-card{border-color:#94aaff80;box-shadow:0 25px 70px #0008,0 0 45px #7162ff30}
.portrait{background:linear-gradient(0deg,#101438e8,transparent 75%),url('event-portrait.png?v=20261020-visual-01') center/cover,#222b55}
.floating-tag{background:#132244;border-color:#68f5ed70;box-shadow:0 10px 30px #0004}
.primary{color:#06232b;background:var(--accent);border-color:var(--accent);box-shadow:0 6px 24px #36e9e51a}.primary:hover{background:#a0fff8}
.filter.active{background:var(--accent);border-color:var(--accent);color:#06232b}
.occasion-strip{background:linear-gradient(90deg,#125a7426,#6748bd26);color:#d7e6ff}.occasion-strip i{color:#94a1ff}
.card-side{background:#080f26}.story-side{background:linear-gradient(145deg,#17264b,#11182f)}
dialog{background:#11182f;border-color:#6980c966}.back{background:linear-gradient(145deg,#dceaff,#e6dcff);color:#17274b}
.tile-art{box-shadow:0 8px 30px #0003}.tile:hover .tile-art{box-shadow:0 12px 35px #4d42bc40}

/* Featured event slideshow: photographs rotate; surrounding layout stays still. */
.hero-photo{width:100%;height:100%;object-fit:cover;display:block;background:none;position:absolute;inset:0}
.hero-photo.incoming{opacity:0;transition:opacity .6s ease}.hero-photo.incoming.is-visible{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#090d14ed,transparent 75%);pointer-events:none}
.hero-controls{position:absolute;bottom:-42px;left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;white-space:nowrap}
.hero-controls>button{width:32px;height:32px;background:#111d38;border:1px solid #9bbcff40;border-radius:50%;font-size:13px;color:#dce7ff}
.hero-controls>button:hover{border-color:var(--accent);color:var(--accent)}
.hero-dots{display:flex;gap:4px;align-items:center}.hero-dot{position:relative;width:22px;height:32px;padding:0;border:0;background:none}
.hero-dot:after{content:'';position:absolute;top:12px;left:7px;width:7px;height:7px;border-radius:50%;background:#ffffff45;transition:background .2s,transform .2s}
.hero-dot.active:after{background:var(--accent);transform:scale(1.3)}
#heroTitle{white-space:pre-line}.hero-art{margin-bottom:35px}
@media(max-width:640px){.hero-art{margin-bottom:50px}.hero-controls{bottom:-49px;gap:9px}.hero-controls>button{width:36px;height:36px}.hero-dot{width:23px;height:36px}.hero-dot:after{top:14px}.floating-tag{bottom:0}}
#heroEventLabel{font-size:9px;line-height:1.3;letter-spacing:2px}

.social-videos{margin-top:24px;border-top:1px solid currentColor;padding-top:16px}.social-videos[hidden]{display:none}.social-videos video{display:block;width:auto;height:auto;max-width:100%;max-height:440px;object-fit:contain;background:#000;margin:12px 0}.social-videos article{margin:18px 0}.social-download{display:inline-block;margin:8px 16px 8px 0}.social-videos button{padding:10px 16px}.social-videos p{font-size:14px}

.video-share-menu{margin:12px 0;max-width:320px}.video-share-menu>summary{display:list-item;list-style-position:inside;cursor:pointer;width:fit-content;padding:12px 18px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#10151b;font:600 14px/1.4 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}.video-share-menu>summary:focus-visible{outline:2px solid var(--paper);outline-offset:3px}.video-share-actions{display:grid;gap:4px;padding:8px;margin-top:6px;border:1px solid var(--line);border-radius:5px;background:#101828}.social-videos .video-share-actions>a,.social-videos .video-share-actions>button{display:block;width:100%;margin:0;padding:11px 12px;text-align:left;font:inherit;font-size:14px;color:#f4f0e8;background:#101828;border:0;border-radius:3px;cursor:pointer}.social-videos .video-share-actions>a:hover,.social-videos .video-share-actions>button:hover{background:#24314a}.video-share-menu:not([open])>.video-share-actions{display:none}

.social-videos .video-native-share{display:block;width:fit-content;margin:12px 0;padding:12px 18px;background:var(--accent);color:#10151b;border:1px solid var(--accent);border-radius:4px;font-weight:600}

.language-switch{display:flex;align-items:center;gap:3px;flex-shrink:0;margin-left:12px}.language-switch button{font:600 12px/1.2 inherit;font-family:inherit;font-size:12px;background:transparent;color:inherit;padding:8px;border:1px solid transparent;border-radius:4px;cursor:pointer}.language-switch button[aria-pressed="true"]{border-color:currentColor;font-weight:700}.language-switch button:focus-visible{outline:2px solid currentColor;outline-offset:3px}html[lang="fr"] .topbar nav{gap:18px}@media(max-width:650px){.language-switch{margin-left:0;gap:0}.language-switch button{padding:7px 5px}html[lang="fr"] .topbar{gap:10px;flex-wrap:wrap}html[lang="fr"] .topbar nav{gap:12px}html[lang="fr"] .hero h1{font-size:clamp(43px,8vw,70px)}}

.card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:4;pointer-events:none}.card-frame[hidden]{display:none}.signed-framed .front-caption{z-index:5;left:8%;right:8%;bottom:8.5%}.signed-framed .edition{visibility:hidden}.signed-framed .signature{left:7.5%;bottom:16%;width:46.75%;height:76.5px;z-index:3}.signed-framed .front{border-color:transparent}.signed-framed .front-caption small{display:none}

.signed-framed .front-caption strong{font-size:18px}

.video-share-controls{display:flex;align-items:center;gap:8px;margin:12px 0}.social-videos .video-share-controls button{margin:0}.video-more-options{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:4px;padding:10px 14px;font-size:18px;min-height:44px;cursor:pointer}.video-share-popover{position:fixed;inset:auto;margin:0;padding:6px;border:1px solid #53617a;border-radius:8px;background:#101828;color:#f4f0e8;box-shadow:0 12px 35px #0008;z-index:1000}.video-share-popover[hidden]{display:none!important}.video-share-popover::backdrop{background:transparent}.social-videos .video-share-popover>a,.social-videos .video-share-popover>button{display:block;box-sizing:border-box;width:100%;margin:0;padding:12px;text-align:left;text-decoration:none;background:transparent;color:#f4f0e8;border:0;border-radius:4px;font:14px/1.4 system-ui;cursor:pointer}.video-share-popover>a:hover,.video-share-popover>button:hover{background:#24314a}

.memory-meta{flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:3px}.memory-meta #eventLocation:not(:empty):before{content:'·';margin-right:10px}.social-video-heading{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:7px;row-gap:2px}.social-video-heading h3{font-size:16px;line-height:1.5;margin:0;white-space:nowrap}.social-videos .social-video-heading p{font-size:14px;line-height:1.5;margin:0}.social-videos article{margin:10px 0}

.video-share-controls{flex-wrap:wrap}.video-tag-note{font-size:12px;font-weight:700;color:var(--paper);line-height:1.4;margin-left:14px}

.back-sponsors{position:absolute;left:24px;right:24px;bottom:48px;display:flex;align-items:center;justify-content:flex-start;gap:20px;height:48px}.back-sponsors[hidden]{display:none}.back-sponsors img{display:block;object-fit:contain;max-height:48px;width:auto}.back-sponsors img:first-child{height:48px;max-width:48px}.back-sponsors img:last-child{height:auto;width:90px}.back.has-event-logos .back-story{margin-top:24px;max-height:calc(100% - 105px);overflow:auto}

/* Public event navigation */
.event-picker{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px;max-width:100%;font:inherit;color:var(--paper)}
.event-picker>span{font-size:12px;color:var(--muted)}
.event-picker select{box-sizing:border-box;max-width:100%;width:340px;min-height:44px;padding:10px 38px 10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--paper);font:inherit;font-size:15px;color-scheme:dark}
.event-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:640px){.event-picker select{width:100%}.event-picker{width:100%}}

/* Event-selected sheen, adapted from NHLcards' premium card light sweep. */
.tile-art[data-effect="sheen"]::after,
.flip-card[data-effect="sheen"] .front::before{
 content:"";position:absolute;top:-18%;bottom:-18%;width:34%;left:-55%;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),rgba(82,190,255,.24),transparent);
 transform:skewX(-15deg);opacity:0;pointer-events:none;z-index:6;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.tile:hover .tile-art[data-effect="sheen"]::after,
.tile:focus-visible .tile-art[data-effect="sheen"]::after{animation:ic-card-sheen .85s ease-out forwards}
#cardDialog[open] .flip-card[data-effect="sheen"][data-photo-ready="true"]:not(.flipped) .front::before{animation:ic-card-sheen 6s ease-out .25s infinite}
.flip-card.flipped .front::before{visibility:hidden;animation:none}
@keyframes ic-card-sheen{
 0%{left:-55%;opacity:0}
 2%{opacity:1}
 16%{left:125%;opacity:1}
 18%,100%{left:125%;opacity:0}
}
/* Gallery hover uses the full duration for a single sweep. */
@keyframes ic-tile-sheen{from{left:-55%;opacity:1}to{left:125%;opacity:1}}
.tile:hover .tile-art[data-effect="sheen"]::after,
.tile:focus-visible .tile-art[data-effect="sheen"]::after{animation-name:ic-tile-sheen}
@media(prefers-reduced-motion:reduce){
 .tile-art[data-effect="sheen"]::after,
 #cardDialog[open] .flip-card[data-effect="sheen"] .front::before{display:none;animation:none}
}

/* Additional event-selected card finishes. Photo readiness gates all full-card effects. */
.tile-art[data-effect="holographic"]::after,
.flip-card[data-effect="holographic"] .front::before{
 content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
 background:linear-gradient(125deg,transparent 12%,#8be9ff66 28%,#d9a4ff66 40%,#fff1ab66 52%,#8cffe566 64%,transparent 82%);
 background-size:300% 300%;mix-blend-mode:screen;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
#cardDialog[open] .flip-card[data-effect="holographic"][data-photo-ready="true"]:not(.flipped) .front::before,
.tile:is(:hover,:focus-visible) .tile-art[data-effect="holographic"][data-photo-ready="true"]::after{animation:ic-holographic 8s ease-in-out infinite}
@keyframes ic-holographic{0%,100%{background-position:0% 25%;opacity:.28}50%{background-position:100% 75%;opacity:.55}}
.tile-art[data-effect="sparkle"]::after,
.flip-card[data-effect="sparkle"] .front::before{
 content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse 2px 9px at 12% 16%,#fffce6 8%,transparent 100%),radial-gradient(ellipse 9px 2px at 12% 16%,#fffce6 8%,transparent 100%),radial-gradient(ellipse 2px 7px at 87% 38%,#c9f7ff 8%,transparent 100%),radial-gradient(ellipse 7px 2px at 87% 38%,#c9f7ff 8%,transparent 100%),radial-gradient(ellipse 2px 8px at 18% 82%,#fffce6 8%,transparent 100%),radial-gradient(ellipse 8px 2px at 18% 82%,#fffce6 8%,transparent 100%),radial-gradient(circle 2px at 78% 88%,#e7d8ff 20%,transparent 100%);
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
#cardDialog[open] .flip-card[data-effect="sparkle"][data-photo-ready="true"]:not(.flipped) .front::before,
.tile:is(:hover,:focus-visible) .tile-art[data-effect="sparkle"][data-photo-ready="true"]::after{animation:ic-sparkle 4.8s ease-in-out infinite}
@keyframes ic-sparkle{0%,24%,64%,100%{opacity:0}12%{opacity:.8}44%{opacity:.35}80%{opacity:.65}}
.signature-gleam{opacity:0;pointer-events:none;z-index:5!important;filter:brightness(2.8) saturate(.35);mix-blend-mode:screen;
 -webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 47%,#000 53%,transparent 62%);mask-image:linear-gradient(90deg,transparent 38%,#000 47%,#000 53%,transparent 62%);
 -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:140% 0;mask-position:140% 0;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
#cardDialog[open] .flip-card[data-effect="signature-gleam"][data-photo-ready="true"]:not(.flipped) .signature-gleam:not([hidden]){animation:ic-signature-gleam 4.2s cubic-bezier(.75,0,.25,1) .7s both}
@keyframes ic-signature-gleam{0%{opacity:0;-webkit-mask-position:140% 0;mask-position:140% 0}8%{opacity:.95}92%{opacity:.95}100%{opacity:0;-webkit-mask-position:-40% 0;mask-position:-40% 0}}
.flip-card.flipped .signature-gleam{visibility:hidden;animation:none}
@media(prefers-reduced-motion:reduce){
 .tile-art[data-effect]::after,#cardDialog[open] .flip-card[data-effect] .front::before,#cardDialog[open] .flip-card .signature-gleam{display:none!important;animation:none!important}
}

/* Keep photo shading local to the caption rather than across the portrait. */
.tile-gradient,.front:after{background:none}
.tile-caption,.front-caption{isolation:isolate}
.tile-caption:before,.front-caption:before{content:"";position:absolute;inset:-24px -23px -24px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5) 35%,rgba(0,0,0,.72))}
.tile-badge,.edition{text-shadow:0 1px 3px #000}

/* Leave the overlay's right branding strip clear and wrap the complete name. */
.front-caption strong,.tile-caption strong{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
.signed-framed .front-caption{left:8%;right:22%;bottom:6%}
.signed-framed .front-caption strong{font-size:18px;line-height:1.1}
.signed-framed .front-caption:before{inset:-12px -8px -12px}

/* Give the card-back content and footer separate, non-overlapping space. */
.back{display:flex;flex-direction:column;gap:0}
.back-brand{flex:0 0 auto}
.back .back-story,.back.has-event-logos .back-story{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;margin-top:18px;padding-bottom:8px}
.back>small{position:static;display:block;flex:0 0 auto;margin-top:12px;line-height:1.4}
.back .back-sponsors{position:static;flex:0 0 48px;margin-top:10px}
.back dd{overflow-wrap:anywhere}

.back h3{font-size:28px;margin:12px 0}
.back dl{margin:12px 0 0;padding-top:10px}
.back dl div{margin-bottom:6px}

/* Keep photos and decorative lighting below the event frame. */
.front{isolation:isolate}
.front>#detailPhoto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.front>#detailPoster{z-index:0}
.flip-card[data-effect] .front::before{z-index:2}
.front::after{z-index:1}
.front>#signatureOverlay{z-index:3}
.front>#cardFrame{z-index:4}
.front>.front-caption{z-index:5}
.signed-framed .front-caption:before{left:0;right:0}

/* Shade the photo beneath the frame; let the frame define the visible edges. */
.signed-framed .front-caption::before{display:none}
.signed-framed .front::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.432),transparent 28%)}

/* Wrap names between complete words; shrink an oversized word rather than split it. */
.front-caption strong,.tile-caption strong{overflow-wrap:normal;word-break:normal;hyphens:none}
.card-name-word{display:inline-block;white-space:nowrap;overflow-wrap:normal;word-break:normal;hyphens:none}

/* Reserve the same box for loading, playback and media errors. */
.social-video-capsule{position:relative;width:100%;aspect-ratio:9/16;margin:12px 0;background:#000;overflow:hidden;border-radius:8px}
.social-videos .social-video-capsule>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain;background:#000}

.story-side .card-credit{font-size:12px;line-height:1.6;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}.card-credit a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}.card-credit a:hover{color:var(--accent)}


/* =====================================================================
   V2 VISUAL LAYER — warm, moody, modern (2026-10-28)
   Presentation only. Original rules above are untouched; this layer
   overrides them. No classes, IDs, markup, or text were renamed/edited.
   "Reduced text" is done visually (display:none / visually-hidden) on
   decorative copy only — every element site.js writes to still exists.
   Deliberately untouched (site.js depends on them): .signature,
   .signed-framed geometry, .card-stage size, .face, the .flip-card
   transform transition, and the .hero-photo.incoming 0.6s crossfade.
   ===================================================================== */
:root {
  --bg: #111112;
  --paper: #f5f6f8;
  --muted: #bdbec0;
  --line: #e8e9ec24;
  --accent: #ddc9a9;
  --coral: #e4516a;
  --rose: #fe7386;
  --plum: #1e1f21;
  --cream: #f0f0f2;
  --ink: #1a1a1c;
  --ink-muted: #666769;
  --glass: #1f2022b8;
  --glass-line: #e8e9ec2e;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 24px;
  --bleed: 0 0 0 100vmax;
}
html {
  scroll-padding-top: 24px;
}
body {
  font-family: var(--sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(55% 40% at 88% 4%, #b9996238, transparent 70%),
    radial-gradient(45% 35% at 0% 22%, #836e4b40, transparent 70%),
    var(--bg);
}
::selection {
  background: var(--accent);
  color: var(--ink);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Redundant / decorative copy, hidden visually ---------- */
.wordmark small,
.vertical-caption,
.floating-tag,
.poster-back > span,
.poster-back small,
#heroCategory,
#heroPosition,
.collection .section-top .eyebrow,
.tile-badge,
.tile-caption small,
.tile-label span,
.gallery-bottom > span:last-child,
.how .eyebrow,
footer p,
.detail-poster .poster-edition {
  display: none;
}
.event-picker > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- Top bar (dark) ---------- */
.topbar {
  height: 96px;
  border-bottom: 0;
}
.wordmark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1.2px;
}
.wordmark .light {
  font-weight: 400;
}
.brand-icon {
  border: 0;
  color: var(--ink);
  background: linear-gradient(150deg, var(--accent), var(--champ));
  border-radius: 10px;
  box-shadow: 0 8px 24px #b9996240;
  transition: transform 0.5s var(--ease-out);
}
.wordmark:hover .brand-icon {
  transform: rotate(0deg) scale(1.05);
}
nav {
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  padding: 5px;
  border-radius: 60px;
  background: #ffffff0d;
  border: 1px solid var(--glass-line);
}
nav a,
nav button {
  padding: 11px 20px;
  border-radius: 40px;
  color: var(--muted);
  transition:
    background 0.25s,
    color 0.25s;
}
nav a:hover,
nav button:hover {
  color: var(--paper);
  background: #ffffff10;
}
nav .active,
nav a.active {
  border-bottom: 0;
  color: var(--ink);
  background: var(--paper);
}
nav .active:hover {
  color: var(--ink);
  background: var(--paper);
}
nav span {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  border: 0;
  border-radius: 20px;
  padding: 2px 7px;
  margin-left: 6px;
  background: var(--accent);
  color: var(--ink);
}
.about-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}
.about-link:hover {
  color: var(--paper);
}
.about-link span {
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.about-link:hover span {
  transform: translate(3px, -3px);
}
.language-switch {
  background: #ffffff0d;
  border: 1px solid var(--glass-line);
  border-radius: 40px;
  padding: 4px;
  gap: 2px;
}
.language-switch button {
  font-size: 14px;
  font-weight: 800;
  border: 0;
  border-radius: 30px;
  padding: 9px 14px;
  color: var(--muted);
  transition:
    background 0.2s,
    color 0.2s;
}
.language-switch button:hover {
  color: var(--paper);
}
.language-switch button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Hero (dark, ember glow) ---------- */
.hero {
  grid-template-columns: 1.3fr 1fr;
  padding: 60px 6% 110px;
  min-height: 720px;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--accent);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 40px;
  background: #ddc9a914;
  border: 1px solid #ddc9a940;
}
.status-dot {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  animation: ic-pulse 2.4s ease-out infinite;
}
h1 {
  font-size: clamp(60px, 6.4vw, 96px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
  margin: 30px 0 28px;
}
h1 em {
  display: inline-block;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.035em;
  padding: 0.04em 0.14em 0.24em 0.06em;
  margin: -0.04em -0.14em -0.24em -0.06em;
  background: linear-gradient(95deg, var(--accent) 0%, var(--coral) 45%, var(--rose) 75%, var(--accent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ic-shimmer-text 10s ease-in-out infinite;
}
.hero-copy > p {
  font-size: 21px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 40px;
}
.hero-copy > * {
  animation: ic-rise 0.9s var(--ease-out) backwards;
}
.hero-copy > :nth-child(2) {
  animation-delay: 0.08s;
}
.hero-copy > :nth-child(3) {
  animation-delay: 0.16s;
}
.hero-copy > :nth-child(4) {
  animation-delay: 0.24s;
}
.primary {
  min-height: 64px;
  padding: 0 12px 0 32px;
  gap: 22px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  border: 0;
  border-radius: 60px;
  color: var(--ink);
  background: linear-gradient(110deg, var(--accent), var(--coral) 60%, var(--rose));
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 14px 36px #e4516a40;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    background-position 0.7s var(--ease-out);
}
.primary:hover {
  background: linear-gradient(110deg, var(--accent), var(--coral) 60%, var(--rose));
  background-size: 180% 100%;
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow: 0 20px 46px #e4516a5c;
}
.primary:active {
  transform: translateY(0);
}
.primary > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-size: 17px;
  transition: transform 0.4s var(--ease-out);
}
.primary:hover > span {
  transform: rotate(45deg);
}
.primary:disabled {
  transform: none;
  box-shadow: none;
}
.hero-art {
  background: radial-gradient(closest-side, #b9996230, transparent);
  animation: ic-fade-in 1.2s var(--ease-out) 0.15s backwards;
}
.orbit {
  border-color: #ddc9a933;
  animation: ic-orbit 80s linear infinite;
}
.orbit-two {
  border-color: #ccb69226;
  animation-duration: 120s;
  animation-direction: reverse;
}
.poster-back {
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--accent), var(--champ) 55%, #876d41);
  box-shadow: 0 30px 60px #57442255;
  animation: ic-float-back 9s ease-in-out infinite;
}
.hero-card {
  border-radius: var(--radius);
  border: 0;
  background: #2b2b2d;
  box-shadow:
    0 40px 80px #000000bb,
    0 0 0 1px #e8e9ec33,
    0 0 70px #b9996230;
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
  animation: ic-float 7s ease-in-out infinite;
}
.hero-card:hover {
  transform: rotate(4deg) translateY(-10px) scale(1.02);
  box-shadow:
    0 50px 90px #000000cc,
    0 0 0 1px #e8e9ec55,
    0 0 90px #ddc9a945;
}
.hero-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, #ffffff1f 42%, #efe6d62e 48%, #dbcdb624 54%, transparent 66%);
  background-size: 250% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  animation: ic-sheen 6.5s ease-in-out 1.4s infinite;
}
.hero-shade {
  background: linear-gradient(0deg, #121314f0, #12131480 35%, transparent 70%);
}
.card-top {
  top: 22px;
  left: 22px;
  right: 22px;
}
#heroEventLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 6px 11px;
  border-radius: 30px;
  background: #12131473;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.card-bottom {
  left: 24px;
  right: 24px;
  bottom: 24px;
}
.card-bottom strong {
  font-size: 44px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.card-bottom > small {
  font-size: 13px;
  font-weight: 700;
  border-top: 0;
  padding-top: 0;
  color: var(--accent);
}
.hero-controls {
  bottom: -58px;
  gap: 12px;
}
.hero-controls > button {
  width: 46px;
  height: 46px;
  font-size: 16px;
  color: var(--paper);
  background: #ffffff0f;
  border: 1px solid var(--glass-line);
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s,
    transform 0.25s var(--ease-out);
}
.hero-controls > button:hover {
  transform: translateY(-2px);
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.hero-dot {
  height: 46px;
}
.hero-dot:after {
  top: 19px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #ffffff3d;
  transition:
    width 0.35s var(--ease-out),
    left 0.35s var(--ease-out),
    background 0.25s;
}
.hero-dot:hover:after {
  background: #ffffff85;
}
.hero-dot.active:after {
  width: 22px;
  left: 0;
  transform: none;
  background: var(--accent);
}

/* ---------- Occasion band (bright) ---------- */
.occasion-strip {
  min-height: 0;
  padding: 26px 6%;
  gap: 34px;
  border: 0;
  background: linear-gradient(100deg, var(--accent), #c4ab81 50%, var(--champ));
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.occasion-strip i {
  font-style: normal;
  font-size: 20px;
  color: var(--ink);
  opacity: 0.55;
  display: inline-block;
  animation: ic-spin 14s linear infinite;
}

/* ---------- Gallery (light cream section) ---------- */
.collection {
  --paper: var(--ink);
  --muted: var(--ink-muted);
  --line: #1a1a1c1c;
  --glass-line: #1a1a1c1f;
  color: var(--ink);
  background: var(--cream);
  box-shadow: var(--bleed) var(--cream);
  clip-path: inset(0 -100vmax);
  padding: 100px 6% 90px;
}
.collection ::selection {
  background: var(--champ);
  color: #ffffff;
}
.section-top {
  align-items: flex-end;
}
h2 {
  font-family: var(--sans);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0;
}
.event-picker {
  margin-top: 26px;
}
.event-picker select {
  -webkit-appearance: none;
  appearance: none;
  width: 380px;
  min-height: 60px;
  padding: 0 52px 0 22px;
  border-radius: 60px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  color-scheme: light;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%2323140f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 22px center,
    #ffffff;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.event-picker select:hover {
  box-shadow: 0 0 0 4px #b9996226;
}
.gallery-tools {
  gap: 12px;
}
.gallery-tools input {
  width: 300px;
  min-height: 60px;
  font-size: 17px;
  font-weight: 500;
  padding: 0 22px 0 52px;
  color: var(--ink);
  border: 2px solid #1a1a1c26;
  border-radius: 60px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237a6152' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
      no-repeat 20px center,
    #ffffff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.gallery-tools input::placeholder {
  color: #898a8c;
}
.gallery-tools input:hover {
  border-color: #1a1a1c55;
}
.gallery-tools input:focus {
  outline: 0;
  border-color: var(--champ);
  box-shadow: 0 0 0 5px #b9996226;
}
#sort {
  min-height: 60px;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cream);
  background: var(--ink);
  border-radius: 60px;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease-out),
    background 0.2s;
}
#sort:hover {
  transform: translateY(-2px);
  background: #2c2c2f;
}
.filter-row {
  gap: 10px;
  margin-top: 36px;
}
.filter {
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 60px;
  box-shadow: 0 2px 0 #1a1a1c0f;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.25s var(--ease-out),
    box-shadow 0.25s;
}
.filter:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: 0 10px 24px #1a1a1c33;
}
.feed-status {
  font-size: 14px;
  font-weight: 500;
  margin: 22px 0 30px;
}
.grid {
  gap: 48px 30px;
}
.tile-art {
  border-radius: var(--radius);
  isolation: isolate;
  box-shadow: 0 18px 40px #28292b29;
  transition:
    transform 0.55s var(--ease-out),
    box-shadow 0.55s var(--ease-out);
}
.tile-art img {
  transition: transform 0.9s var(--ease-out);
}
.tile:hover .tile-art,
.tile:focus-visible .tile-art {
  transform: translateY(-10px) rotate(-0.6deg);
  box-shadow: 0 34px 60px #28292b47;
}
.tile:hover .tile-art img {
  transform: scale(1.06);
}
.tile-art:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, #ffffff26 45%, #efe6d62e 50%, #dbcdb61f 55%, transparent 65%);
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  transition: background-position 1.1s var(--ease-out);
}
.tile:hover .tile-art:after {
  background-position: -30% 0;
}
.tile-gradient {
  background: linear-gradient(0deg, #121314e6 0%, #12131466 32%, transparent 60%);
}
.poster-art {
  filter: sepia(0.5) saturate(1.35) hue-rotate(-18deg);
  background:
    linear-gradient(160deg, #ddc9a940, transparent 55%),
    linear-gradient(0deg, #291f0f66, transparent),
    var(--poster-bg);
}
.tile-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  top: 16px;
  right: 16px;
  font-size: 19px;
  border-radius: 50%;
  color: var(--ink);
  background: #f5f6f8e6;
  z-index: 2;
  transition:
    transform 0.45s var(--ease-out),
    background 0.3s;
}
.tile:hover .tile-arrow {
  transform: rotate(45deg) scale(1.08);
  background: var(--accent);
}
.tile-caption {
  left: 26px;
  right: 26px;
  bottom: 24px;
  z-index: 2;
}
.tile-caption strong {
  font-size: 44px;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.tile-caption p {
  font-size: 13px;
  font-weight: 700;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
.tile-caption p > span:last-child {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.tile-label {
  margin-top: 18px;
}
.tile-label strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.gallery-bottom {
  margin-top: 56px;
  padding-top: 26px;
  font-size: 15px;
  font-weight: 700;
}
#empty {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding: 60px 20px;
  border-radius: var(--radius);
  background: #ffffff;
}
@supports (animation-timeline: view()) {
  .tile {
    animation: ic-tile-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* ---------- How it works (deep plum) ---------- */
.how {
  margin-top: 0;
  border-top: 0;
  padding: 120px 6%;
  gap: 80px;
  align-items: start;
  background: var(--plum);
  box-shadow: var(--bleed) var(--plum);
  clip-path: inset(0 -100vmax);
}
.how h2 {
  font-size: clamp(44px, 4.3vw, 66px);
}
.how ol {
  display: grid;
  gap: 14px;
}
.how li {
  gap: 24px;
  padding: 30px 32px;
  border: 0;
  border-radius: var(--radius);
  background: #ffffff0b;
  transition:
    transform 0.45s var(--ease-out),
    background 0.3s;
}
.how li:hover {
  transform: translateX(8px);
  background: #ffffff14;
}
.how li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  background: linear-gradient(145deg, var(--accent), var(--champ));
}
.how li:nth-child(2) > span {
  background: linear-gradient(145deg, var(--champ-deep), var(--champ));
}
.how li:nth-child(3) > span {
  background: linear-gradient(145deg, var(--cream), var(--accent));
}
.how h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
}
.how p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 460px;
}

/* ---------- Footer (dark) ---------- */
footer {
  padding: 48px 6%;
  border-top: 0;
}
.footer-brand {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.2px;
}
footer small {
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Card dialog (dark card side + light story side) ---------- */
dialog {
  width: min(1120px, 94vw);
  border: 0;
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 0 60px 140px #000000dd;
}
dialog[open] {
  animation: ic-dialog-in 0.5s var(--ease-out);
}
dialog[open]::backdrop {
  background: #0b0b0ccc;
  animation: ic-fade-in 0.35s ease-out;
}
.close {
  display: grid;
  place-items: center;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  font-size: 26px;
  line-height: 1;
  border-radius: 50%;
  color: var(--cream);
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.close:hover {
  transform: rotate(90deg);
}
.card-side {
  padding: 56px 34px 36px;
  background:
    radial-gradient(70% 55% at 50% 40%, #b9996238, transparent 70%),
    var(--bg);
}
.flip-card {
  filter: drop-shadow(0 30px 40px #000000aa);
}
.edition {
  font-size: 10px;
  font-weight: 800;
}
.front-caption small {
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 800;
}
.front-caption strong {
  font-weight: 400;
  letter-spacing: -0.02em;
}
.back {
  background: linear-gradient(150deg, #f5f6f8, #e7e8eb);
  color: var(--ink);
}
.card-actions {
  gap: 10px;
  margin-top: 34px;
}
.card-actions button {
  min-height: 50px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  border: 2px solid var(--glass-line);
  border-radius: 60px;
  background: #ffffff0a;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.25s var(--ease-out);
}
.card-actions button:not(:disabled):hover {
  border-color: var(--paper);
  transform: translateY(-2px);
}
.card-actions .accent {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
.card-actions .accent:not(:disabled):hover {
  background: #e6d8c0;
  border-color: #e6d8c0;
}
.card-actions .accent:disabled {
  opacity: 1;
  color: var(--muted);
  background: transparent;
  border-color: var(--glass-line);
  border-style: dashed;
}
.story-side {
  --paper: var(--ink);
  --muted: var(--ink-muted);
  --line: #1a1a1c1f;
  --glass-line: #1a1a1c24;
  color: var(--ink);
  background: var(--cream);
  padding: 84px 50px 40px;
}
.story-side .eyebrow {
  color: var(--coral);
}
.story-side h2 {
  font-size: clamp(40px, 4.2vw, 58px);
  margin-top: 14px;
}
.story-side > p {
  font-size: 18px;
  line-height: 1.6;
}
.memory-meta {
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--coral);
  padding: 22px 0;
}
.capture-note {
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  margin: 24px 0;
  border-radius: 18px;
  background: #ffffff;
}
.capture-note > span {
  font-size: 20px;
  line-height: 1.3;
  color: var(--coral);
}
.capture-note p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.share-actions {
  gap: 12px;
  align-items: center;
}
.share-actions .primary {
  padding: 0 30px;
  gap: 10px;
}
.secondary {
  min-height: 64px;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 60px;
  background: transparent;
  transition:
    background 0.2s,
    color 0.2s;
}
.secondary:not(:disabled):hover {
  background: var(--ink);
  color: var(--cream);
}
.share-actions .text-button {
  min-height: 64px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
}
.share-actions .text-button:hover {
  text-decoration-color: var(--coral);
}
.card-status {
  font-size: 15px;
  font-weight: 700;
  color: #c13450;
  margin: 16px 0 6px;
}
.privacy-note {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}
.social-videos .video-native-share,
.video-share-menu > summary {
  min-height: 52px;
  border-radius: 60px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 800;
}
.video-more-options {
  min-height: 52px;
  border-radius: 60px;
  color: var(--ink);
}
.video-share-popover,
.video-share-actions {
  background: #1f2022;
  border-color: #e8e9ec33;
  border-radius: 16px;
}
.social-videos .video-share-popover > a,
.social-videos .video-share-popover > button,
.social-videos .video-share-actions > a,
.social-videos .video-share-actions > button {
  color: #f5f6f8;
  background: transparent;
  border-radius: 10px;
  font-family: var(--sans);
}
.social-videos .video-share-popover > a:hover,
.social-videos .video-share-popover > button:hover,
.social-videos .video-share-actions > a:hover,
.social-videos .video-share-actions > button:hover {
  background: #ffffff14;
}
.social-videos video {
  border-radius: 16px;
}

/* ---------- Motion ---------- */
@keyframes ic-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ic-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes ic-float-back {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -6px 8px;
  }
}
@keyframes ic-orbit {
  to {
    rotate: 360deg;
  }
}
@keyframes ic-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes ic-sheen {
  0% {
    background-position: 120% 0;
  }
  35%,
  100% {
    background-position: -20% 0;
  }
}
@keyframes ic-shimmer-text {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes ic-pulse {
  0% {
    box-shadow: 0 0 0 0 #ddc9a999;
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px #ddc9a900;
  }
}
@keyframes ic-tile-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ic-dialog-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .about-link {
    display: none;
  }
}
@media (max-width: 950px) {
  .topbar {
    height: 84px;
  }
  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 50px 5% 100px;
  }
  h1 {
    font-size: 64px;
    letter-spacing: -0.05em;
  }
  .hero-copy > p {
    font-size: 18px;
  }
  .card-bottom strong {
    font-size: 32px;
  }
  .occasion-strip {
    font-size: 20px;
    gap: 22px;
  }
  .gallery-tools input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .tile-caption strong {
    font-size: 32px;
  }
  .how {
    padding: 90px 5%;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .topbar,
  html[lang="fr"] .topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 16px 5% 6px;
  }
  .wordmark {
    font-size: 22px;
  }
  .topbar nav,
  html[lang="fr"] .topbar nav {
    order: 3;
    width: 100%;
    gap: 4px;
    font-size: 15px;
  }
  nav a,
  nav button {
    flex: 1;
    padding: 11px 10px;
    white-space: nowrap;
    text-align: center;
  }
  .language-switch {
    margin-left: auto;
  }
  .language-switch button {
    padding: 8px 12px;
    font-size: 13px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 34px 6% 96px;
    gap: 40px;
  }
  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 1.3px;
    padding: 8px 13px;
  }
  h1,
  html[lang="fr"] .hero h1 {
    font-size: clamp(50px, 15vw, 64px);
    margin: 24px 0 20px;
  }
  .hero-copy > p {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .hero-copy .primary {
    width: 100%;
    justify-content: space-between;
  }
  .hero-art {
    margin-bottom: 40px;
  }
  .hero-controls {
    bottom: -62px;
  }
  .card-bottom strong {
    font-size: 34px;
  }
  .occasion-strip {
    font-size: 20px;
    padding: 20px 6%;
    gap: 20px;
    scrollbar-width: none;
  }
  .occasion-strip::-webkit-scrollbar {
    display: none;
  }
  .collection {
    padding: 70px 5% 60px;
  }
  h2 {
    font-size: 44px;
  }
  .event-picker select {
    width: 100%;
  }
  .gallery-tools {
    flex-wrap: wrap;
  }
  .gallery-tools input {
    flex: 1 1 100%;
    font-size: 16px;
    min-height: 56px;
  }
  #sort {
    min-height: 56px;
    padding: 0 18px;
    font-size: 15px;
  }
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 26px -5vw 0;
    padding: 6px 5vw 10px;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar {
    display: none;
  }
  .filter {
    flex: none;
    min-height: 46px;
    padding: 0 20px;
    font-size: 15px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tile-art {
    aspect-ratio: 3/3.4;
    border-radius: 22px;
  }
  .tile-caption {
    left: 22px;
    right: 22px;
    bottom: 20px;
  }
  .tile-caption strong {
    font-size: 38px;
  }
  .tile-caption p {
    font-size: 13px;
  }
  .tile-arrow {
    width: 44px;
    height: 44px;
    top: 14px;
    right: 14px;
    font-size: 18px;
  }
  .tile .poster-symbol {
    font-size: 150px;
  }
  .tile-label {
    flex-direction: row;
    margin-top: 14px;
  }
  .tile-label strong {
    font-size: 19px;
  }
  .gallery-bottom {
    font-size: 14px;
  }
  .how {
    padding: 80px 6%;
    gap: 34px;
  }
  .how h2 {
    font-size: 40px;
  }
  .how h2 br {
    display: initial;
  }
  .how li {
    padding: 24px 22px;
    gap: 18px;
  }
  .how li:hover {
    transform: none;
  }
  .how h3 {
    font-size: 21px;
  }
  .how p {
    font-size: 16px;
  }
  footer small {
    font-size: 14px;
  }
  dialog {
    border-radius: 24px;
  }
  .close {
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    color: var(--ink);
    background: var(--cream);
  }
  .card-side {
    padding: 70px 22px 28px;
  }
  .card-actions button {
    min-height: 48px;
    padding: 0 18px;
    font-size: 14px;
  }
  .story-side {
    padding: 36px 24px 30px;
  }
  .story-side h2 {
    font-size: 38px;
  }
  .story-side > p {
    font-size: 17px;
  }
  .share-actions .primary,
  .share-actions .secondary {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* =====================================================================
   COLLECTIBLE HERO — one big trading card, foil edge, fanned deck,
   slow 3D sway on a warm spotlight. Same markup and JS hooks.
   ===================================================================== */
@property --foil {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hero {
  grid-template-columns: 1.08fr 1fr;
  gap: 40px;
  min-height: 780px;
  padding: 40px 6% 120px;
}
.hero-art {
  height: 640px;
  perspective: 1600px;
  background: none;
  isolation: isolate;
}
.orbit {
  display: none;
}
/* aurora glow + floor spotlight */
.hero-art:before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 34% at 38% 38%, #b9996266, transparent 70%),
    radial-gradient(28% 32% at 64% 58%, #ddc9a955, transparent 70%),
    radial-gradient(26% 30% at 50% 30%, #ccb69244, transparent 70%);
  filter: blur(30px);
  animation: ic-aurora 14s ease-in-out infinite alternate;
}
.hero-art:after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 60px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000000bb, transparent);
  filter: blur(6px);
  animation: ic-shadow 9s ease-in-out infinite;
}
/* the fanned card behind */
.poster-back {
  width: 360px;
  height: 510px;
  border-radius: 26px;
  transform: rotate(-11deg) translate(-70px, 14px);
  background:
    radial-gradient(120% 80% at 0% 0%, #ffffff40, transparent 55%),
    linear-gradient(150deg, var(--accent), var(--champ) 55%, #876d41);
  box-shadow:
    0 30px 60px #23242680,
    inset 0 0 0 10px #ffffff1f,
    inset 0 0 0 12px #ffffff40;
  animation: ic-fan 9s ease-in-out infinite;
}
/* the hero card */
.hero-card {
  width: 400px;
  height: 568px;
  border: 0;
  border-radius: 26px;
  background: #1e1f21;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(3deg);
  translate: none;
  box-shadow:
    0 50px 90px #000000cc,
    0 0 0 1px #e8e9ec40,
    0 0 90px #b9996238;
  animation: ic-sway 9s ease-in-out infinite;
  transition: box-shadow 0.5s var(--ease-out), scale 0.5s var(--ease-out);
}
.hero-card:hover {
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(3deg);
  scale: 1.03;
  animation-play-state: paused;
  box-shadow:
    0 60px 100px #000000dd,
    0 0 0 1px #e8e9ec66,
    0 0 120px #ddc9a950;
}
/* holographic foil frame */
.hero-card:before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  border-radius: 17px;
  padding: 2px;
  background: conic-gradient(from var(--foil), #ddc9a9, #ccb692, #b4b5b8, #dedfe2, #f5f6f8, #ddc9a9);
  -webkit-mask:
    linear-gradient(#000000 0 0) content-box,
    linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000000 0 0) content-box exclude,
    linear-gradient(#000000 0 0);
  animation: ic-foil 6s linear infinite;
  opacity: 0.9;
}
/* glare that tracks the sway */
.hero-card:after {
  z-index: 3;
  background: linear-gradient(115deg, transparent 25%, #ffffff30 42%, #efe6d640 48%, #c5c6c930 54%, transparent 70%);
  background-size: 260% 100%;
  animation: ic-glare 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
.hero-shade {
  background: linear-gradient(0deg, #111112f2 0%, #11111299 30%, transparent 58%);
}
.card-top {
  top: 30px;
  left: 30px;
  right: 30px;
  z-index: 4;
  align-items: center;
}
#heroEventLabel {
  font-size: 12px;
  padding: 8px 13px;
  background: #11111266;
  border: 1px solid #ffffff2e;
}
.card-top > span:last-child {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  transition: transform 0.45s var(--ease-out), background 0.3s;
}
.hero-card:hover .card-top > span:last-child {
  transform: rotate(45deg);
  background: var(--accent);
}
.card-bottom {
  z-index: 4;
  left: 32px;
  right: 32px;
  bottom: 32px;
}
.card-bottom strong {
  font-size: 52px;
  line-height: 0.95;
  margin: 0 0 18px;
}
.card-bottom > small {
  align-items: center;
  font-size: 14px;
}
/* collector number */
#heroPosition {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(120deg, #f5f6f8, #ece3d4);
}
#heroPosition:before {
  content: "No. ";
}
.hero-controls {
  bottom: -58px;
}
@keyframes ic-foil {
  to {
    --foil: 360deg;
  }
}
@keyframes ic-sway {
  0%,
  100% {
    transform: rotateY(-16deg) rotateX(6deg) rotateZ(3deg) translateY(0);
  }
  50% {
    transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) translateY(-14px);
  }
}
@keyframes ic-glare {
  0%,
  100% {
    background-position: 95% 0;
  }
  50% {
    background-position: 15% 0;
  }
}
@keyframes ic-fan {
  0%,
  100% {
    transform: rotate(-11deg) translate(-70px, 14px);
  }
  50% {
    transform: rotate(-14deg) translate(-88px, 20px);
  }
}
@keyframes ic-shadow {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.85);
    opacity: 0.7;
  }
}
@keyframes ic-aurora {
  from {
    transform: translate(-3%, 2%) scale(1);
  }
  to {
    transform: translate(3%, -2%) scale(1.08);
  }
}
@media (min-width: 1500px) {
  .hero-card {
    width: 420px;
    height: 596px;
  }
  .poster-back {
    width: 380px;
    height: 540px;
  }
}
@media (max-width: 1180px) {
  .hero-card {
    width: 340px;
    height: 483px;
  }
  .poster-back {
    width: 300px;
    height: 430px;
  }
  .hero-art {
    height: 560px;
  }
  .card-bottom strong {
    font-size: 42px;
  }
}
@media (max-width: 950px) {
  .hero-card {
    width: 280px;
    height: 398px;
  }
  .poster-back {
    width: 250px;
    height: 360px;
  }
  .hero-art {
    height: 470px;
  }
  .card-top {
    top: 22px;
    left: 22px;
    right: 22px;
  }
  .card-bottom {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .card-bottom strong {
    font-size: 34px;
  }
}
@media (max-width: 640px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 34px 6% 100px;
  }
  .hero-art {
    height: 470px;
    max-width: none;
    margin-bottom: 30px;
  }
  .hero-card {
    width: 290px;
    height: 412px;
  }
  .poster-back {
    width: 260px;
    height: 372px;
  }
  @keyframes ic-fan {
    0%,
    100% {
      transform: rotate(-11deg) translate(-40px, 12px);
    }
    50% {
      transform: rotate(-14deg) translate(-52px, 18px);
    }
  }
  .card-bottom strong {
    font-size: 38px;
  }
  .hero-controls {
    gap: 6px;
    bottom: -56px;
  }
  .hero-controls > button {
    width: 42px;
    height: 42px;
  }
  .hero-dot {
    width: 18px;
    height: 42px;
  }
  .hero-dot:after {
    top: 17px;
    left: 5px;
  }
  .hero-dot.active:after {
    width: 16px;
    left: 1px;
  }
}

/* Card actions: stacked, equal width, aligned to the card */
.card-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: min(310px, 100%);
  margin: 30px auto 0;
}
.card-actions button {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  text-align: center;
}
@media (max-width: 640px) {
  .card-actions {
    max-width: 280px;
  }
  .card-actions button {
    min-height: 50px;
  }
}

/* Close button: geometric X, perfectly centred */
.close {
  font-size: 0;
  color: transparent;
  transition:
    transform 0.3s var(--ease-out),
    background 0.25s;
}
.close:before,
.close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--cream);
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    transform 0.3s var(--ease-out),
    background 0.25s;
}
.close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.close:hover {
  transform: scale(1.08);
  background: var(--champ);
}
.close:hover:before {
  transform: translate(-50%, -50%) rotate(135deg);
}
.close:hover:after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close:active {
  transform: scale(0.94);
}
@media (max-width: 640px) {
  .close:before,
  .close:after {
    background: var(--ink);
  }
  .close:hover:before,
  .close:hover:after {
    background: var(--cream);
  }
}

/* Collect toast (rendered by assets/card-toast.js) */
.card-stage {
  position: relative;
}
.ic-toast {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 10px 16px 10px 10px;
  border-radius: 40px;
  background: #f5f6f8f2;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 16px 40px #00000088;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--ease-out);
}
.ic-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.ic-toast-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  background: var(--accent);
}
.ic-toast.is-removed .ic-toast-icon {
  color: var(--cream);
  background: var(--ink);
}
.card-status[data-toasted] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ic-toast {
    transform: translate(-50%, 0);
  }
}

/* Restored taglines */
.hero-foot {
  display: flex;
  margin-top: 44px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.4px;
  color: var(--muted);
  gap: 16px;
}
.hero-foot .line {
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--champ));
}
.occasion-strip > span:first-child,
.occasion-strip > span:first-child:first-child {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: 6px;
  padding: 10px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--cream);
  background: var(--ink);
  white-space: nowrap;
}
.occasion-strip > span:first-child b {
  margin-left: 0.4em;
  color: var(--accent);
}
@media (max-width: 640px) {
  .hero-foot {
    margin-top: 30px;
    font-size: 10px;
    letter-spacing: 1.8px;
    line-height: 1.5;
  }
  .hero-foot .line {
    flex: none;
    width: 32px;
  }
  .occasion-strip > span:first-child {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 9px 14px;
  }
}
.occasion-strip > span {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .occasion-strip {
    display: grid;
    grid-template-columns: repeat(7, auto);
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    row-gap: 12px;
    padding: 18px 3%;
    overflow: visible;
    font-size: clamp(8.5px, 2.85vw, 14px);
    letter-spacing: -0.01em;
  }
  html[lang="fr"] .occasion-strip {
    font-size: clamp(7.5px, 2.3vw, 12px);
    column-gap: 4px;
  }
  .occasion-strip > span:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0;
  }
  .occasion-strip i {
    font-size: 0.75em;
    animation: none;
  }
}
@media (max-width: 640px) {
  .filter-row {
    -webkit-mask-image: linear-gradient(90deg, #000000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000000 calc(100% - 48px), transparent);
    padding-right: 48px;
  }
}

/* Toast: compact, with geometric centred icons */
.ic-toast {
  gap: 8px;
  bottom: 16px;
  max-width: calc(100% - 24px);
  padding: 6px 12px 6px 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 30px;
  box-shadow: 0 10px 28px #00000077;
}
.ic-toast-icon {
  position: relative;
  width: 20px;
  height: 20px;
  font-size: 0;
  color: transparent;
}
.ic-toast-icon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
.ic-toast.is-removed .ic-toast-icon:before {
  width: 8px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--cream);
  transform: translate(-50%, -50%);
}
@media (max-width: 640px) {
  .ic-toast {
    bottom: 12px;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 5px 10px 5px 5px;
    font-size: 10px;
    letter-spacing: -0.01em;
    border-radius: 18px;
  }
  .ic-toast-icon {
    width: 18px;
    height: 18px;
  }
}

/* =====================================================================
   Gallery controls hierarchy
   1 primary: event picker   2 secondary: search   3 tertiary: sort + tabs
   ===================================================================== */
.event-picker select {
  width: 420px;
  min-height: 66px;
  padding: 0 60px 0 26px;
  border: 0;
  color: var(--cream);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color-scheme: dark;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 26px center,
    var(--ink);
  box-shadow: 0 12px 30px #1a1a1c2e;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s;
}
.event-picker select:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px #1a1a1c40;
}
.event-picker select option {
  background: #ffffff;
  color: var(--ink);
}
.gallery-tools {
  gap: 18px;
}
.gallery-tools input {
  min-height: 52px;
  font-size: 15px;
  border-color: transparent;
  background-color: #ffffff;
  box-shadow: 0 1px 0 #1a1a1c12;
}
.gallery-tools input:hover {
  border-color: #1a1a1c1f;
}
#sort {
  min-height: 52px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #1a1a1c33;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
#sort:hover {
  transform: none;
  background: none;
  text-decoration-color: var(--coral);
}
/* category filters as text tabs */
.filter-row {
  gap: 4px 30px;
  margin-top: 40px;
  border-bottom: 2px solid #1a1a1c1a;
}
.filter,
.filter:hover,
.filter.active {
  position: relative;
  min-height: 0;
  padding: 14px 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.filter {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}
.filter:hover {
  color: var(--ink);
}
.filter.active {
  color: var(--ink);
  font-weight: 800;
}
.filter:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--champ);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-out);
}
.filter.active:after {
  transform: scaleX(1);
}
.filter:not(.active):hover:after {
  transform: scaleX(0.4);
  background: #1a1a1c33;
}
.feed-status {
  font-size: 13px;
  margin-top: 18px;
}
@media (max-width: 640px) {
  .event-picker select {
    width: 100%;
    min-height: 60px;
    font-size: 17px;
  }
  .gallery-tools {
    gap: 6px 14px;
  }
  #sort {
    min-height: 44px;
    font-size: 14px;
  }
  .filter-row {
    gap: 0 24px;
    margin-top: 26px;
    padding: 0 5vw;
    padding-right: 48px;
  }
  .filter,
  .filter:hover,
  .filter.active {
    padding: 12px 0 14px;
    font-size: 14.5px;
  }
}

/* =====================================================================
   Gallery toolbar: heading, then one aligned row
   [ event picker ][ search ............ ][ sort ]
   ===================================================================== */
.section-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 30px;
}
.section-top > div:first-child {
  display: contents;
}
.section-top h2 {
  grid-column: 1 / -1;
}
.event-picker {
  margin: 0;
}
.event-picker select {
  width: 380px;
  min-height: 62px;
}
.gallery-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.gallery-tools input {
  width: 100%;
  min-height: 62px;
  font-size: 16px;
  border: 2px solid #1a1a1c14;
  box-shadow: none;
}
/* fixed slot: changing Newest/Oldest never moves anything */
#sort {
  box-sizing: border-box;
  width: 9.6em;
  min-height: 62px;
  padding: 0 4px;
  text-align: right;
  white-space: nowrap;
}
html[lang="fr"] #sort {
  width: 14em;
}

/* Category tabs: same metrics for every tab, outline pill when selected */
.filter-row {
  gap: 6px;
  margin-top: 34px;
  border-bottom: 0;
}
.filter,
.filter:hover,
.filter.active {
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 40px;
  font-weight: 700;
}
.filter:after {
  display: none;
}
.filter:hover {
  background: #1a1a1c0b;
}
.filter.active,
.filter.active:hover {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
@media (max-width: 950px) {
  .event-picker select {
    width: 300px;
  }
}
@media (max-width: 640px) {
  .section-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .section-top h2 {
    margin-bottom: 12px;
  }
  .event-picker,
  .event-picker select {
    width: 100%;
  }
  .event-picker select {
    min-height: 60px;
  }
  .gallery-tools {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .gallery-tools input {
    min-height: 56px;
  }
  #sort {
    min-height: 40px;
    justify-self: start;
    text-align: left;
  }
  .filter-row {
    gap: 4px;
    margin-top: 18px;
  }
  .filter,
  .filter:hover,
  .filter.active {
    padding: 9px 15px;
  }
}

/* Status line keeps a fixed slot, so the popup never changes height
   when a message is toasted instead of shown here (no re-centring shake). */
.card-status {
  min-height: 1.5em;
  line-height: 1.5;
}
.card-status[data-toasted] {
  position: static;
  width: auto;
  height: 1.5em;
  min-height: 1.5em;
  overflow: hidden;
  clip: auto;
  white-space: normal;
  color: transparent;
  margin: 16px 0 6px;
}

/* ---------- Flip: no filter on the 3D card (it flattened the flip) ---------- */
.flip-card {
  filter: none;
}
.face {
  box-shadow: 0 30px 50px #0000008c;
}

/* ---------- Slideshow controls: drawn icons, optically centred ---------- */
:root {
  --icon-arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --icon-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1.2'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1.2'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z'/%3E%3C/svg%3E");
}
#heroPrevious,
#heroNext,
#heroPause {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
#heroPrevious::before,
#heroNext::before,
#heroPause::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-l) center / contain no-repeat;
  mask: var(--icon-arrow-l) center / contain no-repeat;
}
#heroNext::before {
  -webkit-mask-image: var(--icon-arrow-r);
  mask-image: var(--icon-arrow-r);
}
#heroPause::before {
  width: 16px;
  height: 16px;
  -webkit-mask-image: var(--icon-pause);
  mask-image: var(--icon-pause);
}
#heroPause[aria-pressed="true"]::before {
  width: 17px;
  height: 17px;
  margin-left: 2px; /* optical centre for a triangle */
  -webkit-mask-image: var(--icon-play);
  mask-image: var(--icon-play);
}

/* ---------- Autoplay pauses only over the card and its controls ---------- */
.hero-art {
  pointer-events: none;
}
.hero-card,
.hero-controls,
.floating-tag {
  pointer-events: auto;
}

/* ---------- The stamp, standing sideways on the card's right edge ---------- */
.hero-art {
  --card-w: 400px;
}
.floating-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--card-w) / 2);
  bottom: auto;
  z-index: 4;
  margin: 0;
  padding: 10px 16px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: #151516;
  border: 1px solid #ddc9a966;
  border-radius: 10px;
  box-shadow: 0 12px 30px #00000088;
  transform: translate(-50%, -50%) rotate(90deg);
  animation: ic-stamp-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.9s backwards;
}
.floating-tag > span {
  margin: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
}
@keyframes ic-stamp-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.15);
  }
}
@media (min-width: 1500px) {
  .hero-art { --card-w: 420px; }
}
@media (max-width: 1180px) {
  .hero-art { --card-w: 340px; }
}
@media (max-width: 950px) {
  .hero-art { --card-w: 280px; }
  .floating-tag { font-size: 11px; padding: 8px 13px; }
}
@media (max-width: 640px) {
  .hero-art { --card-w: 290px; }
  .floating-tag { font-size: 10px; padding: 7px 12px; }
}

/* ---------- Event dropdown: a styled list where the browser allows it ---------- */
@supports (appearance: base-select) {
  .event-picker select,
  .event-picker select::picker(select) {
    appearance: base-select;
  }
  .event-picker select::picker-icon {
    display: none;
  }
  .event-picker select::picker(select) {
    margin-top: 10px;
    padding: 8px;
    border: 0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px #1a1a1c38, 0 2px 8px #1a1a1c14;
    max-height: min(420px, 60vh);
    opacity: 1;
    transform: none;
    transition:
      opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
      display 220ms allow-discrete,
      overlay 220ms allow-discrete;
    transform-origin: top center;
  }
  .event-picker select:not(:open)::picker(select) {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  @starting-style {
    .event-picker select:open::picker(select) {
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
    }
  }
  .event-picker select option {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 14px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
  }
  .event-picker select option:hover,
  .event-picker select option:focus-visible {
    background: var(--cream);
    outline: 0;
  }
  .event-picker select option:checked {
    background: var(--ink);
    color: var(--cream);
  }
  .event-picker select option::checkmark {
    display: none;
  }
}
#heroPrevious,
#heroNext,
#heroPause {
  display: flex;
  align-items: center;
  justify-content: center;
}
#heroPrevious::before,
#heroNext::before,
#heroPause::before {
  flex: none;
}
@supports (appearance: base-select) {
  .event-picker select {
    display: flex;
    align-items: center;
  }
}

/* ---------- Gallery frame: tabs, status, cards and count in one panel ---------- */
.collection {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto;
  position: relative;
  isolation: isolate;
  --frame-pad: clamp(18px, 2.6vw, 40px);
}
.collection > .section-top { grid-row: 1; }
.collection > .filter-row { grid-row: 2; }
.collection > .feed-status { grid-row: 3; }
.collection > .grid { grid-row: 4; }
.collection > #empty { grid-row: 5; }
.collection > .gallery-bottom { grid-row: 6; }
.collection::before {
  content: "";
  grid-row: 2 / 7;
  grid-column: 1;
  z-index: -1;
  margin-top: 40px;
  border-radius: 36px;
  background: #fafbfc;
  box-shadow:
    0 0 0 1px #1a1a1c0f,
    0 24px 60px #28292b0f;
}
.collection > .filter-row,
.collection > .feed-status,
.collection > .grid,
.collection > #empty,
.collection > .gallery-bottom {
  margin-left: var(--frame-pad);
  margin-right: var(--frame-pad);
}
.collection > .filter-row {
  margin-top: calc(40px + var(--frame-pad));
}
.collection > .gallery-bottom {
  margin-top: 56px;
  margin-bottom: var(--frame-pad);
  padding-top: 22px;
}
.collection .filter:not(.active):hover {
  background: #1a1a1c0a;
}
#empty {
  background: var(--cream);
}
@media (max-width: 640px) {
  .collection { --frame-pad: 16px; }
  .collection::before { margin-top: 28px; border-radius: 26px; }
  .collection > .filter-row {
    margin-top: calc(28px + 14px);
    margin-left: 0;
    margin-right: 0;
    padding: 6px 16px 10px;
    padding-right: 48px;
  }
  .collection > .gallery-bottom { margin-top: 40px; }
}
.collection > * {
  grid-column: 1;
}

/* ---------- How it works: v2 panels + editorial italic numerals ---------- */
.how li,
.how li:hover {
  align-items: center;
  gap: 26px;
  padding: 30px 34px 30px 30px;
}
.how li > span,
.how li:nth-child(n) > span {
  width: 76px;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  text-align: center;
  font: italic 400 60px/0.9 var(--serif);
  letter-spacing: -0.03em;
  color: var(--accent);
}
.how li:nth-child(2) > span { color: var(--coral); }
.how li:nth-child(3) > span { color: var(--rose); }
.how h3 { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .how li > span { transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
  .how li:hover > span { transform: translateX(4px) rotate(-4deg); }
}
@media (max-width: 640px) {
  .how li, .how li:hover { gap: 16px; padding: 24px 20px 24px 14px; }
  .how li > span, .how li:nth-child(n) > span { width: 52px; font-size: 44px; }
}
@media (max-width: 640px) {
  .how li, .how li:hover { align-items: start; }
  .how li > span, .how li:nth-child(n) > span { margin-top: -2px; }
}

/* ---------- "How it works" joins the pill menu as its last segment ---------- */
.topbar {
  justify-content: flex-start;
  column-gap: 0;
}
.topbar nav {
  margin-left: auto;
  height: 56px;
  box-sizing: border-box;
  border-right: 0;
  border-radius: 60px 0 0 60px;
  padding-right: 2px;
}
.about-link,
.about-link:hover {
  display: inline-flex;
  align-items: center;
  height: 56px;
  box-sizing: border-box;
  margin-right: auto;
  padding: 0 22px 0 18px;
  background: #ffffff0d;
  border: 1px solid var(--glass-line);
  border-left: 0;
  border-radius: 0 60px 60px 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.about-link { color: var(--muted); }
.about-link:hover { color: var(--paper); }
.language-switch { margin-left: 0; }
@media (max-width: 1100px) {
  .about-link { display: inline-flex; }
}
@media (max-width: 950px) {
  .topbar nav a, .topbar nav button { padding: 11px 16px; }
  .about-link, .about-link:hover { padding: 0 18px 0 12px; font-size: 15px; }
}
@media (max-width: 640px) {
  .topbar::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  .wordmark { order: 1; }
  .language-switch { order: 2; margin-left: auto; }
  .topbar nav,
  html[lang="fr"] .topbar nav {
    order: 4;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    height: 50px;
    gap: 2px;
    padding: 4px 0 4px 4px;
  }
  .topbar nav a,
  .topbar nav button {
    flex: 1 1 auto;
    padding: 10px 8px;
    font-size: 13.5px;
    min-height: 40px;
  }
  .about-link,
  .about-link:hover {
    order: 5;
    height: 50px;
    margin-right: 0;
    padding: 0 12px 0 8px;
    font-size: 13.5px;
  }
  .about-link span { margin-left: 5px; }
  nav span { min-width: 20px; margin-left: 4px; padding: 1px 5px; font-size: 11px; }
}
@media (max-width: 950px) {
  .topbar,
  html[lang="fr"] .topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 16px 5% 8px;
  }
  .topbar::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .wordmark { order: 1; }
  .language-switch { order: 2; margin-left: auto; }
  .topbar nav,
  html[lang="fr"] .topbar nav {
    order: 4;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
    border-top: 1px solid var(--glass-line);
  }
  .about-link,
  .about-link:hover { order: 5; margin-right: auto; }
}
@media (max-width: 640px) {
  .topbar nav,
  html[lang="fr"] .topbar nav { flex: 1 1 auto; }
  .about-link, .about-link:hover { margin-right: 0; }
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav button {
    flex: 0 1 auto;
    padding: 10px 8px;
    font-size: 12px;
  }
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover {
    padding: 0 12px 0 6px;
    font-size: 12px;
  }
  html[lang="fr"] .about-link span { display: none; }
}
@media (max-width: 640px) {
  .topbar nav,
  html[lang="fr"] .topbar nav { flex: 1 1 0; }
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav button { padding: 10px 7px; font-size: 12px; }
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { font-size: 12px; padding: 0 11px 0 4px; }
}

/* ---------- Category tabs: smaller ---------- */
.filter,
.filter:hover,
.filter.active {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13.5px;
}
.filter-row {
  gap: 4px;
}
@media (max-width: 640px) {
  .filter,
  .filter:hover,
  .filter.active {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 13px;
  }
}
html[lang="fr"] .topbar { column-gap: 0; }
@media (max-width: 380px) {
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav button { padding: 10px 4px; font-size: 12px; }
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { font-size: 12px; padding: 0 8px 0 2px; }
  html[lang="fr"] nav span { margin-left: 2px; }
}

/* Collector number hidden for now (kept in the markup; delete this rule to bring it back) */
#heroPosition {
  display: none;
}

/* Phones: tabs wrap onto lines instead of scrolling sideways */
@media (max-width: 640px) {
  .collection > .filter-row,
  .filter-row {
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px 4px;
    margin-left: var(--frame-pad);
    margin-right: var(--frame-pad);
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .filter,
  .filter:hover,
  .filter.active {
    flex: none;
  }
}
@media (max-width: 640px) {
  .collection > .filter-row, .filter-row { gap: 4px 0; }
  .filter, .filter:hover, .filter.active { padding: 5px 11px; font-size: 13px; }
}

/* Card arrows: plain white at rest, the circle appears on hover */
.tile-arrow,
.card-top > span:last-child {
  background: transparent;
  border-color: transparent;
  color: #ffffff;
  filter: drop-shadow(0 1px 3px #000000aa);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    filter 0.25s ease,
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.tile:hover .tile-arrow,
.tile:focus-visible .tile-arrow,
.hero-card:hover .card-top > span:last-child,
.hero-card:focus-visible .card-top > span:last-child {
  background: var(--accent);
  color: var(--ink);
  filter: none;
}

/* Menu: no arrow on "How it works"; collection count as a light outlined circle */
.about-link span {
  display: none;
}
nav span,
#collectionCount {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid #f5f6f84d;
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 640px) {
  nav span, #collectionCount { min-width: 20px; height: 20px; padding: 0 5px; font-size: 10px; }
}

/* Pills are for clickable things only: labels become plain text */
.hero .eyebrow {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.occasion-strip > span:first-child,
.occasion-strip > span:first-child:first-child {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--ink);
  margin-right: 8px;
}
.occasion-strip > span:first-child b {
  color: #f5f6f8;
}
@media (max-width: 640px) {
  .occasion-strip > span:first-child,
  .occasion-strip > span:first-child:first-child {
    padding: 0;
    margin: 0 0 2px;
  }
}
.occasion-strip > span:first-child,
.occasion-strip > span:first-child:first-child { color: #1a1a1cb3; }
.occasion-strip > span:first-child b { color: var(--ink); }

/* Footer brand: logo mark + wordmark, no link */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.footer-brand .brand-icon {
  flex: none;
  font-weight: 400;
  color: var(--ink);
}
.footer-brand .brand-icon span {
  font-weight: 400;
}
.footer-name span { color: var(--accent); font-weight: 300; }
.footer-name { font-weight: 800; letter-spacing: -0.05em; }
.footer-name span { color: inherit; font-weight: 300; }
.footer-brand .footer-name { font-weight: 800; }
.footer-brand .footer-name span { font-weight: 400; }
.footer-brand .brand-icon, .footer-brand .brand-icon span { font-weight: 400; }

/* "My collection" on: white text instead of the orange site.js sets inline */
#collectionNav[style*="accent"] {
  color: var(--paper) !important;
}

/* Menu: smaller and tighter */
.topbar nav {
  height: 46px;
  padding: 4px 0 4px 4px;
  gap: 2px;
  font-size: 14px;
}
.topbar nav a,
.topbar nav button,
.topbar nav a.active {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
.about-link,
.about-link:hover {
  height: 46px;
  min-height: 0;
  padding: 0 18px 0 12px;
  font-size: 14px;
}
nav span,
#collectionCount {
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  font-size: 10px;
}
.language-switch {
  height: 46px;
  box-sizing: border-box;
  padding: 4px;
}
.language-switch button {
  min-height: 36px;
  min-width: 38px;
  padding: 0 10px;
  font-size: 12px;
}
@media (max-width: 640px) {
  .topbar nav, html[lang="fr"] .topbar nav { height: 44px; padding: 4px 0 4px 4px; }
  .topbar nav a, .topbar nav button { min-height: 36px; padding: 0 9px; font-size: 13px; }
  .about-link, .about-link:hover { height: 44px; padding: 0 12px 0 6px; font-size: 13px; }
  html[lang="fr"] .topbar nav a, html[lang="fr"] .topbar nav button { padding: 0 7px; font-size: 12px; }
  html[lang="fr"] .about-link, html[lang="fr"] .about-link:hover { font-size: 12px; padding: 0 11px 0 4px; }
  .language-switch { height: 42px; }
  .language-switch button { min-height: 34px; min-width: 36px; font-size: 12px; }
}
@media (max-width: 380px) {
  html[lang="fr"] .topbar nav a, html[lang="fr"] .topbar nav button { padding: 0 5px; font-size: 12px; }
  html[lang="fr"] .about-link, html[lang="fr"] .about-link:hover { font-size: 12px; padding: 0 9px 0 3px; }
}
.topbar nav a,
.topbar nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  line-height: 1;
}

/* ---------- Top menu: one highlight style for every item ---------- */
.topbar nav a,
.topbar nav button,
.about-link {
  border-radius: 40px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
/* rest */
.topbar nav a,
.topbar nav button,
.about-link {
  background: transparent;
  color: var(--muted);
}
/* hover (not on the selected one) */
.topbar nav a:not(.active):hover,
.topbar nav button:hover,
.about-link:hover {
  background: #ffffff14;
  color: var(--paper);
}
/* selected: cream pill */
.topbar nav a.active,
.topbar nav a.active:hover,
#collectionNav[style*="accent"],
#collectionNav[style*="accent"]:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 0;
}
/* when the collection view is on, Discover steps back */
.topbar nav:has(#collectionNav[style*="accent"]) a.active {
  background: transparent !important;
  color: var(--muted) !important;
}
.topbar nav:has(#collectionNav[style*="accent"]) a.active:hover {
  background: #ffffff14 !important;
  color: var(--paper) !important;
}
#collectionNav[style*="accent"] #collectionCount {
  border-color: #1a1a1c40;
  color: var(--ink);
}
/* How it works sits inside the pill's end, so give it the same inner shape */
.about-link,
.about-link:hover {
  position: relative;
  isolation: isolate;
  background: #ffffff0d;
  color: var(--muted);
  border-radius: 0 60px 60px 0;
}
.about-link::before {
  content: "";
  position: absolute;
  inset: 4px 4px 4px 0;
  z-index: -1;
  border-radius: 40px;
  background: transparent;
  transition: background-color 0.2s ease;
}
.about-link:hover { color: var(--paper); }
.about-link:hover::before { background: #ffffff14; }
.topbar nav { gap: 6px; padding-right: 3px; }
.about-link, .about-link:hover { padding-left: 3px; }
.about-link::before { inset: 4px 4px 4px 3px; }
@media (max-width: 640px) {
  .topbar nav, html[lang="fr"] .topbar nav { gap: 4px; padding-right: 2px; }
}
@media (max-width: 640px) {
  .topbar nav, html[lang="fr"] .topbar nav { flex: 0 1 auto; }
  .about-link, .about-link:hover { flex: 1 1 auto; justify-content: center; }
}

/* ---------- How it works: highlight geometry identical to the other items ----------
   Pill height = 36px (same as Discover / My collection), 6px gap from the previous item,
   and the same horizontal text padding inside the pill as the other items. */
.about-link,
.about-link:hover {
  --hl-gap: 6px;      /* space before the pill (matches the nav gap) */
  --hl-end: 4px;      /* space between pill and the outer pill edge (matches nav padding) */
  --hl-pad: 16px;     /* text padding inside the pill (matches nav items) */
  --hl-h: 36px;
  height: 46px;
  padding: 0 calc(var(--hl-end) + var(--hl-pad)) 0 calc(var(--hl-gap) - 3px + var(--hl-pad));
  justify-content: center;
}
.about-link::before {
  inset: calc((100% - var(--hl-h)) / 2) var(--hl-end) calc((100% - var(--hl-h)) / 2) calc(var(--hl-gap) - 3px);
}
@media (max-width: 640px) {
  .about-link,
  .about-link:hover {
    --hl-gap: 4px;
    --hl-pad: 9px;
    height: 44px;
  }
}
@media (max-width: 640px) {
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { --hl-pad: 7px; }
}
@media (max-width: 380px) {
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { --hl-pad: 5px; }
}

/* ---------- Top menu geometry: one set of numbers for every item ---------- */
.topbar {
  --m-h: 46px;   /* outer pill height */
  --m-in: 4px;   /* inset from outer edge to item highlight */
  --m-gap: 6px;  /* gap between item highlights */
  --m-pad: 16px; /* text padding inside a highlight */
  --m-item: calc(var(--m-h) - 2px - 2 * var(--m-in)); /* 1px borders top and bottom */
}
.topbar nav,
html[lang="fr"] .topbar nav {
  height: var(--m-h);
  gap: var(--m-gap);
  padding: var(--m-in) 0 var(--m-in) var(--m-in);
}
.topbar nav a,
.topbar nav a.active,
.topbar nav button {
  height: var(--m-item);
  min-height: 0;
  padding: 0 var(--m-pad);
}
.about-link,
.about-link:hover {
  height: var(--m-h);
  padding: 0 calc(var(--m-in) + var(--m-pad)) 0 calc(var(--m-gap) + var(--m-pad));
}
.about-link::before {
  inset: var(--m-in) var(--m-in) var(--m-in) var(--m-gap);
}
@media (max-width: 640px) {
  .topbar { --m-h: 44px; --m-gap: 4px; --m-pad: 10px; }
  html[lang="fr"] .topbar { --m-pad: 7px; }
  .topbar nav a,
  .topbar nav a.active,
  .topbar nav button,
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav button,
  .about-link,
  .about-link:hover,
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover {
    font-size: 13px;
  }
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav a.active,
  html[lang="fr"] .topbar nav button,
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { font-size: 12px; }
}
@media (max-width: 380px) {
  .topbar { --m-pad: 8px; }
  html[lang="fr"] .topbar { --m-pad: 5px; }
  html[lang="fr"] .topbar nav a,
  html[lang="fr"] .topbar nav a.active,
  html[lang="fr"] .topbar nav button,
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { font-size: 12px; }
}
@media (max-width: 640px) {
  .topbar nav,
  html[lang="fr"] .topbar nav,
  .about-link,
  .about-link:hover { flex: 0 0 auto; }
  .about-link,
  .about-link:hover { justify-content: flex-start; margin-right: auto; }
}
html[lang="fr"] .about-link,
html[lang="fr"] .about-link:hover {
  padding: 0 calc(var(--m-in) + var(--m-pad)) 0 calc(var(--m-gap) + var(--m-pad));
}
html[lang="fr"] .topbar nav a,
html[lang="fr"] .topbar nav a.active,
html[lang="fr"] .topbar nav button {
  padding: 0 var(--m-pad);
}

/* ---------- Primary button arrow: drawn icon, centred in its circle ---------- */
.primary > span {
  display: inline-grid;
  place-items: center;
  font-size: 0 !important;
  line-height: 0;
}
.primary > span::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =====================================================================
   SCROLL MOTION — native scroll-driven animations (no script).
   Uses translate/opacity only, never layout. Browsers without support,
   and anyone with reduced motion on, simply see the page at rest.
   ===================================================================== */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero parallax: copy drifts up faster, the card slower, glow lingers */
    .hero-copy {
      animation: px-copy linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero-art {
      animation:
        ic-fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards,
        px-art linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    @keyframes px-copy {
      to { translate: 0 -120px; opacity: 0.15; }
    }
    @keyframes px-art {
      to { translate: 0 70px; }
    }

    /* Occasion band: words glide sideways as it passes */
    .occasion-strip > span:not(:first-child),
    .occasion-strip i {
      animation: px-band linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes px-band {
      from { translate: 40px 0; }
      to { translate: -40px 0; }
    }

    /* Gallery: heading, toolbar, frame and cards rise in */
    .collection > .section-top,
    .collection > .filter-row,
    .how > div,
    .how li,
    footer > * {
      animation: px-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .tile {
      animation: px-tile linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .tile:nth-child(3n + 2) { animation-range: entry 8% entry 78%; }
    .tile:nth-child(3n + 3) { animation-range: entry 16% entry 86%; }
    .how li:nth-child(2) { animation-range: entry 6% entry 86%; }
    .how li:nth-child(3) { animation-range: entry 12% entry 92%; }
    @keyframes px-rise {
      from { opacity: 0; translate: 0 48px; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes px-tile {
      from { opacity: 0; translate: 0 70px; scale: 0.96; }
      to { opacity: 1; translate: 0 0; scale: 1; }
    }

    /* Card photos: a gentle parallax inside each frame */
    .tile-art img {
      animation: px-photo linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes px-photo {
      from { translate: 0 -5%; scale: 1.12; }
      to { translate: 0 5%; scale: 1.12; }
    }

    /* How it works heading: slow drift while the steps pass */
    .how h2 {
      animation: px-slow linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes px-slow {
      from { translate: 0 40px; }
      to { translate: 0 -40px; }
    }
  }
}

/* =====================================================================
   MOOD — warm light and film grain behind the light gallery and the
   plum "How it works" band. Decorative layers only, behind all content.
   ===================================================================== */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gallery: dusky-peach light pooling in from the corners, under grain */
.collection::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 8% 4%, #dfceb266, transparent 70%),
    radial-gradient(38% 30% at 96% 22%, #ccb69247, transparent 72%),
    radial-gradient(46% 34% at 4% 70%, #c7af873d, transparent 72%),
    radial-gradient(44% 30% at 92% 96%, #b49c7433, transparent 72%),
    linear-gradient(180deg, #e8e9ec 0%, var(--cream) 22%, #eaebed 100%);
}
.collection {
  background: none;
  box-shadow: none;
}
.collection::before {
  box-shadow:
    0 0 0 1px #1a1a1c0f,
    0 30px 80px #806f5226,
    0 8px 24px #28292b14;
}
/* grain sits over the light, under the content */
.collection {
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: multiply;
}
.collection::after {
  mix-blend-mode: normal;
}

/* How it works: an ember glow behind the heading, cool plum at the far side */
.how {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.how::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(34% 55% at 18% 38%, #b9996240, transparent 70%),
    radial-gradient(30% 45% at 26% 70%, #ddc9a926, transparent 70%),
    radial-gradient(40% 60% at 92% 60%, #46464959, transparent 72%),
    linear-gradient(180deg, #1e1f21 0%, #1a1a1c 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal;
}
.how li,
.how li:hover {
  background: #ffffff0a;
  box-shadow: inset 0 1px 0 #ffffff12;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* the light drifts slowly as you scroll past (parallax) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .collection::after,
    .how::after {
      animation: mood-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes mood-drift {
      from { background-position: 0 0, 0 -60px, 0 -40px, 0 -80px, 0 -40px, 0 0; }
      to { background-position: 0 0, 0 60px, 0 40px, 0 80px, 0 40px, 0 0; }
    }
  }
}

/* Gallery frame: a subtle frosted panel instead of solid white */
.collection::before {
  background: #fafbfc52;
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    inset 0 0 0 1px #ffffff8c,
    0 24px 60px #806f521a;
}

/* Hero: the card behind moves on its own scroll layer (parallax depth) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .poster-back {
      animation:
        ic-fan 9s ease-in-out infinite,
        px-back linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    @keyframes px-back {
      from { translate: 0 0; rotate: 0deg; }
      to { translate: -46px 120px; rotate: -7deg; }
    }
  }
}

/* Top menu: no selected state (items jump to page sections); hover only */
.topbar nav a.active,
#collectionNav[style*="accent"],
.topbar nav:has(#collectionNav[style*="accent"]) a.active {
  background: transparent !important;
  color: var(--muted) !important;
}
.topbar nav a.active:hover,
#collectionNav[style*="accent"]:hover,
.topbar nav:has(#collectionNav[style*="accent"]) a.active:hover {
  background: #ffffff14 !important;
  color: var(--paper) !important;
}
#collectionNav[style*="accent"] #collectionCount {
  border-color: #f5f6f84d;
  color: var(--paper);
}

/* Back card: stronger parallax, travels much lower */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes px-back {
      from { translate: 0 0; rotate: 0deg; }
      to { translate: -70px 280px; rotate: -12deg; }
    }
  }
}

/* Back card passes over the bar, but the bar's words stay on top */
.occasion-strip > span,
.occasion-strip i {
  position: relative;
  z-index: 6;
}

/* Explore button arrow: pinned to the exact centre of its circle
   (the hidden original glyph can no longer push it off-centre) */
.primary > span {
  position: relative;
  display: inline-block;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0;
  color: var(--accent);
  overflow: hidden;
}
.primary > span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}
.primary:hover > span,
.primary:focus-visible > span {
  transform: none;
}
.primary > span::before {
  transform-origin: 50% 50%;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.primary:hover > span::before,
.primary:focus-visible > span::before {
  transform: rotate(45deg);
}
/* hover: swap to a symmetrical right arrow (no rotation, so it stays dead centre) */
.primary:hover > span::before,
.primary:focus-visible > span::before {
  transform: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* How it works: each heading line and each step animates in on its own */
.how h2 .how-line {
  display: block;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .how > div {
      animation: none;
    }
    .how h2 .how-line,
    .how li {
      animation: px-line linear both;
      animation-timeline: view();
    }
    .how h2 .how-line:nth-child(1) { animation-range: entry 0% entry 55%; }
    .how h2 .how-line:nth-child(3) { animation-range: entry 12% entry 67%; }
    .how h2 .how-line:nth-child(5) { animation-range: entry 24% entry 79%; }
    .how li { animation-name: px-step; }
    .how li:nth-child(1) { animation-range: entry 10% entry 60%; }
    .how li:nth-child(2) { animation-range: entry 22% entry 72%; }
    .how li:nth-child(3) { animation-range: entry 34% entry 84%; }
    @keyframes px-line {
      from { opacity: 0; translate: 0 0.6em; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes px-step {
      from { opacity: 0; translate: 48px 24px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}
.how h2 br,
.how h2 br:after {
  display: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
    .how li { animation-name: px-step-m; }
    @keyframes px-step-m {
      from { opacity: 0; translate: 0 40px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* Heading lines: slide in from the left + fade, one line after another */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .how h2 .how-line {
      animation-name: px-line-slide;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }
    .how h2 .how-line:nth-child(1) { animation-range: entry 10% entry 50%; }
    .how h2 .how-line:nth-child(3) { animation-range: entry 22% entry 62%; }
    .how h2 .how-line:nth-child(5) { animation-range: entry 34% entry 74%; }
    @keyframes px-line-slide {
      from { opacity: 0; translate: -90px 0; }
      to { opacity: 1; translate: 0 0; }
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
    @keyframes px-line-slide {
      from { opacity: 0; translate: -40px 0; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .how h2 .how-line:nth-child(1) { animation-range: cover 4% cover 24%; }
    .how h2 .how-line:nth-child(3) { animation-range: cover 8% cover 28%; }
    .how h2 .how-line:nth-child(5) { animation-range: cover 12% cover 32%; }
    .how li:nth-child(1) { animation-range: cover 8% cover 30%; }
    .how li:nth-child(2) { animation-range: cover 12% cover 34%; }
    .how li:nth-child(3) { animation-range: cover 16% cover 38%; }
  }
}

/* Card names under the photos: smaller */
.tile-label strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (max-width: 640px) {
  .tile-label strong { font-size: 15px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* each step finishes exactly when it's fully on screen, so it always completes */
    .how li:nth-child(1) { animation-range: entry 0% contain 0%; }
    .how li:nth-child(2) { animation-range: entry 15% contain 0%; }
    .how li:nth-child(3) { animation-range: entry 30% contain 0%; }
  }
}

/* Gallery kicker "The people make the moment" — back, above the heading */
.collection .section-top .eyebrow {
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 -14px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.4px;
  color: #c13450;
}
@media (max-width: 640px) {
  .collection .section-top .eyebrow { font-size: 11px; letter-spacing: 1.8px; margin-bottom: -4px; }
}

/* =====================================================================
   GLOWS: orange, concentrated light sources (a wide dim haze reads brown)
   + performance: no animated/blurred full-page layers
   ===================================================================== */
body {
  background:
    radial-gradient(26% 30% at 84% 30%, #ba9a6333, transparent 70%),
    var(--bg);
}
/* hero: warm light right behind the card */
.hero-art {
  background: radial-gradient(closest-side, #ba9a6359 0%, #b3925926 45%, transparent 78%);
}
.hero-art:before {
  inset: 6% 4%;
  filter: none;
  animation: none;
  background:
    radial-gradient(closest-side at 46% 44%, #cdb69073, transparent 70%),
    radial-gradient(closest-side at 62% 62%, #ddc9a940, transparent 70%);
}
/* How it works: one ember behind the heading, nothing muddy elsewhere */
.how::after {
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(30% 42% at 20% 30%, #ba9a634d, transparent 70%),
    radial-gradient(18% 26% at 26% 44%, #ddc9a933, transparent 70%),
    linear-gradient(180deg, #1c1c1e 0%, #17181a 100%);
  background-blend-mode: soft-light, normal, normal, normal;
}
/* popup: orange light behind the card */
.card-side {
  background:
    radial-gradient(48% 40% at 50% 40%, #ba9a6347, transparent 72%),
    var(--bg);
}

/* performance: no scroll-driven background drift */
.collection::after,
.how::after {
  animation: none !important;
}
/* performance: no live blur on large panels (backgrounds behind them are smooth) */
.collection::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fafbfc6b;
}
.how li,
.how li:hover {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #ffffff0d;
}
.hero-art {
  background: radial-gradient(closest-side, #ba9a638c 0%, #b3925933 42%, transparent 66%);
}
.hero-art:before {
  background:
    radial-gradient(closest-side at 44% 46%, #cdb69099, transparent 62%),
    radial-gradient(closest-side at 64% 60%, #decaaa59, transparent 60%);
}
.how::after {
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(22% 30% at 19% 30%, #ba9a6373, transparent 68%),
    radial-gradient(12% 18% at 22% 34%, #decaaa5c, transparent 70%),
    linear-gradient(180deg, #1c1c1e 0%, #17181a 100%);
  background-blend-mode: soft-light, normal, normal, normal;
}
.card-side {
  background:
    radial-gradient(62% 48% at 50% 42%, #ba9a6359, transparent 70%),
    var(--bg);
}
.hero-art {
  background: radial-gradient(58% 54% at 52% 48%, #ba9a636b 0%, #b392592e 45%, transparent 74%);
}
.hero-art:before {
  inset: -8% -10%;
  background:
    radial-gradient(34% 38% at 40% 44%, #cdb69066, transparent 70%),
    radial-gradient(30% 34% at 66% 64%, #decaaa3d, transparent 70%);
}

/* How it works: the big ember is back (orange, not a brown haze) */
.how::after {
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(40% 62% at 20% 34%, #ba9a635c 0%, #b3925924 42%, transparent 72%),
    radial-gradient(22% 32% at 24% 40%, #decaaa4d, transparent 70%),
    linear-gradient(180deg, #1c1c1e 0%, #17181a 100%);
  background-blend-mode: soft-light, normal, normal, normal;
}

/* small labels on light surfaces: rose-coral, readable */
.collection .section-top .eyebrow,
.story-side .eyebrow,
.memory-meta,
.card-status {
  color: #b52f4a;
}

/* =====================================================================
   HERO FLARE — a stage light behind the floating cards.
   Uses the existing (previously hidden) .orbit layers; no markup change.
   ===================================================================== */
.hero-art .orbit {
  display: block;
  position: absolute;
  inset: auto;
  left: 50%;
  top: 44%;
  z-index: -1;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  translate: -50% -50%;
  transform: none;
}
/* core + soft rays */
.hero-art .orbit-one {
  width: 760px;
  height: 760px;
  background:
    radial-gradient(closest-side, #f3f4f7e6 0%, #e8d9c199 7%, #cdb48c55 20%, #c3a67522 42%, transparent 68%),
    repeating-conic-gradient(from 8deg, #ebdfcd33 0deg 1.6deg, transparent 1.6deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000000 0%, #000000aa 30%, transparent 92%);
  mask: radial-gradient(closest-side, #000000 0%, #000000aa 30%, transparent 92%);
  animation: flare-spin 90s linear infinite;
}
/* anamorphic lens streak */
.hero-art .orbit-two {
  width: 1200px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #f5f6f8cc 0%, #e0d0b666 22%, #cab18926 55%, transparent 100%);
  rotate: -9deg;
  animation: flare-breathe 7s ease-in-out infinite;
}
@keyframes flare-spin {
  to { rotate: 360deg; }
}
@keyframes flare-breathe {
  0%, 100% { opacity: 0.85; scale: 1 1; }
  50% { opacity: 1; scale: 1.06 1.25; }
}
@media (max-width: 950px) {
  .hero-art .orbit-one { width: 560px; height: 560px; }
  .hero-art .orbit-two { width: 820px; height: 36px; }
}
@media (max-width: 640px) {
  .hero-art .orbit-one { width: 460px; height: 460px; top: 42%; }
  .hero-art .orbit-two { width: 560px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .orbit-one,
  .hero-art .orbit-two { animation: none; }
}
.hero-art .orbit-one {
  left: 44%;
  top: 30%;
  background:
    radial-gradient(closest-side, #f3f4f7f2 0%, #e8d9c1b3 8%, #cdb48c66 22%, #c3a6752e 44%, transparent 70%),
    repeating-conic-gradient(from 8deg, #ece2d05c 0deg 1.8deg, transparent 1.8deg 12deg);
}
.hero-art .orbit-two {
  top: 30%;
  left: 46%;
  height: 54px;
  background: radial-gradient(closest-side, #f7f7f9e6 0%, #e0d0b680 20%, #cab18933 55%, transparent 100%);
}
@media (max-width: 640px) {
  .hero-art .orbit-one { width: 520px; height: 520px; left: 40%; top: 28%; }
  .hero-art .orbit-two { width: 620px; height: 34px; top: 28%; left: 44%; }
}
/* flare performance: static rays, no blend, GPU-friendly breathing only */
.hero-art .orbit {
  mix-blend-mode: normal;
}
.hero-art .orbit-one {
  animation: none;
  rotate: 0deg;
}
.hero-art .orbit-two {
  will-change: opacity, scale;
}
/* flare size tuned for smooth scrolling */
.hero-art .orbit-one { width: 560px; height: 560px; }
@media (max-width: 950px) { .hero-art .orbit-one { width: 480px; height: 480px; } }
@media (max-width: 640px) { .hero-art .orbit-one { width: 440px; height: 440px; } }

/* =====================================================================
   LIGHT LEAK — warm film-style leak bleeding in from the right edge.
   Painted once into the page background (no per-frame cost).
   Replaces the flare.
   ===================================================================== */
.hero-art .orbit {
  display: none;
}
body {
  background:
    radial-gradient(260px 520px at 100% 230px, #efe4d1a6, transparent 70%),
    radial-gradient(560px 900px at 100% 300px, #c7a97773, transparent 72%),
    radial-gradient(760px 1100px at 104% 520px, #ba99604d, transparent 74%),
    radial-gradient(1100px 760px at 100% 0px, #d8c0992e, transparent 72%),
    linear-gradient(258deg, #cdb3881f 0%, transparent 38%) 0 0 / 100% 1100px no-repeat,
    var(--bg);
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(150px 420px at 100% 560px, #efe4d199, transparent 70%),
      radial-gradient(300px 760px at 100% 600px, #c7a97766, transparent 72%),
      radial-gradient(420px 900px at 106% 780px, #ba996047, transparent 74%),
      linear-gradient(255deg, #cdb3881c 0%, transparent 45%) 0 0 / 100% 1200px no-repeat,
      var(--bg);
  }
}
body {
  background:
    radial-gradient(200px 560px at 100% 250px, #f2f3f6d9, transparent 68%),
    radial-gradient(420px 820px at 100% 290px, #ceb285b3, transparent 66%),
    radial-gradient(620px 1000px at 103% 470px, #bb9a6173, transparent 64%),
    radial-gradient(900px 640px at 100% 0px, #e0cba933, transparent 66%),
    var(--bg);
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(120px 440px at 100% 560px, #f2f3f6cc, transparent 68%),
      radial-gradient(240px 720px at 100% 600px, #ceb285a6, transparent 66%),
      radial-gradient(340px 880px at 106% 760px, #bb9a6166, transparent 64%),
      var(--bg);
  }
}

/* =====================================================================
   BOKEH LIGHT LEAK (right side) — soft-edged hot disc inside a deep
   red-orange bloom, falling off to black. Static background layers.
   ===================================================================== */
body {
  background:
    radial-gradient(circle 240px at calc(100% - 40px) 300px,
      #e4cfac 0%, #d7bd93 38%, #cbaf7f 62%, #c4a470f2 78%, #be9c63b3 88%, transparent 100%),
    radial-gradient(circle 420px at calc(100% + 60px) 200px,
      #d4ba91cc 0%, #c7a97799 45%, transparent 100%),
    radial-gradient(640px 780px at calc(100% + 40px) 330px,
      #a8874e 0%, #997940e6 30%, #8b6c3499 55%, #533e1840 75%, transparent 100%),
    radial-gradient(1000px 1100px at calc(100% + 80px) 360px,
      #886d3d59 0%, #3d2d1226 50%, transparent 100%),
    var(--bg);
}
@media (max-width: 950px) {
  body {
    background:
      radial-gradient(circle 170px at calc(100% - 20px) 380px,
        #e4cfac 0%, #d7bd93 38%, #cbaf7f 62%, #c4a470f2 78%, #be9c63b3 88%, transparent 100%),
      radial-gradient(circle 300px at calc(100% + 50px) 300px,
        #d4ba91cc 0%, #c7a97799 45%, transparent 100%),
      radial-gradient(460px 600px at calc(100% + 30px) 400px,
        #a8874e 0%, #997940e6 30%, #8b6c3499 55%, #533e1840 75%, transparent 100%),
      var(--bg);
  }
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle 120px at calc(100% + 10px) 640px,
        #e4cfac 0%, #d7bd93 38%, #cbaf7f 62%, #c4a470f2 78%, #be9c63b3 88%, transparent 100%),
      radial-gradient(circle 210px at calc(100% + 40px) 580px,
        #d4ba91bf 0%, #c7a9778c 45%, transparent 100%),
      radial-gradient(320px 520px at calc(100% + 30px) 650px,
        #a8874ee6 0%, #997940cc 30%, #8b6c3480 55%, #533e1833 75%, transparent 100%),
      var(--bg);
  }
}
/* fine film grain over the hero area (static, painted once) */
.hero {
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -120px calc(50% - 50vw) 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grain) 0 0 / 220px 220px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Phones: gentler hero parallax (matches the script fallback for older Safari) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
    @keyframes px-copy { to { translate: 0 -54px; opacity: 0.15; } }
    @keyframes px-art { to { translate: 0 31.5px; } }
    @keyframes px-back {
      from { translate: 0 0; rotate: 0deg; }
      to { translate: -31.5px 126px; rotate: -5.4deg; }
    }
  }
}

/* Card parallax: 20% less travel */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes px-art { to { translate: 0 56px; } }
    @keyframes px-back {
      from { translate: 0 0; rotate: 0deg; }
      to { translate: -56px 224px; rotate: -9.6deg; }
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
    @keyframes px-art { to { translate: 0 25.2px; } }
    @keyframes px-back {
      from { translate: 0 0; rotate: 0deg; }
      to { translate: -25.2px 100.8px; rotate: -4.32deg; }
    }
  }
}

/* Light leak: fuchsia */
body {
  background:
    radial-gradient(circle 240px at calc(100% - 40px) 300px,
      #e6d7be 0%, #d3b687 38%, #c09f65 62%, #b19057f2 78%, #a5844bb3 88%, transparent 100%),
    radial-gradient(circle 420px at calc(100% + 60px) 200px,
      #d3b687cc 0%, #bb996099 45%, transparent 100%),
    radial-gradient(640px 780px at calc(100% + 40px) 330px,
      #9c7c43 0%, #8c6c33e6 30%, #8b6c3699 55%, #43310e40 75%, transparent 100%),
    radial-gradient(1000px 1100px at calc(100% + 80px) 360px,
      #896d3c59 0%, #36270b26 50%, transparent 100%),
    var(--bg);
}
@media (max-width: 950px) {
  body {
    background:
      radial-gradient(circle 170px at calc(100% - 20px) 380px,
        #e6d7be 0%, #d3b687 38%, #c09f65 62%, #b19057f2 78%, #a5844bb3 88%, transparent 100%),
      radial-gradient(circle 300px at calc(100% + 50px) 300px,
        #d3b687cc 0%, #bb996099 45%, transparent 100%),
      radial-gradient(460px 600px at calc(100% + 30px) 400px,
        #9c7c43 0%, #8c6c33e6 30%, #8b6c3699 55%, #43310e40 75%, transparent 100%),
      var(--bg);
  }
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle 120px at calc(100% + 10px) 640px,
        #e6d7be 0%, #d3b687 38%, #c09f65 62%, #b19057f2 78%, #a5844bb3 88%, transparent 100%),
      radial-gradient(circle 210px at calc(100% + 40px) 580px,
        #d3b687bf 0%, #bb99608c 45%, transparent 100%),
      radial-gradient(320px 520px at calc(100% + 30px) 650px,
        #9c7c43e6 0%, #8c6c33cc 30%, #8b6c3680 55%, #43310e33 75%, transparent 100%),
      var(--bg);
  }
}

/* Light leak: rose red (#FA003F) */
body {
  background:
    radial-gradient(circle 240px at calc(100% - 40px) 300px,
      #e0d3be 0%, #c5aa7b 36%, #af8e55 60%, #a28148f2 78%, #9c7c43b3 88%, transparent 100%),
    radial-gradient(circle 420px at calc(100% + 60px) 200px,
      #c3a676cc 0%, #a2814899 45%, transparent 100%),
    radial-gradient(640px 780px at calc(100% + 40px) 330px,
      #a28148 0%, #8e6e35e6 30%, #8b6c3699 55%, #402e0a40 75%, transparent 100%),
    radial-gradient(1000px 1100px at calc(100% + 80px) 360px,
      #8a6c3959 0%, #37270726 50%, transparent 100%),
    var(--bg);
}
@media (max-width: 950px) {
  body {
    background:
      radial-gradient(circle 170px at calc(100% - 20px) 380px,
        #e0d3be 0%, #c5aa7b 36%, #af8e55 60%, #a28148f2 78%, #9c7c43b3 88%, transparent 100%),
      radial-gradient(circle 300px at calc(100% + 50px) 300px,
        #c3a676cc 0%, #a2814899 45%, transparent 100%),
      radial-gradient(460px 600px at calc(100% + 30px) 400px,
        #a28148 0%, #8e6e35e6 30%, #8b6c3699 55%, #402e0a40 75%, transparent 100%),
      var(--bg);
  }
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle 120px at calc(100% + 10px) 640px,
        #e0d3be 0%, #c5aa7b 36%, #af8e55 60%, #a28148f2 78%, #9c7c43b3 88%, transparent 100%),
      radial-gradient(circle 210px at calc(100% + 40px) 580px,
        #c3a676bf 0%, #a281488c 45%, transparent 100%),
      radial-gradient(320px 520px at calc(100% + 30px) 650px,
        #a28148e6 0%, #8e6e35cc 30%, #8b6c3680 55%, #402e0a33 75%, transparent 100%),
      var(--bg);
  }
}

/* Light leak: champagne yellow (bright to the edge, quick falloff = no muddy olive) */
body {
  background:
    radial-gradient(circle 240px at calc(100% - 40px) 300px,
      #f9fafc 0%, #faefdd 34%, #f4e2c5 58%, #ead4b1f2 76%, #dfc9a3b3 88%, transparent 100%),
    radial-gradient(circle 420px at calc(100% + 60px) 200px,
      #faefddb3 0%, #ead7b980 45%, transparent 100%),
    radial-gradient(600px 760px at calc(100% + 40px) 330px,
      #e4cfadd9 0%, #d7c19da6 34%, #c5b08c54 58%, transparent 80%),
    var(--bg);
}
@media (max-width: 950px) {
  body {
    background:
      radial-gradient(circle 170px at calc(100% - 20px) 380px,
        #f9fafc 0%, #faefdd 34%, #f4e2c5 58%, #ead4b1f2 76%, #dfc9a3b3 88%, transparent 100%),
      radial-gradient(circle 300px at calc(100% + 50px) 300px,
        #faefddb3 0%, #ead7b980 45%, transparent 100%),
      radial-gradient(440px 580px at calc(100% + 30px) 400px,
        #e4cfadd9 0%, #d7c19da6 34%, #c5b08c54 58%, transparent 80%),
      var(--bg);
  }
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle 120px at calc(100% + 10px) 640px,
        #f9fafc 0%, #faefdd 34%, #f4e2c5 58%, #ead4b1f2 76%, #dfc9a3b3 88%, transparent 100%),
      radial-gradient(circle 210px at calc(100% + 40px) 580px,
        #faefdda6 0%, #ead7b973 45%, transparent 100%),
      radial-gradient(300px 500px at calc(100% + 30px) 650px,
        #e4cfadcc 0%, #d7c19d99 34%, #c5b08c4d 58%, transparent 80%),
      var(--bg);
  }
}

/* Light leak hidden for now (blocks above kept so it can come back).
   Restores the page background used before the flare/leak. */
body,
body:is(*) {
  background:
    radial-gradient(26% 30% at 84% 30%, #ba9a6333, transparent 70%),
    var(--bg);
}

/* === Palette: black, grey, red, champagne ===
   black  #0f0f11  page
   grey   #1f1f22 / #2a2a2e surfaces, #3e3e43 strokes, #ececee light sections
   red    #d92d4f  buttons and highlighted text only
   champagne #e6cf9f  glows, back card, band, small accents */
:root {
  --bg: #0f0f11;
  --paper: #f4f3f1;
  --muted: #a6a6ab;
  --line: #ffffff1c;
  --accent: #e6cf9f;
  --coral: #d92d4f;
  --rose: #ff8a9a;
  --champ: #e6cf9f;
  --champ-deep: #b89b66;
  --plum: #1f1f22;
  --cream: #ececee;
  --ink: #121214;
  --ink-muted: #5e5e64;
  --glass: #1f1f22c7;
  --glass-line: #ffffff24;
}
body { background: var(--bg); }

/* Red buttons: solid, like the reference */
.primary,
.primary:hover,
.share-actions .primary {
  background: #d92d4f;
  background-image: none;
  color: #ffffff;
  box-shadow: 0 12px 30px #d92d4f38;
}
.primary:hover { background: #e43b5c; }
.primary > span { background: #ffffff; color: #d92d4f; }

/* Highlighted text: red only */
.hero h1 em {
  background-image: linear-gradient(100deg, #ff5d74 0%, #d92d4f 45%, #ff8a9a 75%, #ff5d74 100%);
}

/* Grey cards with a thin stroke (How it works) */
.how li {
  background: #1f1f22;
  border: 2px solid #3a3a3e;
}

/* Champagne glow behind the hero cards */
.hero-art {
  background:
    radial-gradient(26% 22% at 56% 40%, #fff3d84d 0%, transparent 100%),
    radial-gradient(closest-side, #e6cf9f52 0%, #c9ad7838 34%, #8a744d1f 58%, transparent 80%);
}
.poster-back {
  background: linear-gradient(150deg, #f6e7c6 0%, #e6cf9f 30%, #c9ad78 65%, #8f7650 100%);
  box-shadow: 0 30px 60px #00000080, 0 0 80px #e6cf9f2e;
}
.brand-icon {
  background: linear-gradient(150deg, #f3e2bd, #d9bf8b 55%, #a88d5e);
  color: #121214;
}
.occasion-strip {
  background: linear-gradient(100deg, #f3e2bd 0%, #e6cf9f 45%, #c9ad78 100%);
  color: #121214;
}
.occasion-strip * { color: #121214; }
.occasion-strip > i { color: #12121499; }
/* French at 360px: 12px text needs slightly tighter pills */
@media (max-width: 380px) {
  html[lang="fr"] .topbar { --m-pad: 4px; padding-left: 16px; padding-right: 16px; }
  html[lang="fr"] .about-link,
  html[lang="fr"] .about-link:hover { --hl-pad: 4px; }
}

/* ================= Direction: dark top, light bottom =================
   red = buttons only · champagne = highlighted text and accents */
:root {
  --accent: #e6cf9f;
  --coral: #e6cf9f;
  --rose: #f3e2bd;
}
/* Light sections use a deeper champagne so it stays readable */
.collection,
.how,
footer,
.story-side {
  --accent: #8a6d3b;
  --coral: #8a6d3b;
  --rose: #a8884f;
}

/* Highlighted text: champagne */
.hero h1 em {
  background-image: linear-gradient(100deg, #f6e7c6 0%, #e6cf9f 40%, #c9ad78 70%, #f6e7c6 100%);
}

/* Buttons: solid red, everywhere */
.primary,
.primary:hover,
.share-actions .primary,
#autograph.accent,
#autograph.accent:hover {
  background: #d92d4f;
  background-image: none;
  border-color: #d92d4f;
  color: #ffffff;
}
.primary:hover,
#autograph.accent:hover { background: #e43b5c; border-color: #e43b5c; }

/* No gradient light layers in the sections below the hero */
.collection::after {
  background: var(--cream);
  animation: none;
}
.how {
  --paper: var(--ink);
  --muted: var(--ink-muted);
  --line: #1a1a1c1c;
  --glass-line: #1a1a1c1f;
  color: var(--ink);
  background: #f7f7f8;
  box-shadow: var(--bleed) #f7f7f8;
}
.how::after {
  background: #f7f7f8;
  animation: none;
}
/* Grey cards with a thin stroke */
.how li,
.how li:hover {
  background: #ffffff;
  border: 2px solid #dedee2;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.how li:hover { border-color: #c8c8cd; }
footer {
  --paper: var(--ink);
  --muted: var(--ink-muted);
  --line: #1a1a1c1c;
  color: var(--ink);
  background: #f7f7f8;
  box-shadow: var(--bleed) #f7f7f8;
  clip-path: inset(0 -100vmax);
}

/* Parallax: only the hero cards move with scroll */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy { animation: none; }
    .occasion-strip > span:not(:first-child),
    .occasion-strip i { animation: none; }
    .tile-art img { animation: none; translate: none; scale: none; }
    .how h2 { animation: none; }
  }
}

/* Highlighted text in the light sections: deep champagne, never red */
.collection .eyebrow,
.story-side .eyebrow,
#storyEyebrow,
.memory-meta,
.memory-meta span,
#eventLocation::before {
  color: #8a6d3b;
}
.memory-meta { border-color: #8a6d3b33; }

/* Autograph: red only when it can be pressed */
#autograph.accent:disabled,
#autograph.accent[aria-disabled="true"] {
  background: transparent;
  border-color: #ffffff2e;
  color: var(--muted);
}
main .collection .section-top .eyebrow { color: #8a6d3b; }

/* Bottom (How it works + footer): dark, grey cards with a stroke */
.how,
footer {
  --paper: #f4f3f1;
  --muted: #a6a6ab;
  --line: #ffffff1c;
  --glass-line: #ffffff24;
  --accent: #e6cf9f;
  --coral: #e6cf9f;
  --rose: #f3e2bd;
  color: var(--paper);
  background: #0f0f11;
  box-shadow: var(--bleed) #0f0f11;
}
.how::after { background: #0f0f11; }
.how li,
.how li:hover {
  background: #1f1f22;
  border: 2px solid #3a3a3e;
}
.how li:hover { border-color: #4a4a4f; }
footer { border-top: 2px solid #ffffff12; }

/* Mood, top and bottom: static light only (nothing moves with scroll) */
body {
  background:
    radial-gradient(640px 520px at 76% 380px, #e6cf9f2e 0%, #c9ad7814 46%, transparent 100%),
    radial-gradient(420px 360px at 88% 180px, #f3e2bd1a 0%, transparent 100%),
    radial-gradient(760px 560px at 8% 0px, #2a2a2ecc 0%, #1a1a1d66 50%, transparent 100%),
    radial-gradient(520px 420px at 30% 860px, #d92d4f0f 0%, transparent 100%),
    #0f0f11;
}
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(360px 420px at 80% 760px, #e6cf9f2e 0%, #c9ad7814 46%, transparent 100%),
      radial-gradient(420px 360px at 0% 0px, #2a2a2ecc 0%, transparent 100%),
      #0f0f11;
  }
}
.hero::after {
  opacity: 0.35;
}
/* Bottom: a champagne ember behind the heading, a cool grey lift on the right, grain on top */
.how::after {
  background:
    var(--grain) 0 0 / 220px 220px,
    radial-gradient(32% 46% at 18% 32%, #e6cf9f29 0%, transparent 70%),
    radial-gradient(18% 26% at 26% 46%, #f3e2bd1a 0%, transparent 70%),
    radial-gradient(40% 60% at 92% 64%, #2e2e33b3 0%, transparent 72%),
    radial-gradient(30% 40% at 60% 110%, #d92d4f0d 0%, transparent 70%),
    #0f0f11;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal;
  animation: none;
}
footer {
  background:
    radial-gradient(30% 140% at 12% 100%, #e6cf9f14 0%, transparent 70%),
    #0f0f11;
}

/* "Keep that feeling": stronger champagne shine — a bright band sweeps across, then rests */
.hero h1 em {
  background-image: linear-gradient(105deg,
    #c9ad78 0%, #e6cf9f 30%, #f6e6c4 40%, #ffffff 50%, #f6e6c4 60%, #e6cf9f 70%, #c9ad78 100%);
  background-size: 260% 100%;
  background-position: 100% 50%;
  animation: ic-shine 5s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
  filter: drop-shadow(0 0 24px #e6cf9f40);
}
@keyframes ic-shine {
  0% { background-position: 100% 50%; }
  55%, 100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background-position: 50% 50%; }
}

/* Card popup, card side: more mood (static) — champagne halo behind the card,
   a brighter core, cool grey lift top-left, faint red warmth low, vignette + grain */
.card-side {
  /* clean: one champagne halo on black, no grain, no muddy mid-tones */
  background:
    radial-gradient(54% 40% at 50% 34%, #f3e2bd2b 0%, #e6cf9f12 50%, transparent 100%),
    radial-gradient(80% 60% at 50% 40%, #e6cf9f14 0%, transparent 100%),
    #0f0f11;
  background-blend-mode: normal;
}

/* Footer: no partial-width rule line; the dark flows straight on from How it works */
footer {
  border-top: 0;
  background: #0f0f11;
  box-shadow: var(--bleed) #0f0f11;
}
/* How it works: same flat black base as the footer so there's no seam between them */
.how::after {
  background:
    radial-gradient(32% 46% at 18% 32%, #e6cf9f29 0%, transparent 70%),
    radial-gradient(18% 26% at 26% 46%, #f3e2bd1a 0%, transparent 70%),
    radial-gradient(34% 38% at 90% 46%, #2e2e3399 0%, transparent 72%),
    #0f0f11;
  background-blend-mode: normal;
}

/* Back card: bring back the inner frame (a light rim inside the edge) */
.poster-back {
  background:
    radial-gradient(120% 80% at 0% 0%, #ffffff4d, transparent 55%),
    linear-gradient(150deg, #f6e7c6 0%, #e6cf9f 30%, #c9ad78 65%, #8f7650 100%);
  box-shadow:
    0 30px 60px #00000080,
    0 0 80px #e6cf9f2e,
    inset 0 0 0 10px #ffffff2e,
    inset 0 0 0 12px #ffffff66;
}

/* Red buttons: depth and a shine that sweeps across, then rests */
.primary,
#featuredEvent .featured-event-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #ea4664 0%, #d92d4f 52%, #c2213f 100%);
  box-shadow:
    inset 0 2px 0 #ffffff38,
    inset 0 -2px 0 #0000002e,
    0 14px 34px #d92d4f52,
    0 0 64px #d92d4f2e;
}
.primary:hover,
#featuredEvent .featured-event-link:hover {
  background: linear-gradient(180deg, #f2566f 0%, #e23a5a 52%, #cc2a47 100%);
}
.primary::after,
#featuredEvent .featured-event-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 36%, #ffffff33 46%, #ffffff73 50%, #ffffff33 54%, transparent 64%);
  background-size: 280% 100%;
  background-position: 120% 0;
  animation: ic-btn-shine 5s cubic-bezier(0.4, 0, 0.6, 1) 1.6s infinite;
}
@keyframes ic-btn-shine {
  0% { background-position: 120% 0; }
  40%, 100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .primary::after,
  #featuredEvent .featured-event-link::after { animation: none; opacity: 0; }
}

/* SAMPLE badge on grid cards: smaller, white text */
.tile-caption p > span:last-child {
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 16px;
  color: #ffffff;
}

/* Cards reveal sooner: fully visible once a third of the card is on screen,
   so a card near the bottom of the screen is never left faded
   (e.g. right after tapping "My collection" on a phone). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile { animation-range: entry 0% entry 30%; }
    .tile:nth-child(3n + 2) { animation-range: entry 4% entry 34%; }
    .tile:nth-child(3n + 3) { animation-range: entry 8% entry 38%; }
  }
}
@media (max-width: 640px) {
  @keyframes px-tile {
    from { opacity: 0; translate: 0 32px; scale: 0.98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* Card arrow on hover: white arrow in a champagne circle */
.tile:hover .tile-arrow,
.tile:focus-visible .tile-arrow {
  color: #ffffff;
}
.hero-card:hover .card-top > span:last-child,
.hero-card:focus-visible .card-top > span:last-child {
  background: #b8996a;
  color: #ffffff;
}

/* ================= November additions: new sections in the v2 style =================
   featured-event.css loads after site.css, so these rules use the section ids
   to win without touching that file. Visual only: same classes, same markup. */

/* ---------- Featured Event ---------- */
#featuredEvent {
  max-width: none;
  padding: 96px 6% 104px;
  background: transparent;
}
#featuredEvent .featured-event-heading { margin-bottom: 24px; }
#featuredEvent .featured-event-heading .eyebrow {
  font: 700 12px/1.5 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e6cf9f;
}
#featuredEvent .featured-event-panel {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  padding: 40px 56px 40px 40px;
  border: 2px solid #2e2e33;
  border-radius: 32px;
  background:
    radial-gradient(42% 90% at 14% 50%, #e6cf9f1f 0%, transparent 70%),
    #18181b;
  box-shadow: 0 40px 80px #00000066;
}
#featuredEvent .featured-event-media { width: 260px; }
#featuredEvent .featured-event-frame {
  border-radius: 20px;
  border: 2px solid #ffffff1a;
  background: #111113;
  box-shadow: 0 24px 50px #000000a6, 0 0 60px #e6cf9f14;
}
#featuredEvent .featured-preview-toggle {
  left: 10px;
  right: 10px;
  bottom: 10px;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid #ffffff2e;
  border-radius: 99px;
  background: #0f0f11b3;
  color: #f4f3f1;
  font: 600 12px/1 var(--sans);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, background-color 0.2s;
}
#featuredEvent .featured-preview-toggle:hover { border-color: #e6cf9f; }
#featuredEvent .featured-preview-toggle svg { width: 12px; height: 12px; }
#featuredEvent .featured-event-media figcaption {
  margin-top: 12px;
  color: var(--muted);
  font: 500 12px/1.4 var(--sans);
}
#featuredEvent .featured-event-meta {
  margin: 0 0 16px;
  color: #e6cf9f;
  font: 700 12px/1.6 var(--sans);
  letter-spacing: 2px;
}
#featuredEvent .featured-event-copy h2 {
  margin: 0 0 18px;
  font: 800 clamp(40px, 4.4vw, 64px)/1 var(--sans);
  letter-spacing: -2px;
  color: var(--paper);
  text-wrap: balance;
}
#featuredEvent .featured-event-description {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}
#featuredEvent .featured-event-actions { gap: 14px 16px; }

/* Primary action: a solid red button, like every button on the site */
#featuredEvent .featured-event-link {
  gap: 16px;
  min-height: 56px;
  padding: 10px 10px 10px 26px;
  border: 0;
  border-radius: 99px;
  background: #d92d4f;
  color: #ffffff;
  font: 700 16px/1 var(--sans);
  box-shadow: 0 12px 30px #d92d4f38;
  transition: background-color 0.2s, transform 0.2s var(--ease-out);
}
#featuredEvent .featured-event-link > span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #d92d4f;
  font-size: 14px;
}
#featuredEvent .featured-event-link:hover {
  background: #e43b5c;
  color: #ffffff;
  transform: translateY(-2px);
}
/* Secondary: grey outline pill */
#featuredEvent .featured-film-open {
  min-height: 56px;
  padding: 0 26px;
  border: 2px solid #3a3a3e;
  border-radius: 99px;
  background: transparent;
  color: var(--paper);
  font: 600 16px/1 var(--sans);
  transition: border-color 0.2s, color 0.2s;
}
#featuredEvent .featured-film-open:hover {
  border-color: #e6cf9f;
  color: #e6cf9f;
}

@media (max-width: 700px) {
  #featuredEvent { padding: 64px 5% 72px; }
  #featuredEvent .featured-event-panel {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    border-radius: 24px;
  }
  #featuredEvent .featured-event-media { width: 120px; }
  #featuredEvent .featured-event-frame { border-radius: 14px; }
  #featuredEvent .featured-preview-toggle {
    left: 6px;
    right: 6px;
    bottom: 6px;
    min-height: 44px;
    padding: 6px;
    font-size: 10px;
    gap: 4px;
  }
  #featuredEvent .featured-event-meta { font-size: 10px; letter-spacing: 1px; margin-bottom: 10px; }
  #featuredEvent .featured-event-copy h2 { font-size: 32px; letter-spacing: -1px; margin-bottom: 12px; }
  #featuredEvent .featured-event-description { font-size: 14px; margin-bottom: 20px; }
  #featuredEvent .featured-event-actions { gap: 10px; }
  #featuredEvent .featured-event-link { min-height: 48px; font-size: 14px; padding: 6px 6px 6px 20px; gap: 12px; }
  #featuredEvent .featured-event-link > span[aria-hidden] { width: 32px; height: 32px; }
  #featuredEvent .featured-film-open { min-height: 48px; padding: 0 20px; font-size: 14px; }
}
@media (max-width: 440px) {
  #featuredEvent .featured-event-panel { grid-template-columns: 1fr; gap: 24px; }
  #featuredEvent .featured-event-media { width: 180px; }
  #featuredEvent .featured-event-copy h2 { font-size: 34px; }
  #featuredEvent .featured-event-actions { flex-direction: column; align-items: stretch; }
  #featuredEvent .featured-event-link { justify-content: space-between; }
}

/* ---------- Full film dialog ---------- */
#featuredFilmDialog {
  border: 2px solid #2e2e33;
  border-radius: 24px;
  background: #0f0f11;
  color: var(--paper);
  box-shadow: 0 40px 100px #000000b3;
}
#featuredFilmDialog::backdrop {
  background: #000000d9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#featuredFilmDialog .featured-film-header { padding: 14px 14px 14px 20px; }
#featuredFilmDialog .featured-film-header h2 { font: 700 16px/1.4 var(--sans); letter-spacing: 0; }
#featuredFilmDialog .featured-film-close {
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid #3a3a3e;
  border-radius: 99px;
  background: transparent;
  color: var(--paper);
  font: 600 14px/1 var(--sans);
  transition: border-color 0.2s, color 0.2s;
}
#featuredFilmDialog .featured-film-close:hover { border-color: #e6cf9f; color: #e6cf9f; }
#featuredFilmDialog video { background: #000000; }
#featuredFilmDialog .featured-film-fallback { color: var(--muted); font: 500 14px/1.6 var(--sans); }
#featuredFilmDialog .featured-film-fallback a { color: #e6cf9f; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Event directory (styled ahead, in case it is switched on) ---------- */
.event-directory h2 { font: 800 clamp(32px, 3.4vw, 48px)/1.04 var(--sans); letter-spacing: -2px; }
.event-directory-card {
  border: 2px solid #2e2e33;
  border-radius: 24px;
  background: #18181b;
  color: var(--paper);
}
.event-directory-card:hover { border-color: #e6cf9f; }
.event-directory-cover { background: radial-gradient(ellipse at 90% 90%, #2a2a2e, #18181b); }
.event-directory-letter { font-family: var(--serif); color: #e6cf9f; opacity: 0.5; }
.event-directory-info strong { font-family: var(--sans); font-weight: 700; }
.event-directory-info small { color: var(--muted); }

/* ---------- Card popup: new credit line and social video ---------- */
.story-side .card-credit {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font: 500 12px/1.6 var(--sans);
}
.story-side .card-credit a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #8a6d3b;
  text-underline-offset: 4px;
}
.story-side .card-credit a:hover { color: #8a6d3b; }
.social-video-capsule { border-radius: 16px; }

/* ---------- Admin preview banner (inline style in the page head) ---------- */
body .admin-preview-banner {
  padding: 14px 6%;
  background: #18181b;
  color: var(--paper);
  border-bottom: 2px solid #2e2e33;
  font: 500 14px/1.6 var(--sans);
}
body .admin-preview-banner a { color: #e6cf9f; margin-left: 10px; }

/* ---------- Card effects added in November: keep them as designed ----------
   Our own hover sheen sits on .tile-art::after too. On tiles that carry one of
   the new effects, hand that layer back to the effect. */
.tile .tile-art[data-effect]::after,
.tile:hover .tile-art[data-effect]::after {
  border-radius: 0;
  transition: none;
}
.tile .tile-art[data-effect="sheen"]::after,
.tile:hover .tile-art[data-effect="sheen"]::after,
.tile .tile-art[data-effect="sparkle"]::after,
.tile:hover .tile-art[data-effect="sparkle"]::after {
  background-size: auto;
  background-position: 0 0;
  mix-blend-mode: normal;
}
.tile .tile-art[data-effect="sheen"]::after { right: auto; }

/* Featured preview: no caption text on screen (kept for screen readers) */
#featuredEvent .featured-event-media figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Play / pause: one big round button over the video */
#featuredEvent .featured-preview-toggle {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 72px;
  height: 72px;
  min-height: 0;
  padding: 0;
  gap: 0;
  translate: -50% -50%;
  border: 2px solid #ffffff40;
  border-radius: 50%;
  background: #0f0f1199;
  box-shadow: 0 12px 30px #00000066;
  transition: opacity 0.3s ease, scale 0.25s var(--ease-out), border-color 0.2s, background-color 0.2s;
}
#featuredEvent .featured-preview-toggle > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#featuredEvent .featured-preview-toggle svg { width: 24px; height: 24px; }
#featuredEvent .featured-preview-toggle[aria-pressed="false"] svg { translate: 2px 0; }
#featuredEvent .featured-preview-toggle:hover {
  border-color: #e6cf9f;
  background: #0f0f11cc;
  scale: 1.06;
}
#featuredEvent .featured-preview-toggle:active { scale: 0.96; }
/* While the video plays, the button steps back until you point at the video */
#featuredEvent .featured-preview-toggle[aria-pressed="true"] { opacity: 0; }
#featuredEvent .featured-event-frame:hover .featured-preview-toggle,
#featuredEvent .featured-preview-toggle:focus-visible { opacity: 1; }
@media (hover: none) {
  #featuredEvent .featured-preview-toggle[aria-pressed="true"] { opacity: 0.7; }
}
@media (max-width: 700px) {
  #featuredEvent .featured-preview-toggle { width: 52px; height: 52px; min-height: 0; padding: 0; }
  #featuredEvent .featured-preview-toggle svg { width: 18px; height: 18px; }
}
@media (max-width: 440px) {
  #featuredEvent .featured-preview-toggle { width: 64px; height: 64px; }
  #featuredEvent .featured-preview-toggle svg { width: 22px; height: 22px; }
}

/* ---------- Card popup: social video share controls ---------- */
.social-videos { border-top: 2px solid var(--line); }
.social-videos .video-native-share {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, #ea4664 0%, #d92d4f 52%, #c2213f 100%);
  color: #ffffff;
  font: 700 15px/1 var(--sans);
  box-shadow: inset 0 2px 0 #ffffff38, 0 10px 24px #d92d4f40;
  transition: background-color 0.2s, transform 0.2s var(--ease-out);
}
.social-videos .video-native-share:hover {
  background: linear-gradient(180deg, #f2566f 0%, #e23a5a 52%, #cc2a47 100%);
  color: #ffffff;
  transform: translateY(-2px);
}
.social-videos .video-more-options {
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
}
.social-videos .video-more-options:hover { border-color: #8a6d3b; color: #8a6d3b; }
.video-share-popover {
  padding: 8px;
  border: 2px solid #2e2e33;
  border-radius: 16px;
  background: #18181b;
  color: #f4f3f1;
  box-shadow: 0 20px 50px #00000080;
}
.social-videos .video-share-popover > a,
.social-videos .video-share-popover > button {
  border-radius: 10px;
  color: #f4f3f1;
  font: 500 14px/1.4 var(--sans);
}
.video-share-popover > a:hover,
.video-share-popover > button:hover { background: #2a2a2e; }

/* Card popup on phones: a smaller close button that floats over the corner,
   so the card can sit higher */
@media (max-width: 640px) {
  .close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: #0f0f11b3;
    border: 2px solid #ffffff2e;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .close:before,
  .close:after {
    width: 14px;
    height: 2px;
    background: #ffffff;
  }
  .card-side {
    padding-top: 24px;
  }
}

/* Phones: "Watch social video" button under the card buttons (from card-toast.js) */
.ic-jump-video { display: none; }
@media (max-width: 640px) {
  .ic-jump-video:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    min-height: 48px;
    margin: 10px auto 0;
    padding: 0 20px;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(180deg, #dcc08a 0%, #c4a56c 52%, #a88a55 100%);
    color: #ffffff;
    font: 700 15px/1 var(--sans);
    text-shadow: 0 1px 2px #00000059;
    box-shadow: inset 0 2px 0 #ffffff4d, 0 10px 24px #c4a56c40;
  }
  .ic-jump-video:active { transform: scale(0.97); }
}

/* Featured video: clean edge. A border + rounded overflow on a playing video
   leaves a ragged hairline in some browsers, so the rounding is a clip instead,
   the rim is drawn on top, and the shadow sits on the figure outside the clip. */
#featuredEvent .featured-event-media {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 24px 50px #000000a6, 0 0 60px #e6cf9f14;
}
#featuredEvent .featured-event-frame {
  border: 0;
  box-shadow: none;
  -webkit-clip-path: inset(0 round 20px);
  clip-path: inset(0 round 20px);
  isolation: isolate;
}
#featuredEvent .featured-event-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #ffffff1f;
}
#featuredEvent .featured-preview-toggle { z-index: 2; }
@media (max-width: 700px) {
  #featuredEvent .featured-event-media,
  #featuredEvent .featured-event-frame::after { border-radius: 14px; }
  #featuredEvent .featured-event-frame {
    -webkit-clip-path: inset(0 round 14px);
    clip-path: inset(0 round 14px);
  }
}

/* Compact French gallery date and autograph status. */
html[lang=fr] .tile-caption p{flex-wrap:wrap;gap:6px}
html[lang=fr] .tile-caption p>span:first-child{white-space:nowrap}
html[lang=fr] .tile-caption p>span:last-child{font-size:8px;letter-spacing:.2px;white-space:nowrap;overflow-wrap:normal;word-break:normal;padding:2px 6px;flex-shrink:0}
@media(max-width:640px){html[lang=fr] .tile-caption p>span:last-child{font-size:7px;letter-spacing:0;padding:2px 4px}}

/* More breathing room inside the French autograph badge. */
html[lang=fr] .tile-caption p>span:last-child{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;white-space:nowrap}
@media(max-width:640px){html[lang=fr] .tile-caption p>span:last-child{padding:4px 8px}}

/* Compact English gallery captions on narrow desktop, tablet and mobile. */
@media(max-width:1400px){html[lang=en] .tile-caption p{flex-wrap:wrap;gap:6px}html[lang=en] .tile-caption p>span:first-child{white-space:nowrap}html[lang=en] .tile-caption p>span:last-child{display:inline-flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.2px;white-space:nowrap;overflow-wrap:normal;word-break:normal;flex-shrink:0;padding:4px 10px}}
@media(max-width:640px){html[lang=en] .tile-caption p>span:last-child{font-size:7px;letter-spacing:0;padding:4px 8px}}
/* Mobile autograph-ready status: 20% larger in English and French. */
@media(max-width:640px){
 html[lang=en] .tile-caption p>span:last-child,
 html[lang=fr] .tile-caption p>span:last-child{font-size:8.4px;line-height:19.2px;padding:4.8px 9.6px}
}

.filter-row[hidden]{display:none!important}

/* Featured preview play / pause: icon only, centred on the video.
   (Higher specificity than featured-event.css, which loads after this file.) */
#featuredEvent .featured-event-frame .featured-preview-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-height: 0;
  padding: 0;
  gap: 0;
  translate: -50% -50%;
  border: 2px solid #ffffff40;
  border-radius: 50%;
  background: #0f0f1199;
  color: #ffffff;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 12px 30px #00000066;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease, scale 0.25s var(--ease-out), border-color 0.2s, background-color 0.2s;
}
#featuredEvent .featured-event-frame .featured-preview-toggle::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon-play) center / contain no-repeat;
  mask: var(--icon-play) center / contain no-repeat;
  translate: 2px 0;
}
#featuredEvent .featured-event-frame .featured-preview-toggle[aria-pressed="true"]::before {
  -webkit-mask-image: var(--icon-pause);
  mask-image: var(--icon-pause);
  translate: 0 0;
}
#featuredEvent .featured-event-frame .featured-preview-toggle svg { display: none; }
#featuredEvent .featured-event-frame .featured-preview-toggle:hover {
  border-color: #e6cf9f;
  background: #0f0f11cc;
  scale: 1.06;
}
#featuredEvent .featured-event-frame .featured-preview-toggle:active { scale: 0.96; }
/* While playing, the pause button steps back until you point at the video */
#featuredEvent .featured-event-frame .featured-preview-toggle[aria-pressed="true"] { opacity: 0; }
#featuredEvent .featured-event-frame:hover .featured-preview-toggle,
#featuredEvent .featured-event-frame .featured-preview-toggle:focus-visible { opacity: 1; }
@media (hover: none) {
  #featuredEvent .featured-event-frame .featured-preview-toggle[aria-pressed="true"] { opacity: 0.7; }
}
@media (max-width: 900px) {
  #featuredEvent .featured-event-frame .featured-preview-toggle { width: 56px; height: 56px; }
  #featuredEvent .featured-event-frame .featured-preview-toggle::before { width: 20px; height: 20px; }
}
/* Phones: your featured-event.css switches to tap-the-video, so the button stays hidden */
@media (max-width: 600px) {
  #featuredEvent .featured-event-frame .featured-preview-toggle { display: none; }
}

/* Featured carousel arrows: icons centred in the circles, grey outline, champagne hover */
#featuredEvent .featured-carousel-controls { gap: 12px; }
#featuredEvent .featured-carousel-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #3a3a3e;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 0;
  line-height: 0;
  transition: border-color 0.2s, color 0.2s, scale 0.2s var(--ease-out);
}
#featuredEvent .featured-carousel-controls button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-r) center / contain no-repeat;
  mask: var(--icon-arrow-r) center / contain no-repeat;
}
#featuredEvent #featuredPrevious::before {
  -webkit-mask-image: var(--icon-arrow-l);
  mask-image: var(--icon-arrow-l);
}
#featuredEvent .featured-carousel-controls button:hover:not(:disabled) {
  border-color: #e6cf9f;
  color: #e6cf9f;
}
#featuredEvent .featured-carousel-controls button:active:not(:disabled) { scale: 0.94; }
#featuredEvent .featured-carousel-controls button:disabled { opacity: 0.3; cursor: default; }
#featuredEvent .featured-carousel-controls span {
  min-width: 40px;
  color: var(--muted);
  font: 600 14px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
#featuredEvent .featured-carousel-controls button:focus-visible {
  outline: 2px solid #e6cf9f;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  #featuredEvent .featured-carousel-controls { gap: 8px; }
  #featuredEvent .featured-carousel-controls button { width: 40px; height: 40px; }
}
/* …matched to the hero slideshow arrows */
#featuredEvent .featured-carousel-controls button {
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff24;
  background: #ffffff0f;
  color: var(--paper);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
#featuredEvent .featured-carousel-controls button::before { width: 20px; height: 20px; }
#featuredEvent .featured-carousel-controls button:hover:not(:disabled) {
  border-color: var(--paper);
  background: var(--paper);
  color: #121214;
  transform: translateY(-2px);
}
#featuredEvent .featured-carousel-controls button:active:not(:disabled) { scale: 0.96; }
@media (max-width: 700px) {
  #featuredEvent .featured-carousel-controls button { width: 42px; height: 42px; }
  #featuredEvent .featured-carousel-controls button::before { width: 18px; height: 18px; }
}
/* Play icon: the triangle's own shape is already optically centred; no extra nudge */
#featuredEvent .featured-event-frame .featured-preview-toggle::before { translate: 0 0; }

/* Gallery: the "Event cards refresh automatically." line is hidden (toggled by card-toast.js) */
#feedStatus.ic-quiet { visibility: hidden; } /* keeps its space, so nothing below moves */

/* Card popup on touch screens: no focus ring on the close button when the popup opens.
   (The browser focuses it automatically; the ring is only useful with a keyboard.) */
@media (hover: none) and (pointer: coarse) {
  .close:focus,
  .close:focus-visible {
    outline: none;
  }
}

/* Back to top (added by card-toast.js): a round button with an up arrow, bottom right */
.ic-to-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  background: #18181be6;
  color: var(--paper);
  box-shadow: 0 12px 30px #00000059;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s var(--ease-out), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ic-to-top::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ic-to-top.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.ic-to-top:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: #121214;
}
.ic-to-top:active { scale: 0.94; }
.ic-to-top:focus-visible { outline: 2px solid #e6cf9f; outline-offset: 4px; }
@media (max-width: 640px) {
  .ic-to-top { width: 48px; height: 48px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ic-to-top::before { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ic-to-top { transition: opacity 0.2s ease; translate: none; }
}

#collectionModeBanner{margin:12px 0 20px}
#collectionModeBanner[hidden]{display:none}
#collectionModeBanner p{margin:0 0 8px;font-size:14px;color:#444}
#collectionModeBanner button{padding:9px 15px;min-height:44px;border:1px solid #d71f45;border-radius:999px;background:#d71f45;color:#fff;font-size:14px;font-weight:700}
#collectionModeBanner button:focus-visible{outline:2px solid #25252a;outline-offset:3px}