/* Old Man TV hero: full-screen room, live CRT and physical dial navigation. */

.news-hero{
  --news-stage-ratio:2.0233415233;
  isolation:isolate;
  background:#51513b;
}

.news-art-layer{
  aspect-ratio:3294 / 1628;
  overflow:visible;
}

.news-hero-art{
  width:100%;
  height:100%;
  object-fit:fill;
}

/* The live picture is inset into the hand-drawn CRT. */
.news-tv-screen{
  left:27.08%;
  top:18.18%;
  width:31.22%;
  height:36.18%;
  border-radius:0;
  clip-path:inset(0);
  box-shadow:inset 0 0 24px rgba(2,12,7,.52);
  transform:translateZ(0);
}

.news-tv-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:19;
  background:
    radial-gradient(ellipse at center,transparent 56%,rgba(2,12,7,.24) 100%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,247,211,.045) 4px);
  mix-blend-mode:multiply;
  pointer-events:none;
}

.news-tv-screen video,
.news-tv-screen .bbc-poster{
  object-fit:cover;
  object-position:center center;
}

.news-tv-screen .tv-bbc-video{object-position:center 48%}
.news-tv-screen .tv-yaseen-video{object-position:center 45%}

/* Compact screen-printed issue poster in the open wall space. */
.news-left-rail{
  position:relative;
  margin:16px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,247,211,.42);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.08) 0 1px,transparent 1.5px),
    linear-gradient(145deg,rgba(122,31,27,.97),rgba(63,17,17,.97));
  background-size:7px 7px,auto;
  color:var(--news-cream);
  box-shadow:0 18px 34px rgba(18,11,7,.3),5px 6px 0 rgba(31,20,11,.25);
  transform:rotate(-.7deg);
  transform-origin:18% 0;
}

.news-left-rail::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  width:62px;
  height:17px;
  background:rgba(235,213,154,.72);
  box-shadow:0 2px 4px rgba(23,7,5,.2);
  transform:translateX(-50%) rotate(1.5deg);
  pointer-events:none;
}

.news-left-rail::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(255,247,211,.13);
  pointer-events:none;
}

.news-masthead,
.news-channel-copy{
  position:relative;
  z-index:1;
  color:var(--news-cream);
}

.news-kicker{
  color:#f7d97f;
}

.news-kicker span{
  display:inline;
  margin-right:5px;
}

.news-deck,
.tv-channel-meta,
.tv-channel-summary{
  color:rgba(255,247,211,.86);
}

.news-channel-copy{
  border-top:1px solid rgba(255,247,211,.3);
}

.tv-channel-index{
  color:#f7d97f;
}

.news-dial-hint{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin:13px 0 0;
  padding-top:10px;
  border-top:1px solid rgba(255,247,211,.18);
  color:rgba(255,247,211,.8);
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.news-dial-hint span{
  display:grid;
  place-items:center;
  width:21px;
  aspect-ratio:1;
  border-radius:50%;
  background:#f7d97f;
  color:var(--news-wine);
  font-size:13px;
  animation:hint-hop 1.8s cubic-bezier(.2,.8,.2,1) infinite;
}

.tv-channel-action{
  position:relative;
  min-height:34px;
  overflow:hidden;
  padding:0 12px;
  border:1px solid rgba(255,247,211,.62);
  border-radius:999px;
  color:var(--news-cream);
  transition:color 180ms ease,background 180ms ease,transform 180ms cubic-bezier(.2,.8,.2,1);
}

.tv-channel-action::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-35%;
  width:24%;
  height:220%;
  background:rgba(255,255,255,.28);
  transform:rotate(18deg);
  transition:left 420ms cubic-bezier(.2,.8,.2,1);
}

.tv-channel-action:hover,
.tv-channel-action:focus-visible{
  background:#f7d97f;
  color:var(--news-wine);
  transform:translateY(-2px);
}

.tv-channel-action:hover::before,
.tv-channel-action:focus-visible::before{left:120%}

.tv-channel-action span{
  margin-left:7px;
  animation:action-arrow 1.2s ease-in-out infinite;
}

