/* ============================================================
   ELEVANTE - drawn components, shared by both directions.
   Geometry and behaviour are identical; every colour comes from a
   custom property, so each direction renders these in its own palette.

   Each site must define:
     --dwg-ink      line work
     --dwg-paper    the surface the drawing sits on
     --dwg-accent   annotations and the stairwell zone
     --mat / --mat-lt / --mat-dk   the cabin material (swappable at runtime)
   ============================================================ */

/* ---------- SECTION DRAWING ---------- */
.dwg-scene{position:relative;height:340vh}
.dwg-stage{position:sticky;top:0;min-height:100dvh;display:grid;place-items:center;
  padding:clamp(72px,9vh,120px) var(--gutter) clamp(28px,5vh,56px)}
.dwg-figure{width:min(1120px,100%);margin:0}
.dwg{width:100%;height:auto;overflow:visible;display:block}

.dwg-wall{fill:none;stroke:var(--dwg-ink);stroke-width:3;stroke-linejoin:round}
.dwg-ground{stroke:var(--dwg-ink);stroke-width:4}
.dwg-hatchline{stroke:var(--dwg-ink);stroke-width:1.1;opacity:.3}
.dwg-slab{fill:var(--dwg-ink)}
.dwg-zone{fill:var(--dwg-accent);fill-opacity:.06;stroke:var(--dwg-accent);
  stroke-width:1.5;stroke-dasharray:6 6}
.dwg-furn{fill:none;stroke:var(--dwg-ink);stroke-width:2;opacity:.3}

/* treads carry the page colour so they occlude the cabin: that is what
   tells you the cabin is travelling BEHIND the stair, not in front of it */
.dwg-tread rect{fill:var(--dwg-paper);stroke:var(--dwg-ink);stroke-width:2.2;stroke-linejoin:round}
.dwg-stringer{fill:var(--dwg-paper);stroke:var(--dwg-ink);stroke-width:2.4}
.dwg-rail{fill:none;stroke:var(--dwg-ink);stroke-width:2.4;stroke-linecap:round}

.dwg-cabin{fill:var(--mat);stroke:var(--dwg-ink);stroke-width:2.6;transition:fill .45s ease}
.dwg-cabin-in{fill:var(--mat-lt);transition:fill .45s ease}
.dwg-ctrl{fill:var(--dwg-ink);opacity:.65}
.dwg-door{fill:var(--mat-dk);stroke:var(--dwg-ink);stroke-width:2.2;transition:fill .45s ease}
.dwg-person{fill:var(--dwg-ink)}

.dwg-note text{font-family:var(--mono);font-size:12.5px;font-weight:600;
  fill:var(--dwg-accent);letter-spacing:.1em;text-transform:uppercase}
.dwg-leader{stroke:var(--dwg-accent);stroke-width:1.2;fill:none}
.dwg-dot{fill:var(--dwg-accent)}

.dwg-cap{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-top:20px;flex-wrap:wrap}
.dwg-readout{font-family:var(--mono);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dwg-accent)}
.dwg-disclaimer{font-size:.875rem;opacity:.6;max-width:46ch}

