/* DRAFT C — SPLIT RAIL
   A fixed glass rail pinned to the left. The content panes are full-bleed and
   run underneath it, so the rail is refracting live content, not a flat ground.
   Panes are surfaces, so they take a hard 0px edge. */

:root{--railw:clamp(268px,23vw,368px)}

/* ---- the 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(24px,2vw,34px);
  border-radius:0;border-left:0;border-top:0;border-bottom:0;
  border-right:1px solid var(--line);
  background:linear-gradient(104deg,rgba(255,255,255,.085),rgba(255,255,255,.022) 60%,rgba(255,255,255,.038));
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset -1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.75),
    inset -40px 0 60px -56px rgba(0,0,0,.9),
    28px 0 70px rgba(0,0,0,.6)}
.rail::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 22%,
    rgba(255,255,255,0) 50%,rgba(255,255,255,.045) 100%);mix-blend-mode:screen}
.rail::after{content:"";position:absolute;right:0;top:6%;bottom:6%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--acc-line) 30%,rgba(255,255,255,.2),transparent)}
.rail > *{position:relative;z-index:2}

.mark{display:flex;align-items:center;gap:.75rem;font:900 1.05rem/1 var(--display);letter-spacing:-.04em}
.mark i{width:28px;height:28px;border-radius:7px;background:var(--acc);display:grid;place-items:center;
  color:var(--acc-ink);font:900 .76rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}
.rail .sub{margin-top:clamp(14px,1.4vw,20px);padding-bottom:clamp(22px,2.2vw,30px);
  border-bottom:1px solid var(--line2)}

/* index */
.idx{display:flex;flex-direction:column;margin-top:clamp(20px,2vw,28px)}
.idx a{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:clamp(15px,1.5vw,19px) clamp(10px,1vw,14px);border-radius:10px;
  font:500 .7rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);
  transition:color var(--t-mid) var(--e),background-color var(--t-mid) var(--e),opacity var(--t-mid) var(--e)}
.idx a:hover{color:var(--ink);background-color:rgba(247,244,236,.06)}
.idx a .n{color:var(--ink3);transition:color var(--t-mid) var(--e)}
.idx a.on{color:var(--ink);background-color:rgba(227,179,65,.09)}
.idx a.on .n{color:var(--acc)}

/* rail readout — bordered rows, padded on both axes */
.rout{margin-top:auto;border-top:1px solid var(--line2)}
.rout div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut);align-items:baseline;
  padding:clamp(15px,1.5vw,19px) clamp(6px,.8vw,12px);border-bottom:1px solid var(--line2)}
.rout dt{font:400 .62rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3)}
.rout dd{font:500 .74rem/var(--lh-h) var(--mono);letter-spacing:.08em;color:var(--acc-t);white-space:nowrap}
.rail .btn{margin-top:clamp(22px,2.2vw,30px);width:100%;padding-inline:1rem}

/* ---- the flow: full-bleed panes running under the rail ---- */
.flow{position:relative;z-index:1}
.pane{position:relative;
  padding:clamp(56px,6vw,110px) clamp(30px,4vw,80px) clamp(56px,6vw,110px)
          calc(var(--railw) + clamp(34px,3.4vw,76px));
  border-top:1px solid var(--line2)}
.pane:first-child{border-top:0}
.pane-in{max-width:1020px}

.pane.glass{border-radius:0;border-left:0;border-right:0}
.pane.glass::after{left:calc(var(--railw) + 2%);right:2%}

/* hero */
.hero{min-height:min(94vh,880px);display:flex;align-items:center}
.hero .lbl{display:block;margin-bottom:clamp(22px,2.2vw,32px)}
.hero .d1{margin-bottom:clamp(26px,2.6vw,38px)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3vw,44px)}

/* section head */
.shd{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(28px,3vw,44px)}
.shd .n{font:500 .66rem/1 var(--mono);letter-spacing:.19em;color:var(--acc-t)}
.shd .t{font:500 .66rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
.shd .r{flex:1;min-width:20px;height:1px;background:var(--line2)}

/* work rows */
.work{display:grid;border-top:1px solid var(--line2)}
.wrow{display:grid;grid-template-columns:3.2rem minmax(var(--labelw),15rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--line2)}
.wrow .n{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.17em;color:var(--acc)}
.wrow h3{font:700 clamp(1rem,1.25vw,1.15rem)/var(--lh-h) var(--display);letter-spacing:-.012em}
.wrow p{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2)}

/* course rows */
.courses{display:grid;border-top:1px solid var(--line2)}
.crow{display:grid;grid-template-columns:minmax(6.5rem,7.5rem) minmax(0,1fr) auto;
  gap:var(--gut);align-items:center;
  padding:clamp(26px,2.8vw,38px) var(--padi);border-bottom:1px solid var(--line2);
  transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.crow:hover{opacity:.9;background-color:rgba(247,244,236,.055)}
.crow .code{font:900 clamp(1.75rem,2.5vw,2.4rem)/var(--lh-d) var(--display);letter-spacing:-.05em;color:var(--acc)}
.crow .nm{font:700 clamp(1.08rem,1.4vw,1.3rem)/var(--lh-h) var(--display);letter-spacing:-.015em;
  margin-bottom:.7rem}
.crow p{font:400 .86rem/var(--lh-b) var(--display);color:var(--ink2);max-width:52ch}
.crow .go{font:500 .64rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc-t);white-space:nowrap}

/* start */
.start .body{margin-top:clamp(22px,2.2vw,32px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);
  margin-top:clamp(34px,3.4vw,50px)}
.step{padding:var(--padb) var(--padi);display:flex;flex-direction:column;gap:.9rem}
.step .n{font:500 .64rem/1 var(--mono);letter-spacing:.19em;color:var(--acc)}
.step h3{font:700 1rem/var(--lh-h) var(--display);letter-spacing:-.012em}
.step p{font:400 .82rem/var(--lh-b) var(--display);color:var(--ink2)}

/* footer */
.foot{position:relative;z-index:1;
  padding:var(--padb) clamp(30px,4vw,80px) clamp(38px,4vw,56px) calc(var(--railw) + clamp(34px,3.4vw,76px));
  border-top:1px solid var(--line2)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.foot-in a{color:var(--ink2);transition:color var(--t-mid) var(--e)}
.foot-in a:hover{color:var(--acc-t)}
.foot-in .sp{margin-left:auto}

@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.2rem;flex-wrap:wrap;
    border-right:0;border-bottom:1px solid var(--line);
    padding:clamp(16px,3vw,22px) clamp(20px,4vw,28px)}
  .rail::after{right:6%;left:6%;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--acc-line) 40%,rgba(255,255,255,.2),transparent)}
  .rail .sub,.idx,.rout{display:none}
  .rail .btn{margin:0 0 0 auto;width:auto;padding:.8rem 1.4rem}
  .pane,.foot{padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
  .pane.glass::after{left:2%;right:2%}
  .hero{min-height:auto}
  .wrow{grid-template-columns:2.6rem minmax(0,1fr);gap:1.2rem clamp(1.4rem,3vw,2rem)}
  .wrow p{grid-column:2}
  .crow{grid-template-columns:minmax(0,1fr);gap:1.1rem;align-items:start}
  .steps{grid-template-columns:minmax(0,1fr)}
}