/* DRAFT G — GATE PANEL.
   Draft C's open side rail, rebuilt in draft D's ticket language: the rail is
   a permanently-open boarding pass stub pinned to the left, and the content
   panes are full-bleed, so they run UNDERNEATH it. The departure board pane is
   full-bleed dark and carries a column of oversized course codes positioned
   specifically to sit behind the rail — real content, put there to be
   refracted. When it passes under, the rail visibly goes dark and swaps its
   ink to stay legible.

   No decorative background anywhere: every pane ground is a flat colour and
   the only blur on the page is the rail, which always has real content behind
   it. */

:root{--railw:clamp(282px,24vw,392px)}
body{overflow-x:hidden}

/* ── THE STUB RAIL ───────────────────────────────────────────────────────*/
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--railw);z-index:40;
  display:flex;flex-direction:column;
  padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,32px);
  border-radius:0;border:0;border-right:1px dashed var(--r-line);
  /* local ink set, swapped wholesale when a dark pane is beneath */
  --r-ink:var(--ink);--r-ink2:var(--ink2);--r-ink3:var(--ink3);
  --r-line:var(--rule);--r-acc:var(--acc);
  background:linear-gradient(158deg,
     rgba(255,255,255,.72) 0%,
     rgba(255,255,255,.50) 46%,
     rgba(255,255,255,.44) 78%,
     rgba(255,255,255,.54) 100%);
  backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 1px 0 0 rgba(255,255,255,.6),
    inset -18px 0 34px -36px rgba(70,55,35,.6),
    26px 0 60px -34px rgba(70,55,35,.45);
  color:var(--r-ink);
  transition:background var(--t-slow) var(--e2),color var(--t-slow) var(--e2),
             border-color var(--t-slow) var(--e2)}
/* dark-backed: the fill thins so the board reads through, and every ink flips */
.rail.dark{
  --r-ink:var(--board-ink);--r-ink2:#CDC6B6;--r-ink3:#98A0AC;
  --r-line:rgba(233,228,214,.24);--r-acc:var(--flap);
  background:linear-gradient(158deg,
     rgba(255,255,255,.20) 0%,
     rgba(255,255,255,.11) 46%,
     rgba(255,255,255,.08) 78%,
     rgba(255,255,255,.14) 100%)}
.rail > *{position:relative;z-index:2}

.rail .mark{color:var(--r-ink)}
.rail .mark span{color:var(--r-ink3)}
.rail .sub{margin-top:clamp(14px,1.4vw,20px);padding-bottom:clamp(20px,2vw,28px);
  border-bottom:1px solid var(--r-line);color:var(--r-ink3);
  transition:color var(--t-slow) var(--e2),border-color var(--t-slow) var(--e2)}

/* the section index, with a travelling gate marker instead of a lit background */
.idx{position:relative;margin-top:clamp(18px,1.8vw,26px);display:flex;flex-direction:column}
.idx .tick{position:absolute;left:0;top:0;width:3px;height:var(--th,44px);background:var(--r-acc);
  transform:translateY(var(--ty,0));
  transition:transform .55s var(--e),height .55s var(--e),background-color var(--t-slow) var(--e2)}
.idx a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:clamp(14px,1.4vw,18px) clamp(12px,1.2vw,16px);
  font:500 .68rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--r-ink3);transition:color var(--t-mid) var(--e)}
.idx a .n{color:var(--r-ink3);transition:color var(--t-mid) var(--e)}
.idx a:hover{color:var(--r-ink)}
.idx a.on{color:var(--r-ink)}
.idx a.on .n{color:var(--r-acc)}

/* rail readout — bordered rows, padded on both axes */
.rout{margin-top:auto;border-top:1px solid var(--r-line);transition:border-color var(--t-slow) var(--e2)}
.rout div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut);align-items:baseline;
  padding:clamp(14px,1.4vw,18px) clamp(8px,1vw,14px);border-bottom:1px solid var(--r-line);
  transition:border-color var(--t-slow) var(--e2)}
