/* Every opening sequence stays inside the available screen. */
.ed-cover{width:min(100% - 2*var(--ed-gutter),var(--ed-max));height:min(660px,calc(100svh - 118px));min-height:0;margin-top:20px;padding:28px;grid-template-columns:minmax(0,.78fr) minmax(0,1.28fr);gap:28px;align-items:center}
.ed-cover-copy{padding:0}
.ed-cover h1{font-size:clamp(40px,3.6vw,54px);max-width:12ch}
.ed-cover-standfirst{font-size:17px;line-height:1.6;margin-block:18px 22px}
.ed-cover .ed-kicker{margin-bottom:18px}
.ed-cover-art{align-self:stretch;display:flex;align-items:center;min-height:0;width:100%}
.ed-cover-signal{width:100%;height:100%;max-height:100%;aspect-ratio:auto;background:#0b1d27;border-radius:2px;overflow:hidden}
.ed-cover::after{background-size:42px 42px;opacity:.6}
.ed-cover .ed-motion-toggle{margin-top:14px;min-height:44px}
@media(max-width:760px){
  .ed-cover{height:min(640px,calc(100svh - 98px));padding:18px;gap:10px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;margin-top:16px}
  .ed-cover-copy{display:contents}
  .ed-cover .ed-kicker{grid-row:1;grid-column:1;margin:0;font-size:9px}
  .ed-cover h1{grid-row:2;grid-column:1;font-size:clamp(29px,8.5vw,39px);line-height:1.04;max-width:none;margin:0;text-wrap:balance}
  .ed-cover-standfirst{grid-row:3;grid-column:1;font-size:15px;line-height:1.5;max-width:none;margin:2px 0 0}
  .ed-cover-art{grid-row:4;grid-column:1;align-self:stretch;margin:0 -18px;min-height:0;width:calc(100% + 36px)}
  .ed-cover-signal{height:100%;max-height:none;aspect-ratio:auto}
  .ed-cover-actions{grid-row:5;grid-column:1;gap:8px 16px;align-items:center}
  .ed-cover .ed-cover-actions .ed-button{font-size:10px;padding-inline:15px;min-height:44px}
  .ed-cover .ed-cover-actions .ed-more{font-size:10px}
  .ed-cover .ed-motion-toggle{grid-row:4;grid-column:1;justify-self:end;align-self:end;z-index:2;margin:0 5px 5px;padding:0 10px;min-height:44px;min-width:44px;font-size:10px;border:1px solid #7ab4b64d;background:#0b1d27e8;border-radius:3px}
}
@media(max-height:600px) and (min-width:761px){
  .ed-cover{height:calc(100svh - 102px);margin-top:12px;padding:18px;gap:22px}
  .ed-cover .ed-kicker{margin-bottom:9px;font-size:9px}
  .ed-cover h1{font-size:clamp(27px,3.6vw,38px);max-width:15ch;line-height:1.04}
  .ed-cover-standfirst{font-size:14px;line-height:1.45;margin-block:10px 12px}
  .ed-cover .ed-motion-toggle{position:absolute;right:24px;bottom:24px;background:#0b1d27dd;padding:0 10px;border:1px solid #719a9e50;z-index:2;min-height:44px}
  .ed-cover .ed-button{min-height:44px;padding-inline:14px;font-size:10px}
}
@media(orientation:landscape) and (max-height:520px) and (max-width:760px){
  .ed-cover{height:calc(100svh - 90px);grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);grid-template-rows:auto auto auto auto;gap:5px 14px;padding:14px}
  .ed-cover .ed-kicker{grid-row:1;grid-column:1;font-size:8px}
  .ed-cover h1{grid-row:2;grid-column:1;font-size:27px}
  .ed-cover-standfirst{grid-row:3;grid-column:1;font-size:12px;line-height:1.35}
  .ed-cover-actions{grid-row:4;grid-column:1;gap:4px 10px}
  .ed-cover .ed-cover-actions .ed-button{font-size:9px;padding-inline:10px;min-height:44px}
  .ed-cover .ed-cover-actions .ed-more{font-size:9px;min-height:44px}
  .ed-cover-art{grid-column:2;grid-row:1/-1}
  .ed-cover .ed-motion-toggle{grid-row:1/-1;grid-column:2;align-self:end;min-height:44px;font-size:9px}
}

/* The hardware is a small object to explore, with its own quiet control deck. */
.ed-cover-art{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:0}
.ed-cover-art .ed-cover-signal{min-height:0;border-radius:3px 3px 0 0}
.hero-scene-controls{display:flex;align-items:center;gap:8px;min-width:0;min-height:54px;padding:5px 8px;border-top:1px solid #9bc9c51f;background:#102630;box-shadow:inset 0 1px 0 #071820;border-radius:0 0 3px 3px}
.hero-scene-controls:not(:has(>:not([hidden]))){display:none}
.hero-scene-views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;flex:1;min-width:0}
.hero-scene-views[hidden]{display:none}
.hero-scene-views button{position:relative;appearance:none;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:2px;background:transparent;color:#b8cdcd;padding:8px 10px;font:500 11px/1.2 var(--ed-sans);letter-spacing:.025em;cursor:pointer;touch-action:manipulation;transition:color 180ms,border-color 180ms,background 180ms}
.hero-scene-views button[aria-pressed=true]{background:#1d3840;color:#f6f4e9;border-color:#8dc7c32d;box-shadow:inset 0 -2px 0 #c69b76}
.hero-scene-views button:hover{color:#fff;background:#25464d}
.hero-scene-views button:focus-visible{outline:2px solid #9ee6e4;outline-offset:2px;z-index:1}
.ed-cover .hero-scene-controls .ed-motion-toggle{position:static;display:inline-flex;flex:none;align-items:center;justify-content:center;align-self:center;grid-area:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:1px solid #8dc7c32d;border-radius:2px;background:#0c2028;color:#b8d5d5}
.ed-cover .hero-scene-controls .ed-motion-toggle[hidden]{display:none}
.hero-scene-controls .ed-motion-toggle [data-motion-label]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero-scene-controls .ed-motion-toggle svg{width:15px;height:15px}
@media(max-width:760px){.hero-scene-controls{padding-inline:7px}.hero-scene-views button{font-size:10px;padding-inline:7px}}
html[data-motion=off] .hero-scene-views button{transition:none}
@media(prefers-reduced-motion:reduce){.hero-scene-views button{transition:none}}