/* The Cases and Team pages inherit the visual world selected by ?story=. */
.story-subpage{
  --sub-bg:var(--v-bg);
  --sub-ink:var(--v-ink);
  --sub-accent:var(--v-accent);
  --sub-panel:var(--v-panel);
  --sub-panel-alt:color-mix(in srgb,var(--v-panel) 78%,var(--v-bg));
  --sub-line:var(--v-line);
  --sub-button-ink:var(--v-bg);
  margin:0;
  background:var(--sub-bg);
  color:var(--sub-ink);
}

.story-subpage .site-header.inner-header{
  position:fixed;
  color:var(--sub-ink);
  border-color:var(--sub-line);
  background:color-mix(in srgb,var(--sub-bg) 84%,transparent);
  backdrop-filter:blur(15px);
}
.story-subpage .site-header.nav-scrolled{background:color-mix(in srgb,var(--sub-bg) 94%,transparent);box-shadow:0 1px 0 var(--sub-line)}
.story-subpage .menu-toggle i{background:var(--sub-ink)}
.story-subpage .nav-cta{color:var(--sub-accent);border-color:var(--sub-accent)}
.story-subpage .nav-cta:hover{color:var(--sub-button-ink);background:var(--sub-accent)}
.story-subpage .variant-menu-panel{color:var(--sub-ink);background:var(--sub-panel);border-color:var(--sub-accent);box-shadow:0 18px 46px rgba(0,0,0,.28)}
.story-subpage .variant-menu-panel a:hover,.story-subpage .variant-menu-panel a[aria-current=page]{background:color-mix(in srgb,var(--sub-accent) 15%,var(--sub-panel))}
.story-subpage .variant-menu-panel a span:first-child{color:var(--sub-accent)}

.story-cases .page-title{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  padding-top:clamp(160px,18vh,220px);
  overflow:hidden;
  color:var(--sub-hero-ink,var(--sub-ink));
  background-color:var(--sub-bg);
  background-image:var(--sub-hero-image);
  background-position:var(--sub-hero-position,center);
  background-size:var(--sub-hero-size,cover);
  background-repeat:no-repeat;
}
.story-cases .page-title:after{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:var(--sub-hero-scrim,linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.52) 48%,rgba(0,0,0,.08) 78%),linear-gradient(0deg,rgba(0,0,0,.68),transparent 60%));
  pointer-events:none;
}
.story-cases .page-title>*{position:relative;z-index:1}
.story-cases .page-title .section-label{color:var(--sub-accent)}
.story-cases .page-title h1{max-width:1100px;color:inherit;text-shadow:0 4px 32px var(--sub-title-shadow,rgba(0,0,0,.58))}
.story-cases .page-title h1 em{color:var(--sub-accent)}
.story-cases .page-title>p:last-child{color:inherit}

.story-cases .cases-page{padding-top:0;background:var(--sub-bg);color:var(--sub-ink)}
.story-cases .cases-page .case,.story-cases .cases-page .case.reverse{color:var(--sub-ink);background:var(--sub-panel)}
.story-cases .cases-page .case:nth-child(even){background:var(--sub-panel-alt)}
.story-cases .cases-page .case-type,.story-cases .cases-page dt{color:var(--sub-accent)}
.story-cases .cases-page dl div{border-color:var(--sub-line)}
.story-cases .cases-page dd{color:color-mix(in srgb,var(--sub-ink) 78%,transparent)}
.story-cases .cases-page .case-visual{overflow:hidden;border:1px solid var(--sub-line);box-shadow:0 22px 60px rgba(0,0,0,.24)}
.story-cases .cases-page .case-visual img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.story-cases .cases-page .case-visual:hover img{transform:scale(1.012);filter:saturate(1.05)}
.story-cases .cases-page .case-visual-link{padding:8px 12px;color:var(--sub-button-ink);background:var(--sub-accent);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.22)}

