/* DRAFT H — TICKET ROLL.
   Not D's stacked passes and not a cluster: the whole page is ONE continuous
   strip of ticket stock printed top to bottom, and the sections are coupons
   separated by real perforations. You tear each perforation as you scroll past
   it, and the torn stubs collect in the masthead. The departure board is docked
   inside coupon 03, sticky, and the five passes dock into it one at a time.

   Flat grounds only: the page is --paper, the roll is --paper2, the board is
   the one dark surface. No pattern, no wash, no glass anywhere except the
   masthead, which has the roll scrolling under it. */

body{background:var(--paper);padding-bottom:clamp(30px,4vw,56px)}

/* ── masthead with the stub ledger ───────────────────────────────────────*/
.bar{position:sticky;top:0;z-index:60;
  background:rgba(246,241,228,.86);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--rule)}
.bar-in{width:min(1080px,92vw);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);
  padding:clamp(12px,1.2vw,17px) 0;min-height:62px}
.bar .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger{display:flex;gap:5px;margin-left:auto;list-style:none}
.ledger li{width:2.8rem;padding:.5rem 0;text-align:center;border:1px dashed var(--rule);border-radius:4px;
  font:500 .56rem/1 var(--mono);letter-spacing:.12em;color:var(--ink3);
  transition:background-color var(--t-mid) var(--e),color var(--t-mid) var(--e),
             border-color var(--t-mid) var(--e)}
.ledger li.on{background:var(--acc);border-style:solid;border-color:transparent;color:#fff}
.bar .btn{padding:.7rem 1.35rem}

/* ── THE ROLL ────────────────────────────────────────────────────────────*/
.roll{position:relative;z-index:1;width:min(1080px,92vw);margin:clamp(20px,2.2vw,30px) auto 0;
  background:var(--paper2);border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  box-shadow:0 1px 1px var(--glass-cast1),0 26px 60px -44px var(--glass-cast2)}
.cpn{padding:clamp(44px,5.4vw,84px) clamp(26px,3.4vw,62px)}

/* ── THE PERFORATION ────────────────────────────────────────────────────
   A dashed rule with a punched notch at each end, filled with the page ground
   so the hole reads as a hole. Torn state: the rule goes solid vermillion and
   the notches open. No pattern involved. */
.perf{position:relative;height:0;border-top:1px dashed var(--rule);
  transition:border-color var(--t-mid) var(--e)}
.perf::before,.perf::after{content:"";position:absolute;top:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--paper);box-shadow:inset 0 2px 3px rgba(70,55,35,.22);
  transition:width var(--t-mid) var(--e),height var(--t-mid) var(--e),top var(--t-mid) var(--e)}
.perf::before{left:-14px}
.perf::after{right:-14px}
.perf .lab{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  background:var(--paper2);padding:0 clamp(12px,1.4vw,20px);white-space:nowrap;
  font:500 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
  transition:color var(--t-mid) var(--e)}
.perf.torn{border-top-style:solid;border-top-color:var(--acc)}
.perf.torn::before,.perf.torn::after{width:32px;height:32px;top:-16px}
.perf.torn::before{left:-17px}
.perf.torn::after{right:-17px}
.perf.torn .lab{color:var(--acc)}

/* ── coupon head ─────────────────────────────────────────────────────────*/
.chd{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(24px,2.6vw,38px)}
.chd .n{font:500 .66rem/1 var(--mono);letter-spacing:.19em;color:var(--acc)}
.chd .t{font:500 .66rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
.chd .r{flex:1;min-width:20px;height:1px;background:var(--rule)}
.chd .x{font:400 .62rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}

/* ── coupon 01 · boarding ────────────────────────────────────────────────*/
.cpn .d1{margin-bottom:clamp(24px,2.4vw,34px);font-size:clamp(2.4rem,5.6vw,5.1rem)}
.cpn .body{max-width:58ch}
.cpn .cta{margin-top:clamp(28px,2.8vw,42px)}
.cpn .foil{padding:clamp(26px,2.8vw,36px) 0 0;margin-top:clamp(32px,3.4vw,48px);
  border-top:1px dashed var(--rule)}

/* ── coupon 02 · manifest ───────────────────────────────────────────────*/
.manifest{display:grid;border-top:1px solid var(--rule);margin-top:clamp(26px,2.8vw,40px)}
.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}

