/* DRAFT B — FLIGHT STRIP
   One tall narrow column of glass strips, boarding-pass logic: every strip has
   a main pane, a dashed tear line and a stub. Editorial, not dense. */

.col{width:min(820px,92vw);margin-inline:auto;position:relative;z-index:1}
main{position:relative;z-index:1}

/* ---- masthead ---- */
.mast{position:relative;z-index:1;padding:clamp(30px,4vw,58px) 0 clamp(24px,3vw,40px)}
.mast-in{display:flex;align-items:center;gap:1.2rem}
.mark{display:flex;align-items:center;gap:.75rem;font:900 1rem/1 var(--display);letter-spacing:-.04em}
.mark i{width:26px;height:26px;border-radius:7px;background:var(--acc);display:grid;place-items:center;
  color:var(--acc-ink);font:900 .72rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}
.mast .lbl{margin-left:auto;text-align:right}

/* ---- the strip ---- */
.strip{margin-bottom:clamp(14px,1.6vw,22px)}
.pane{padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,44px)}

/* strip head: sequence marker + label, on its own padded row */
.shd{display:grid;grid-template-columns:minmax(var(--labelw),max-content) minmax(0,1fr) auto;
  gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(26px,3vw,44px);
  border-bottom:1px solid var(--line2)}
.shd .seq{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc)}
.shd .ttl{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shd .rt{font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}

/* ---- the tear line + punched notches ---- */
.tear{position:relative;border-top:1px dashed var(--line2)}
.tear::before,.tear::after{content:"";position:absolute;top:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--bg);box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.tear::before{left:-13px}
.tear::after{right:-13px}

/* hero */
.hero .d1{margin-bottom:clamp(24px,2.4vw,34px)}
.hero .body{max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3vw,44px)}

/* counterfoil — the small print row under a tear */
.foil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);
  padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,44px)}
.foil div{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.foil dt{font:500 .62rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.foil dd{font:900 clamp(1.35rem,2.1vw,1.9rem)/var(--lh-d) var(--display);letter-spacing:-.04em;color:var(--acc)}
.foil dd small{display:block;margin-top:.55rem;font:400 .68rem/var(--lh-h) var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}

/* what-it-does: manifest rows, padded on both axes */
.manifest{display:grid}
.mrow{display:grid;grid-template-columns:minmax(var(--labelw),13rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) clamp(26px,3vw,44px);border-bottom:1px solid var(--line2)}
.mrow:last-child{border-bottom:0}
.mrow dt{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--acc-t)}
.mrow dd{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2)}

/* course pass: main pane + vertical stub */
.pass{display:grid;grid-template-columns:minmax(0,1fr) auto;
  transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.pass:hover{opacity:.9;background-color:rgba(247,244,236,.05)}
.pass-main{padding:clamp(26px,2.8vw,38px) clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:clamp(12px,1.2vw,16px);min-width:0}
.pass-main .nm{font:700 clamp(1.2rem,1.8vw,1.55rem)/var(--lh-h) var(--display);letter-spacing:-.018em}
.pass-main p{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2);max-width:52ch}
.pass-main .go{margin-top:.4rem;font:500 .64rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc-t)}
.pass-stub{position:relative;width:clamp(96px,10vw,132px);
  border-left:1px dashed var(--line2);
  display:grid;place-items:center;padding:clamp(26px,2.8vw,38px) clamp(18px,2vw,26px)}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;left:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--bg);box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.pass-stub::before{top:-13px}
.pass-stub::after{bottom:-13px}
.pass-stub .code{writing-mode:vertical-rl;transform:rotate(180deg);
  font:900 clamp(1.5rem,2.1vw,2.05rem)/1 var(--display);letter-spacing:.02em;color:var(--acc)}

/* CTA strip */
.start .pane{padding-block:clamp(40px,4.4vw,66px)}
.start .body{max-width:52ch}

/* footer */
.foot{position:relative;z-index:1;margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding-top:var(--padb);border-top:1px solid var(--line2);
  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:640px){
  .foil{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,28px)}
  .mrow{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .shd{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.1rem}
  .shd .rt{display:none}
  .pass{grid-template-columns:minmax(0,1fr)}
  .pass-stub{width:auto;border-left:0;border-top:1px dashed var(--line2);
    justify-items:start;padding:clamp(18px,4vw,24px) clamp(26px,3vw,44px)}
  .pass-stub::before{top:-13px;left:-13px}
  .pass-stub::after{bottom:auto;top:-13px;left:auto;right:-13px}
  .pass-stub .code{writing-mode:horizontal-tb;transform:none}
}