/* Pixel-derived LED paths fitted between each bezel's inner and outer edge. */
.tv-knob{
  --channel-glow:255,244,209;
  width:4.553734%;
  height:9.213759%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  box-shadow:none!important;
  filter:none;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1);
}

.tv-knob--1{
  --channel-glow:255,244,209;
  left:62.416515%;
  top:25.2457%;
}

.tv-knob--2{
  --channel-glow:27,221,126;
  left:62.416515%;
  top:33.783784%;
}

.tv-knob--3{
  --channel-glow:255,64,69;
  left:62.416515%;
  top:42.260442%;
}

.tv-knob::before,
.tv-knob::after{display:none}

.tv-knob__led{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  color:rgb(var(--channel-glow));
  pointer-events:none;
}

.tv-knob__led path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:center;
  transition:opacity 160ms ease,filter 160ms ease;
}

.tv-knob__led-bloom{
  stroke-width:13;
  opacity:.34;
}

.tv-knob__led-core{
  stroke-width:7;
  opacity:.54;
  filter:
    brightness(1.05)
    saturate(1.04)
    drop-shadow(0 0 1px rgba(var(--channel-glow),.55));
}

.tv-knob:is(:hover,:focus-visible) .tv-knob__led-bloom{
  opacity:.64;
}

.tv-knob:is(:hover,:focus-visible) .tv-knob__led-core{
  opacity:.82;
  filter:
    brightness(1.3)
    saturate(1.12)
    drop-shadow(0 0 2px rgba(var(--channel-glow),.78));
}

.tv-knob[aria-pressed="true"] .tv-knob__led-bloom{
  opacity:1;
}

.tv-knob[aria-pressed="true"] .tv-knob__led-core{
  opacity:1;
  filter:
    brightness(1.8)
    saturate(1.32)
    drop-shadow(0 0 2px rgba(var(--channel-glow),1))
    drop-shadow(0 0 4px rgba(var(--channel-glow),.82));
}

.tv-knob:focus-visible{outline:none!important;outline-offset:0!important}

.tv-knob:hover{transform:translate(-50%,-50%) scale(1.035)}
.tv-knob:active{transform:translate(-50%,-50%) scale(.94)}

.tv-knob__label{
  position:absolute;
  top:50%;
  left:calc(100% + 10px);
  display:flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px 5px 6px;
  border:1px solid rgba(var(--channel-glow),.42);
  background:rgba(31,25,15,.9);
  color:#fff4c5;
  box-shadow:none;
  font:900 clamp(8px,.55vw,10px)/1 Archivo,Arial,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transform:translate(6px,-50%);
  transition:opacity 150ms ease,transform 180ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

.tv-knob__label b{
  display:grid;
  place-items:center;
  width:18px;
  aspect-ratio:1;
  background:rgb(var(--channel-glow));
  color:#392014;
  font-size:7px;
}

.tv-knob:is(:hover,:focus-visible) .tv-knob__label{
  opacity:1;
  transform:translate(0,-50%);
  box-shadow:none;
}

.tv-try-me{
  position:absolute;
  left:59.13%;
  top:12.4%;
  z-index:5;
  display:none;
  width:6.6%;
  height:12.2%;
  color:#fff0b5;
  filter:none;
  pointer-events:none;
}

.tv-try-me span{
  position:absolute;
  top:0;
  left:50%;
  padding:5px 7px 4px;
  border:1px solid rgba(255,240,181,.58);
  background:rgba(49,37,22,.82);
  font:900 clamp(8px,.62vw,12px)/1 Archivo,Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translateX(-50%);
}

.tv-try-me i{
  position:absolute;
  top:30%;
  bottom:3px;
  left:50%;
  width:1px;
  background:currentColor;
  transform:translateX(-50%);
  animation:try-me-line 1.5s ease-in-out infinite;
}

.tv-try-me i::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translate(-50%,0) rotate(45deg);
}

.news-art-layer[data-tuning="bbc"]{--active-channel-glow:255,244,209}
.news-art-layer[data-tuning="yaseen"]{--active-channel-glow:27,221,126}
.news-art-layer[data-tuning="press"]{--active-channel-glow:255,64,69}

