/* Hallmark · macrostructure: Split Studio · tone: cinematic utility · anchor hue: coral */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · contrast: pass (40–41) · honest: pass (46) · tokens: pass (48) · mobile: pass (34,49–57) */
/* Variation knobs · hero scale: 80% · ranking: numeric podium · sharing: destination landing */

html,body{overflow-x:clip}

.v217-ranking .v215-ranking-row{grid-template-columns:40px 54px minmax(0,1fr) auto}
.v217-ranking .v216-rank-badge,.v217-ranking .v216-rank-badge.is-tier-1,.v217-ranking .v216-rank-badge.is-tier-2,.v217-ranking .v216-rank-badge.is-tier-3{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper-soft);color:var(--color-muted)}
.v217-ranking .v216-rank-badge svg{display:none!important}
.v217-ranking .v216-rank-badge b{position:relative;z-index:1;color:inherit;font-family:var(--font-mono);font-size:.8rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.v217-ranking .v216-rank-badge.is-tier-1{border-color:var(--color-accent-warm);background:color-mix(in oklab,var(--color-accent-warm) 22%,var(--color-paper-soft));color:var(--color-ink)}
.v217-ranking .v216-rank-badge.is-tier-2{border-color:var(--color-muted);background:color-mix(in oklab,var(--color-ink) 12%,var(--color-paper-soft));color:var(--color-ink)}
.v217-ranking .v216-rank-badge.is-tier-3{border-color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 18%,var(--color-paper-soft));color:var(--color-ink)}

.hero-carousel-section{padding:var(--space-4) 0 var(--space-5)}
.hero-carousel-track{gap:var(--space-3);padding-inline:max(12vw,var(--space-5))}
.hero-slide{flex-basis:clamp(288px,51.2vw,720px)}
.hero-slide-media{aspect-ratio:16/7}
.v218-hero-overlay{position:absolute;z-index:2;inset:auto var(--space-3) var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);color:var(--color-ink);text-align:start}
.v218-hero-overlay strong{min-width:0;overflow:hidden;font-family:var(--font-display);font-size:clamp(.88rem,2.3vw,1.45rem);font-style:normal;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}
.v218-hero-cta{flex:0 0 auto;min-height:32px;border:1px solid color-mix(in oklab,var(--color-ink) 42%,transparent);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);background:var(--color-ink);color:var(--color-paper);font-family:var(--font-body);font-size:.68rem;font-weight:900;line-height:1;white-space:nowrap}
.hero-carousel-meta{gap:0;margin-block-start:var(--space-2)}
.hero-carousel-meta>h1,.hero-carousel-meta>p,.hero-carousel-meta>.hero-watch,.hero-carousel-meta>.v214-hero-label{display:none}

.v218-share-sheet{width:min(calc(100% - var(--space-6)),420px);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:0;background:var(--color-paper-raised);color:var(--color-ink);box-shadow:0 24px 72px color-mix(in oklab,var(--color-paper) 82%,transparent)}
.v218-share-sheet::backdrop{background:var(--color-overlay)}
.v218-share-sheet>section{padding:var(--space-5)}
.v218-share-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.v218-share-sheet header>div{min-width:0}
.v218-share-sheet header span{color:var(--color-accent);font-family:var(--font-mono);font-size:.62rem;font-weight:900;letter-spacing:.12em}
.v218-share-sheet h2{min-width:0;margin:var(--space-1) 0 0;font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere}
.v218-share-sheet p{max-width:60ch;margin:var(--space-2) 0 0;color:var(--color-muted);font-size:.78rem;line-height:1.45}
.v218-share-sheet [data-v218-close]{display:grid;flex:0 0 auto;width:44px;height:44px;place-items:center;border:0;border-radius:50%;padding:0;background:transparent;color:var(--color-muted);font-size:1.4rem}
.v218-share-actions{display:grid;gap:var(--space-2);margin-block-start:var(--space-5)}
.v218-share-actions button,.v218-share-actions a{display:grid;min-height:44px;place-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);background:var(--color-paper-soft);color:var(--color-ink);font-weight:800;text-decoration:none;white-space:nowrap}
.v218-share-actions>:first-child{border-color:transparent;background:var(--color-accent);color:var(--color-accent-ink)}
.v218-share-sheet button:hover,.v218-share-sheet a:hover{filter:brightness(1.08)}
.v218-share-sheet button:focus-visible,.v218-share-sheet a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.v218-share-sheet button:active,.v218-share-sheet a:active{opacity:.74}
.v218-share-sheet button:disabled{cursor:wait;opacity:.55}
.v218-share-sheet output{display:block;min-height:1lh;margin-block-start:var(--space-3);color:var(--color-success);font-size:.74rem;text-align:center}

