/* AVX-01 drafts F, G, H — TICKET LANGUAGE (the constant, lifted from draft D).
   D's palette, materials and boarding-pass primitives factored into one file so
   F, G and H read as siblings of D rather than three new brands. Layout lives in
   f.css / g.css / h.css; the interaction sets live in f.js / g.js / h.js and are
   deliberately disjoint from each other and from d.js.

   HARD RULE OBSERVED: there is no decorative background of any family here.
   No radial wash, aurora, mesh, glow, ember or orb; no grid, dot-matrix,
   checkerboard, blueprint, noise or scanline pattern; at any opacity. Every
   ground is a flat colour. Where glass blurs, the thing it blurs is real
   content physically behind it. */

:root{
  /* warm every neutral — no #FFF ground, no #000 ink, no grey hairline */
  --paper:#F6F1E4;
  --paper2:#FDFBF6;
  --ink:#1D1815; --ink2:#544A41; --ink3:#8A7F70;
  --rule:#DCD2BD;

  /* one accent hue; the darker step carries large type on a bright ground */
  --acc:#B3341B; --acc-d:#8C2712; --acc-cast:rgba(179,52,27,.55);
  --wash:rgba(29,24,21,.07);

  /* glass, tuned for a bright ground */
  --glass-line:#D6CBB4;
  --glass-under:rgba(120,100,72,.24);
  --glass-pool:rgba(120,100,72,.30);
  --glass-cast1:rgba(70,55,35,.08);
  --glass-cast2:rgba(70,55,35,.48);

  /* the board is the one dark surface on the page */
  --board:#14181D; --board2:#1C222A; --board3:#2A323C;
  --board-ink:#E9E4D6; --board-dim:#78808E;
  --flap:#E8B33F;

  /* seasoning colour, one appearance per page */
  --teal:#1D5E7A;

  /* the board grid, overridable per draft */
  --bcols:4.5rem 6.5rem minmax(0,1fr) 9.5rem;
}

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

/* ── the mark ─────────────────────────────────────────────────────────────*/
.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:#fff;font:900 .72rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}

/* ── DEPARTURE BOARD — the one dark surface ───────────────────────────────
   Real content only: the five FAA certificate paths, their knowledge-test
   codes and their load state. */
.board{background:var(--board);color:var(--board-ink);border-radius:0;overflow:hidden}
.board-top{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,36px);
  border-bottom:1px solid rgba(233,228,214,.13)}
.board-top .flap{--fsize:clamp(.95rem,1.5vw,1.3rem)}
.board-top .bt-r{margin-left:auto;display:flex;align-items:center;gap:clamp(1.1rem,2vw,2rem)}
.bt-k{font:500 .6rem/var(--lh-h) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--board-dim)}
.bt-v{display:block;margin-top:.5rem;font:500 .72rem/var(--lh-h) var(--mono);
  letter-spacing:.13em;color:var(--board-ink)}

.board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board-grid{min-width:var(--bmin,600px)}
.brow{display:grid;grid-template-columns:var(--bcols);gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,36px);
  border-bottom:1px solid rgba(233,228,214,.09);
  transition:background-color var(--t-mid) var(--e)}
.brow:last-child{border-bottom:0}
.bhd{padding-block:clamp(14px,1.5vw,18px);background:var(--board2);
  font:500 .58rem/var(--lh-h) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--board-dim)}
.bname{font:500 .76rem/var(--lh-h) var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--board-ink);min-width:0;transition:color var(--t-mid) var(--e)}
.brow.on{background:var(--board2)}
.brow.on .bname{color:var(--flap)}

/* the flaps: one tile per character, turned edge-on by JS where a draft
   animates them. G and H print theirs at rest. */
.flap{display:inline-flex;gap:2px;perspective:260px}
.flap b{position:relative;display:grid;place-items:center;min-width:1.05em;
  padding:.34em .16em .38em;border-radius:2px;background:#0E1216;
  font:500 var(--fsize,.78rem)/1 var(--mono);letter-spacing:.02em;color:var(--flap);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6);
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .07s linear}
.flap b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.flap b.sp{background:transparent;box-shadow:none;min-width:.4em}
.flap b.sp::after{display:none}
.flap-st b{color:#8FD3A0}
.brow.on .flap-st b{color:var(--flap)}

/* ── ticket edges: a dashed tear line with punched notches ────────────────
   Two pseudo-elements filled with the page ground. No pattern involved. */
.tear{position:relative;border-top:1px dashed var(--rule)}
.tear::before,.tear::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)}
.tear::before{left:-13px}
.tear::after{right:-13px}

/* ── counterfoil ─────────────────────────────────────────────────────────*/
.foil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);
  padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,46px)}
.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.3rem,2vw,1.85rem)/var(--lh-d) var(--display);letter-spacing:-.04em;color:var(--acc-d)}
.foil dd small{display:block;margin-top:.55rem;font:400 .66rem/var(--lh-h) var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}

/* ── the stub's coded strip — bar widths derived from the test code itself.
   A ticket device, not a data claim. ─────────────────────────────────────*/
.bars{display:flex;gap:2px;align-items:flex-end;height:26px}
.bars i{display:block;width:2px;background:var(--ink);opacity:.72}
.bars.lite i{background:var(--board-ink);opacity:.6}

/* ── section head, pass card head ────────────────────────────────────────*/
.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,46px);
  border-bottom:1px solid var(--rule)}
.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}

/* ── buttons + cta rows inherit from paper.css ───────────────────────────*/
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ── steps ───────────────────────────────────────────────────────────────*/
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.step{padding:var(--padb) var(--padi);background:var(--paper2);border:1px solid var(--rule);border-radius:12px}
.step .n{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.2em;color:var(--acc);margin-bottom:.9rem}
.step h3{font:700 .98rem/var(--lh-h) var(--display);letter-spacing:-.012em;margin-bottom:.7rem}
.step p{font:400 .82rem/var(--lh-b) var(--display);color:var(--ink2)}

/* ── footer ──────────────────────────────────────────────────────────────*/
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding-top:var(--padb);border-top:1px solid var(--rule);
  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)}
.foot-in .sp{margin-left:auto}

@media (max-width:760px){
  .foil{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,28px)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .shd{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.1rem}
  .shd .rt{display:none}
}