/* ---------- One view, every camera ---------- */
.camera-story{position:relative;margin:clamp(80px,10vw,140px) 0 0;padding:clamp(70px,8vw,120px) 0;background:#1d1f1f;color:#fff;box-shadow:0 0 0 100vmax #1d1f1f;clip-path:inset(0 -100vmax)}
.cs-head{max-width:720px;margin-bottom:clamp(40px,6vw,80px)}
.cs-head .eyebrow{color:#b8c5c2}
.cs-head h2{font-size:clamp(2.2rem,4.4vw,4rem);letter-spacing:-.035em;line-height:1.06;margin:16px 0 22px;text-wrap:balance}
.cs-intro{color:#c9cbc9;max-width:600px;line-height:1.65}
.cs-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.cs-stage{position:sticky;top:max(100px,calc(50vh - 260px));z-index:2}
.cs-frame{margin:0}
.cs-screen{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0d0e0e;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.cs-img.is-active{opacity:1}
.cs-img[data-era="2"]{image-rendering:pixelated}
.cs-shutter{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.cs-frame.snap .cs-shutter{animation:cs-snap .32s ease-out}
@keyframes cs-snap{0%{opacity:0}22%{opacity:.9}100%{opacity:0}}
.cs-hud{position:absolute;inset:14px;pointer-events:none;font:600 .66rem/1.2 "SFMono-Regular",Consolas,"Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cs-hud::before,.cs-hud::after{content:"";position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.75);-webkit-mask:linear-gradient(#000 0 0) top left/22px 22px no-repeat,linear-gradient(#000 0 0) top right/22px 22px no-repeat,linear-gradient(#000 0 0) bottom left/22px 22px no-repeat,linear-gradient(#000 0 0) bottom right/22px 22px no-repeat;mask:linear-gradient(#000 0 0) top left/22px 22px no-repeat,linear-gradient(#000 0 0) top right/22px 22px no-repeat,linear-gradient(#000 0 0) bottom left/22px 22px no-repeat,linear-gradient(#000 0 0) bottom right/22px 22px no-repeat}
.cs-hud::after{inset:50% auto auto 50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border-width:1px;border-color:rgba(255,255,255,.5);-webkit-mask:none;mask:none}
.cs-hud span{position:absolute;padding:2px 0}
.cs-hud-cam{top:12px;left:16px}
.cs-hud-count{top:12px;right:16px}
.cs-hud-spec{bottom:12px;left:16px;opacity:.85}
.cs-hud-rec{bottom:12px;right:16px;display:flex;align-items:center;gap:6px}
.cs-hud-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#e8b04a;box-shadow:0 0 6px #e8b04a}
.cs-frame figcaption{margin-top:14px;font-size:.82rem;color:#a9aeac}
.cs-dots{list-style:none;display:flex;gap:6px;margin:18px 0 0;padding:0}
.cs-dots button{display:block;width:100%;min-width:44px;height:28px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.cs-dots button::before{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:rgba(255,255,255,.22);transition:background .3s}
.cs-dots li{flex:1}
.cs-dots button[aria-current="step"]::before{background:#fff}
.cs-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cs-steps{list-style:none;margin:0;padding:0}
.cs-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .45s ease}
.cs-step:first-child{min-height:56vh;justify-content:flex-start;padding-top:40px}
.cs-step:last-child{min-height:62vh}
.cs-step.is-active{opacity:1}
.cs-when{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#b8c5c2;margin-bottom:12px}
.cs-step h3{font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.02em;margin-bottom:16px}
.cs-step p:not(.cs-when){color:#c9cbc9;line-height:1.7;max-width:440px}
.cs-step p+p{margin-top:14px}
.cs-note{margin-top:28px;font-size:.78rem;color:#8d9391;max-width:440px}

/* ---------- KOMO on air ---------- */
.komo .about-mentions-intro{margin-bottom:36px}
.tv{max-width:820px}
.tv-set{padding:clamp(10px,1.6vw,18px);background:linear-gradient(160deg,#2b2d2d,#121313);border-radius:20px;box-shadow:0 26px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);transition:padding .5s ease,background .5s ease,box-shadow .5s ease,border-radius .5s ease}
.tv-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000;transition:background .5s ease,border-radius .5s ease}
.tv-ch{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.tv-ch.is-on{opacity:1;visibility:visible;transition:opacity .25s ease}
.tv-ch img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s ease}
.tv-air{object-fit:cover}
.tv-orig{object-fit:contain;opacity:0}
.tv-static{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;image-rendering:pixelated}
.tv.is-tuning .tv-static{opacity:1}
.tv-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:20px}
.tv-group{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.tv-group button{border:0;background:none;padding:8px 16px;border-radius:999px;font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.tv-group button b{font-weight:600;letter-spacing:.08em;font-size:.7rem;margin-right:6px}
.tv-group button[aria-pressed="true"]{background:var(--ink);color:#fff}
.tv-group button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tv-caption{margin-top:16px;font-size:.85rem;color:var(--muted)}
.tv-note{margin-top:6px;font-size:.75rem;color:#8a8a8a}
.tv[data-mode="original"] .tv-set{padding:0;background:transparent;box-shadow:none;border-radius:0}
.tv[data-mode="original"] .tv-screen{background:var(--paper);border-radius:0}
.tv[data-mode="original"] .tv-screen::after{opacity:0}
.tv[data-mode="original"] .tv-ch:not([data-no-original]) .tv-air{opacity:0}
.tv[data-mode="original"] .tv-orig{opacity:1}
.tv-group button:disabled{opacity:.4;cursor:not-allowed}

@media (max-width:900px){
  .cs-body{grid-template-columns:1fr;gap:0}
  .cs-stage{top:72px;background:#1d1f1f;padding:10px 0 4px;margin:0 -2px}
  .cs-dots{margin-top:8px}
  .cs-frame figcaption{display:none}
  .cs-step,.cs-step:first-child,.cs-step:last-child{min-height:44vh;padding-top:0;justify-content:center}
  .cs-step:last-child{min-height:52vh}
}
@media (max-width:600px){
  .cs-hud{inset:9px;font-size:.56rem;letter-spacing:.1em}
  .cs-hud-cam,.cs-hud-spec{left:10px}.cs-hud-count,.cs-hud-rec{right:10px}
  .cs-hud-cam,.cs-hud-count{top:8px}.cs-hud-spec,.cs-hud-rec{bottom:8px}
  .tv-set{border-radius:14px}
  .tv-controls{flex-direction:column;align-items:flex-start}
  .tv-group button{padding:7px 12px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .cs-img,.cs-step,.tv-ch,.tv-set,.tv-screen,.tv-ch img{transition:none}
  .cs-frame.snap .cs-shutter{animation:none}
}
.about-profile{margin:0}
.about-layout .biography{grid-column:1;grid-row:1}
.about-layout .about-profile{grid-column:2;grid-row:1}
.portrait-rotation{position:relative;aspect-ratio:4/5;overflow:hidden}
.about-profile .portrait-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.about-profile .portrait-slide.is-active{opacity:1}
.portrait-controls{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;height:20px}
.portrait-controls button{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--line);color:var(--ink);overflow:hidden;cursor:pointer;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.portrait-controls button.is-on{width:28px}
.portrait-controls button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform:scaleX(0);transform-origin:left}
.portraits-running .portrait-controls button.is-on::after{animation:portrait-progress 7s linear forwards}
@keyframes portrait-progress{to{transform:scaleX(1)}}
.about-profile:not(.portraits-running) .portrait-controls button.is-on::after{transform:scaleX(1)}
.portrait-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:700px){
  .about-layout .biography,.about-layout .about-profile{grid-column:auto;grid-row:auto}
}
@media(prefers-reduced-motion:reduce){.about-profile .portrait-slide,.portrait-controls button{transition:none}}