:root{--zig:12px}
*{box-sizing:border-box}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
/* zigzag bunting: crimson over gold, matching the deck */
.bunting{height:16px;background:
  linear-gradient(135deg,var(--gold) 50%,transparent 50%) 0 0/16px 16px repeat-x,
  linear-gradient(225deg,var(--gold) 50%,transparent 50%) 8px 0/16px 16px repeat-x,
  var(--crimson)}
.bunting.green{background:
  linear-gradient(135deg,var(--dgreen) 50%,transparent 50%) 0 0/16px 16px repeat-x,
  linear-gradient(225deg,var(--dgreen) 50%,transparent 50%) 8px 0/16px 16px repeat-x,
  var(--gold)}
/* header */
.hdr{position:sticky;top:0;z-index:10;background:var(--dgreen);color:var(--cream);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hdr .mark{font-family:var(--font-display);font-size:18px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--cream)}
.hdr .mark b{color:var(--gold);font-weight:400}
.hdr nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hdr nav a{font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:5px 9px;border-radius:999px;border:1.5px solid rgba(255,234,217,.3)}
.hdr nav a.on{background:var(--gold);color:var(--dgreen);border-color:var(--gold)}
.hdr nav a.staff{border-color:var(--gold);color:var(--gold)}
/* page furniture */
.wrap{max-width:720px;margin:0 auto;padding:0 14px}
.pagehead{padding:22px 0 16px}
.pagehead .kicker{font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dgreen)}
.pagehead h1{font-family:var(--font-display);font-size:clamp(38px,12vw,64px);text-transform:uppercase;line-height:.92;color:var(--dgreen);margin:6px 0 0;font-weight:400}
.pagehead .sub{font-family:var(--font-data);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dgreen);opacity:.8;margin-top:8px}
.pagehead p{margin:10px 0 0;font-size:15px;color:var(--dgreen)}
/* the cream card everything sits in */
.card{background:var(--cream);border-radius:14px;padding:16px 14px 20px;margin-bottom:16px}
.cardbar{background:var(--gold);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 14px}
.cardbar b{font-family:var(--font-data);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dgreen)}
.cardbar span{font-family:var(--font-data);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dgreen)}
/* section head with zigzag rule, as in the deck */
.sec{margin:22px 0 10px}
.sec:first-child{margin-top:0}
.sec .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec h2{font-family:var(--font-body);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--dgreen);margin:0}
.sec .range{font-family:var(--font-data);font-weight:700;font-size:12px;color:var(--tan)}
.zrule{height:10px;margin-top:6px;background:
  linear-gradient(135deg,var(--dgreen) 50%,transparent 50%) 0 0/12px 12px repeat-x,
  linear-gradient(225deg,var(--dgreen) 50%,transparent 50%) 6px 0/12px 12px repeat-x,
  var(--gold)}
/* schedule rows */
.ev{display:grid;grid-template-columns:52px 14px 1fr auto;gap:8px;align-items:start;padding:7px 4px;cursor:pointer}
.ev .t{font-family:var(--font-data);font-weight:700;font-size:14px;color:var(--tan)}
.ev .dot{width:10px;height:10px;border-radius:50%;background:var(--c);margin-top:5px}
.ev h3{margin:0;font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.ev h3 small{color:var(--tan);font-size:13px}
.ev.feat{background:var(--gold);border-radius:8px}
.ev.feat h3{font-weight:700;color:var(--dgreen)}
.ev.feat .t{color:var(--dgreen)}
.ev h3 .by{font-weight:400;font-size:13.5px;color:var(--tan)}
.ev h3 .phase{display:inline-block;font-family:var(--font-data);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--mgreen);color:#fff;
  padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px}
