/* Layouts 7–9: the magazine sections (layout 2) inside the side-menu frame (layout 6).
   Loaded after dir-6.css and dir-2.css, so it settles where the two disagree. */
.dx .hero{display:block;height:calc(100svh - 41px);min-height:640px;padding:0;background:#000;color:#fff;overflow:hidden}
.dx .hero .lede{color:rgba(255,255,255,.88)}
.dx.d2 .programmes .sec-head,.dx.d2 .how .sec-head,.dx.d2 .faq .sec-head,.dx.d2 .stories .sec-head{top:40px}
.dx .side-links a{font-family:var(--fd)}
@media (max-width:1000px){
  .dx .nav{color:#fff}
  .dx .nav .m1{display:block}.dx .nav .m2{display:none}
  .dx .nav.solid{color:var(--ink)}
  .dx .nav.solid .m1{display:none}.dx .nav.solid .m2{display:block}
}

/* 7 · strips (the classic opening, inside the content column) */
.d7 .hero-copy,.d10 .hero-copy{max-width:min(860px,80%)}

/* 8 · framed photo */
.d8 .hero{padding:12px;background:var(--paper)}

/* 9 · photo columns that keep gliding */
.d9 .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,50px);padding:0 0 0 clamp(24px,4vw,64px);background:var(--paper);color:var(--ink)}
.d9 .hero .lede{color:var(--mute)}
.d9 .c-left{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:60px 0}
.d9 .ttl{font-size:clamp(46px,5.4vw,100px);line-height:.96}
.d9 .ttl .ln{display:block;overflow:hidden;padding-bottom:.06em}
.d9 .ttl .ln>span{display:inline-block}
.d9 .hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.d9 .c-facts{display:flex;gap:0;border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.d9 .c-facts li{display:grid;padding-right:22px;margin-right:22px;border-right:1px solid var(--line);color:var(--mute);font-size:14px}
.d9 .c-facts li:last-child{border:0}
.d9 .c-facts b{font:800 clamp(26px,2.4vw,38px)/1.1 var(--fd);letter-spacing:-.04em;color:var(--ink)}
.d9 .c-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.d9 .col{overflow:hidden}
.d9 .run{display:grid;gap:12px;animation:colUp 38s linear infinite}
.d9 .col.down .run{animation-name:colDown}
.d9 .col.slow .run{animation-duration:50s}
.d9 .run img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.d9 .c-cols:hover .run{animation-play-state:paused}
@keyframes colUp{to{transform:translateY(calc(-50% - 6px))}}
@keyframes colDown{from{transform:translateY(calc(-50% - 6px))}to{transform:translateY(0)}}

@media (max-width:900px){
  .d9 .hero{grid-template-columns:1fr;height:auto;padding:110px var(--g) 0}
  .d9 .c-left{padding:0}
  .d9 .c-cols{height:60svh}
  .d9 .c-facts{flex-wrap:wrap;gap:10px 0}
}

/* 10 · strips + gliding columns + spotlight: everything is dark black-and-white except a circle of light that shows true colour */
.d10 .hero{--x:60%;--y:45%;--r:0px}
.d10 .c-cols{position:absolute;top:0;bottom:0;right:clamp(14px,2vw,26px);width:min(32%,420px);z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.d10 .col{overflow:hidden}
.d10 .run{display:grid;gap:12px;animation:colUp 40s linear infinite}
.d10 .col.down .run{animation-name:colDown}
.d10 .col.slow .run{animation-duration:54s}
.d10 .run img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
@keyframes colUp{to{transform:translateY(calc(-50% - 6px))}}
@keyframes colDown{from{transform:translateY(calc(-50% - 6px))}to{transform:translateY(0)}}
.d10 .dark{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:grayscale(1) brightness(.34) contrast(1.05);backdrop-filter:grayscale(1) brightness(.34) contrast(1.05);
  -webkit-mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 30%,#000 100%);mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 30%,#000 100%)}
.d10 .hero-copy{z-index:3;pointer-events:none}
.d10 .shade{z-index:2;pointer-events:none}
.d10 .hero-copy a{pointer-events:auto}
.d10 .hero-foot{z-index:3}
@media (max-width:900px){
  .d10 .c-cols{width:auto;left:var(--g);right:var(--g);opacity:.9}
  .d10 .hero-copy{max-width:none}
  .d10 .scroll-cue{display:none}
}

/* caption fixes: the title keeps three lines beside the photo columns, sits centred down the left;
   on phones the opening grows to fit and the words start below the top bar */
@media (max-width:1000px){
  .dx .hero{height:auto;min-height:calc(100svh - 41px);display:flex;flex-direction:column;justify-content:flex-end;gap:24px;padding:120px var(--g) 70px}
  .dx .hero-copy{position:relative;left:auto;right:auto;bottom:auto;top:auto;translate:none;max-width:none}
  .d10 .c-cols{opacity:.55}
}
@media (max-width:1000px){.no-next .dx .hero{height:auto;min-height:100svh}}