/* ── coupon 03 · the gate: a sticky board, passes docking into it ────────*/
.gatewrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(16px,2vw,30px);align-items:start;margin-top:clamp(26px,2.8vw,40px)}
.dock{position:sticky;top:calc(62px + clamp(16px,1.8vw,26px));
  --bcols:5.2rem minmax(0,1fr) 7.4rem;--bmin:360px}
.dock .board{border-radius:12px}
.dock .board-top{padding:clamp(18px,1.9vw,24px) clamp(18px,2vw,26px)}
.dock .brow{padding:clamp(17px,1.8vw,23px) clamp(18px,2vw,26px)}
.dock .flap{--fsize:.72rem}
.dock .board-top .flap{--fsize:clamp(.9rem,1.3vw,1.15rem)}
.dock .bname{font-size:.7rem;letter-spacing:.1em}
.dockfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--gut);
  padding:clamp(14px,1.5vw,19px) clamp(18px,2vw,26px);border-top:1px solid rgba(233,228,214,.13);
  font:400 .58rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--board-dim)}
.dockfoot b{font-weight:500;color:var(--flap)}

.docklist{display:grid;gap:clamp(11px,1.2vw,16px)}
.dcard{position:relative;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:border-color var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.dcard.on{border-color:var(--acc);background:#FFFDF8}
.dcard-main{padding:clamp(22px,2.4vw,32px) var(--padi);display:flex;flex-direction:column;
  gap:clamp(9px,1vw,13px);min-width:0}
.dcard-main .nm{font:700 clamp(1.05rem,1.5vw,1.32rem)/var(--lh-h) var(--display);letter-spacing:-.018em}
.dcard-main p{font:400 .84rem/var(--lh-b) var(--display);color:var(--ink2)}
.dcard-main .go{margin-top:.25rem;font:500 .62rem/1 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--acc)}
.dcard-stub{position:relative;width:clamp(92px,8vw,124px);border-left:1px dashed var(--rule);
  display:grid;justify-items:center;align-content:center;gap:clamp(9px,1.1vw,14px);
  padding:clamp(20px,2.2vw,28px) clamp(12px,1.4vw,18px)}
.dcard-stub::before,.dcard-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)}
.dcard-stub::before{top:-13px}
.dcard-stub::after{bottom:-13px}
.dcard-stub .code{font:900 clamp(1.35rem,1.9vw,1.8rem)/1 var(--display);letter-spacing:-.02em;color:var(--acc-d)}
.dcard-stub .sq{font:400 .56rem/1 var(--mono);letter-spacing:.2em;color:var(--ink3)}

/* ── coupon 04 · final call ─────────────────────────────────────────────*/
.cpn .steps{margin-top:clamp(28px,3vw,44px)}

/* ── coupon 05 · the stub ───────────────────────────────────────────────*/
.endstub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gut);
  padding:clamp(28px,3vw,42px) clamp(26px,3.4vw,62px)}
.endstub .code{font:900 clamp(1.6rem,2.4vw,2.2rem)/1 var(--display);letter-spacing:-.03em;color:var(--acc-d)}
.endstub .sq{font:400 .6rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.endstub .bars{margin-left:auto}

/* ── footer ─────────────────────────────────────────────────────────────*/
.foot{width:min(1080px,92vw);margin:clamp(34px,4vw,58px) auto 0}

@media (max-width:900px){
  .gatewrap{grid-template-columns:minmax(0,1fr)}
  .dock{position:static}
}
@media (max-width:760px){
  .ledger{display:none}
  .bar .btn{margin-left:auto}
  .mrow{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .mrow .ref{display:none}
  .dcard{grid-template-columns:minmax(0,1fr)}
  .dcard-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)}
  .dcard-stub::before{top:-13px;left:-13px}
  .dcard-stub::after{bottom:auto;top:-13px;left:auto;right:-13px}
  .perf .lab{font-size:.52rem;letter-spacing:.14em}
}