.ev.feat h3 .phase,.ev.live h3 .phase{background:var(--dgreen)}
.ev.feat h3 .by,.ev.live h3 .by{color:var(--dgreen);opacity:.7}
.evsub{grid-column:3;margin:3px 0 0;font-family:var(--font-data);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--tan);line-height:1.35}
/* Duration sits at the end of the title row rather than on a line of its own,
   which keeps each activity to a single line and reads much slimmer. */
.ev .dur{grid-column:4;justify-self:end;white-space:nowrap;font-family:var(--font-data);font-size:11px;
  font-weight:600;letter-spacing:.04em;color:var(--tan);padding-top:2px}
.ev.feat .dur,.ev.live .dur{color:var(--dgreen);opacity:.8}
/* Standing note at the top of a day — true all day, so not a schedule row. */
.standing{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border-radius:10px;
  background:rgba(185,128,69,.14);border:1.5px dashed var(--tan);font-family:var(--font-data);
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--dgreen);line-height:1.4}
.standing::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--tan)}
.ev.feat .evsub,.ev.live .evsub{color:var(--dgreen);opacity:.8}
.nowbar .big .by{font-family:var(--font-body);font-size:15px;font-weight:400;text-transform:none;color:var(--cream);opacity:.7}
.ev .desc{display:none;font-size:13px;color:#4a4a42;margin:5px 0 0;grid-column:3}
.ev.open .desc{display:block}
.ev .staff{display:none;grid-column:1/-1;font-size:13px;margin:8px 0 2px;padding:9px 11px;background:var(--dgreen);border-left:5px solid var(--gold);border-radius:8px;color:var(--cream);line-height:1.45}
.ev.open .staff{display:block}
.ev .staff .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.ev .staff b{font-family:var(--font-data);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ev .staff .team{font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--dgreen);padding:2px 8px;border-radius:999px}
.ev .staff .team.mine{background:var(--crimson);color:#fff}
.ev .staff a{display:inline-block;margin-top:8px;font-family:var(--font-data);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dgreen);background:var(--gold);padding:7px 12px;border-radius:999px;text-decoration:none}
.ev .desc{grid-column:1/-1;margin-left:74px}
/* keys, chips, filters */
.keys{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:10px 0}
.keys span{font-family:var(--font-data);font-size:11px;font-weight:600;color:var(--cream);display:flex;align-items:center;gap:5px}
.keys i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.filters{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;border:1.5px solid var(--dgreen);background:var(--cream);border-radius:999px;padding:6px 12px;font-family:var(--font-data);font-size:12px;font-weight:700;cursor:pointer;color:var(--dgreen);display:flex;align-items:center;gap:6px}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(14,52,33,.45)}
.pill.on{background:var(--dgreen);color:var(--cream)}
.daytabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px}
.daytabs button{border:0;border-radius:10px;background:var(--cream);color:var(--dgreen);padding:8px 2px;font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;opacity:.75}
.daytabs button b{display:block;font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.05}
.daytabs button.on{background:var(--gold);opacity:1}
/* generic bits */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--dgreen);color:var(--cream);font-family:var(--font-data);font-weight:700;padding:14px 22px;border-radius:10px;text-decoration:none;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:0;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn .sub{display:block;font-size:10px;font-weight:600;opacity:.75;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.btn.gold{background:var(--gold);color:var(--dgreen)}
.btn.ghost{background:transparent;color:var(--dgreen);border:2px solid var(--dgreen);box-shadow:none}
.btn.ghost:active{transform:translateY(1px)}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 4px}
.btnrow .btn{width:100%;flex-direction:column;gap:2px;padding:15px 10px;text-align:center;line-height:1.1}
@media(max-width:380px){.btnrow{grid-template-columns:1fr}}
.tiles{display:grid;gap:8px}
.tiles a,.tiles div{background:var(--cream);border-radius:12px;padding:13px 14px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tiles h3{margin:0;font-family:var(--font-body);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--dgreen);letter-spacing:.02em}
.tiles p{margin:2px 0 0;font-size:13px;color:#4a4a42}
.tiles .arw{font-family:var(--font-data);color:var(--tan);font-size:20px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:16px 0}
.fact{background:var(--cream);border-radius:12px;padding:12px 10px;text-align:center}
.fact b{display:block;font-family:var(--font-display);font-size:24px;color:var(--dgreen);font-weight:400;line-height:1}
.fact small{display:block;font-family:var(--font-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);margin-top:4px}
.qa{border-top:1.5px solid rgba(185,128,69,.35);padding:11px 0}
.qa:first-of-type{border-top:0}
.qa h3{margin:0;font-size:15px;font-weight:600;color:var(--dgreen);cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.qa h3 span{color:var(--tan);font-family:var(--font-data)}
.qa p{margin:6px 0 0;font-size:14px;color:#4a4a42;display:none}
.qa.open p{display:block}
.qa.open h3 span{transform:rotate(45deg)}
.pk{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:8px 0;border-top:1.5px solid rgba(185,128,69,.3);align-items:baseline}
.pk:first-of-type{border-top:0}
.pk .n{font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--tan)}
.pk b{font-weight:600;font-size:14px;color:var(--ink)}
.pk small{color:var(--tan);font-size:13px}
.note{background:var(--dgreen);color:var(--cream);border-radius:12px;padding:14px;font-size:14px}
/* Notes had no margin, so two in a row met edge to edge and their rounded
   corners pinched into each other. Only adjacent notes need the gap. */
.note + .note{margin-top:12px}
.note b{color:var(--gold)}
footer{background:var(--dgreen);color:var(--cream);padding:22px 16px 28px;font-size:13px;margin-top:20px}
footer .mark{font-family:var(--font-display);font-size:28px;text-transform:uppercase;line-height:.95}
footer .gold{color:var(--gold)}
footer a{color:var(--gold)}
.legalbar{font-family:var(--font-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:16px}
.crumb{font-family:var(--font-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dgreen);text-decoration:none;display:inline-block;margin-top:16px}

/* ---- staff action rows, inline in the timeline ---- */
.op{display:grid;grid-template-columns:52px 1fr 40px;gap:8px;align-items:center;background:var(--dgreen);border-left:6px solid var(--gold);border-radius:8px;padding:9px 10px;margin:6px 0;color:var(--cream)}
.op.mine{border-left-color:var(--crimson);box-shadow:0 0 0 2px rgba(199,11,37,.35)}
.op.done{background:rgba(14,52,33,.55);border-left-color:var(--mgreen)}
.op .t{font-family:var(--font-data);font-weight:700;font-size:14px;color:var(--gold)}
.op.done .t{color:rgba(255,234,217,.6)}
.op .lbl{font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.op .lbl .tm{background:var(--gold);color:var(--dgreen);border-radius:999px;padding:1px 7px;letter-spacing:.08em}
.op.mine .lbl .tm{background:var(--crimson);color:#fff}
.op h4{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.3;color:var(--cream)}
.op.done h4{text-decoration:line-through;opacity:.65}
.op .who{font-family:var(--font-data);font-size:10px;color:#9fd3b0;margin-top:3px}
.op .warn{font-size:12px;color:#ff9aa6;margin-top:3px;font-weight:600}
.op .box{width:38px;height:38px;border-radius:9px;border:2px solid var(--gold);background:none;color:var(--gold);font-size:19px;cursor:pointer;line-height:1}
.op.done .box{background:var(--mgreen);border-color:var(--mgreen);color:#fff}
.op .box[disabled]{opacity:.35;cursor:not-allowed}
.opbar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--dgreen);color:var(--cream);border-radius:8px;padding:8px 11px;margin:12px 0 4px;font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.opbar b{color:var(--gold)}
.opbar button{background:var(--gold);color:var(--dgreen);border:0;border-radius:999px;padding:6px 11px;font-family:var(--font-data);font-weight:700;font-size:11px;cursor:pointer}

/* ================= UI pass: navigation, feedback, accessibility ================= */
:root{ --tabh:64px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); }
body{padding-bottom:calc(var(--tabh) + var(--sab));}
.hdr{padding-top:calc(10px + var(--sat))}

/* header slims to wordmark + one action; navigation moves to the bottom bar */
.hdr nav{display:none}
.hdr .headcta{font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:var(--gold);color:var(--dgreen);padding:8px 13px;border-radius:999px;white-space:nowrap}

/* bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--dgreen);border-top:2px solid var(--gold);padding-bottom:var(--sab);
  box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabh);background:none;border:0;cursor:pointer;text-decoration:none;color:rgba(255,234,217,.62);
  font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 2px}
.tabbar .ic{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--gold)}
.tabbar a.on .ic{stroke-width:2.3}
.tabbar a:active,.tabbar button:active{background:rgba(255,255,255,.07)}

/* "more" sheet */
.sheet{position:fixed;inset:0;z-index:50;display:none}
.sheet.open{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(10,42,26,.55);backdrop-filter:blur(2px)}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--cream);border-radius:20px 20px 0 0;
  padding:8px 14px calc(18px + var(--sab));animation:up .22s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .grab{width:38px;height:4px;border-radius:999px;background:var(--tan);opacity:.5;margin:6px auto 12px}
.sheet a{display:flex;align-items:center;gap:12px;padding:14px 6px;text-decoration:none;color:var(--dgreen);
  font-weight:600;font-size:16px;border-top:1px solid rgba(185,128,69,.28)}
.sheet a:first-of-type{border-top:0}
.sheet a small{display:block;font-weight:400;font-size:12px;color:#6b6b60;margin-top:1px}
.sheet a .ic{width:22px;height:22px;stroke:var(--tan);fill:none;stroke-width:1.9;flex:0 0 auto}

/* skeleton loading, replaces "Loading…" */
.sk{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.10) 37%,rgba(0,0,0,.05) 63%);
  background-size:400% 100%;animation:shine 1.3s ease infinite;border-radius:8px}
@keyframes shine{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skrow{background:var(--cream);border-radius:12px;padding:14px;margin-bottom:8px}
.skrow .sk{height:13px;margin-bottom:8px}
.skrow .sk:last-child{margin-bottom:0;width:55%}

/* touch + accessibility */
a,button,select,input,label,.ev,.qa h3{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.tabbar a:focus-visible{outline-offset:-3px}
.ev:active,.tiles a:active,.strip a:active{transform:scale(.985)}
.ev,.tiles a,.strip a{transition:transform .1s ease}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.scrolltop{position:fixed;right:14px;bottom:calc(var(--tabh) + var(--sab) + 14px);z-index:39;width:44px;height:44px;
  border-radius:50%;border:0;background:var(--dgreen);color:var(--gold);font-size:18px;cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s}
.scrolltop.show{opacity:1;pointer-events:auto}

/* staff action rows: SOP steps inline, matching the run sheet */
.op{display:grid;grid-template-columns:52px 1fr 40px;gap:9px;align-items:start;background:var(--dgreen);
  border-left:6px solid var(--gold);border-radius:10px;padding:11px 11px;margin:7px 0;color:var(--cream)}
.op.mine{border-left-color:var(--crimson);box-shadow:0 0 0 2px rgba(199,11,37,.4)}
.op.wip{box-shadow:0 0 0 2px var(--sky)}
.op.done{background:rgba(14,52,33,.6);border-left-color:var(--mgreen);box-shadow:none}
.op .t{font-family:var(--font-data);font-weight:700;font-size:14px;color:var(--gold);padding-top:2px}
.op.done .t{color:rgba(255,234,217,.55)}
.op .lbl{font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.op .lbl .tm{background:var(--gold);color:var(--dgreen);border-radius:999px;padding:1px 7px;letter-spacing:.08em}
.op.mine .lbl .tm{background:var(--crimson);color:#fff}
.op h4{margin:3px 0 0;font-size:14px;font-weight:600;line-height:1.3;color:var(--cream)}
.op.done h4{text-decoration:line-through;opacity:.6}
.op .who{font-family:var(--font-data);font-size:10px;color:#9fd3b0;margin-top:3px}
.op .who.dim{color:rgba(255,234,217,.6);font-family:var(--font-body);font-size:12px}
.op .who.ok{color:#8fe0a8}
.op .warn{font-size:12px;color:#ff9aa6;margin-top:3px;font-weight:600}
.op .wipill{display:inline-block;font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--sky);color:#fff;border-radius:999px;padding:2px 8px;margin-top:5px}
.op .box{width:38px;height:38px;border-radius:9px;border:2px solid var(--gold);background:none;color:var(--gold);font-size:18px;cursor:pointer;line-height:1;padding:0}
.op.done .box{background:var(--mgreen);border-color:var(--mgreen);color:#fff}
.op .box.locked{border-color:rgba(255,234,217,.4);color:rgba(255,234,217,.5);font-size:14px}
.op .box[disabled]{opacity:.35}
.op .soptoggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;
  background:rgba(255,234,217,.08);border:1px solid rgba(253,179,0,.35);border-radius:8px;padding:8px 10px;
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;text-align:left}
.op .soptoggle .cnt{background:var(--tan);color:#fff;border-radius:999px;padding:2px 8px}
.op .soptoggle .cnt.all{background:var(--mgreen)}
.op .sopsteps{display:none;margin-top:8px}
.op.expand .sopsteps{display:block}
.op .ssum{margin:0 0 8px;font-size:12px;font-style:italic;color:rgba(255,234,217,.7)}
.op .ostep{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:start;padding:7px 0;font-size:13px;
  line-height:1.4;border-top:1px solid rgba(255,234,217,.15);cursor:pointer}
.op .ostep input{width:20px;height:20px;margin:0;accent-color:#FDB300}
.op .ostep.on span{text-decoration:line-through;opacity:.55}
.op .ostep em{display:block;font-family:var(--font-data);font-size:10px;font-style:normal;color:#8fe0a8;margin-top:2px}
.op .gatenote{margin:8px 0 0;font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff9aa6}
.op .gatenote.ok{color:#8fe0a8}
.opbar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--dgreen);color:var(--cream);
  border-radius:10px;padding:9px 12px;margin:12px 0 4px;font-family:var(--font-data);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.opbar b{color:var(--gold)}
.opbar button{background:var(--gold);color:var(--dgreen);border:0;border-radius:999px;padding:6px 11px;font-family:var(--font-data);font-weight:700;font-size:11px;cursor:pointer}
.op .autoclose{margin-top:7px;background:var(--mgreen);color:#fff;border-radius:8px;padding:7px 10px;
  font-family:var(--font-data);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
.op .autoclose.warn2{background:var(--crimson)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

/* install instructions modal */
.imodal{position:fixed;inset:0;z-index:70;display:none}
.imodal.open{display:block}
.imodal .scrim{position:absolute;inset:0;background:rgba(10,42,26,.62);backdrop-filter:blur(3px)}
.imodal .box{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--cream);
  border-radius:22px 22px 0 0;padding:10px 18px calc(22px + var(--sab));animation:up .26s cubic-bezier(.2,.8,.3,1)}
@media(min-width:560px){.imodal .box{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);max-width:460px;border-radius:20px}}
.imodal .grab{width:38px;height:4px;border-radius:999px;background:var(--tan);opacity:.5;margin:6px auto 14px}
.imodal h2{font-family:var(--font-display);font-size:30px;text-transform:uppercase;color:var(--dgreen);margin:0;line-height:.98;font-weight:400}
.imodal .lead{font-size:14px;color:#4a4a42;margin:8px 0 14px;line-height:1.5}
.imodal .tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.imodal .tabs button{border:2px solid var(--dgreen);background:none;color:var(--dgreen);border-radius:10px;padding:10px;
  font-family:var(--font-data);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.imodal .tabs button.on{background:var(--dgreen);color:var(--cream)}
.imodal ol{margin:0;padding:0;list-style:none;counter-reset:s}
.imodal li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:11px;padding:10px 0;
  border-top:1px solid rgba(185,128,69,.3);font-size:14px;line-height:1.45;color:#3f3f38}
.imodal li:first-child{border-top:0}
.imodal li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--dgreen);color:var(--gold);
  display:grid;place-items:center;font-family:var(--font-data);font-size:12px;font-weight:700}
.imodal li b{color:var(--dgreen)}
.imodal .why{background:var(--dgreen);color:var(--cream);border-radius:12px;padding:12px 13px;margin:14px 0 0;font-size:13px;line-height:1.5}
.imodal .why b{color:var(--gold)}
.imodal .acts{display:grid;gap:8px;margin-top:16px}
.imodal .acts .btn{width:100%}
.imodal .later{background:none;border:0;color:#6b6b60;font-family:var(--font-data);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:10px;cursor:pointer;text-decoration:underline}
.installnudge{max-width:720px;margin:0 auto 14px;padding:0 14px}
.installnudge button{width:100%;display:flex;align-items:center;gap:11px;background:var(--dgreen);color:var(--cream);
  border:0;border-radius:14px;padding:13px 14px;text-align:left;cursor:pointer}
.installnudge b{display:block;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--gold)}
.installnudge small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.installnudge .ic{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;flex:0 0 auto}
.zc .go.pending{background:rgba(185,128,69,.25);color:var(--tan)}

/* --- Build-mode preview gate --- */
html.previewing body{visibility:hidden}
#previewbar{position:sticky;top:0;z-index:999;display:flex;align-items:center;gap:9px;
  background:var(--crimson,#C70B25);color:#fff;padding:8px 12px;
  font-family:var(--font-data,'Space Grotesk',monospace);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
#previewbar .pb-dot{width:8px;height:8px;border-radius:50%;background:var(--gold,#FDB300);flex:0 0 auto}
#previewbar .pb-txt{flex:1 1 auto;min-width:0}
#previewbar .pb-x{color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;padding:3px 11px;flex:0 0 auto}

/* --- Brand lockup in the public header --- */
.hdr .brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brandlogo{width:38px;height:auto;flex:0 0 auto;display:block}
.brandname{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:13px;line-height:1.02;letter-spacing:.01em;color:var(--cream);
  display:block;min-width:0}
.brandname b{font-weight:400;color:var(--gold)}
@media(min-width:520px){.brandlogo{width:46px}.brandname{font-size:15px}}

/* --- Hero lockup: title left, logo right (home page) --- */
.pagehead-top{display:flex;align-items:center;gap:14px}
.pagehead-title{flex:1 1 auto;min-width:0}
.pagehead-logo{flex:0 0 auto;width:clamp(88px,26vw,168px);height:auto;display:block}
@media(max-width:340px){
  .pagehead-logo{width:76px}
  .pagehead-top{gap:10px}
}
/* Desktop: the column is 720px but the title is far narrower, so a stretching
   title would strand the logo at the right edge. Size both to their content and
   match the logo height to the four-line title (4 x 64px x 0.92 = 236px). */
@media(min-width:640px){
  .pagehead{padding:34px 0 22px}
  .pagehead-top{gap:30px;justify-content:flex-start}
  .pagehead-title{flex:0 1 auto}
  .pagehead-logo{width:216px}
}

/* Six bottom tabs: tighten on narrow phones (must sit after the .ic rule above) */
@media(max-width:400px){
  .tabbar a,.tabbar button{font-size:8px;letter-spacing:.04em;padding:6px 1px}
  .tabbar .ic{width:20px;height:20px}
}

/* ---- Notice board ---- */
.blwrap{max-width:720px;margin:0 auto;padding:0 14px}
.bl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:26px 0 10px}
.bl-head h2{font-family:var(--font-body);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--dgreen);margin:0}
.bl-head span{font-family:var(--font-data);font-weight:700;font-size:11px;color:var(--tan)}
.bl{display:flex;gap:0;background:var(--cream);border-radius:12px;overflow:hidden;margin-bottom:9px;
  box-shadow:0 1px 5px rgba(0,0,0,.10)}
.bl-tag{flex:0 0 auto;background:var(--bg);color:var(--ink);writing-mode:vertical-rl;transform:rotate(180deg);
  display:grid;place-items:center;padding:12px 7px;font-family:var(--font-data);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.bl-tx{flex:1 1 auto;min-width:0;padding:13px 14px}
.bl-tx b{display:block;font-family:var(--font-body);font-weight:700;font-size:15.5px;color:var(--dgreen);line-height:1.3}
.bl-tx p{margin:5px 0 0;font-size:14px;line-height:1.5;color:#3f3f38}
.bl-tx a{display:inline-block;margin-top:8px;font-family:var(--font-data);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mgreen);text-decoration:none}

/* one-line banner under the header on other pages */
.blbar{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:9px;background:var(--bg);color:var(--ink);
  padding:9px 12px;font-size:13px}
.blbar .t{flex:0 0 auto;font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:2px 8px;opacity:.85}
.blbar .m{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blbar a{flex:0 0 auto;color:inherit;font-family:var(--font-data);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:underline}
.blbar .x{flex:0 0 auto;border:0;background:none;color:inherit;font-size:19px;line-height:1;cursor:pointer;opacity:.7;padding:0 2px}

/* The community nudge on the home page. WhatsApp green so it is unmistakable,
   ticket-stub edge so it still belongs to the page. */
.wanote{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  background:#25D366;color:#042914;border:2px dashed rgba(4,41,20,.35);border-radius:14px;
  padding:13px 14px;margin:16px 0 0;text-decoration:none}
.wanote .waic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.35);
  display:grid;place-items:center}
.wanote .waic svg{width:25px;height:25px;fill:#042914}
.wanote .wabody b{display:block;font-size:16px;line-height:1.25}
.wanote .wabody small{display:block;font-size:13px;opacity:.8;margin-top:2px;line-height:1.4}
.wanote .arw{font-size:20px;opacity:.7}
@media(hover:hover){.wanote:hover{border-color:rgba(4,41,20,.7)}}

/* ---- footer, rebuilt to match the ticket-stub styling ---- */
footer .fwrap{max-width:720px;margin:0 auto}
footer .sign{display:flex;align-items:center;gap:14px;border-bottom:2px dashed rgba(185,128,69,.55);padding-bottom:18px}
footer .sign img{width:56px;height:auto;flex:0 0 auto}
footer .sign .mark{font-family:var(--font-display);font-size:26px;text-transform:uppercase;line-height:.95;margin:0}
footer .dates{font-family:var(--font-data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:16px 0 3px}
footer .place{font-family:var(--font-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0}
/* Four bordered pills wrapped onto four lines and pushed the page down. As
   inline text with a small mark each, they flow into one or two lines. */
footer .flinks{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:7px;margin:16px 0 0}
footer .flinks a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--font-data);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border-bottom:1.5px solid rgba(253,179,0,.4);padding-bottom:2px}
footer .flinks a svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
/* WhatsApp has one colour and everyone knows it. Instagram's is a gradient that
   would muddy on deep green, so that mark takes the footer's gold. */
footer .flinks a.wa{color:#25D366;border-bottom-color:rgba(37,211,102,.45)}
@media(hover:hover){footer .flinks a:hover{border-bottom-color:currentColor}}
footer .fine{font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin:18px 0 0}

/* ---- Tiles sitting inside a cream card need their own surface ----
   Brief: never cream-on-cream. White face plus the dashed ticket edge. */
.card .tiles a{background:var(--white);border:1.5px dashed var(--tan)}
.card .tiles a:active{background:#fffaf4}
.card .tiles .arw{color:var(--mgreen)}

/* Before you come: icon stub on a white tile */
.prep{display:flex;align-items:stretch;padding:0!important;overflow:hidden}
.prep .ic{flex:0 0 44px;background:none;display:grid;place-items:center;
  border-right:1.5px dashed rgba(185,128,69,.45)}
.prep .ic svg{width:20px;height:20px;stroke:var(--mgreen);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prep .body{flex:1 1 auto;min-width:0;padding:12px 13px}
.prep .body h3{margin:0}
.prep .arw{flex:0 0 auto;padding-right:13px;display:grid;place-items:center}


/* ---- Baboon easter eggs -------------------------------------------------
   Decorative only: absolutely positioned so they never take layout space,
   pointer-events off so they can never swallow a tap, alt="" so screen readers
   skip them. Each position is checked against a render, not guessed. */
.bab{position:absolute;pointer-events:none;user-select:none;z-index:1;line-height:0}
.bab img{display:block;width:100%;height:auto}
.bab-holder{position:relative}

/* home — a peeker climbing up behind the Before you come card. The asset has
   its own rock with a cut bottom edge, so it has to pass BEHIND the gold bar,
   or that edge floats in mid-air. Raising the bar above it hides the join. */
.card .cardbar{position:relative;z-index:2}
/* Clip the asset rather than trusting the gold bar to cover its cut edge: the
   bar is shorter on wide screens and a sliver of rock showed underneath. A
   fixed height with overflow hidden ends it in the same place at every width.
   The gap above the card is 16px, so it protrudes 14 — head only, never
   reaching the tile above. */
.bab-peek{width:64px;height:34px;overflow:hidden;right:18px;top:-14px;z-index:1}
@media(max-width:560px){ .bab-peek{width:54px;height:29px;top:-12px;right:14px} }

/* packing — the tent terror. The note reserves room on the right so the
   illustration sits beside the words rather than over them. */
/* The illustration sits inside the note with its own margin. At 2px from the
   edge it read as clipped against the rounded corner, and flush with the bottom
   it looked cut rather than seated. */
/* The illustration is a sibling of the text, not an overlay. Absolute
   positioning cannot stay aligned to a paragraph that is three lines on a phone
   and two on a desktop — as a flex row they centre on each other at any length. */
.foodnote{display:flex;align-items:center;gap:18px}
.foodnote .fntext{flex:1 1 auto;min-width:0}
.foodnote .fnfig{flex:0 0 96px;line-height:0;pointer-events:none;user-select:none}
.foodnote .fnfig img{width:100%;height:auto;display:block}
@media(max-width:560px){ .foodnote{gap:14px} .foodnote .fnfig{flex-basis:80px} }

/* faq — the snacker, sitting at the bottom-left outside the card. Below the
   card is the WhatsApp invite, and the gap between them is empty. */
.bab-snack{width:70px;left:10px;bottom:-30px;z-index:0}
@media(max-width:560px){ .bab-snack{width:54px;bottom:-23px;left:8px} }

/* schedule — the heist crew beside the footnote. As an absolute overlay they
   straddled the card's bottom corner, half on cream and half on blue, lined up
   with nothing. Sat in the same row as the text they centre on it instead. */
.babfig{line-height:0;pointer-events:none;user-select:none}
.babfig img{width:100%;height:auto;display:block}
.shiftnote{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0}
.crewfig{flex:0 0 66px}
@media(max-width:560px){ .shiftnote{gap:10px} .crewfig{flex-basis:54px} }