/* ---------- CABIN SCENE ---------- */
.cab{display:grid;gap:clamp(20px,3vw,32px)}
.cab-tabs{display:flex;flex-wrap:wrap;gap:8px}
.cab-tab{
  min-height:52px;padding:0 22px;border-radius:var(--r);
  border:1.5px solid var(--line);background:transparent;color:inherit;
  font:inherit;font-weight:600;font-size:1rem;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.cab-tab:hover{border-color:currentColor}
.cab-tab[aria-selected="true"]{background:var(--dwg-accent);border-color:var(--dwg-accent);color:var(--on-accent)}

.cab-stagewrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.cab-svg{width:100%;height:auto;display:block}
/* the UA [hidden] rule does not reliably reach SVG children */
.cab-svg [hidden]{display:none !important}
.cab-shell{fill:none;stroke:var(--dwg-ink);stroke-width:3}
.cab-floor{fill:var(--mat-lt);opacity:.5}
.cab-door{stroke:var(--dwg-accent);stroke-width:5;stroke-linecap:round}
.cab-panel{fill:var(--dwg-ink);opacity:.6}
.cab-dim{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:var(--dwg-accent)}
.cab-person{fill:var(--dwg-ink)}
.cab-person-2{opacity:.55}
.cab-aid{fill:none;stroke:var(--dwg-ink);stroke-width:4;stroke-linejoin:round}
.cab-aid rect,.cab-aid circle{fill:var(--dwg-paper)}
.cab-wheel{fill:none}
.cab-notes p{font-size:1.0625rem;line-height:1.65;max-width:38ch}

/* ---------- PLAN COMPARISON ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.plan{margin:0;display:grid;gap:18px}
.plan-svg{width:100%;height:auto;display:block}
.plan-outline{fill:none;stroke:var(--dwg-ink);stroke-width:3}
.plan-wall{stroke:var(--dwg-ink);stroke-width:2;opacity:.45}
.plan-stair rect{fill:none;stroke:var(--dwg-ink);stroke-width:2}
.plan-stair path{stroke:var(--dwg-ink);stroke-width:1.4;fill:none;opacity:.55}
.plan-lost rect{fill:var(--warn);fill-opacity:.16;stroke:var(--warn);stroke-width:2}
.plan-lost path{stroke:var(--warn);stroke-width:2}
.plan-cabin{fill:var(--mat);stroke:var(--dwg-ink);stroke-width:2.4}
.plan-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--warn)}
.plan-lbl-mute{fill:var(--dwg-ink);opacity:.5}
.plan-ours .plan-lbl{fill:var(--dwg-accent)}
.plan figcaption{font-size:1.0312rem;line-height:1.6;opacity:.82;max-width:40ch}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cab-stagewrap{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .dwg-scene{height:300vh}
}
@media (max-width:640px){
  .dwg-cap{flex-direction:column;gap:8px}
  .cab-tab{flex:1 1 calc(50% - 8px);padding:0 12px;font-size:.9375rem}
}

/* ---------- REDUCED MOTION ---------- */
/* The drawing stops being a scroll toy and becomes a static diagram of the
   arrived state. The caption still explains the movement in words. */
@media (prefers-reduced-motion:reduce){
  .dwg-scene{height:auto}
  .dwg-stage{position:static;min-height:0;padding-block:0}
  .dwg-cabin,.dwg-cabin-in,.dwg-door{transition:none}
}

/* ============================================================
   IMAGE LAYOUTS
   These fill the fields that were reading as empty white.
   ============================================================ */

/* ---------- hero cluster: three overlapping frames ---------- */
.cluster{position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto auto;gap:clamp(10px,1.4vw,18px);align-items:start}
.cluster figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--sheet-3,var(--paper-3))}
.cluster img{width:100%;height:100%;object-fit:cover}
.cluster-a{grid-column:1/5;grid-row:1/3;aspect-ratio:4/5}
.cluster-b{grid-column:5/7;grid-row:1/2;aspect-ratio:1/1;margin-top:clamp(24px,5vw,64px) !important}
.cluster-c{grid-column:5/7;grid-row:2/3;aspect-ratio:3/4}

/* ---------- full-bleed image band ---------- */
/* rendered outside .shell, so 100% is already edge to edge. Never use
   100vw here: vw includes the scrollbar and adds ~8-17px of sideways scroll. */
.img-band{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.band-cell{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--sheet-3,var(--paper-3))}
.band-cell img{width:100%;height:100%;object-fit:cover}
.band-cap{margin-top:16px;font-family:var(--mono);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}

/* ---------- image marquee ---------- */
.img-marquee{overflow:hidden;padding-block:4px}
.mq-track{display:flex;gap:10px;width:max-content;animation:mqslide 52s linear infinite}
.mq-cell{margin:0;flex:0 0 clamp(200px,22vw,330px);aspect-ratio:4/3;
  overflow:hidden;border-radius:var(--r);background:var(--sheet-3,var(--paper-3))}
.mq-cell img{width:100%;height:100%;object-fit:cover}
@keyframes mqslide{to{transform:translateX(-50%)}}

/* ---------- mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px)}
.m-cell{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--sheet-3,var(--paper-3));min-width:0}
.m-cell img{width:100%;height:100%;object-fit:cover;display:block}
.m-cell figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,rgba(10,12,10,0),rgba(10,12,10,.82))}
.m-tall{grid-column:span 2;grid-row:span 2;aspect-ratio:3/4}
.m-wide{grid-column:span 4;aspect-ratio:16/9}
.m-sq{grid-column:span 2;aspect-ratio:1/1}
.m-full{grid-column:span 6;aspect-ratio:24/7}

@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .m-tall,.m-wide,.m-sq{grid-column:span 2}
  .m-full{grid-column:span 4;aspect-ratio:16/7}
  .m-tall{grid-row:auto;aspect-ratio:1/1}
  .m-wide{aspect-ratio:4/3}
  .img-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mosaic{grid-template-columns:1fr}
  .m-tall,.m-wide,.m-sq,.m-full{grid-column:1/-1;aspect-ratio:4/3}
  .cluster{grid-template-columns:repeat(4,1fr)}
  .cluster-a{grid-column:1/4;grid-row:1/2}
  .cluster-b{grid-column:4/5;grid-row:1/2;margin-top:0 !important}
  .cluster-c{grid-column:1/5;grid-row:2/3;aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;transform:none}
}