.news-art-layer.is-tuning .news-tv-screen{
  animation:
    crt-tune 430ms cubic-bezier(.2,.8,.2,1),
    screen-halo 520ms ease-out;
}

.news-art-layer[data-tuning="bbc"].is-tuning .tv-knob--1 .tv-knob__led-core,
.news-art-layer[data-tuning="yaseen"].is-tuning .tv-knob--2 .tv-knob__led-core,
.news-art-layer[data-tuning="press"].is-tuning .tv-knob--3 .tv-knob__led-core{animation:channel-halo 520ms ease-out}

.news-art-layer[data-tuning="bbc"].is-tuning .tv-knob--1 .tv-knob__led-bloom,
.news-art-layer[data-tuning="yaseen"].is-tuning .tv-knob--2 .tv-knob__led-bloom,
.news-art-layer[data-tuning="press"].is-tuning .tv-knob--3 .tv-knob__led-bloom{animation:channel-halo-bloom 520ms ease-out}

.news-art-layer.is-tuning .tv-knob[aria-pressed="true"] .tv-knob__label{
  opacity:1;
  transform:translate(0,-50%);
}

@media(min-width:1000px){
  .news-hero{
    min-height:calc(100vh - 84px);
    min-height:calc(100svh - 84px);
  }

  .news-art-layer{
    position:absolute;
    top:50%;
    left:50%;
    width:max(100vw,calc((100svh - 84px) * var(--news-stage-ratio)));
    height:auto;
    transform:translate(-50%,-50%);
  }

  .news-hero-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    display:block;
    pointer-events:none;
  }

  .news-left-rail{
    position:absolute;
    top:clamp(20px,2.8vh,34px);
    left:clamp(24px,2.4vw,46px);
    width:clamp(300px,21vw,360px);
    margin:0;
    padding:clamp(22px,1.65vw,28px);
    pointer-events:auto;
    animation:poster-settle 620ms cubic-bezier(.16,1,.3,1) both;
  }

  .news-masthead,
  .news-channel-copy{
    position:relative;
    width:auto;
    padding:0;
  }

  .news-masthead h1{
    color:var(--news-cream);
    font-size:clamp(64px,5vw,84px);
    line-height:.84;
  }

  .news-kicker{
    margin-bottom:8px;
    font-size:9.5px;
    line-height:1.35;
    letter-spacing:.09em;
  }

  .news-deck{
    max-width:29ch;
    margin-top:10px;
    font-size:12px;
    line-height:1.45;
  }

  .news-channel-copy{
    margin-top:11px;
    padding-top:10px;
  }

  .news-channel-copy h2{
    max-width:11ch;
    color:var(--news-cream);
    font-size:clamp(31px,2.55vw,43px);
    line-height:.9;
  }

  .tv-channel-index{
    margin-bottom:5px;
    font-size:9px;
  }

  .tv-channel-meta{
    margin-top:6px;
    font-size:9.5px;
    line-height:1.35;
  }

  .tv-channel-summary{
    margin-top:6px;
    font-size:10.5px;
    line-height:1.4;
  }

  .tv-channel-action{
    min-height:29px;
    margin-top:8px;
    font-size:9px;
  }

  .news-tv-controls,
  .tv-try-me{display:block}
}

@media(min-width:1000px) and (max-height:760px){
  .news-left-rail{
    top:14px;
    width:clamp(280px,19.5vw,328px);
    padding:19px 21px 18px;
  }

  .news-masthead h1{font-size:clamp(49px,3.9vw,62px)}
  .news-deck{margin-top:7px;font-size:9.5px;line-height:1.35}
  .news-channel-copy{margin-top:8px;padding-top:8px}
  .news-channel-copy h2{font-size:clamp(25px,2vw,33px)}
  .tv-channel-summary{display:none}
  .news-dial-hint{margin-top:8px;padding-top:8px}
}

