/* Corridor case-study experiment. Scoped; shared portfolio pages retain their styling. */
.evidence-film { margin: 30px -16px; background: #111326; border: 1px solid #333751; border-radius: 12px; overflow: hidden; }
.evidence-film video { display: block; width: 100%; height: auto; }
.corridor-case .evidence-film figcaption { padding: 18px 22px; margin: 0; color: #c4c5db; font-size: 12px; line-height: 1.7; }
.hit-explanation { margin: 34px -16px 0; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #111219; }
.corridor-case .hit-explanation h3 { margin-top: 8px; }
@media(max-width:480px) { .hit-explanation { padding: 20px; margin-left: -8px; margin-right: -8px; } .evidence-film { margin-left: -8px; margin-right: -8px; } }
.case-film { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.4fr); gap: 22px; align-items: start; margin: 20px 0 50px; scroll-margin-top: 90px; }
.case-film-intro { background: #111219; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 28px; }
.corridor-case .film-eyebrow { font: 10px/1.5 var(--mono); letter-spacing: .12em; color: #3d94e6; margin: 0 0 16px; }
.corridor-case .case-film h2 { font-size: clamp(26px,3vw,36px); line-height: 1.15; margin: 0 0 24px; letter-spacing: -.035em; }
.corridor-case .case-film-intro p { font-size: 15px; line-height: 1.75; }
.corridor-case .case-film-intro .film-note { font-size: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; margin-bottom: 0; }
.case-film-media { margin: 0; min-width: 0; background: #111219; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.case-film-media video { display: block; width: 100%; height: auto; background: #111326; }
.corridor-case .case-film-media figcaption { padding: 14px 20px; margin: 0; font-size: 11px; line-height: 1.65; }
.film-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 20px; border-top: 1px solid rgba(255,255,255,.12); gap: 16px; }
.film-stats strong,.film-stats span { display: block; }
.film-stats strong { font-size: 32px; line-height: 1.1; letter-spacing: -.04em; color: #f5f6f8; }
.film-stats span { font-size: 11px; color: #9296a6; margin-top: 8px; }
.corridor-case .film-data-note { padding: 0 20px 20px; margin: 0; font-size: 11px; line-height: 1.65; color: #9296a6; }
.case-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 50px; }
.case-evidence > div { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
.corridor-case .case-evidence h2 { margin: 12px 0; font-size: 23px; }
.corridor-case .case-evidence p { font-size: 15px; }
@media(max-width:800px) { .case-film,.case-evidence { grid-template-columns: 1fr; } }
.corridor-case { background: #08090c; --article: 1120px; }
.case-backdrop { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 85% 15%, rgba(10,102,194,.14) 0, transparent 55%), linear-gradient(120deg, #08090c, #0a0d13); }
.case-backdrop::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#3d94e60a 1px, transparent 1px), linear-gradient(90deg, #3d94e60a 1px, transparent 1px); background-size: 64px 64px; }
.case-backdrop svg { width: 100%; height: 100%; fill: rgba(10,102,194,.16); stroke: #3d94e6; stroke-width: 1; opacity: .16; }
.case-backdrop span { position: absolute; right: 3%; top: 20%; font: 12px/2 var(--mono); color: #3d94e6; opacity: .28; transform: rotate(90deg); transform-origin: right; }
.corridor-case { isolation: isolate; }
.corridor-case .page-glow { display: none; }
.corridor-case .nav { background: #08090ccf; }
.corridor-case .hero { padding: 86px 0 52px; }
.corridor-case .hero .wrap { max-width: 1120px; }
.corridor-case .hero h1 { max-width: 100%; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.08; letter-spacing: -.055em; }
.corridor-case .hero h1 span { color: #3d94e6; }
.corridor-case .hero .blurb { max-width: 680px; margin-top: 28px; font-size: 18px; line-height: 1.75; }
.corridor-case .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.corridor-case .case-primary { display: inline-flex; gap: 28px; padding: 13px 18px; color: white; background: #0a66c2; border-radius: 6px; text-decoration: none; }
.corridor-case main.rule { border: 0; padding-top: 0; }
.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); padding: 24px 0; margin-bottom: 64px; }
.case-facts > div { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.14); }
.case-facts > div:first-child { padding-left: 0; border: 0; }
.case-facts strong, .case-facts span { display: block; }
.case-facts strong { font-size: clamp(22px, 2.5vw, 32px); color: #f5f6f8; letter-spacing: -.045em; }
.case-facts span { color: #9296a6; font-size: 12px; margin-top: 4px; }
.corridor-case .prose { max-width: 1120px; }
.corridor-case .corridor-story { left: auto; transform: none; width: 100%; margin: 0 0 80px; scroll-margin-top: 90px; }
.corridor-case .corridor-story__header h2 { max-width: 27ch; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; }
.corridor-case .corridor-story__frame { grid-template-columns: minmax(290px, .8fr) minmax(0, 1.5fr); gap: 18px; border: 0; background: none; border-radius: 0; aspect-ratio: auto; min-height: 480px; overflow: visible; }
.corridor-case .corridor-story__evidence { grid-column: 1; grid-row: 1; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #111219; }
.corridor-case .corridor-story__evidence h3 { font-size: 27px; letter-spacing: -.025em; }
.corridor-case .corridor-story__stage-copy { font-size: 15px; line-height: 1.7; }
.corridor-case .corridor-story__metrics strong { font-size: 23px; }
.corridor-case .corridor-story__map { grid-column: 2; grid-row: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; min-height: 480px; box-shadow: 0 18px 45px rgba(0,0,0,.35); }
.corridor-case .corridor-story__steps { gap: 8px; margin-top: 18px; }
.corridor-case .corridor-story__steps button { border-radius: 6px; background: rgba(255,255,255,.05); }
.corridor-case .corridor-story__steps button[aria-current="step"] { background: rgba(10,102,194,.24); }
.corridor-case .corridor-story > figcaption { max-width: 900px; font-size: 12px; line-height: 1.7; }
.case-chapter { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; border-top: 1px solid rgba(255,255,255,.14); padding: 36px 0; }
.case-chapter-number { padding-top: 22px; color: #7d8298; font: 10px/1.6 var(--mono); letter-spacing: .09em; }
.case-chapter-body { padding: 30px 38px; background: #111219; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; min-width: 0; }
.corridor-case .case-chapter h2 { margin: 0 0 22px; font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
.corridor-case .case-chapter p { font-size: 16px; line-height: 1.85; }
.corridor-case .case-chapter .shot { left: auto; width: 100%; transform: none; margin: 26px 0; }
.corridor-case .case-chapter .code { max-width: 100%; }
.corridor-case .case-chapter pre { overflow-x: auto; }
.corridor-case .case-chapter-body > :last-child { margin-bottom: 0; }
/* Tech-stack chips, matching the /onisai page's stack-row exactly (that
   page loads onisai-live-feed.css, this one doesn't, so it's redefined here
   rather than pulling in an unrelated stylesheet for three rules). */
.stack-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px auto 12px; scroll-margin-top: 90px; }
.stack-chip { font: 500 12px var(--sans); padding: 8px 14px; border: 1px solid var(--reading-border); border-radius: 999px; background: var(--reading-surface); color: #e5e7ec; }
.stack-caption { font-size: 13px; line-height: 21px; color: #9296a6; margin-top: 0; }
.corridor-case footer { background: transparent; }
.corridor-case a:focus-visible, .corridor-case button:focus-visible { outline: 3px solid #0a66c2; outline-offset: 4px; }
@media (max-width: 800px) {
  .corridor-case .hero { padding-top: 48px; }
  .case-facts { grid-template-columns: repeat(2, 1fr); gap: 22px 0; margin-bottom: 40px; }
  .case-facts > div:nth-child(3) { border: 0; padding-left: 0; }
  .corridor-case .corridor-story__frame { grid-template-columns: 1fr; }
  .corridor-case .corridor-story__evidence { grid-column: 1; grid-row: 1; }
  .corridor-case .corridor-story__map { grid-column: 1; grid-row: 2; min-height: 360px; aspect-ratio: 4/3; }
  .case-chapter { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .case-chapter-number { padding-top: 0; }
  .case-chapter-body { padding: 24px; }
}
@media (max-width: 480px) {
  .corridor-case .hero h1 { font-size: 39px; }
  .corridor-case .hero .blurb { font-size: 16px; }
  .corridor-case .corridor-story__header { align-items: flex-start; flex-direction: column; gap: 16px; }
  .corridor-case .corridor-story__steps { grid-template-columns: repeat(3, 1fr); }
  .corridor-case .corridor-story__map { min-height: 320px; }
  .corridor-case .corridor-story__evidence { padding: 22px; }
  .case-facts strong { font-size: 23px; }
  .case-chapter-body { padding: 22px 18px; }
  .corridor-case .case-chapter h2 { font-size: 26px; }
}

/* --- three-film segmented player ---------------------------------- */
/* Full-bleed dark band. The films are near-black; the surrounding page is not.
   Giving the chapter its own ground lets the video sit flush instead of
   floating on lavender, and makes the pill switcher legible. */
.film-section{
  position:relative;
  margin:96px 0 0;
  padding:96px 24px 88px;
  background:#05060c;
  color:#f4f3ff;
  /* break out of the page's centred column */
  left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
}
.film-section > *{max-width:1180px;margin-left:auto;margin-right:auto}
.film-section .story-copy{margin-top:0}
/* corridor-editorial.css sets .story-copy h2 dark at equal specificity and loads
   later, so these need the extra class to win on this dark band. */
.film-section .story-copy .story-label{color:#8f8bb5}
.film-section .story-copy h2{color:#f4f3ff;font-weight:300;letter-spacing:-.02em}
.film-section .story-copy p:not(.story-label){color:#8f8bb5}
.film-switch{display:flex;gap:4px;margin:40px auto 28px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  width:fit-content;max-width:100%;flex-wrap:wrap}
.film-switch button{appearance:none;border:0;cursor:pointer;border-radius:999px;
  padding:11px 22px;font:inherit;font-size:.95rem;color:#8f8bb5;background:transparent;
  transition:background .18s,color .18s}
.film-switch button:hover{color:#f4f3ff}
.film-switch button[aria-selected="true"]{background:rgba(255,255,255,.11);color:#f4f3ff}
.film-switch button:focus-visible{outline:2px solid #8fd8ff;outline-offset:2px}
.film-panel video{width:100%;height:auto;display:block;border-radius:10px;background:#05060c}
.film-note{max-width:70ch;margin:20px auto 0;font-size:.95rem;line-height:1.75;color:#8f8bb5}
.film-note a{color:#b9b2ff}
.film-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:32px}
.film-stat{padding:24px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09)}
.film-stat strong{display:block;font-size:2.6rem;font-weight:300;line-height:1;color:#f4f3ff}
.film-stat span{display:block;margin-top:10px;font-size:.86rem;color:#8f8bb5}
@media (max-width:640px){
  .film-section{padding:64px 16px 56px;margin-top:64px}
  .film-switch{width:100%}
  .film-switch button{flex:1 1 auto;text-align:center;padding:11px 12px;font-size:.86rem}
  .film-stat strong{font-size:2.1rem}
}