.rout dt{font:400 .6rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--r-ink3)}
.rout dd{font:500 .72rem/var(--lh-h) var(--mono);letter-spacing:.08em;color:var(--r-acc);white-space:nowrap}
.rout .now dd{color:var(--r-ink)}

.rail .btn{margin-top:clamp(18px,1.8vw,26px);width:100%;padding-inline:1rem;
  color:var(--r-ink);border-color:var(--r-line);background:rgba(255,255,255,.34)}
.rail.dark .btn{background:rgba(255,255,255,.10)}
.rail .btn-acc{background:var(--acc);color:#fff;border-color:transparent}
.rail.dark .btn-acc{background:var(--acc)}

/* the stub foot: coded strip + sequence, the way a real counterfoil ends */
.stubfoot{margin-top:clamp(18px,1.8vw,26px);padding-top:clamp(16px,1.6vw,22px);
  border-top:1px dashed var(--r-line);display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gut);transition:border-color var(--t-slow) var(--e2)}
.stubfoot .sq{font:400 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--r-ink3)}
.stubfoot .bars i{background:var(--r-ink);opacity:.7}

/* the perforation fill: the tear line down the rail's right edge fills as you
   board the page */
.railfill{position:absolute;top:0;right:-1px;width:1px;height:100%;background:var(--acc);
  transform:scaleY(0);transform-origin:50% 0;z-index:3}

/* ── THE FLOW: full-bleed panes running under the rail ───────────────────*/
.flow{position:relative;z-index:1}
.pane{position:relative;border-top:1px solid var(--rule);
  padding:clamp(58px,6.5vw,116px) clamp(30px,4vw,80px) clamp(58px,6.5vw,116px)
          calc(var(--railw) + clamp(34px,3.4vw,76px))}
.pane:first-child{border-top:0}
.pane-in{max-width:1000px}
.pane.stock{background:var(--paper2)}

/* the one dark surface, full-bleed so it passes right under the rail */
.pane.dark{background:var(--board);color:var(--board-ink);border-top-color:var(--board);
  min-height:min(96vh,900px);display:flex;flex-direction:column;justify-content:center}
.pane.dark .lbl{color:var(--board-dim)}
.pane.dark .d2{color:var(--board-ink)}
.pane.dark .turn{color:var(--flap)}
.pane.dark .body{color:#BDB6A6}
/* the codes that live behind the rail, sized to be legible AS refraction */
.ghost{position:absolute;left:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);
  width:calc(var(--railw) - clamp(24px,2.6vw,40px));display:grid;gap:clamp(18px,2.2vw,30px);
  font:900 clamp(2.3rem,3.7vw,3.5rem)/1 var(--display);letter-spacing:-.03em;color:#4E5A69}

/* board inside the dark pane: it is already on the dark ground */
.pane.dark .board{background:transparent;margin-top:clamp(28px,3vw,44px);
  border:1px solid rgba(233,228,214,.14)}
.pane.dark .board-top{padding-inline:clamp(20px,2.2vw,30px)}
.pane.dark .brow{padding-inline:clamp(20px,2.2vw,30px)}

/* ── hero ────────────────────────────────────────────────────────────────*/
.hero{min-height:min(94vh,880px);display:flex;flex-direction:column;justify-content:center}
.hero .lbl{display:block;margin-bottom:clamp(20px,2vw,30px)}
.hero .d1{margin-bottom:clamp(24px,2.4vw,34px);font-size:clamp(2.4rem,5.4vw,5rem)}
.hero .cta{margin-top:clamp(28px,2.8vw,42px)}
.hero .foil{margin-top:clamp(36px,4vw,58px);padding:0;border-top:1px dashed var(--rule);
  padding-top:clamp(24px,2.6vw,34px)}

/* ── section head ────────────────────────────────────────────────────────*/
.phd{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(24px,2.6vw,38px)}
.phd .n{font:500 .66rem/1 var(--mono);letter-spacing:.19em;color:var(--acc)}
.phd .t{font:500 .66rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
.phd .r{flex:1;min-width:20px;height:1px;background:var(--rule)}
.pane.dark .phd .n{color:var(--flap)}
.pane.dark .phd .t{color:var(--board-ink)}
.pane.dark .phd .r{background:rgba(233,228,214,.18)}

/* ── manifest rows ───────────────────────────────────────────────────────*/
.manifest{display:grid;border-top:1px solid var(--rule);margin-top:clamp(28px,3vw,44px)}
.mrow{display:grid;grid-template-columns:minmax(var(--labelw),13rem) minmax(0,1fr) auto;
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--rule);
  transition:background-color var(--t-mid) var(--e)}
.mrow:hover{background-color:var(--wash)}
.mrow dt{font:500 .68rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.mrow dd{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2)}
.mrow .ref{font:400 .6rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap}

/* ── course rows, each with its own stub ─────────────────────────────────*/
.courses{display:grid;gap:clamp(11px,1.2vw,16px);margin-top:clamp(28px,3vw,44px)}
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--paper2);
  border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 1px var(--glass-cast1),0 14px 30px -26px var(--glass-cast2);
  transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.crow:hover{opacity:.93;background-color:#FFFDF8}
.crow-main{padding:clamp(24px,2.6vw,34px) var(--padi);display:flex;flex-direction:column;
  gap:clamp(9px,1vw,13px);min-width:0}
.crow-main .nm{font:700 clamp(1.1rem,1.6vw,1.4rem)/var(--lh-h) var(--display);letter-spacing:-.018em}
.crow-main p{font:400 .86rem/var(--lh-b) var(--display);color:var(--ink2);max-width:54ch}
.crow-main .go{margin-top:.25rem;font:500 .62rem/1 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--acc)}
.crow-stub{position:relative;width:clamp(102px,9vw,140px);border-left:1px dashed var(--rule);
  display:grid;justify-items:center;align-content:center;gap:clamp(10px,1.2vw,16px);
  padding:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,20px)}
