/* Immersive stories: the original photo stays intact; all copy and controls remain
   reachable with keyboard, zoom, a short viewport, or reduced motion enabled. */
body.story-viewer-open{overflow:hidden}
dialog.story-dialog{--demo-text:#fff7fa;--demo-muted:#d4c6d1;--demo-border:#ffffff2b;--demo-raised:#292129;--demo-accent:#ff9eb9;box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:auto;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:#100d11;color:var(--demo-text);font-family:"DM Sans",Arial,sans-serif;color-scheme:dark;overflow:auto;overscroll-behavior:contain;box-shadow:0 25px 100px #0008;scrollbar-width:thin;scrollbar-color:#ffffff40 #100d11}
dialog.story-dialog::backdrop{background:#09070cf0;backdrop-filter:blur(12px)}
.story-dialog *,.story-dialog *::before,.story-dialog *::after{box-sizing:border-box}
.story-dialog :focus-visible{outline:3px solid #ffdca8;outline-offset:3px}
.story-dialog button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.story-dialog button:disabled{opacity:.35;cursor:default}
.story-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:440px;min-height:min(740px,calc(100dvh - 32px));height:min(840px,calc(100dvh - 32px));margin:auto;background:#100d11;border-radius:inherit;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.story-image{position:absolute;z-index:-2;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#100d11;border-radius:inherit;user-select:none;-webkit-user-drag:none}
.story-scrim{position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,#070609b3 0%,#07060914 24%,#07060900 39%,#07060938 61%,#070609a3 81%,#070609e0 100%)}
.story-viewer-head{position:sticky;top:0;z-index:5;flex-shrink:0;padding:12px 13px 11px;background:linear-gradient(180deg,#100d11ed,#100d11a6 65%,#100d1100);border-top-left-radius:inherit;border-top-right-radius:inherit}
.story-progress{display:flex;align-items:center;gap:4px;width:100%;height:3px;margin-bottom:11px}
.story-progress-segment{position:relative;display:block;flex:1 1 0;min-width:0;height:3px;overflow:hidden;border-radius:2px;background:#ffffff45}
.story-progress-fill{display:block;width:var(--story-progress,0%);height:100%;background:#fff;border-radius:inherit;transition:none}
.story-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.story-person{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;text-align:left}
.story-person>.avatar{flex-shrink:0;width:35px;height:35px;border:1px solid #ffffff70;object-fit:cover;object-position:center 28%;font-size:13px}
.story-person>span:not(.avatar),.story-person>div{display:grid;gap:1px;min-width:0}
.story-person strong{display:block;max-width:100%;font-size:12px;line-height:1.45;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-person small{display:block;font-size:9px;line-height:1.5;font-weight:400;color:#e0d3dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-viewer-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.story-control{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:44px;min-width:44px;height:44px;min-height:44px;border:1px solid #ffffff26;border-radius:50%;padding:9px;background:#130f17b8;cursor:pointer}
.story-control:hover{background:#3e303fde;border-color:#ffffff80}
.story-control>.icon{width:20px;height:20px}
.story-control-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.story-toggle{font-size:17px;font-weight:650;line-height:1}
.story-nav{position:absolute;z-index:4;top:36%;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:9px;border:1px solid #ffffff45;border-radius:50%;background:#160e1ba8;color:#fff;backdrop-filter:blur(6px);cursor:pointer}
.story-nav:hover{background:#4c374ee6;border-color:#fff}
.story-nav>.icon{width:20px;height:20px}
.story-prev{left:11px}
.story-next{right:11px}
.story-viewer-copy{position:relative;z-index:2;flex-shrink:0;margin-top:auto;padding:68px 24px 13px;background:linear-gradient(180deg,transparent,#100d11a8 17%,#100d11e0 45%,#100d11f5 100%);overflow-wrap:anywhere}
.story-kicker{display:flex;align-items:center;gap:7px;margin:0 0 9px;color:#ffd7e5;font-size:8px;line-height:1.55;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.story-viewer-copy h2{margin:0 0 7px;color:#fff9fc;font-family:"DM Serif Display",Georgia,serif;font-size:42px;line-height:1.12;font-weight:400;letter-spacing:-.035em;overflow-wrap:anywhere}
.story-viewer-copy h2>span{font-family:"DM Sans",Arial,sans-serif;font-size:.65em;font-weight:400;letter-spacing:-.025em;color:#f2e7ef}
.story-location{display:flex;align-items:center;gap:5px;color:#ecdee8;font-size:11px;line-height:1.6;margin:0 0 13px}
.story-location>.icon{width:14px;height:14px}
.story-dialog .profile-badges{gap:6px;margin:0 0 12px}
.story-dialog .profile-badge{font-size:9px;padding:7px 8px;gap:4px;min-height:32px}
.story-dialog button.profile-badge{min-height:44px}
.story-dialog .profile-badge>small{font-size:7px}
.story-bio{color:#f7edf4;font-size:12px;line-height:1.8;margin:0 0 12px}
.story-interest-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin-bottom:19px}
.story-interest-list>span{max-width:100%;padding:5px 9px;border:1px solid #ffffff2b;border-radius:20px;background:#ffffff0c;color:#e4d5df;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.story-profile-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:11px 16px;border:1px solid #ffc3d8;border-radius:11px;background:#ffc1d6;color:#381b2b!important;font-size:12px;font-weight:650;line-height:1.5;box-shadow:0 5px 22px #05030726;cursor:pointer}
.story-profile-cta:hover{background:#ffdae7}
.story-profile-cta>.icon{width:17px;height:17px}
.story-disclaimer{color:#c3b1bf;font-size:9px;line-height:1.65;text-align:center;margin:10px 0 0;overflow-wrap:anywhere}
.story-viewer-position{position:relative;z-index:2;flex-shrink:0;width:100%;background:#100d11f5;padding:0 18px 14px;margin:0;color:#c0adbc;font-size:9px;line-height:1.5;text-align:center}
.story-play-state{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.story-image-fallback{position:absolute;z-index:-2;inset:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:14px;padding:140px 20px 20px;background:radial-gradient(ellipse at 50% 15%,#513b50,#171019 63%);border-radius:inherit;color:#e2cbdc;text-align:center}
.story-image-fallback>.avatar{width:112px;height:112px;background:#a96e943d;border:1px solid #d599be40;color:#ffeaf7;font-family:"DM Serif Display",Georgia,serif;font-size:43px}
.story-image-fallback>p{max-width:240px;margin:0;font-size:11px;line-height:1.65}
@media(min-width:768px){dialog.story-dialog{width:440px;max-width:calc(100vw - 32px)}}
@media(max-width:767px){
 dialog.story-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border-radius:0}
 .story-stage{max-width:560px;min-height:100dvh;height:100dvh;border-radius:0}
 .story-viewer-head{padding:calc(12px + env(safe-area-inset-top)) 13px 11px}
 .story-viewer-copy{padding:60px 23px 12px}
 .story-viewer-copy h2{font-size:40px}
 .story-viewer-position{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
 .story-nav{top:34%}
 .story-image-fallback{padding-top:calc(140px + env(safe-area-inset-top))}
}
@media(max-width:380px){
 .story-viewer-head{padding-inline:10px}
 .story-viewer-toolbar{gap:5px}
 .story-viewer-controls{gap:2px}
 .story-person{gap:7px}
 .story-person>.avatar{width:32px;height:32px}
 .story-person strong{font-size:11px}
 .story-person small{font-size:8px}
 .story-viewer-copy{padding:52px 17px 11px}
 .story-viewer-copy h2{font-size:35px}
 .story-kicker{font-size:7px;letter-spacing:.1em}
 .story-bio{font-size:11px;line-height:1.75}
 .story-dialog .profile-badge{font-size:8px;padding:6px;gap:3px}
 .story-interest-list{gap:5px;margin-bottom:15px}
 .story-interest-list>span{font-size:9px;padding:4px 8px}
 .story-prev{left:9px}
 .story-next{right:9px}
 .story-disclaimer{font-size:8px}
}
/* Short screens and zoom use the same complete document in a scrollable stage.
   Sticky controls stay reachable instead of clipping the CTA or biography. */
@media(max-height:680px){
 .story-stage{min-height:0;height:calc(100dvh - 32px);overflow:auto}
 .story-viewer-copy{margin-top:120px;padding-top:54px}
 .story-viewer-head{background:linear-gradient(180deg,#100d11fa,#100d11e8 85%,#100d11c4)}
 .story-nav{top:142px}
 .story-image{height:100%;min-height:560px;object-position:center top}
 .story-image-fallback{padding-top:100px}
}
@media(max-width:767px) and (max-height:680px){
 .story-stage{height:100dvh;min-height:0}
 .story-viewer-copy{margin-top:105px}
 .story-nav{top:calc(126px + env(safe-area-inset-top))}
}
@media(orientation:landscape) and (max-height:600px){
 dialog.story-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .story-stage{max-width:620px;height:100dvh;min-height:0;overflow:auto;border-radius:0}
 .story-image{min-height:680px;object-position:center top}
 .story-viewer-head{padding-top:calc(8px + env(safe-area-inset-top))}
 .story-viewer-copy{margin-top:120px;padding-inline:32px}
 .story-viewer-copy h2{font-size:35px}
 .story-nav{top:120px}
 .story-viewer-position{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.story-dialog,.story-dialog *{scroll-behavior:auto;animation:none;transition:none}}
@media(forced-colors:active){
 dialog.story-dialog,.story-stage{background:Canvas;color:CanvasText;border:1px solid CanvasText}
 .story-viewer-head,.story-viewer-copy,.story-viewer-position{background:Canvas;color:CanvasText}
 .story-control,.story-nav,.story-profile-cta,.story-dialog .profile-badge,.story-interest-list>span{background:ButtonFace;color:ButtonText!important;border:1px solid ButtonText}
 .story-progress-segment{background:Canvas;border:1px solid CanvasText;height:4px}
 .story-progress-fill{background:Highlight;forced-color-adjust:none}
 .story-viewer-copy h2,.story-viewer-copy h2>span,.story-bio,.story-location,.story-kicker,.story-disclaimer,.story-person small{color:CanvasText}
}