@media(max-width:999px){
  .news-left-rail{
    z-index:4;
    order:1;
    width:auto;
    max-width:520px;
    margin:22px 18px 18px;
    padding:24px 22px 20px;
    transform:rotate(-.35deg);
  }

  .news-masthead h1,
  .news-channel-copy h2{color:var(--news-cream)}

  .news-art-layer{
    position:relative;
    left:50%;
    order:2;
    width:max(760px,155vw);
    flex:0 0 auto;
    transform:translateX(-48%);
  }

  .news-mobile-channels{
    overflow:hidden;
    border-color:rgba(255,247,211,.22);
    background:#343725;
  }

  .news-mobile-channels button{
    position:relative;
    min-height:54px;
    overflow:hidden;
    border-color:rgba(255,247,211,.18);
    color:rgba(255,247,211,.72);
    transition:color 180ms ease,background 180ms ease,transform 180ms ease;
  }

  .news-mobile-channels button::before{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:3px;
    background:#ff675b;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 280ms cubic-bezier(.2,.8,.2,1);
  }

  .news-mobile-channels button[aria-pressed="true"]{
    background:rgba(255,247,211,.08);
    color:#f7d97f;
    box-shadow:none;
  }

  .news-mobile-channels button[aria-pressed="true"]::before{transform:scaleX(1)}
  .news-mobile-channels button:active{transform:scale(.96)}
}

@keyframes poster-settle{
  from{opacity:0;transform:translateY(-16px) rotate(-2deg)}
  to{opacity:1;transform:translateY(0) rotate(-.7deg)}
}

@keyframes hint-hop{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,-3px)}
}

@keyframes action-arrow{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}

@keyframes channel-halo{
  0%,100%{filter:brightness(1.55) saturate(1.24) drop-shadow(0 0 2px rgba(var(--channel-glow),.9));opacity:1}
  55%{filter:brightness(1.95) saturate(1.4) drop-shadow(0 0 4px rgba(var(--channel-glow),1));opacity:1}
}

@keyframes channel-halo-bloom{
  0%,100%{opacity:.9}
  55%{opacity:1}
}

@keyframes try-me-line{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,4px)}
}

@keyframes crt-tune{
  0%,100%{filter:none;transform:translateZ(0) scale(1)}
  35%{filter:contrast(1.45) saturate(.55);transform:translateZ(0) scale(.985,.94)}
  65%{filter:contrast(.9) saturate(1.2);transform:translateZ(0) scale(1.008)}
}

@keyframes screen-halo{
  0%,100%{box-shadow:inset 0 0 24px rgba(2,12,7,.52),0 0 0 rgba(var(--active-channel-glow),0)}
  48%{box-shadow:inset 0 0 24px rgba(2,12,7,.52),0 0 30px 4px rgba(var(--active-channel-glow),.42)}
}

@media(prefers-reduced-motion:reduce){
  .news-left-rail,
  .news-dial-hint span,
  .tv-channel-action span,
  .tv-knob__led path,
  .tv-knob__label,
  .tv-try-me i,
  .news-art-layer.is-tuning .news-tv-screen,
  .news-art-layer.is-tuning .tv-knob{animation:none!important}

  .tv-channel-action,
  .news-mobile-channels button{transition:none}
}

/* The Stories index stays inside the existing printed masthead. */
#news-title a{color:inherit;text-decoration:none}
.news-topic-index{display:flex;flex-wrap:wrap;gap:9px 13px;margin-top:16px;padding-top:12px;border-top:1px solid currentColor}
.news-topic-index a{color:inherit;font:900 8px/1.4 Archivo,Arial,sans-serif;letter-spacing:.08em;text-decoration:none}
.news-topic-index a:hover,.news-topic-index a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Restore the Reading Room stage positioning outside the homepage embed. */
@media (min-width:1000px){
  [data-stories-destination] .news-art-layer{position:absolute!important}
}

@media(max-width:590px){
  .news-archive-body .topbar .mobile-nav-label{display:none}
  .news-archive-body .topbar.on-dark .mobile-nav-toggle{background:transparent;color:var(--news-cream)}
  .news-archive-body .topbar .nb,.news-archive-body .topbar .disclosure-toggle{font-size:9px!important}
}