body.v218-share-landing .topbar nav,body.v218-share-landing .topbar .tools,body.v218-share-landing .bottom,body.v218-share-landing #appInstallBanner{display:none!important}
body.v218-share-landing .topbar{justify-content:center}
.v218-watch-loading,.v218-watch-empty{display:grid;min-height:70svh;place-content:center;justify-items:center;gap:var(--space-3);padding:var(--space-6);text-align:center}
.v218-watch-empty h1{min-width:0;margin:0;font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere}
.v218-watch-empty p{max-width:55ch;margin:0;color:var(--color-muted)}
.v218-watch-empty a{min-height:44px;border-radius:var(--radius-pill);padding:var(--space-3) var(--space-4);background:var(--color-accent);color:var(--color-accent-ink);font-weight:900;text-decoration:none;white-space:nowrap}
.v218-watch-landing{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);min-height:calc(100svh - 72px);background:var(--color-paper)}
.v218-watch-art{position:relative;min-height:60svh;background:var(--color-paper-soft) center/cover no-repeat}
.v218-watch-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in oklab,var(--color-paper) 82%,transparent),transparent 52%)}
.v218-watch-art>span{position:absolute;z-index:1;inset:auto auto var(--space-5) var(--space-5);color:var(--color-ink);font-family:var(--font-display);font-size:.82rem;font-weight:900;letter-spacing:.08em}
.v218-watch-copy{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(var(--space-5),7vw,var(--space-8))}
.v218-watch-back{align-self:flex-start;color:var(--color-muted);font-size:.76rem;text-decoration:none;white-space:nowrap}
.v218-watch-back:hover{color:var(--color-ink)}
.v218-watch-back:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.v218-watch-back:active{opacity:.74}
.v218-watch-copy>h1{min-width:0;max-width:18ch;margin:var(--space-5) 0 0;font-family:var(--font-display);font-size:clamp(2rem,5vw,4.8rem);font-style:normal;line-height:1;overflow-wrap:anywhere}
.v218-watch-summary{display:-webkit-box;max-width:62ch;margin:var(--space-3) 0 0;overflow:hidden;color:var(--color-muted);line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.v218-watch-heading{margin-block-start:var(--space-6);padding-block-start:var(--space-5);border-block-start:1px solid var(--color-rule)}
.v218-watch-heading h2{min-width:0;margin:0;font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere}
.v218-watch-heading p{max-width:60ch;margin:var(--space-2) 0 0;color:var(--color-muted);font-size:.8rem}
.v218-watch-destinations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-block-start:var(--space-4)}
.v218-watch-destinations[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.v218-watch-destinations a,.v218-watch-destinations button{display:grid;min-width:0;min-height:68px;align-content:center;gap:var(--space-1);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);background:var(--color-paper-raised);color:var(--color-ink);text-align:start;text-decoration:none}
.v218-watch-destinations span{color:var(--color-accent);font-family:var(--font-mono);font-size:.58rem;font-weight:900;letter-spacing:.08em}
.v218-watch-destinations b{min-width:0;overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.v218-watch-destinations a:hover{border-color:var(--color-muted)}
.v218-watch-destinations a:focus-visible,.v218-watch-share:focus-visible,.v218-watch-empty a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.v218-watch-destinations a:active,.v218-watch-share:active,.v218-watch-empty a:active{opacity:.74}
.v218-watch-destinations button:disabled{cursor:not-allowed;opacity:.55}
.v218-watch-share{align-self:flex-start;min-height:44px;margin-block-start:var(--space-4);border:0;border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);background:transparent;color:var(--color-muted);font-weight:800;white-space:nowrap}
.v218-watch-share:hover{color:var(--color-ink)}
.v218-watch-share:disabled{cursor:not-allowed;opacity:.55}

@media(max-width:51.25rem){
  .hero-carousel-track{padding-inline:24.4vw}
  .hero-slide{flex-basis:51.2vw;max-width:256px}
  .hero-slide-media{aspect-ratio:2/3}
  .v218-hero-overlay{align-items:stretch;flex-direction:column;gap:var(--space-2)}
  .v218-hero-cta{align-self:flex-start;min-height:28px;padding:var(--space-2)}
  .v218-watch-landing{grid-template-columns:minmax(0,1fr)}
  .v218-watch-art{min-height:min(56svh,540px)}
  .v218-watch-copy{padding:var(--space-5) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom))}
  .v218-watch-copy>h1{font-size:clamp(1.8rem,9vw,3.3rem)}
}

@media(max-width:24rem){
  .hero-carousel-track{padding-inline:24vw}
  .hero-slide{flex-basis:52vw}
  .v218-hero-overlay{inset:auto var(--space-2) var(--space-2)}
  .v218-hero-overlay strong{font-size:.8rem}
  .v218-watch-destinations{grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .hero-slide,.v218-share-sheet button,.v218-watch-destinations a,.v218-watch-share{transition-duration:var(--duration-fast)!important}
}