/* /projects/bilvaskexpress/: case study as a drive through the wash hall, on top of essay.css (scene: bilvask-scene.js). */
:root{--water:#7FC4E8}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.essay section{padding:16vh 0}
.stop.chapter-now{display:flex;align-items:center;gap:12px}
.stop{margin:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.88rem}
.stop b{color:var(--ink);font-weight:500}
.meter{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--water),var(--accent));z-index:1100}
.kicker{margin:0 0 1rem;color:var(--water);font-size:.92rem;font-weight:500}
.essay h1 em{display:block;margin-top:.3em;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.52em;letter-spacing:-.005em;color:#E6E0D3}
.essay .dek{font-family:var(--sans);font-style:normal;margin:0 0 1.4rem;font-size:1.1rem;line-height:1.6;color:#DED8CD;max-width:33rem}
.did{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.did li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--muted)}
.label{display:flex;align-items:baseline;gap:10px;margin:0 0 .7rem;color:var(--water);font-size:.92rem;font-weight:500;font-variant-numeric:tabular-nums}
.label span{color:var(--muted);font-weight:400}
.steps5{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.steps5 li{padding:12px 10px;border:1px solid var(--line);border-radius:12px;text-align:center}
.steps5 small{display:block;color:var(--water);font-size:.78rem;font-weight:500}
.steps5 b{display:block;margin:4px 0 2px;font-size:.98rem}
.steps5 span{color:var(--muted);font-size:.8rem;line-height:1.35;display:block}
.steps5 li:last-child{border-color:var(--accent)}
.steps5 li:last-child small{color:var(--accent)}
.cars{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cars li{padding:14px;border:1px solid var(--line);border-radius:12px}
.cars small{display:block;color:var(--water);font-weight:500;font-size:.8rem}
.cars b{display:block;margin:4px 0;font-size:1.1rem}
.cars span{color:var(--muted);font-size:.85rem}
.calc{margin:1.2rem 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(16,16,15,.6)}
.calc fieldset{margin:0 0 14px;padding:0;border:0}
.calc legend{margin-bottom:8px;font-size:.85rem;font-weight:500;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:.92rem;cursor:pointer}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border-color:var(--water);color:var(--ink);background:rgba(127,196,232,.1)}
.opt[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.opt .lock{font-size:.75rem;color:var(--accent)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:#07090C}
.sum span{font-size:.92rem;color:#CFC9BD}
.sum b{color:var(--accent);font-weight:500}
.rules{list-style:none;margin:1rem 0 0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.7;color:var(--muted)}
.rules li b{color:var(--water);font-weight:500}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}
.areas span{padding:9px 14px;border:1px solid var(--line);border-radius:999px;font-size:.95rem}
.areas span:last-child{border-color:var(--accent)}
.topics{list-style:none;margin:1rem 0;padding:0;border-top:1px solid var(--line)}
.topics li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.proto{margin:1.2rem 0;padding:16px;border:1px dashed rgba(244,122,42,.6);border-radius:16px}
.proto .badge{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(244,122,42,.14);color:var(--accent);font-size:.78rem;font-weight:500}
.proto ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.proto li{display:grid;grid-template-columns:7.5rem 1fr;gap:10px;font-size:.94rem}
.proto li b{font-weight:500}
.proto li span{color:var(--muted)}
.certs{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.certs li{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,250,240,.03)}
.certs .lg{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:10px;background:rgba(255,250,240,.06)}
.certs .lg img{max-width:30px;max-height:30px;display:block}
.certs b{display:block;font-weight:500;font-size:.95rem}
.certs small{color:var(--muted);font-size:.82rem}
.essay .final h2{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.03em}
.essay .final h2 span{display:block}
.essay .final h2 span:nth-child(2){color:var(--water)}
.essay .final h2 span:nth-child(3){color:var(--accent)}
@media (max-width:820px){
  .steps5{grid-template-columns:repeat(3,1fr)}
  .cars,.certs{grid-template-columns:1fr}
  .proto li{grid-template-columns:1fr;gap:2px}
}

/* 2026-10-02 — artifact finish: transparent editorial cards + visual continuity */
body{background:#0b0d0f}
#scene{filter:saturate(.96) contrast(1.04)}
.essay-shade{
  background:
    radial-gradient(90% 70% at 82% 48%,rgba(127,196,232,.055),transparent 62%),
    linear-gradient(90deg,rgba(8,10,12,.94) 0%,rgba(8,10,12,.78) 30%,rgba(8,10,12,.22) 56%,rgba(8,10,12,0) 72%);
}
.essay section{min-height:92svh;display:flex;align-items:center;padding:14vh 0}
.essay .hero{min-height:100svh}
.essay .wrap{width:min(45rem,100%)}
.panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(12,14,16,.66),rgba(12,14,16,.34));
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  backdrop-filter:blur(16px) saturate(1.12);
  border:1px solid rgba(255,250,240,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.22);
  border-radius:24px;
  padding:30px 30px 18px;
}
.panel::before{
  content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(127,196,232,.65),rgba(244,122,42,.5),transparent);
  opacity:.6
}
.essay h1{font-size:clamp(3rem,6.2vw,5.6rem);max-width:12ch}
.essay h1 em{max-width:13ch;line-height:1.08}
.essay .dek{font-size:clamp(1.08rem,1.7vw,1.32rem);max-width:38rem}
.did{max-width:39rem}
.did li{background:rgba(8,10,12,.35);backdrop-filter:blur(8px)}
.label{letter-spacing:.02em;text-transform:uppercase;font-size:.78rem}
.label span{letter-spacing:.08em}
.steps5 li,.cars li,.certs li{background:rgba(255,250,240,.025);backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.steps5 li:hover,.cars li:hover,.certs li:hover{transform:translateY(-2px);border-color:rgba(127,196,232,.38);background:rgba(127,196,232,.055)}
.calc{background:linear-gradient(145deg,rgba(8,12,15,.82),rgba(11,14,16,.52));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.case-frame{position:relative;margin:22px 0 8px;border-radius:18px;overflow:hidden;min-height:200px;border:1px solid rgba(255,250,240,.1);background:#0c0e10;box-shadow:0 22px 70px rgba(0,0,0,.28)}
.case-frame-wide{min-height:260px}
.case-frame-compact{min-height:180px}
.case-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.72);transform:scale(1.015);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.case-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(5,7,9,.84) 100%)}
.case-frame span{position:absolute;z-index:2;left:18px;right:18px;bottom:15px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.case-frame b{font-size:.9rem;font-weight:600}
.case-frame small{color:#c7c0b6;text-align:right;font-size:.78rem}
.case-frame:hover img{transform:scale(1.035);filter:saturate(.95) contrast(1.04) brightness(.82)}
.station-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,250,240,.34);font:600 8px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;pointer-events:none}
.station-rail i{position:absolute;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(127,196,232,.08),rgba(127,196,232,.36),rgba(244,122,42,.3),rgba(244,122,42,.06));z-index:-1}
.station-rail span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(8,10,12,.5);border:1px solid rgba(255,250,240,.09);backdrop-filter:blur(8px)}
.stop.chapter-now{padding:8px 12px;border:1px solid rgba(255,250,240,.08);border-radius:999px;background:rgba(8,10,12,.38);backdrop-filter:blur(10px)}
.final .panel{background:linear-gradient(135deg,rgba(12,14,16,.78),rgba(12,14,16,.48));border-color:rgba(244,122,42,.18)}
@media(max-width:820px){
  .essay-shade{background:linear-gradient(180deg,rgba(7,9,11,.12),rgba(7,9,11,.74) 50%,rgba(7,9,11,.88))}
  .essay section{min-height:auto;padding:13vh 0}
  .essay .hero{min-height:100svh;align-items:flex-end;padding-bottom:8vh}
  .essay .hero .wrap{background:linear-gradient(145deg,rgba(9,11,13,.72),rgba(9,11,13,.48));backdrop-filter:blur(14px);border:1px solid rgba(255,250,240,.08);border-radius:22px;padding:24px 20px;margin:0 4vw;width:auto}
  .panel{margin-left:0;margin-right:0;border-radius:20px;padding:22px 18px 10px}
  .essay .wrap{padding:0 4vw}
  .steps5{grid-template-columns:1fr 1fr}
  .case-frame span{display:block}.case-frame small{display:block;text-align:left;margin-top:4px}
  .station-rail{display:none}
}
@media(max-width:520px){
  .essay h1{font-size:clamp(2.65rem,13vw,4rem)}
  .steps5{grid-template-columns:1fr}
  .did{gap:6px}.did li{font-size:.78rem;padding:5px 10px}
  .case-frame,.case-frame-wide,.case-frame-compact{min-height:190px}
}