.crow-stub::before,.crow-stub::after{content:"";position:absolute;left:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--paper);box-shadow:inset 0 2px 3px rgba(70,55,35,.2)}
.crow-stub::before{top:-13px}
.crow-stub::after{bottom:-13px}
.crow-stub .code{font:900 clamp(1.45rem,2vw,1.95rem)/1 var(--display);letter-spacing:-.02em;color:var(--acc-d)}
.crow-stub .sq{font:400 .56rem/1 var(--mono);letter-spacing:.2em;color:var(--ink3)}

/* ── start ───────────────────────────────────────────────────────────────*/
.start .body{margin-top:clamp(20px,2vw,30px)}
.start .steps{margin-top:clamp(30px,3.2vw,46px)}
.start .cta{margin-top:clamp(28px,2.8vw,42px)}

/* ── footer ──────────────────────────────────────────────────────────────*/
.foot{position:relative;z-index:1;
  padding:0 clamp(30px,4vw,80px) clamp(36px,4vw,56px) calc(var(--railw) + clamp(34px,3.4vw,76px))}

@media (max-width:900px){
  :root{--railw:0px}
  .rail{position:sticky;top:0;bottom:auto;width:100%;height:auto;flex-direction:row;
    align-items:center;gap:1.1rem;flex-wrap:wrap;
    border-right:0;border-bottom:1px dashed var(--r-line);
    padding:clamp(15px,3vw,22px) clamp(20px,4vw,28px)}
  .rail .sub,.idx,.rout,.stubfoot{display:none}
  .rail .btn{margin:0 0 0 auto;width:auto;padding:.8rem 1.4rem}
  .railfill{top:auto;bottom:-1px;right:auto;left:0;width:100%;height:1px;
    transform:scaleX(0);transform-origin:0 50%}
  .ghost{display:none}
  .pane,.foot{padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
  .pane.dark{min-height:auto}
  .hero{min-height:auto}
  .mrow{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .mrow .ref{display:none}
  .crow{grid-template-columns:minmax(0,1fr)}
  .crow-stub{width:auto;border-left:0;border-top:1px dashed var(--rule);
    grid-auto-flow:column;justify-content:start;align-items:center;
    padding:clamp(16px,3.5vw,22px) var(--padi)}
  .crow-stub::before{top:-13px;left:-13px}
  .crow-stub::after{bottom:auto;top:-13px;left:auto;right:-13px}
}