.story-subpage .footer-playground{color:var(--sub-ink);background:var(--sub-panel-alt);border-color:var(--sub-line)}
.story-subpage .play-table{color:var(--sub-ink);border-color:var(--sub-line);background-color:var(--sub-panel);background-image:linear-gradient(color-mix(in srgb,var(--sub-ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--sub-ink) 7%,transparent) 1px,transparent 1px);box-shadow:0 22px 60px rgba(0,0,0,.2)}
.story-subpage .newspaper,.story-subpage .letter{color:var(--sub-button-ink);background:color-mix(in srgb,var(--sub-accent) 18%,#f4efe4);border-color:var(--sub-button-ink)}
.story-subpage .newspaper small,.story-subpage .newspaper p{border-color:currentColor}
.story-subpage .dot-arena,.story-subpage .map-face{color:var(--sub-button-ink);background:color-mix(in srgb,var(--sub-accent) 62%,#d7cfba);border-color:var(--sub-button-ink)}
.story-subpage .escape-dot,.story-subpage .envelope-front{background:var(--sub-accent)}
.story-subpage .hidden-clue,.story-subpage .letter small{color:var(--sub-accent);border-color:var(--sub-accent)}

.story-team .team-standalone{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  padding-top:clamp(150px,16vw,220px);
  overflow:hidden;
  color:var(--sub-ink);
  background:var(--sub-bg);
}
.story-team .team-standalone:before{
  content:'';
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:var(--sub-hero-image);
  background-position:var(--sub-team-position,var(--sub-hero-position,center));
  background-size:cover;
  opacity:var(--sub-team-opacity,.16);
  filter:saturate(.72) contrast(.9);
}
.story-team .team-standalone:after{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:var(--sub-team-wash,linear-gradient(180deg,color-mix(in srgb,var(--sub-bg) 70%,transparent),var(--sub-bg) 84%));
}
.story-team .people{position:relative;z-index:1}
.story-team .person{padding:clamp(18px,2vw,28px);border:1px solid var(--sub-line);background:color-mix(in srgb,var(--sub-panel) 82%,transparent);box-shadow:0 24px 64px rgba(0,0,0,.24);backdrop-filter:blur(13px)}
.story-team .portrait{border:0;box-shadow:none}
.story-team .person h3{color:var(--sub-ink)}
.story-team .person p{color:color-mix(in srgb,var(--sub-ink) 74%,transparent)}
.story-team .person .text-link{color:var(--sub-accent);font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.story-team .team-note .text-link{color:var(--sub-accent)}
.story-team .team-note{min-height:65vh;color:var(--sub-ink);background:var(--sub-panel-alt)}
.story-team .team-note .section-label{color:var(--sub-accent)}

.story-subpage footer{color:#f7fbfb;background-color:var(--sub-bg);border-top:1px solid color-mix(in srgb,#fff 16%,transparent)}

.home-image-variant-36{--sub-bg:#07182a;--sub-ink:#eef6f7;--sub-accent:#ffb640;--sub-panel:#0b2944;--sub-panel-alt:#123548;--sub-line:rgba(216,242,246,.24);--sub-button-ink:#07182a;--sub-hero-image:url('assets/home-36-luminous-route.webp');--sub-hero-size:auto 135%;--sub-hero-position:82% 84px;--sub-hero-mobile-position:78% 68px;--sub-team-position:36% 56%;--sub-team-opacity:.22;--sub-team-wash:linear-gradient(180deg,rgba(7,24,42,.42),#07182a 86%);--sub-hero-scrim:linear-gradient(90deg,rgba(3,12,22,.96),rgba(3,12,22,.64) 46%,rgba(3,12,22,.09) 78%),linear-gradient(0deg,rgba(3,12,22,.72),transparent 58%)}
.home-image-variant-40{--sub-bg:#141515;--sub-ink:#f2efe5;--sub-accent:#dfff00;--sub-panel:#242525;--sub-panel-alt:#191b1a;--sub-line:rgba(242,239,229,.22);--sub-button-ink:#141515;--sub-hero-image:url('assets/home-40-archive-portal.webp');--sub-hero-size:auto 138%;--sub-hero-position:90% 84px;--sub-hero-mobile-position:72% 68px;--sub-team-position:28% 54%;--sub-team-opacity:.28;--sub-team-wash:linear-gradient(180deg,rgba(20,21,21,.38),#141515 84%);--sub-hero-scrim:linear-gradient(90deg,rgba(10,11,11,.97),rgba(10,11,11,.69) 45%,rgba(10,11,11,.13) 78%),linear-gradient(0deg,rgba(10,11,11,.7),transparent 58%)}
.home-image-variant-51{--sub-bg:#ece7dd;--sub-ink:#222c34;--sub-accent:#bd3b31;--sub-panel:#f5f0e8;--sub-panel-alt:#dce5e8;--sub-line:rgba(34,44,52,.23);--sub-button-ink:#fff7ec;--sub-hero-ink:#222c34;--sub-title-shadow:rgba(255,255,255,.7);--sub-hero-image:url('assets/home-51-paper-city.webp');--sub-hero-size:auto 138%;--sub-hero-position:95% 84px;--sub-hero-mobile-position:82% 68px;--sub-team-position:74% 40%;--sub-team-opacity:.24;--sub-team-wash:linear-gradient(180deg,rgba(236,231,221,.5),#ece7dd 86%);--sub-hero-scrim:linear-gradient(90deg,rgba(239,234,225,.98),rgba(239,234,225,.76) 45%,rgba(239,234,225,.1) 78%),linear-gradient(0deg,rgba(239,234,225,.66),transparent 58%)}
.home-image-variant-53{--sub-bg:#050b15;--sub-ink:#f1eee5;--sub-accent:#ffc35d;--sub-panel:#07111f;--sub-panel-alt:#0e1a28;--sub-line:rgba(232,240,244,.21);--sub-button-ink:#050b15;--sub-hero-image:url('assets/home-53-cloud-city.webp');--sub-hero-size:auto 136%;--sub-hero-position:92% 84px;--sub-hero-mobile-position:72% 68px;--sub-team-position:62% 50%;--sub-team-opacity:.3;--sub-team-wash:linear-gradient(180deg,rgba(5,11,21,.34),#050b15 82%);--sub-hero-scrim:linear-gradient(90deg,rgba(3,9,17,.97),rgba(3,9,17,.67) 45%,rgba(3,9,17,.1) 76%),linear-gradient(0deg,rgba(3,9,17,.74),transparent 58%)}
.home-image-variant-54{--sub-bg:#080706;--sub-ink:#f1ead9;--sub-accent:#e2a34b;--sub-panel:#0c0a08;--sub-panel-alt:#162019;--sub-line:rgba(241,234,217,.2);--sub-button-ink:#080706;--sub-hero-image:url('assets/home-54-fantasy-realm.webp');--sub-hero-size:auto 132%;--sub-hero-position:68% 84px;--sub-hero-mobile-position:70% 68px;--sub-team-position:53% 58%;--sub-team-opacity:.29;--sub-team-wash:linear-gradient(180deg,rgba(8,7,6,.35),#080706 84%);--sub-hero-scrim:linear-gradient(90deg,rgba(5,4,3,.98),rgba(5,4,3,.7) 45%,rgba(5,4,3,.11) 76%),linear-gradient(0deg,rgba(5,4,3,.76),transparent 58%)}
.home-image-variant-55{--sub-bg:#0b0908;--sub-ink:#f0e8d9;--sub-accent:#d46159;--sub-panel:#17120e;--sub-panel-alt:#25100f;--sub-line:rgba(240,232,217,.2);--sub-button-ink:#0b0908;--sub-hero-image:url('assets/home-55-detective-room.webp');--sub-hero-size:auto 145%;--sub-hero-position:88% 84px;--sub-hero-mobile-position:70% 68px;--sub-team-position:31% 52%;--sub-team-opacity:.3;--sub-team-wash:linear-gradient(180deg,rgba(11,9,8,.4),#0b0908 82%);--sub-hero-scrim:linear-gradient(90deg,rgba(5,5,5,.98),rgba(5,5,5,.72) 45%,rgba(5,5,5,.12) 76%),linear-gradient(0deg,rgba(5,4,4,.76),transparent 58%)}
.home-image-variant-57{--sub-bg:#07131e;--sub-ink:#e6f1f2;--sub-accent:#ffc16a;--sub-panel:#091925;--sub-panel-alt:#0c2131;--sub-line:rgba(197,231,236,.25);--sub-button-ink:#07131e;--sub-hero-image:url('assets/home-57-double-slit.webp');--sub-hero-size:auto 142%;--sub-hero-position:92% 84px;--sub-hero-mobile-position:78% 68px;--sub-team-position:38% 51%;--sub-team-opacity:.28;--sub-team-wash:linear-gradient(180deg,rgba(7,19,30,.36),#07131e 84%);--sub-hero-scrim:linear-gradient(90deg,rgba(4,13,21,.97),rgba(4,13,21,.67) 45%,rgba(4,13,21,.1) 76%),linear-gradient(0deg,rgba(4,13,21,.74),transparent 58%)}

/* Each story keeps the same content while carrying its own art direction. */
.story-cases.home-image-variant-36 .cases-page .case{background-image:linear-gradient(115deg,rgba(255,182,64,.055),transparent 34%)}
.story-cases.home-image-variant-36 .case-copy{border-top:1px solid rgba(255,182,64,.55);padding-top:24px}
.story-team.home-image-variant-36 .person{border-top:3px solid var(--sub-accent)}

.story-cases.home-image-variant-40 .page-title h1{text-transform:uppercase;letter-spacing:-.075em}
.story-cases.home-image-variant-40 .cases-page .case{position:relative;background-image:repeating-linear-gradient(90deg,rgba(223,255,0,.025) 0 1px,transparent 1px 54px)}
.story-cases.home-image-variant-40 .case:after{content:none}
.story-cases.home-image-variant-40 .case-visual{clip-path:polygon(0 0,96% 0,100% 9%,100% 100%,4% 100%,0 91%);border-color:rgba(223,255,0,.72);box-shadow:0 0 0 1px #111,0 0 30px rgba(223,255,0,.1)}
.story-cases.home-image-variant-40 .case-copy{padding:clamp(20px,2.4vw,36px);border:1px solid rgba(223,255,0,.34);background:rgba(10,12,11,.34)}
.story-team.home-image-variant-40 .person{position:relative;border-left:4px solid var(--sub-accent);box-shadow:inset 0 0 0 1px rgba(223,255,0,.12),0 24px 64px rgba(0,0,0,.38)}
.story-team.home-image-variant-40 .person:after{content:none}

.story-cases.home-image-variant-51 .page-title h1{width:auto;max-width:1100px;padding:0;background:none;box-shadow:none}
.story-cases.home-image-variant-51 .cases-page .case{background-image:linear-gradient(rgba(34,44,52,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(34,44,52,.035) 1px,transparent 1px);background-size:28px 28px}
.story-cases.home-image-variant-51 .case-visual{border-color:#bd3b31;box-shadow:12px 14px 0 rgba(34,44,52,.13)}
.story-cases.home-image-variant-51 .case-copy{padding:clamp(20px,2.4vw,36px);background:rgba(255,252,246,.68);border-left:4px solid var(--sub-accent)}
.story-team.home-image-variant-51 .person{background:rgba(250,246,238,.84);box-shadow:12px 14px 0 rgba(34,44,52,.14)}

.story-cases.home-image-variant-53 .page-title h1{letter-spacing:-.075em;text-shadow:0 0 38px rgba(101,217,255,.18),0 4px 32px #000}
.story-cases.home-image-variant-53 .cases-page .case{background-image:radial-gradient(circle at 82% 12%,rgba(74,143,185,.15),transparent 34%)}
.story-cases.home-image-variant-53 .case-visual{clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,0 100%);border-color:rgba(113,154,181,.72);box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 32px rgba(61,159,211,.08)}
.story-cases.home-image-variant-53 .case-copy{border-top:1px solid rgba(255,195,93,.66);padding-top:26px}
.story-team.home-image-variant-53 .person{clip-path:polygon(0 0,96% 0,100% 5%,100% 100%,4% 100%,0 95%);background:rgba(7,17,31,.78);box-shadow:inset 0 0 0 1px rgba(113,154,181,.48)}

.story-cases.home-image-variant-54 .page-title{box-shadow:inset 0 0 0 1px rgba(226,163,75,.32),inset 0 0 90px rgba(0,0,0,.52)}
.story-cases.home-image-variant-54 .cases-page .case{background-image:radial-gradient(ellipse at top,rgba(54,84,71,.2),transparent 52%)}
.story-cases.home-image-variant-54 .case-visual{border:3px double rgba(226,163,75,.66);box-shadow:0 0 0 7px rgba(226,163,75,.045),0 28px 70px rgba(0,0,0,.5)}
.story-cases.home-image-variant-54 .case-copy{padding-left:clamp(20px,2.3vw,34px);border-left:1px solid rgba(226,163,75,.7)}
.story-team.home-image-variant-54 .person{position:relative;border:3px double rgba(226,163,75,.52);background:rgba(12,10,8,.82);box-shadow:0 28px 70px rgba(0,0,0,.52)}
.story-team.home-image-variant-54 .person:after{content:none}

.story-cases.home-image-variant-55 .page-title h1{max-width:880px}
.story-cases.home-image-variant-55 .cases-page .case{background-image:linear-gradient(115deg,rgba(212,97,89,.07),transparent 36%),repeating-linear-gradient(0deg,rgba(240,232,217,.018) 0 1px,transparent 1px 24px)}
.story-cases.home-image-variant-55 .case-visual{border-color:rgba(179,134,91,.7);box-shadow:0 25px 65px rgba(0,0,0,.56)}
.story-cases.home-image-variant-55 .case-copy{padding:clamp(20px,2.4vw,34px);border-top:1px solid rgba(212,97,89,.68);border-bottom:1px solid rgba(212,97,89,.28);background:rgba(23,18,14,.62)}
.story-team.home-image-variant-55 .person{background:linear-gradient(135deg,rgba(39,28,20,.92),rgba(16,13,11,.88));border-color:rgba(179,134,91,.58);box-shadow:0 28px 64px rgba(0,0,0,.5)}

.story-cases.home-image-variant-57 .page-title{background-image:linear-gradient(rgba(112,208,231,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(112,208,231,.055) 1px,transparent 1px),var(--sub-hero-image);background-size:48px 48px,48px 48px,var(--sub-hero-size);background-position:0 0,0 0,var(--sub-hero-position)}
.story-cases.home-image-variant-57 .cases-page .case{background-image:linear-gradient(rgba(112,208,231,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(112,208,231,.04) 1px,transparent 1px);background-size:36px 36px}
.story-cases.home-image-variant-57 .case-visual{clip-path:polygon(0 0,94% 0,100% 12%,100% 100%,6% 100%,0 88%);border-color:rgba(112,208,231,.52);box-shadow:0 0 0 1px rgba(255,193,106,.18),0 28px 64px rgba(0,0,0,.44)}
.story-cases.home-image-variant-57 .case-copy{padding-left:clamp(20px,2.3vw,34px);border-left:2px solid var(--sub-accent)}
.story-team.home-image-variant-57 .person{background-color:rgba(9,25,37,.82);background-image:linear-gradient(rgba(112,208,231,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(112,208,231,.045) 1px,transparent 1px);background-size:28px 28px;border-color:rgba(112,208,231,.4);box-shadow:inset 0 0 0 1px rgba(255,193,106,.08)}

/* Cases use one consistent single-line image frame; only its story colour changes. */
.story-cases .cases-page .case-visual{clip-path:none;border-width:1px;border-style:solid;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.story-cases.home-image-variant-36 .case-visual{border-color:rgba(255,182,64,.68)}
.story-cases.home-image-variant-40 .case-visual{border-color:rgba(223,255,0,.72)}
.story-cases.home-image-variant-51 .case-visual{border-color:#bd3b31}
.story-cases.home-image-variant-53 .case-visual{border-color:#ffc35d}
.story-cases.home-image-variant-54 .case-visual{border-color:rgba(226,163,75,.72)}
.story-cases.home-image-variant-55 .case-visual{border-color:rgba(179,134,91,.72)}
.story-cases.home-image-variant-57 .case-visual{border-color:#ffc16a}

/* Team portraits should sit freely in the layout, without picture or card frames. */
.story-team .person{border:0!important;outline:0;box-shadow:none!important}
.story-team .portrait{border:0!important;outline:0;box-shadow:none!important}

@media(min-width:801px){
  .story-cases.home-image-variant-55 .case:nth-child(odd) .case-visual{transform:rotate(-.45deg)}
  .story-cases.home-image-variant-55 .case:nth-child(even) .case-visual{transform:rotate(.45deg)}
}

@media(max-width:800px){
  .story-subpage .site-header nav{color:var(--sub-ink);background:var(--sub-bg);border-color:var(--sub-line)}
  .story-cases .page-title{min-height:92svh;padding-top:132px;background-position:var(--sub-hero-mobile-position,var(--sub-hero-position,center))}
  .story-cases.home-image-variant-57 .page-title{background-position:0 0,0 0,var(--sub-hero-mobile-position)}
  .story-cases .page-title h1{font-size:clamp(54px,16vw,76px);line-height:.82;white-space:normal}
  .story-cases .page-title:after{background:linear-gradient(90deg,color-mix(in srgb,var(--sub-bg) 90%,transparent),color-mix(in srgb,var(--sub-bg) 42%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--sub-bg) 82%,transparent),transparent 62%)}
  .story-cases .cases-page .case-visual-link{display:inline-block;justify-self:start;margin-top:12px}
  .story-team .team-standalone{padding-top:118px}
  .story-team .person{padding:16px}
  .story-cases.home-image-variant-54 .case-copy,
  .story-cases.home-image-variant-57 .case-copy{padding-left:18px}
}