.media-page { --media-line:rgba(216,189,130,.22); overflow-x:clip; }
.media-page .page-hero { position:relative; isolation:isolate; overflow:clip; }
.media-page .page-hero::after { content:""; position:absolute; width:min(68vw,720px); aspect-ratio:1; right:-15%; top:-30%; z-index:-1; border:1px solid rgba(216,189,130,.12); border-radius:50%; box-shadow:0 0 0 75px rgba(174,150,214,.025),0 0 0 150px rgba(174,150,214,.02); pointer-events:none; }
.media-page .page-hero h1 { max-width:850px; }
.media-page .page-hero .hero-deck { max-width:620px; font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.75; color:#c4c4d0; }
.media-jump { display:flex; flex-wrap:wrap; gap:12px 25px; border-bottom:1px solid var(--media-line); padding:15px 0; }
.media-jump a { color:#d8bd82; font-size:.8rem; text-decoration:none; }
.cinema-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,80px); align-items:center; }
.media-page h2 { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.95rem,3.1vw,2.9rem); font-weight:500; line-height:1.08; margin:10px 0 20px; }
.media-page h3 { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.55rem,2.2vw,2rem); font-weight:500; line-height:1.16; }
.media-page .cinema-copy > p:not(.eyebrow), .media-page .creator-copy > p:not(.eyebrow) { color:#c4c4d0; line-height:1.85; }
.reel-stage { position:relative; min-width:0; min-height:350px; padding:22px; border:1px solid var(--media-line); border-radius:12px; background:radial-gradient(ellipse at 18% 85%,#282744 0,transparent 60%),#0c1020; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.reel-stage::before,.reel-stage::after { content:""; position:absolute; z-index:-1; width:330px; aspect-ratio:1; border:1px solid rgba(216,189,130,.18); transform:rotate(30deg); animation:reel-orbit-drift 64s linear infinite; }
.reel-stage::after { width:390px; transform:rotate(60deg); opacity:.45; animation-duration:94s; animation-direction:reverse; }
.reel-cover { display:grid; justify-items:center; text-align:center; width:100%; gap:18px; }
.has-reel-preview { padding:20px 18px; }
.has-reel-preview .reel-cover { gap:15px; }
.has-reel-preview .reel-cover .eyebrow { margin:0; }
.reel-thumbnail-button { display:block; padding:0; max-width:184px; width:100%; background:#080b17; border:1px solid #d8bd8255; overflow:hidden; border-radius:8px; }
.reel-thumbnail { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:#080b17; }
.thumbnail-cta { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 16px; color:#e7d6b4; font-size:.74rem; }
.reel-thumbnail-button:hover { border-color:#d8bd82; background:#17172c; }
.reel-preview-credit { font-size:.64rem; line-height:1.65; color:#b8aec6; text-underline-offset:4px; }
.reel-preview-credit:hover { color:#d8bd82; }
.reel-cover .reel-orbit { width:148px; aspect-ratio:1; border:1px solid #d8bd8280; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:linear-gradient(135deg,#d8bd8222,#8281b122); display:grid; place-items:center; }
.reel-orbit svg { width:51px; height:51px; color:#d8bd82; }
.reel-label { color:#eeeadf; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.65rem; margin:0; }
.reel-consent { max-width:300px; margin:0; color:#a7aabd; font-size:.73rem; line-height:1.7; }
.media-load,.media-unload { font:inherit; cursor:pointer; }
.media-load { border:1px solid #d8bd8290; color:#f2e2bf; padding:13px 22px; background:#d8bd8210; border-radius:5px; font-size:.8rem; transition:background .2s,border-color .2s; }
.media-load:hover { background:#d8bd8228; border-color:#d8bd82; }
.media-unload { display:block; width:100%; padding:10px; border:0; background:transparent; color:#d8bd82; text-decoration:underline; text-underline-offset:4px; font-size:.75rem; }
.reel-player { display:grid; justify-items:center; width:100%; }
.reel-player iframe { border:0; width:min(100%,440px); height:580px; border-radius:5px; background:#fff; }
.reel-player video { display:block; width:min(100%,360px); height:auto; max-height:640px; object-fit:contain; border-radius:5px; background:#070911; }
.media-backup { margin-top:12px; max-width:100%; }
.reel-status { font-size:.72rem; color:#a7aabd; text-align:center; line-height:1.6; padding:0 8px; margin:15px 0 0; max-width:360px; }
.source-link { display:inline-block; color:#d8bd82; font-size:.8rem; text-underline-offset:5px; margin-top:20px; }
.source-link .external { margin-left:5px; }
.media-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.72rem; color:#a7aabd; margin:26px 0; }
.media-meta span + span::before { content:"·"; color:#d8bd82; margin-right:18px; }
.listen-notes { padding:18px 0 0; border-top:1px solid var(--media-line); margin-top:24px; }
.listen-notes p { font-size:.83rem; line-height:1.8; color:#aaaebf; max-width:440px; }
.listen-notes strong { display:block; margin-bottom:9px; color:#e4ddcc; font-size:.78rem; font-weight:600; }
.media-divider { display:flex; align-items:center; gap:20px; padding:20px 0; font-size:.67rem; text-transform:uppercase; letter-spacing:.22em; color:#aa98c8; }
.media-divider::before,.media-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--media-line)); }
.media-divider::after { transform:rotate(180deg); }
.story-invitation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--media-line); border-radius:12px; background:#101426; overflow:hidden; }
.story-invitation img { display:block; width:100%; height:100%; object-fit:cover; object-position:38% center; }
.story-invitation > div { padding:clamp(24px,3.5vw,38px); }
.story-invitation p:not(.eyebrow) { font-size:.9rem; color:#bdc1ce; line-height:1.85; }
.story-invitation .story-disclaimer { padding-top:20px; margin-top:25px; border-top:1px solid var(--media-line); font-size:.76rem; color:#a7aabd; }
.journey-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:25px; }
.journey-link { display:block; padding:22px 18px; border-top:1px solid var(--media-line); text-decoration:none; transition:background .2s; }
.journey-link:hover { background:#d8bd8208; }
.journey-link .route-number { color:#b89bcc; font-size:.68rem; letter-spacing:.2em; }
.journey-link h3 { color:#eee7d7; margin:15px 0 12px; }
.journey-link p { font-size:.86rem; color:#aaaebf; line-height:1.75; margin:0; }
.journey-link .route-arrow { display:block; color:#d8bd82; margin-top:23px; font-size:1.2rem; }
.review-hero .review-quote { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.3rem,4vw,3.4rem); line-height:1.1; font-weight:400; max-width:760px; margin:20px 0; color:#f1e9d9; }
.review-hero .review-quote em { color:#d8bd82; font-weight:400; }
.review-credit { display:flex; align-items:center; gap:18px; margin-top:23px; color:#c4c4d0; font-size:.83rem; }
.review-credit::before { content:""; display:block; width:44px; height:1px; background:#d8bd82; }
.review-credit strong { display:block; color:#f1e9d9; font-weight:500; margin-bottom:7px; }
.review-credit span { font-size:.72rem; color:#a7aabd; }
.quote-caption { color:#aaaebf; font-size:.72rem; line-height:1.7; max-width:540px; }
.notice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:25px; }
.notice-grid article { padding-top:24px; border-top:1px solid var(--media-line); }
.notice-grid .notice-symbol { color:#d8bd82; font-size:1.5rem; }
.notice-grid h3 { margin:18px 0 16px; }
.notice-grid p { font-size:.87rem; color:#aaaebf; line-height:1.85; }
.stockist-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr); gap:35px; padding:clamp(24px,3vw,36px); border:1px solid var(--media-line); border-radius:12px; background:linear-gradient(120deg,#18243255,#15142766); align-items:center; }
.stockist-panel p:not(.eyebrow) { font-size:.9rem; color:#aaaebf; line-height:1.85; }
.stockist-details { border-left:1px solid var(--media-line); padding-left:38px; }
.stockist-details h3 { margin:0 0 12px; }
.creator-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,5vw,70px); align-items:center; }
.creator-hero h1 { margin-top:20px; }
.creator-scene { margin:0; min-width:0; position:relative; }
.creator-scene::before { content:""; position:absolute; inset:-20px; border:1px solid var(--media-line); border-radius:50%; z-index:-1; transform:rotate(-20deg); }
.creator-scene img { display:block; width:100%; height:auto; aspect-ratio:4/3.6; object-fit:cover; object-position:36% center; border-radius:160px 160px 8px 8px; }
.creator-scene figcaption { margin-top:16px; color:#999eaf; line-height:1.6; font-size:.68rem; }
.creator-prose { max-width:840px; margin:auto; }
.creator-prose p { font-size:clamp(.95rem,1.1vw,1.05rem); color:#c4c4d0; line-height:1.85; }
.creator-prose .drop-cap::first-letter { float:left; font-family:"Cormorant Garamond",Georgia,serif; font-size:4.8rem; line-height:.75; color:#d8bd82; margin:11px 12px 0 0; }
.creator-prose .editorial-emphasis { color:#ece2ce; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.8rem,3.5vw,3.1rem); line-height:1.3; padding:28px 0; margin:35px 0; border-top:1px solid var(--media-line); border-bottom:1px solid var(--media-line); }
.creator-lineage { display:grid; grid-template-columns:125px minmax(0,1fr); gap:25px; max-width:840px; margin:27px auto 0; }
.creator-lineage .lineage-label { font-size:.72rem; color:#d8bd82; padding-top:10px; letter-spacing:.12em; text-transform:uppercase; }
.creator-lineage h3 { margin:0 0 17px; }
.creator-lineage p { color:#aaaebf; line-height:1.85; font-size:.9rem; }
.creator-lineage + .creator-lineage { border-top:1px solid var(--media-line); padding-top:25px; }
.creator-chapters { max-width:840px; margin-inline:auto; }
.creator-timeline { list-style:none; padding:0; margin:30px 0 20px; }
.creator-timeline li { display:grid; grid-template-columns:95px minmax(0,1fr); gap:24px; padding:23px 0; border-top:1px solid var(--media-line); }
.creator-year { color:#d8bd82; font-size:.8rem; letter-spacing:.07em; line-height:1.7; padding-top:5px; }
.creator-timeline h3 { margin:0 0 12px; font-size:1.8rem; }
.creator-timeline p { margin:0; font-size:.93rem; line-height:1.85; }
.creator-prose .creator-story-note { font-size:.72rem; color:#aaaebf; border-left:1px solid var(--media-line); padding-left:16px; margin:15px 0 22px; }
.creator-art-collaboration { max-width:970px; margin:auto; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:45px; align-items:center; }
.creator-art-figure { margin:0; min-width:0; padding:20px; border:1px solid var(--media-line); background:radial-gradient(ellipse,rgba(147,118,180,.12),transparent 75%); border-radius:8px; }
.creator-card-art { display:block; width:100%; height:auto; aspect-ratio:1725/1497; overflow:hidden; }
.creator-art-figure figcaption { color:#d8bd82; font-size:.68rem; letter-spacing:.05em; text-align:center; margin-top:18px; }
.creator-source-notes { padding:0 0 30px; }
.creator-source-notes details { max-width:840px; margin:auto; border-top:1px solid var(--media-line); padding-top:16px; font-size:.7rem; color:#9fa4b7; }
.creator-source-notes summary { width:fit-content; cursor:pointer; text-underline-offset:4px; }
.creator-source-notes p { line-height:1.85; margin-top:15px; }
.creator-source-notes a { color:#bdabcf; text-underline-offset:4px; }
.creator-source-notes summary:focus-visible { outline:2px solid #d8bd82; outline-offset:5px; }
.meaning-questions { list-style:none; padding:0; counter-reset:meaning; margin:34px 0; }
.meaning-questions li { padding:22px 0; border-top:1px solid var(--media-line); display:grid; grid-template-columns:45px minmax(0,1fr); gap:18px; color:#d8d3df; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.55rem; line-height:1.35; }
.meaning-questions li::before { counter-increment:meaning; content:counter(meaning,decimal-leading-zero); color:#aa98c8; font-family:Manrope,Arial,sans-serif; font-size:.68rem; padding-top:9px; }
.media-page .closing-invitation { text-align:center; padding:38px 24px; border-top:1px solid var(--media-line); }
.media-page .closing-invitation p:not(.eyebrow) { color:#aaaebf; max-width:540px; margin:0 auto 30px; line-height:1.85; }
.media-page .closing-invitation .actions { justify-content:center; }
.media-load:focus-visible,.media-unload:focus-visible,.media-jump a:focus-visible,.journey-link:focus-visible { outline:2px solid #d8bd82; outline-offset:5px; }
[hidden] { display:none !important; }
@keyframes reel-orbit-drift { from { transform:rotate(30deg); } to { transform:rotate(390deg); } }
body.motion-paused .reel-stage::before,body.motion-paused .reel-stage::after { animation-play-state:paused; }
@media(max-width:850px) { .cinema-layout,.creator-hero,.stockist-panel { grid-template-columns:1fr; } .creator-hero { gap:28px; } .creator-scene { max-width:440px; margin:8px auto 0; width:100%; } .creator-scene img { aspect-ratio:5/4; border-radius:140px 140px 8px 8px; } .journey-links { gap:10px; } .journey-link { padding:22px 18px; } .stockist-details { border-left:0; border-top:1px solid var(--media-line); padding:22px 0 0; } .notice-grid { gap:24px; } }
@media(max-width:600px) { .media-page .page-hero::after { right:-40%; top:-10%; } .media-jump { gap:13px 20px; } .reel-stage { min-height:320px; padding:20px 16px; } .reel-player iframe { height:570px; } .story-invitation { grid-template-columns:1fr; } .story-invitation img { aspect-ratio:16/9; height:auto; } .journey-links,.notice-grid { grid-template-columns:1fr; } .journey-link { padding:20px 0; } .notice-grid { gap:20px; } .creator-lineage { grid-template-columns:1fr; gap:12px; } .creator-lineage .lineage-label { padding:0; } .creator-prose .drop-cap::first-letter { font-size:4.2rem; } .media-meta { gap:8px 12px; } .media-meta span + span::before { margin-right:12px; } .stockist-panel { gap:25px; } }
@media(prefers-reduced-motion:reduce) { .media-load,.journey-link { transition:none; } .reel-stage::before,.reel-stage::after { animation:none; } }
@media(max-width:700px) { .creator-timeline li { grid-template-columns:74px minmax(0,1fr); gap:17px; padding-block:20px; } .creator-year { font-size:.72rem; } .creator-timeline h3 { font-size:1.55rem; } .creator-timeline p { font-size:.85rem; } .creator-art-collaboration { grid-template-columns:1fr; gap:25px; } .creator-art-figure { max-width:290px; margin:auto; width:100%; } .creator-chapters { gap:13px 19px; } }
@media(max-width:360px) { .creator-timeline li { grid-template-columns:1fr; gap:8px; } .creator-year { padding-top:0; } }
/* Keep the event portrait complete: no arch or landscape crop over the hat, hands or card. */
.benjamin-page .creator-portrait { width:100%; max-width:370px; margin-inline:auto; }
.benjamin-page .creator-portrait::before { inset:-9px; border-radius:12px; transform:none; }
.benjamin-page .creator-portrait img { aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:8px; }
@media(max-width:600px) { .benjamin-page .creator-portrait { max-width:280px; } }
