/* ─────────────────────────────────────────────────────────────
   From Culture to Capital. One stylesheet for the trip page (and the base for the desk).

   The page is printed matter: a Bangkok fight poster and its program. Cream newsprint, navy ink,
   the flag's red, poster yellow and taxi pink, all flat, with hard shadows like a second plate
   printed a little off. Bangkok is the red corner and Pattaya the blue one, everywhere.

   "day" is the paper. "night" is fight night: the same drawing on navy stock.
   ───────────────────────────────────────────────────────────── */

:root, :root[data-theme="day"] {
  color-scheme: light;
  --bg:#f3eadb; --bg2:#eadfca; --bg3:#ddcfb4;
  --fg:#1a2147; --fg2:#3d4369; --fg3:#565872;
  --red:#b5172f; --blue:#1f3c8c; --yellow:#f2b705; --pink:#d9437a;
  --on-red:#fff7ea; --on-yellow:#1a2147;
  --gold:var(--red); --gold2:#8c0f22; --on-gold:#fff7ea; /* the accent: links, active tabs, ticks */
  --line:rgba(26,33,71,.34); --line2:rgba(26,33,71,.15);
  --card:#fbf6ec; --card2:#fffdf8;
  --jade:#196b3e; --amber:#8a4d00;
  --ink-edge:#1a2147; --hard:4px 4px 0 var(--ink-edge);
  --shadow:6px 6px 0 rgba(26,33,71,.9);
  --slab:#1a2147; --on-slab:#f3eadb; /* a block printed in solid ink: navy on paper, and still navy at night */
  --h2-shade:var(--yellow);
  --ray:rgba(242,183,5,.42);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .13 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* dark enough to read as text on their own tinted panels, not just as color */
  --f-food:#a33c0c; --f-film:#086570; --f-fight:#a8142b; --f-fashion:#982461; --f-festival:#6e5100; --f-capital:#1f3c8c; --f-sea:#105f87; --f-gateway:#51546a;
  /* the leaders' own itinerary colors: a fill and an ink for each kind of item */
  --k-visit:#22613c; --kb-visit:#cfe6d7; --k-culture:#735400; --kb-culture:#f8e3a6; --k-travel:#8c3d0f; --kb-travel:#f3d5c0;
  --k-meal:#9a232e; --kb-meal:#f3d1d3; --k-meeting:#4a3b93; --kb-meeting:#ddd8f2; --k-logistics:#494d55; --kb-logistics:#dfe0e2;
  --k-free:#455e10; --kb-free:#e4ecc4; --k-prep:#1a2147; --kb-prep:#e7dcc6;
  /* the maps */
  --sea:#d6e2e0; --land:#f6efe2; --coast:#1a2147; --prov:#c7b99c; --road:#b5172f; --minor:#cdbf9e; --water:#5f93b5; --park:#c6d4ab; --route:#b5172f;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg:#10142b; --bg2:#151a36; --bg3:#1f2547;
  --fg:#f3eadb; --fg2:#cdc6b4; --fg3:#9a97ad;
  --red:#ff5468; --blue:#86a0ff; --yellow:#ffc83d; --pink:#ff7aa9;
  --on-red:#10142b; --on-yellow:#10142b;
  --gold:var(--red); --gold2:#ff8794; --on-gold:#10142b;
  --line:rgba(243,234,219,.36); --line2:rgba(243,234,219,.14);
  --card:#171c3a; --card2:#1e2449;
  --jade:#55c98e; --amber:#f2ac40;
  --ink-edge:#000; --hard:4px 4px 0 #000;
  --shadow:6px 6px 0 #000;
  --slab:#272f60; --on-slab:#f3eadb;
  --h2-shade:#9e1b33;
  --ray:rgba(255,200,61,.13);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-food:#ff8a4c; --f-film:#3cc9cc; --f-fight:#ff5468; --f-fashion:#ff74b3; --f-festival:#ffc83d; --f-capital:#86a0ff; --f-sea:#5bb8f0; --f-gateway:#b7b5cb;
  --k-visit:#5fd394; --kb-visit:#183a33; --k-culture:#ffcf4a; --kb-culture:#3a3420; --k-travel:#ff9a5c; --kb-travel:#3d2a26; --k-meal:#ff7a85; --kb-meal:#3c2232;
  --k-meeting:#ab9cff; --kb-meeting:#2a2753; --k-logistics:#b9bccb; --kb-logistics:#2a2e47; --k-free:#c4e06a; --kb-free:#2b3520; --k-prep:#f3eadb; --kb-prep:#222849;
  --sea:#0b0f23; --land:#1b2144; --coast:#f3eadb; --prov:#353c68; --road:#ffc83d; --minor:#474d7a; --water:#3e72ab; --park:#1d4434; --route:#ff5468;
}

:root {
  --display:"Chonburi","Kanit",Georgia,serif;
  --heavy:"Kanit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Sriracha","Comic Sans MS",cursive;
  --serif:var(--heavy); /* the desk's headings */
  --mono:"Kanit",ui-monospace,Menlo,monospace;
  --thai:"Chonburi","Kanit",serif;
  /* the space between the page and the window's edge: 20px on a phone, growing to 80px on a wide screen */
  --bar:62px; --r:6px; --gut:clamp(20px,5.2vw,80px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;background:var(--grain),var(--bg);color:var(--fg);font-family:var(--sans);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--gold2)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--yellow);color:var(--on-yellow)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--yellow);color:var(--on-yellow);padding:10px 16px;border:2px solid var(--fg);font:700 15px var(--heavy);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
[hidden]{display:none!important}
.wrap{width:min(1080px,100% - 2*var(--gut));margin-inline:auto}
.wrap.wide{width:min(1180px,100% - 2*var(--gut))}
[lang="th"]{font-family:var(--thai)}
.fine{font-size:14.5px;color:var(--fg3);line-height:1.55}
.fine.pad{padding:var(--gut)}
.hand{font-family:var(--hand);color:var(--red);font-size:21px;line-height:1.3;transform:rotate(-1.2deg);margin:18px 0 0}
.hand.big{font-size:clamp(26px,3.4vw,38px)}

/* ── the bar ─────────────────────────────────────────────── */
.bar{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 max(var(--gut),env(safe-area-inset-left));background:var(--bg);border-bottom:3px solid var(--fg)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex:0 0 auto}
.brand-mark{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.brand:hover .brand-mark{transform:rotate(-18deg) scale(1.08)}
.brand-name{font:italic 900 19px/1 var(--heavy);text-transform:uppercase;letter-spacing:-.01em}
.brand-name i{font-family:var(--hand);font-style:normal;font-weight:400;text-transform:none;color:var(--red);font-size:.95em;padding:0 .08em}
.links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.links a{display:block;white-space:nowrap;padding:8px 11px;color:var(--fg);text-decoration:none;font:600 14px/1 var(--heavy);text-transform:uppercase;letter-spacing:.04em;border-bottom:3px solid transparent}
.links a:hover{border-bottom-color:var(--yellow);color:var(--fg)}
.links a[aria-current="true"]{border-bottom-color:var(--red)}
.tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mode,.deskbtn{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--heavy);text-transform:uppercase;letter-spacing:.06em;padding:9px 12px;border:2px solid var(--fg);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none}
.deskbtn:hover{background:var(--yellow);color:var(--on-yellow)}
/* the theme button: a moon by day, a sun at night. Hovering it previews where it takes you, so the
   colors are the other theme's on purpose; only where there is a real hover, so a tap cannot stick */
.mode-ico{flex:none;display:block}
/* both labels sit in the same spot and only one shows, so the button is as wide as the longer one
   in either theme and nothing beside it moves when you switch */
.mode-txt{display:grid}
.mode-txt > span{grid-area:1/1;text-align:left}
.mode-txt .to-day,:root[data-theme="night"] .mode-txt .to-night{visibility:hidden}
:root[data-theme="night"] .mode-txt .to-day{visibility:visible}
.mode-ico .i-moon{fill:var(--fg)}
.mode-ico .i-sun{display:none;fill:var(--yellow);stroke:var(--yellow)}
:root[data-theme="night"] .mode-ico .i-moon{display:none}
:root[data-theme="night"] .mode-ico .i-sun{display:inline}
@media (hover:hover){
  :root[data-theme="day"] .mode:hover{background:#10142b;border-color:#10142b;color:#f3eadb}
  :root[data-theme="day"] .mode:hover .i-moon{fill:#ffc83d}
  :root[data-theme="night"] .mode:hover{background:#f3eadb;border-color:#f3eadb;color:#1a2147}
  :root[data-theme="night"] .mode:hover .i-sun{fill:#b5172f;stroke:#b5172f}
}
.burger{display:none;width:42px;height:42px;border:2px solid var(--fg);background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger i{display:block;width:18px;height:2.5px;background:var(--fg);transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-of-type(2){opacity:0}
.burger[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--heavy);text-transform:uppercase;letter-spacing:.05em;padding:14px 20px 13px;border:2.5px solid var(--fg);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;box-shadow:var(--hard);transition:transform .12s,box-shadow .12s,background .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink-edge);color:var(--fg);background:var(--yellow);color:var(--on-yellow)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink-edge)}
.btn.solid{background:var(--red);color:var(--on-red)}
.btn.solid:hover{background:var(--fg);color:var(--bg)}
.btn.small{font-size:12.5px;padding:10px 14px 9px;box-shadow:3px 3px 0 var(--ink-edge)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── the poster ──────────────────────────────────────────── */
.poster{position:relative;isolation:isolate;overflow:hidden;padding-top:var(--bar);border-bottom:3px solid var(--fg)}
.rays{position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from -3deg at 50% 64%,var(--ray) 0deg 6deg,transparent 6deg 15deg);-webkit-mask-image:radial-gradient(circle at 50% 64%,#000 18%,transparent 72%);mask-image:radial-gradient(circle at 50% 64%,#000 18%,transparent 72%)}
.band{display:flex;align-items:center;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin:0;padding:8px max(var(--gut),env(safe-area-inset-left));background:var(--red);color:var(--on-red);font:italic 800 13px/1.2 var(--heavy);text-transform:uppercase;letter-spacing:.1em}
.band [lang="th"]{font-family:var(--heavy);font-style:normal;letter-spacing:.02em;font-size:15px}
.poster-in{position:relative;padding:30px 0 34px;text-align:center;container-type:inline-size}
.presents{margin:0 0 10px;font:700 12.5px/1.4 var(--heavy);letter-spacing:.32em;text-transform:uppercase;color:var(--fg2)}
.presents b{color:var(--red);margin:0 .35em}
.title{margin:0;font:italic 900 clamp(36px,8.6vw,140px)/.86 var(--heavy);font-size:clamp(34px,11.4cqi,140px);text-transform:uppercase;letter-spacing:-.025em}
.title span{white-space:nowrap}
.title span{display:block}
.title .t1{color:var(--fg);text-shadow:.04em .04em 0 var(--yellow)}
.title .t2{color:var(--red);text-shadow:.04em .04em 0 var(--fg)}
.subtitle{margin:14px 0 0;font:400 clamp(20px,2.8vw,34px)/1.15 var(--display);color:var(--fg)}
.corners{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,3cqi,40px);max-width:880px;margin:34px auto 0}
.corners > .corner{--c:var(--red);position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--fg);padding:30px 16px 18px;border:3px solid var(--fg);background:var(--card);box-shadow:7px 7px 0 var(--c);transition:transform .2s,box-shadow .2s}
.corners > .corner.blue{--c:var(--blue)}
.corners > .corner:hover{transform:translate(-2px,-2px) rotate(-.6deg);box-shadow:10px 10px 0 var(--c);color:var(--fg)}
.corners > .corner.blue:hover{transform:translate(-2px,-2px) rotate(.6deg)}
.corner .side{position:absolute;top:-15px;left:50%;transform:translateX(-50%) skew(-10deg);background:var(--c);color:var(--on-red);font:italic 800 13px/1 var(--heavy);text-transform:uppercase;letter-spacing:.16em;padding:7px 14px 6px;white-space:nowrap;border:2px solid var(--fg)}
:root[data-theme="night"] .corner .side{color:var(--bg)}
.mark-wrap{display:block;width:100%;max-width:230px;color:var(--c)}
.mark{display:block;width:100%;height:auto}
.cityname{display:block;margin-top:2px;font:400 clamp(32px,5.4cqi,60px)/1 var(--display);color:var(--c);letter-spacing:-.01em}
.cityth{display:block;font-size:20px;line-height:1.5;color:var(--fg2)}
.nick{display:block;margin-top:4px;font:italic 800 clamp(17px,1.8vw,22px)/1.1 var(--heavy);text-transform:uppercase}
.stats{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.stats span{font:600 12px/1 var(--heavy);text-transform:uppercase;letter-spacing:.08em;padding:6px 8px 5px;border:1.5px solid var(--fg)}
.vs{width:clamp(78px,9vw,124px)}
.vs-svg{display:block;width:100%;height:auto;animation:vsPulse 2.8s ease-in-out infinite}
@keyframes vsPulse{50%{transform:scale(1.07) rotate(-5deg)}}
.bell{position:relative;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:8px 26px;max-width:780px;margin:38px auto 0;padding:18px 26px 16px;text-align:left;background:var(--yellow);color:var(--on-yellow);border:3px solid var(--fg);box-shadow:var(--shadow);transform:rotate(-1deg);cursor:pointer;user-select:none;-webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.bell-when{display:flex;flex-direction:column;gap:2px;padding-right:22px;border-right:2.5px dashed var(--on-yellow)}
.bell-k{font:italic 900 13px/1 var(--heavy);text-transform:uppercase;letter-spacing:.2em;color:#9b0f24}
.bell-when b{font:800 clamp(18px,2vw,24px)/1.1 var(--heavy);text-transform:uppercase}
.bell-when span:last-child{font:600 13.5px/1.3 var(--sans)}
.bell-count{display:flex;gap:8px}
.bell .cell{flex:1 1 0;min-width:0;text-align:center}
.bell .cell b{display:block;font:400 clamp(30px,4.4vw,52px)/1 var(--display);font-variant-numeric:tabular-nums}
.bell .cell span{display:block;margin-top:4px;font:700 10.5px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase}
.count-note{grid-column:1/-1;margin:2px 0 0;font:600 13px/1.3 var(--sans);text-align:right}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.undercard{background:var(--slab);color:var(--on-slab);padding:12px 0 11px;font:600 13.5px/1.6 var(--heavy);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.undercard b{display:inline-block;background:var(--yellow);color:var(--on-yellow);padding:1px 8px 0;margin-right:6px;font-style:italic;font-weight:900;transform:skew(-10deg)}
.undercard .u-sep{color:var(--yellow);margin:0 .5em}

/* the landing page of a sign-in-only site: the poster and a sign-in box, nothing else */
.landing{width:100%;max-width:460px;margin:34px auto 8px;padding:24px 26px 20px;text-align:left;background:var(--card);border:3px solid var(--fg);box-shadow:var(--shadow)}
.landing-k{margin:0 0 6px;font:italic 800 12px/1 var(--heavy);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.landing-h{margin:0 0 8px;font:400 clamp(24px,2.7vw,30px)/1.15 var(--display)}
.landing .msg:empty{display:none}
.landing p{margin:0 0 14px;color:var(--fg2)}
.landing .fine{margin:6px 0 0}
.landing-signin{display:flex;min-height:44px;margin:4px 0 6px;color-scheme:light}
/* sealed, the page is just the trip's name and the sign-in box: no dates, places or credits */
body.sealed main,body.sealed .undercard,body.sealed .bell,body.sealed .cta,body.sealed .links,body.sealed .burger,
body.sealed .kitbtn,body.sealed .kitfab,body.sealed .kit,body.sealed .kit-scrim,body.sealed .deskbtn,body.sealed .band,
body.sealed .presents,body.sealed .corners,body.sealed .foot .bunting,body.sealed .foot-big,body.sealed .foot .fine:not(.foot-note),body.sealed .foot-links{display:none!important}
body.sealed .poster{display:flex;flex-direction:column;min-height:calc(100svh - 80px)}
body.sealed .poster-in{flex:1;display:flex;flex-direction:column;justify-content:center}
body.sealed .foot{padding:22px 0 26px}
body.sealed.kit-docked{padding-right:0}
body.sealed.kit-docked .bar{right:0}
body.sealed .poster{min-height:100svh}

/* ── sections ────────────────────────────────────────────── */
.sec{position:relative;padding:0 0 clamp(56px,7vw,96px)}
.sec:nth-of-type(even){background:var(--grain),var(--bg2)}
.bunting{height:32px;overflow:hidden;margin-bottom:clamp(40px,6vw,74px)}
.bunting-svg{display:block;width:100%;height:32px}
.round{display:flex;flex-wrap:wrap;margin:0 0 16px;font:italic 800 13px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase}
.round span{padding:8px 13px 7px;transform:skew(-10deg);border:2px solid var(--fg)}
.round span:first-child{background:var(--red);color:var(--on-red)}
.round span:last-child{background:var(--slab);color:var(--on-slab);font-style:normal;letter-spacing:.04em;margin-left:-2px;font-family:var(--heavy)}
.h2{margin:0 0 16px;font:400 clamp(38px,6vw,78px)/1.02 var(--display);letter-spacing:-.01em;text-shadow:.035em .035em 0 var(--h2-shade);text-wrap:balance}
.h3{margin:56px 0 8px;font:800 clamp(22px,2.6vw,30px)/1.15 var(--heavy);text-transform:uppercase;letter-spacing:.01em}
.lead{max-width:64ch;margin:0 0 30px;font-size:clamp(17.5px,1.5vw,20px);color:var(--fg2)}
.lead b{color:var(--fg)}
.sub-lede{margin:0 0 18px;color:var(--fg3);font-size:15.5px}
/* switching themes repaints everything at once, instead of each piece fading at its own speed */
.theme-switch *,.theme-switch *::before,.theme-switch *::after{transition:none!important}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ── round 1: the main event ─────────────────────────────── */
.question{margin:8px 0 0;padding:0;position:relative}
.question p{margin:0;font:600 clamp(25px,3.5vw,44px)/1.18 var(--heavy);letter-spacing:-.01em;max-width:30ch;text-wrap:balance}
.question p::before{content:"“";position:absolute;left:-.55em;top:-.12em;font:400 2.1em/1 var(--display);color:var(--red)}
.question footer{margin-top:16px;font:500 15px/1.4 var(--sans);color:var(--fg3)}
.bouts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bout{border:2.5px solid var(--fg);background:var(--card);box-shadow:var(--hard);display:flex;flex-direction:column}
.bout-n{display:block;padding:8px 14px 6px;font:italic 800 12px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--fg)}
.bout-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border-bottom:2px solid var(--fg)}
.bout-vs b{display:grid;place-items:center;padding:14px 6px 12px;font:900 clamp(17px,1.8vw,22px)/1 var(--heavy);text-transform:uppercase;text-align:center}
.bout-vs b:first-child{background:var(--red);color:var(--on-red)}
.bout-vs b:last-child{background:var(--blue);color:#fff}
:root[data-theme="night"] .bout-vs b{color:var(--bg)}
.bout-vs i{display:grid;place-items:center;padding:0 10px;font:italic 900 15px/1 var(--heavy);background:var(--yellow);color:var(--on-yellow)}
.bout-vs.solo{grid-template-columns:1fr}
.bout-vs.solo b{background:var(--yellow);color:var(--on-yellow)}
.bout p{margin:0;padding:14px 16px 16px;font-size:16px;color:var(--fg2)}
.nye{margin-top:64px;padding:clamp(20px,3vw,34px);border:2.5px solid var(--fg);background:var(--card)}
.nye-head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 30px;align-items:end}
.nye-head .h3{margin:0}
.nye-head p{margin:0;color:var(--fg2);max-width:58ch}
.nye-head em{font-style:normal;background:linear-gradient(transparent 58%,var(--yellow) 58%);color:var(--fg)}
.nye-row{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nye-i{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:2px 14px;align-items:center;padding:16px;border:2px solid var(--line);color:var(--fg)}
.nye-i svg{grid-row:span 3;color:var(--fg2)}
.nye-i b{font:900 22px/1 var(--heavy);text-transform:uppercase}
.nye-i span{font-size:14.5px;color:var(--fg2);line-height:1.35}
.nye-i small{font:700 11px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.nye-i.soft{border:2.5px solid var(--fg);background:var(--yellow);color:var(--on-yellow);transform:rotate(-1.2deg);box-shadow:var(--hard)}
.nye-i.soft svg,.nye-i.soft span,.nye-i.soft small{color:var(--on-yellow)}
.nye-i.soft::after{content:"Our focus";position:absolute;right:-10px;top:-12px;font:italic 900 11px/1 var(--heavy);letter-spacing:.14em;text-transform:uppercase;background:var(--red);color:var(--on-red);padding:6px 8px 5px;border:2px solid var(--fg);transform:rotate(4deg)}

/* ── round 2: why Thailand ───────────────────────────────── */
.tape{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.tape-col{border:2.5px solid var(--fg);background:var(--card)}
.tape-col header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 12px;border-bottom:2.5px solid var(--fg);background:var(--slab);color:var(--on-slab)}
.tape-col header b{font:400 clamp(26px,2.8vw,34px)/1 var(--display)}
.tape-col header span{font-size:16px;opacity:.75}
.tape-rec{display:flex;justify-content:space-between;padding:8px 16px 7px;font:italic 800 12px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--fg)}
.tape-rec i{font-style:normal;color:var(--jade)}
.tape-col ol{list-style:none;margin:0;padding:6px 16px 12px}
.tape-col li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tape-col li:last-child{border-bottom:0}
.tape-col li b{font:700 14px/1.35 var(--heavy)}
.tape-col li span{font-size:15px;line-height:1.4;color:var(--fg2)}
.tape-col.th{border-color:var(--red);box-shadow:6px 6px 0 var(--red);transform:rotate(.6deg)}
.tape-col.th header{background:var(--red);color:var(--on-red);border-color:var(--red)}
.tape-col.th .tape-rec i{color:var(--red);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.problem,.ledger{margin-top:12px}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-top:2.5px solid var(--fg);border-bottom:2.5px solid var(--fg)}
.fig{padding:18px 16px 18px 0;border-right:1.5px solid var(--line)}
.fig + .fig{padding-left:16px}
.fig:last-child{border-right:0}
.fig dt{font:900 clamp(30px,4.2vw,54px)/1 var(--heavy);letter-spacing:-.02em;color:var(--red);white-space:nowrap}
.ledger .fig dt{color:var(--blue)}
.fig dd{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--fg2)}
.history{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;border-left:2.5px solid var(--fg)}
.history li{position:relative;padding:12px 16px 14px 20px;border-bottom:1px dashed var(--line);border-right:1px dashed var(--line)}
.history li::before{content:"";position:absolute;left:-7.5px;top:17px;width:12px;height:12px;background:var(--bg);border:2.5px solid var(--fg);border-radius:50%}
.history b{display:block;font:800 15px/1.2 var(--heavy);text-transform:uppercase;letter-spacing:.04em}
.history span{display:block;margin-top:3px;font-size:15px;line-height:1.4;color:var(--fg2)}
.history li.now{background:var(--yellow);color:var(--on-yellow)}
.history li.now span{color:var(--on-yellow);font-family:var(--hand);font-size:22px}
.history li.now::before{background:var(--red)}

/* ── round 3: the five Fs ────────────────────────────────── */
.deck{display:flex;gap:10px;height:clamp(600px,78vh,740px);margin-top:4px}
.panel{--c:var(--red);position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:2.5px solid var(--fg);background:color-mix(in srgb,var(--c) 13%,var(--bg));transition:flex-grow .7s cubic-bezier(.2,.8,.2,1);color:var(--fg)}
.panel[data-open="true"]{flex-grow:5.6;box-shadow:inset 0 0 0 0 transparent}
.ptab{all:unset;box-sizing:border-box;position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 0;width:100%;cursor:pointer;color:var(--c);z-index:2}
.ptab:focus-visible{outline:3px solid var(--blue);outline-offset:-5px}
.ptab .pico{display:block;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.panel:hover:not([data-open="true"]) .pico{transform:scale(1.14) rotate(-8deg)}
.ptab .pname{font:400 clamp(28px,3vw,42px)/1 var(--display);writing-mode:vertical-rl;transform:rotate(180deg);color:var(--fg)}
.ptab .pth{font-family:var(--thai);font-size:17px;color:var(--c);writing-mode:vertical-rl}
.panel[data-open="true"] .ptab{flex-direction:row;align-items:center;gap:16px;padding:22px 28px;width:auto;border-bottom:2.5px solid var(--fg);right:0;background:var(--c);color:var(--bg)}
.panel[data-open="true"] .pname,.panel[data-open="true"] .pth{writing-mode:horizontal-tb;transform:none;color:var(--bg)}
.panel[data-open="true"] .pname{font-size:clamp(34px,4.2vw,54px)}
.panel[data-open="true"] .pth{font-size:22px;align-self:flex-end;padding-bottom:4px}
.pbody{position:absolute;inset:108px 28px 22px 28px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s,transform .5s,visibility 0s .4s;overflow:auto;scrollbar-width:thin}
.panel[data-open="true"] .pbody{opacity:1;visibility:visible;transform:none;transition:opacity .5s .25s,transform .6s .25s,visibility 0s}
.step{margin:0 0 12px}
.step h3{margin:0 0 3px;font:800 12px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.step p{margin:0;font-size:16px;color:var(--fg2)}
.step.capital p{color:var(--fg)}
.ask{margin:14px 0;padding:12px 16px;border:2px solid var(--fg);background:var(--card);box-shadow:4px 4px 0 var(--c);font:600 clamp(18px,1.7vw,21px)/1.3 var(--heavy);color:var(--fg)}
.ask small{display:block;margin-bottom:6px;font:italic 800 11px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.onlist{margin-top:14px}
.onlist h3{margin:0 0 8px;font:800 12px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--heavy);padding:7px 10px 6px;border:2px solid var(--fg);color:var(--fg);background:var(--card);text-decoration:none}
a.chip:hover{background:var(--yellow);color:var(--on-yellow)}
.chip .d{font:700 11px/1 var(--heavy);letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--red))}
.chip .s{font:500 10.5px/1 var(--heavy);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.chip.ghost{border-style:dashed;color:var(--fg2);background:transparent}
.pnote{margin:12px 0 0;font-family:var(--hand);font-size:18px;line-height:1.35;color:var(--c)}
.meet-note{margin-top:18px}

/* ── round 4: the schedule ───────────────────────────────── */
.gate{max-width:580px;padding:28px;border:2.5px dashed var(--fg);background:var(--card)}
.gate h3{margin:0 0 8px;font:800 26px/1.15 var(--heavy);text-transform:uppercase}
.gate p{margin:0 0 16px;color:var(--fg2)}
.gate form{display:flex;flex-wrap:wrap;gap:10px}
.field{flex:1 1 220px;font:500 16px/1 var(--sans);padding:13px 14px;border:2px solid var(--fg);background:var(--bg);color:var(--fg)}
.field:focus{outline:none;box-shadow:4px 4px 0 var(--blue)}
.msg{flex:1 0 100%;margin:0;font-size:14.5px;color:var(--red);min-height:1.4em}
.notes{margin:0 0 30px;display:grid;gap:12px}
.note{padding:16px 20px;border:2px solid var(--fg);background:var(--card);display:grid;gap:4px}
.note.pinned{border-left:8px solid var(--red)}
.notes .note.pinned:first-child{background:var(--yellow);color:var(--on-yellow);border-left-width:2px;box-shadow:var(--hard);transform:rotate(-.4deg)}
.note h3{margin:0;font:800 20px/1.2 var(--heavy)}
.note p{margin:0;color:var(--fg2);font-size:16px;white-space:pre-line}
.notes .note.pinned:first-child p{color:var(--on-yellow)}
.note small{font:700 11px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.notes .note.pinned:first-child small{color:#9b0f24}
.sched-tools{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:6px}
.seg{display:inline-flex;border:2px solid var(--fg);background:var(--card)}
.seg button{font:700 12.5px/1 var(--heavy);text-transform:uppercase;letter-spacing:.06em;padding:11px 14px 10px;border:0;border-right:2px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.cal{display:flex;gap:10px}

.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px;background:var(--card);border:2.5px solid var(--fg);min-height:170px;-webkit-mask:radial-gradient(circle 10px at calc(100% - 88px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 88px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 10px at calc(100% - 88px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 88px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.ticket .main{padding:16px 16px 14px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ticket .stub{border-left:2.5px dashed var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;text-align:center;background:var(--red);color:var(--on-red)}
.ticket .stub b{font:400 36px/1 var(--display)}
.ticket .stub span{font:800 11px/1.2 var(--heavy);letter-spacing:.16em;text-transform:uppercase}
.ticket .stub b.tba{font-size:24px}
.ticket h4{margin:0;font:800 19px/1.2 var(--heavy)}
.ticket .when{font:600 14px/1.35 var(--heavy);color:var(--red)}
.ticket p{margin:0;font-size:15px;color:var(--fg2)}
.ticket.past{opacity:.72}
.ticket.past .stub{background:var(--fg3)}
.ticket.past::after{content:"Done";position:absolute;right:104px;top:12px;transform:rotate(8deg);font:italic 900 13px/1 var(--heavy);letter-spacing:.18em;text-transform:uppercase;color:var(--jade);border:2.5px solid var(--jade);padding:6px 9px 5px;background:var(--bg)}
.ticket.after .stub{background:var(--blue)}

.h3row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stamp-change{display:inline-block;margin:0 6px 4px 0;padding:8px 12px 6px;border:3px solid var(--red);color:var(--red);font:italic 900 14px/1.05 var(--heavy);letter-spacing:.08em;text-transform:uppercase;text-align:center;transform:rotate(-6deg);opacity:.9}

/* the week at a glance: the leaders' itinerary slide, in their colors */
.week{position:relative;overflow-x:auto;border:2.5px solid var(--fg);background:var(--card);margin:4px 0 26px;scrollbar-width:thin}
.wk-grid{display:grid;grid-template-columns:54px repeat(9,minmax(112px,1fr));min-width:1060px}
.wk-hours{position:sticky;left:0;z-index:3;background:var(--card);border-right:2px solid var(--fg)}
.wk-hours span{position:absolute;right:6px;transform:translateY(-50%);font:700 10.5px/1 var(--heavy);color:var(--fg3);white-space:nowrap}
.wk-col{position:relative;border-right:1px solid var(--line2)}
.wk-col:last-child{border-right:0}
.wk-head{all:unset;box-sizing:border-box;display:block;width:100%;height:52px;padding:7px 8px 6px;border-bottom:2px solid var(--fg);cursor:pointer;text-align:left}
.wk-head b{display:block;font:800 14px/1.1 var(--heavy);text-transform:uppercase}
.wk-head span{display:block;margin-top:3px;font:700 10px/1 var(--heavy);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--fg3))}
.wk-head:hover,.wk-col.sel .wk-head{background:var(--yellow);color:var(--on-yellow)}
.wk-head:hover span,.wk-col.sel .wk-head span{color:var(--on-yellow)}
.wk-head:focus-visible{outline-offset:-4px}
.wk-body{position:relative;background-image:linear-gradient(var(--line2) 1px,transparent 1px);background-size:100% var(--hr)}
.wk-ev{all:unset;box-sizing:border-box;position:absolute;left:4px;right:4px;overflow:hidden;padding:3px 6px;border-left:4px solid var(--k);background:var(--kb);color:var(--fg);font:600 11.5px/1.2 var(--heavy);cursor:pointer;transition:transform .15s,box-shadow .15s}
.wk-ev:hover,.wk-ev:focus-visible{z-index:2;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink-edge);outline:none}
.wk-ev small{display:block;font-weight:500;font-size:10px;color:var(--fg2)}
.wk-ev.open{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.wk-ev.opt{border-left-style:dashed;background:repeating-linear-gradient(45deg,var(--kb) 0 6px,transparent 6px 10px)}
.wk-now{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:2}
.wk-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-14px 0 24px;font:600 12.5px/1 var(--heavy);text-transform:uppercase;letter-spacing:.05em;color:var(--fg2)}
.wk-legend span{display:inline-flex;align-items:center;gap:6px}
.wk-legend i{width:14px;height:14px;background:var(--kb);border-left:4px solid var(--k)}

.days{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 14px;margin:6px -4px 0;scroll-snap-type:x proximity;scrollbar-width:thin}
.stamp{all:unset;box-sizing:border-box;flex:0 0 auto;width:100px;min-height:132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;background:var(--card);cursor:pointer;position:relative;color:var(--fg);text-align:center;transition:transform .2s;border:2px solid var(--fg);outline:1.5px dashed var(--fg);outline-offset:-7px}
.stamp:hover{transform:translateY(-3px) rotate(-1.5deg)}
.stamp:focus-visible{outline:3px solid var(--blue);outline-offset:-7px}
.stamp .dow{font:700 11px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.stamp .dn{font:400 42px/1 var(--display);margin:4px 0 2px}
.stamp .mo{font:700 11px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.stamp .cty{margin-top:8px;font:800 10px/1 var(--heavy);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px 3px;color:var(--bg);background:var(--c,var(--fg3))}
.stamp .cnt{position:absolute;top:8px;right:10px;font:700 11px/1 var(--heavy);color:var(--red)}
.stamp[aria-selected="true"]{background:var(--fg);color:var(--bg);outline-color:var(--bg);transform:translateY(-4px);box-shadow:4px 4px 0 var(--red)}
.stamp[aria-selected="true"] .dow,.stamp[aria-selected="true"] .mo{color:var(--bg)}
.stamp[aria-selected="true"] .cnt{color:var(--bg)}
.stamp.today::before{content:"Today";position:absolute;top:6px;left:8px;font:italic 900 9.5px/1 var(--heavy);letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:var(--on-red);padding:3px 5px}

.dayview{min-height:200px;margin-top:8px}
.dayhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:12px 0 18px}
.dayhead h4{margin:0;font:400 clamp(28px,3.4vw,40px)/1.1 var(--display)}
.dayhead p{margin:0;color:var(--fg2);font-size:16px;flex:1 1 280px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ev{--k:var(--fg);--kb:var(--card);display:grid;grid-template-columns:118px 18px minmax(0,1fr);gap:0 14px;align-items:start;border-radius:2px}
.ev.flash .card{animation:flash 1.6s ease-out}
@keyframes flash{0%,30%{box-shadow:6px 6px 0 var(--yellow)}}
.ev .tm{padding-top:13px;text-align:right;font:700 14px/1.25 var(--heavy);color:var(--fg);min-width:0}
.ev .tm small{display:block;font-weight:500;font-size:11.5px;color:var(--fg3)}
.ev .rail{position:relative;align-self:stretch}
.ev .rail::before{content:"";position:absolute;left:8px;top:0;bottom:-10px;width:2.5px;background:var(--fg)}
.ev:last-child .rail::before{bottom:auto;height:24px}
.ev .rail i{position:absolute;left:2px;top:16px;width:15px;height:15px;background:var(--k);border:2.5px solid var(--fg);border-radius:50%}
.ev .card{padding:12px 16px 13px;background:var(--kb);border:2px solid var(--fg);border-left:7px solid var(--k);min-width:0;transition:box-shadow .3s}
.ev .card h5{margin:6px 0 0;font:800 19px/1.2 var(--heavy)}
.ev .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:15px;color:var(--fg2)}
.ev .meta b{font-weight:700;color:var(--fg)}
.ev .notes-t{margin:6px 0 0;font-size:15px;color:var(--fg2);white-space:pre-line}
.ev .meets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ev .meets span{font:700 10.5px/1 var(--heavy);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px 3px;border:1.5px solid var(--fg);background:var(--card)}
.tag{display:inline-flex;align-items:center;gap:6px;font:800 10.5px/1 var(--heavy);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px 3px;margin-right:6px;vertical-align:middle;border:1.5px solid currentColor}
.tag.kind{color:var(--k)}
.tag.confirmed{background:var(--jade);border-color:var(--jade);color:var(--bg)}
.tag.tentative{border-style:dashed;color:var(--amber)}
.tag.idea{border-style:dotted;color:var(--fg3)}
.tag.team{background:var(--red);border-color:var(--red);color:var(--on-red)}
.empty{padding:24px;border:2px dashed var(--fg);color:var(--fg2);background:var(--card)}
.empty b{font:800 20px/1.2 var(--heavy);color:var(--fg);display:block;margin-bottom:4px;text-transform:uppercase}
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mi{--k:var(--fg);padding:14px 16px;border:2px dashed var(--fg);background:var(--card)}
.mi h4{margin:6px 0 4px;font:800 18px/1.2 var(--heavy)}
.mi p{margin:0;font-size:15px;color:var(--fg2)}
.edit-hint{margin:34px 0 0}

/* ── round 5: the map ────────────────────────────────────── */
.maproot{border:2.5px solid var(--fg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.mtabs{display:flex;gap:0;overflow-x:auto;border-bottom:2.5px solid var(--fg);scrollbar-width:none}
.mtabs button{flex:0 0 auto;font:800 14px/1 var(--heavy);text-transform:uppercase;letter-spacing:.04em;padding:14px 18px 13px;border:0;border-right:2px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.mtabs button small{font:500 12px var(--thai);text-transform:none;letter-spacing:0;opacity:.75}
.mtabs button:hover{background:var(--yellow);color:var(--on-yellow)}
.mtabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.mbody{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
.mstage{position:relative;align-self:start;background:var(--sea);overflow:hidden}
.mstage svg.mapsvg{display:block;width:100%;height:auto}
.mstage .corner{position:absolute;right:14px;top:12px;color:var(--fg);opacity:.75}
.mstage .credit{position:absolute;left:10px;bottom:8px;font-size:11.5px;color:var(--fg2);background:var(--bg);padding:3px 8px;border:1px solid var(--line)}
.mstage .credit a{color:var(--fg2)}
.mside{position:relative;min-width:0;border-left:2.5px solid var(--fg)}
.mside-in{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin}
.mcaption{margin:0;padding:16px 20px;font-size:15.5px;color:var(--fg2);border-bottom:2px solid var(--fg)}
.mcaption b{color:var(--fg);font:400 22px/1.2 var(--display);display:block;margin-bottom:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1.5px solid var(--line)}
.lg{--c:var(--fg);display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--heavy);text-transform:uppercase;letter-spacing:.04em;padding:7px 10px 6px;border:2px solid var(--fg);background:var(--card);color:var(--fg);cursor:pointer}
.lg i{width:10px;height:10px;border-radius:50%;background:var(--c);border:1.5px solid var(--fg)}
.lg[aria-pressed="false"]{opacity:.45;border-style:dashed}
.plist{list-style:none;margin:0;padding:6px 8px 14px}
.plist button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:14px minmax(0,1fr);gap:2px 12px;align-items:start;width:100%;padding:10px 12px;cursor:pointer;--c:var(--fg);border-bottom:1px dashed var(--line2)}
.plist button:hover,.plist button[aria-current="true"]{background:var(--yellow);color:var(--on-yellow)}
.plist button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.plist i{width:12px;height:12px;border-radius:50%;background:var(--c);margin-top:6px;border:2px solid var(--fg)}
.plist b{font:700 15.5px/1.3 var(--heavy)}
.plist .th{display:block;font-family:var(--thai);font-size:13px;color:var(--fg3)}
.plist .far{font:600 11px/1 var(--heavy);text-transform:uppercase;letter-spacing:.06em;color:var(--fg3)}
.pcard{padding:16px 20px 18px;border-bottom:2px solid var(--fg);background:color-mix(in srgb,var(--c,var(--red)) 12%,var(--card))}
.pcard h4{margin:0;font:800 23px/1.15 var(--heavy)}
.pcard .th{font-family:var(--thai);color:var(--c,var(--red));font-size:17px;margin:2px 0 8px}
.pcard p{margin:0 0 8px;font-size:15.5px;color:var(--fg2)}
.pcard .cat{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--heavy);letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--red));margin-bottom:8px}
.pcard a{font-weight:700;font-size:14.5px}
.pcard .acts{display:flex;gap:14px;flex-wrap:wrap}
.mapsvg .sea{fill:var(--sea)}
.mapsvg .land{fill:var(--land);stroke:var(--coast);stroke-width:1.4;stroke-linejoin:round}
.mapsvg .nb{fill:color-mix(in srgb,var(--land) 55%,var(--sea));stroke:var(--prov);stroke-width:.8}
.mapsvg .prov{fill:none;stroke:var(--prov);stroke-width:.7;vector-effect:non-scaling-stroke}
.mapsvg .hl-bkk{fill:var(--red);opacity:.2}
.mapsvg .hl-chon{fill:var(--blue);opacity:.18}
.mapsvg .road{fill:none;stroke:var(--road);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.mapsvg .road.major{stroke-width:2;opacity:.9}
.mapsvg .minor{fill:none;stroke:var(--minor);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.mapsvg .canal{fill:none;stroke:var(--water);stroke-width:1.2;opacity:.45}
.mapsvg .river{fill:none;stroke:var(--water);stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mapsvg .parks{fill:var(--park);stroke:none;opacity:.85}
.mapsvg .rail{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mapsvg .mainline{fill:none;stroke:var(--fg3);stroke-width:1.4;stroke-dasharray:6 4;opacity:.6}
.mapsvg .route{fill:none;stroke:var(--route);stroke-linecap:round;stroke-linejoin:round}
.mapsvg .route.glow{stroke-opacity:.22}
.mapsvg .route.run{stroke-dasharray:1 9;animation:march 1.6s linear infinite}
@keyframes march{to{stroke-dashoffset:-20}}
.mapsvg text{font-family:var(--heavy);fill:var(--fg3);paint-order:stroke;stroke:var(--sea);stroke-width:3px;stroke-linejoin:round}
.mapsvg .water-label{font-family:var(--display);letter-spacing:.14em;fill:var(--water);stroke:none;opacity:.95}
.mapsvg .country{font-weight:800;letter-spacing:.3em;fill:var(--prov);stroke:none;text-transform:uppercase}
.mapsvg .town{font-size:12px}
.mapsvg .prov-label{font-weight:800;letter-spacing:.2em;font-size:11px;fill:var(--fg3);opacity:.6;stroke:none}
.pin{cursor:pointer;--c:var(--red);-webkit-tap-highlight-color:transparent}
.pin .halo{fill:var(--c);opacity:.22;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-in-out infinite}
.pin .core{fill:var(--c);stroke:var(--fg);stroke-width:2;transition:transform .2s;transform-box:fill-box;transform-origin:center}
.pin .lab{opacity:0;transition:opacity .2s;font-weight:700;fill:var(--fg);stroke:var(--sea);pointer-events:none}
.pin:hover .core,.pin:focus-visible .core,.pin[aria-current="true"] .core{transform:scale(1.5)}
.pin:hover .lab,.pin:focus-visible .lab,.pin[aria-current="true"] .lab,.pin.always .lab{opacity:1}
.pin:focus-visible{outline:none}
.pin:focus-visible .halo{opacity:.6}
@keyframes pulse{50%{transform:scale(1.7);opacity:.05}}
.pin.city .core{stroke-width:2.5}
.edge{font:700 11px var(--heavy);fill:var(--fg2);cursor:pointer}

/* ── the corner: the team ────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.person{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:start;padding:18px 18px 18px 16px;border:2.5px solid var(--fg);background:var(--card);transition:transform .25s,box-shadow .25s}
.person:hover{transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:var(--hard)}
.person .seal,.person .avatar{grid-row:span 4}
/* a Google photo, printed in a ring of ink like the stamps it stands in for */
.avatar{display:block;flex:none;border-radius:50%;object-fit:cover;border:3px solid var(--fg);background:var(--bg2);box-shadow:3px 3px 0 var(--red)}
.kit-me .avatar{border-width:2px;box-shadow:2px 2px 0 var(--red)}
.person h3{margin:4px 0 0;font:800 22px/1.15 var(--heavy)}
.person .role{justify-self:start;font:italic 800 10.5px/1 var(--heavy);letter-spacing:.14em;text-transform:uppercase;padding:5px 7px 4px;background:var(--slab);color:var(--on-slab)}
.person.faculty .role{background:var(--blue);color:#fff}
.person.staff .role{background:var(--red);color:var(--on-red)}
:root[data-theme="night"] .person.faculty .role{color:var(--bg)}
.person .home{font:600 12.5px/1.3 var(--heavy);text-transform:uppercase;letter-spacing:.06em;color:var(--fg3)}
.person .fact{grid-column:1/-1;margin:10px 0 0;padding-top:10px;border-top:1.5px dashed var(--line);font-family:var(--hand);font-size:17.5px;line-height:1.4;color:var(--blue)}
.person .fact::before{content:"“"}
.person .fact::after{content:"”"}
.person .blurb{grid-column:1/-1;margin:8px 0 0;font-size:15px;color:var(--fg2)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
.rule-col{border:2.5px solid var(--fg);background:var(--card)}
.rule-col h3{margin:0;padding:12px 16px 10px;font:italic 900 15px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;background:var(--blue);color:#fff;border-bottom:2.5px solid var(--fg)}
.rule-col + .rule-col h3{background:var(--red);color:var(--on-red)}
:root[data-theme="night"] .rule-col h3{color:var(--bg)}
.rule-col ul{list-style:none;margin:0;padding:4px 16px 8px}
.rule-col li{padding:10px 0;border-bottom:1px dashed var(--line)}
.rule-col li:last-child{border-bottom:0}
.rule-col li b{display:block;font:800 18px/1.2 var(--heavy)}
.rule-col li span{font-size:15.5px;color:var(--fg2)}
.goals{list-style:none;margin:34px 0 0;padding:0;counter-reset:g}
.goals li{counter-increment:g;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:8px 0;border-bottom:2px solid var(--fg)}
.goals li::before{content:"0" counter(g);font:900 15px/1 var(--heavy);color:var(--red);min-width:1.6em}
.goals b{font:400 clamp(24px,3.4vw,42px)/1.1 var(--display)}
.goals span{font-family:var(--hand);font-size:20px;color:var(--blue)}

/* ── fight camp: the guide ───────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin-top:34px}
.gcard{padding:20px 22px;border:2.5px solid var(--fg);background:var(--card)}
.gcard h3{margin:0 0 10px;font:800 21px/1.15 var(--heavy);text-transform:uppercase;padding-bottom:8px;border-bottom:3px solid var(--yellow)}
.gcard p{margin:0 0 10px;font-size:16px;color:var(--fg2)}
.gcard p:last-child{margin:0}
.gcard.rules-card{background:var(--slab);color:var(--on-slab)}
.gcard.rules-card h3{border-color:var(--red)}
.gcard.rules-card p{color:var(--on-slab);opacity:.9}
.phrases{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
/* a card that turns over: both faces sit in the same grid cell, so the card is as tall as the longer one */
.flip{all:unset;box-sizing:border-box;display:grid;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flip:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.flip-in{display:grid;min-height:150px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.flip[aria-pressed="true"] .flip-in{transform:rotateY(180deg)}
.flip:hover .front{box-shadow:var(--hard)}
.flip .face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(0deg);border:2.5px solid var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 12px;text-align:center;background:var(--card);transition:box-shadow .15s}
.flip .front .thai{font-family:var(--thai);font-size:27px;line-height:1.3;color:var(--fg);overflow-wrap:anywhere}
.flip .front .rom{font:700 13px/1 var(--heavy);text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.flip .back{transform:rotateY(180deg);background:var(--yellow);color:var(--on-yellow)}
.flip .back b{font:800 19px/1.15 var(--heavy)}
.flip .back span{font-size:13.5px;line-height:1.4}
.reading{list-style:none;margin:16px 0 0;padding:0;max-width:820px;border-top:2.5px solid var(--fg)}
.reading a{display:block;padding:14px 40px 14px 2px;border-bottom:1.5px solid var(--line);text-decoration:none;color:var(--fg);position:relative}
.reading a:hover{background:var(--yellow);color:var(--on-yellow)}
.reading a small{display:inline-block;margin-bottom:4px;font:italic 800 10.5px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;padding:4px 6px 3px;background:var(--slab);color:var(--on-slab)}
.reading a b{display:block;font:700 17px/1.3 var(--heavy)}
.reading a span{font-size:15px;color:var(--fg2)}
.reading a:hover span{color:var(--on-yellow)}
.reading a::after{content:"↗";position:absolute;right:10px;top:14px;font:800 18px var(--heavy);color:var(--red)}

/* ── side quest: bingo ───────────────────────────────────── */
.bingo-wrap{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:24px;align-items:start}
.bingo-card{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:3px solid var(--fg);background:var(--card);box-shadow:var(--shadow)}
.bsq{all:unset;box-sizing:border-box;position:relative;aspect-ratio:1;display:grid;place-items:center;padding:6px;text-align:center;font:600 clamp(10.5px,1.5vw,13.5px)/1.2 var(--heavy);border-right:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);cursor:pointer;color:var(--fg);overflow:hidden;transition:background .2s}
.bsq:nth-child(5n){border-right:0}
.bsq:nth-last-child(-n+5){border-bottom:0}
.bsq:hover{background:var(--bg2)}
.bsq:focus-visible{outline:3px solid var(--blue);outline-offset:-4px}
.bsq[aria-pressed="true"]::after{content:"";position:absolute;inset:10%;border:4px solid var(--red);border-radius:50%;transform:rotate(-12deg);opacity:.8;animation:dab .3s cubic-bezier(.3,1.6,.5,1)}
.bsq[aria-pressed="true"]{color:var(--fg2)}
.bsq.free{background:var(--yellow);color:var(--on-yellow);cursor:default}
.bsq.free::after{border-color:var(--on-yellow)!important}
.bsq.line{background:color-mix(in srgb,var(--red) 16%,var(--card))}
@keyframes dab{from{transform:rotate(-12deg) scale(1.6);opacity:0}}
.bingo-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);font:italic 900 clamp(44px,9vw,96px)/1 var(--heavy);color:var(--red);border:6px solid var(--red);padding:6px 18px 2px;background:color-mix(in srgb,var(--bg) 80%,transparent);pointer-events:none;animation:slam .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes slam{from{transform:translate(-50%,-50%) rotate(-14deg) scale(2.2);opacity:0}}
.bingo-score{margin:0 0 14px;font:800 20px/1.3 var(--heavy);text-transform:uppercase}
.bingo-score span{display:block;font:400 18px/1.3 var(--hand);text-transform:none;color:var(--red)}

/* ── footer ──────────────────────────────────────────────── */
.foot{padding:0 0 60px;border-top:3px solid var(--fg);background:var(--slab);color:var(--on-slab);text-align:center}
.foot .bunting{margin-bottom:40px;background:var(--bg)}
.foot-big{margin:0 0 16px;font:400 clamp(38px,6vw,74px)/1 var(--display);color:var(--yellow)}
.foot-big span{font-size:.7em;margin-left:.3em;color:var(--on-slab)}
.foot .fine{max-width:66ch;margin:0 auto 10px;color:color-mix(in srgb,var(--on-slab) 76%,transparent)}
.foot a{color:var(--yellow)}
.foot-links{margin:22px 0 0;font:700 14px var(--heavy);text-transform:uppercase;letter-spacing:.06em}
.foot-links i{font-style:normal;margin:0 8px;color:var(--on-slab)}

/* ── small screens ───────────────────────────────────────── */
@media (max-width:1180px){
  /* closed, it stops taking clicks at once, though it takes a moment to fade */
  .links{position:fixed;inset:var(--bar) 0 auto 0;flex-direction:column;gap:0;padding:8px var(--gut) 14px;background:var(--bg);border-bottom:3px solid var(--fg);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
  .links.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .25s,transform .25s}
  .links a{padding:13px 4px;font-size:17px;border-bottom:1.5px dashed var(--line)}
  .burger{display:inline-flex}
}
@media (max-width:900px){
  .bouts,.nye-row,.tape{grid-template-columns:1fr}
  .tape-col.th{transform:none}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(2){border-right:0}
  .fig:nth-child(3){padding-left:0}
  .fig:nth-child(n+3){border-top:1.5px solid var(--line)}
  .nye-head{grid-template-columns:1fr}
  .bingo-wrap{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
}
@media (max-width:860px){
  .mbody{grid-template-columns:1fr}
  .mside{border-left:0;border-top:2.5px solid var(--fg)}
  .mside-in{position:static}
}
@media (max-width:820px){
  .band{justify-content:center;text-align:center}
  .band-en{display:none}
  .corners{grid-template-columns:1fr;gap:18px;max-width:440px}
  .vs{margin:0 auto;width:86px}
  .mark-wrap{max-width:220px}
  .bell{grid-template-columns:1fr;transform:rotate(-.6deg);padding:16px 22px 14px}
  .bell-when{padding:0 0 12px;border-right:0;border-bottom:2.5px dashed var(--on-yellow)}
  .count-note{text-align:left}
  .deck{flex-direction:column;height:auto}
  .panel{flex:none;height:84px;transition:height .6s cubic-bezier(.2,.8,.2,1)}
  .panel[data-open="true"]{flex:none;height:auto;min-height:520px}
  .ptab{flex-direction:row;align-items:center;gap:14px;padding:16px 20px;width:auto;right:0}
  .ptab .pname,.ptab .pth{writing-mode:horizontal-tb;transform:none}
  .ptab .pname{font-size:30px}
  .ptab .pico svg{width:34px;height:34px}
  .panel[data-open="true"] .ptab{padding:18px 20px}
  .pbody{inset:auto;position:relative;margin:92px 20px 22px;overflow:visible}
  .panel:not([data-open="true"]) .pbody{display:none}
  .ev{grid-template-columns:76px 16px minmax(0,1fr);gap:0 10px}
  .ev .tm{font-size:12.5px}
  .stamp{width:94px}
  .question p::before{position:static;display:block;height:.6em;margin-bottom:.1em}
}
@media (max-width:520px){
  body{font-size:17px}
  .brand-name{font-size:16px}
  .deskbtn{display:none}
  .mode-txt{display:none}
  .mode{padding:10px}
  .ticket.past::after{right:98px}
  .ticket{grid-template-columns:minmax(0,1fr) 80px;-webkit-mask:radial-gradient(circle 10px at calc(100% - 80px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 80px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 10px at calc(100% - 80px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 80px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
  .ev{grid-template-columns:62px 14px minmax(0,1fr);gap:0 8px}
  .person{grid-template-columns:72px minmax(0,1fr)}
  .person .seal{width:72px;height:72px}
  .phrases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures{grid-template-columns:1fr}
  .fig,.fig + .fig{padding:14px 0;border-right:0}
  .fig + .fig{border-top:1.5px solid var(--line)}
  .history{grid-template-columns:1fr}
  .bell .cell b{font-size:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ── the to-do sidebar ("kit") ───────────────────────────── */
:root{--kit-w:380px}
.kitbtn{display:inline-flex;align-items:center;gap:8px;font:800 12.5px/1 var(--heavy);text-transform:uppercase;letter-spacing:.06em;padding:6px 6px 6px 12px;border:2px solid var(--fg);background:var(--yellow);color:var(--on-yellow);cursor:pointer}
.kitbtn:hover{background:var(--fg);color:var(--bg)}
.kitbtn b,.kitfab b{font:700 12px/1 var(--heavy);background:var(--slab);color:var(--on-slab);padding:5px 7px 4px}
.kitbtn:hover b{background:var(--yellow);color:var(--on-yellow)}
.kitbtn[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
.kitbtn[aria-expanded="true"] b{background:var(--red);color:var(--on-red)}
.kitfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:105;display:none;align-items:center;gap:10px;font:800 14px/1 var(--heavy);text-transform:uppercase;letter-spacing:.05em;padding:9px 9px 9px 16px;border:2.5px solid var(--fg);background:var(--yellow);color:var(--on-yellow);box-shadow:var(--hard);cursor:pointer}
body.kit-docked{padding-right:var(--kit-w)}
body.kit-docked .bar{right:var(--kit-w)}
body.kit-overlay{overflow:hidden}

.kit{position:fixed;top:0;right:0;bottom:0;width:var(--kit-w);z-index:120;display:flex;flex-direction:column;background:var(--grain),var(--bg2);border-left:3px solid var(--fg);transform:translateX(104%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.kit[data-open="true"]{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s}
.kit[data-mode="drawer"]{width:min(420px,100vw - 40px);box-shadow:-8px 0 0 rgba(26,33,71,.25)}
.kit[data-mode="sheet"]{top:auto;left:0;width:auto;height:min(86svh,760px);border-left:0;border-top:3px solid var(--fg);transform:translateY(104%);padding-bottom:env(safe-area-inset-bottom)}
.kit[data-mode="sheet"][data-open="true"]{transform:none}
.kit[data-mode="sheet"] .kit-head::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;background:var(--fg);opacity:.4}
.kit-scrim{position:fixed;inset:0;z-index:115;background:rgba(16,20,43,.5);animation:fadein .3s}
@keyframes fadein{from{opacity:0}}

.kit-head{position:relative;display:flex;align-items:center;gap:14px;padding:14px 14px 12px 16px;min-height:var(--bar);border-bottom:3px solid var(--fg);background:var(--bg)}
.kit[data-mode="sheet"] .kit-head{padding-top:22px}
.kit-ring{position:relative;width:52px;height:52px;flex:none}
.kit-ring svg{display:block}
.ring-n{position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap;font:600 10.5px/1 var(--heavy);color:var(--fg3)}
.ring-n b{font-size:15px;color:var(--fg)}
.kit-heading{min-width:0;flex:1}
.kit-title{margin:0;font:400 22px/1.1 var(--display)}
.kit-sub{margin:4px 0 0;font:italic 800 11px/1.2 var(--heavy);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.kit-x{flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--fg);background:var(--card);color:var(--fg);cursor:pointer}
.kit-x:hover{background:var(--yellow);color:var(--on-yellow)}
.kit-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 26px;scrollbar-width:thin}

.kit-acct{padding:14px 14px 12px;border:2px dashed var(--fg);background:var(--card)}
.kit-acct p{margin:0 0 10px;font-size:14.5px;color:var(--fg2);line-height:1.45}
.kit-acct p b{color:var(--fg)}
.kit-acct .fine{margin:8px 0 0;font-size:13px}
.kit-signin{min-height:44px;display:flex;justify-content:center}
/* Google's button is a light-scheme frame: on a dark page the browser would paint it an opaque white
   box unless its container asks for the light scheme too */
.kit-signin,.gate-signin,.gbtn{color-scheme:light}
.devpick{display:grid;gap:8px;width:100%}
.kit-me{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:2px solid var(--fg)}
.kit-me svg{flex:none}
.kit-me .who{flex:1;min-width:0;display:flex;flex-direction:column}
.kit-me .who b{font:800 16px/1.2 var(--heavy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-me .who span{font-size:13px;color:var(--fg3)}
.kit-me .linkbtn{all:unset;cursor:pointer;font:700 13px var(--heavy);text-transform:uppercase;letter-spacing:.04em;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.kit-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:10px 2px 0;font:700 13.5px var(--heavy)}
.kit-viewas{margin-top:6px;font-weight:600}
.kit-viewas span{color:var(--fg3)}
.kit-preview{display:grid;gap:6px;padding:12px 14px;background:var(--yellow);color:var(--on-yellow);border:2.5px solid var(--fg);box-shadow:var(--hard)}
.kit-preview b{font:800 16px/1.2 var(--heavy);text-transform:uppercase}
.kit-preview span{font-size:14px;line-height:1.4}
.kit-preview .btn{justify-self:start;margin-top:4px}
.kit-preview + .kit-acct{margin-top:12px}
/* the reminder that you are looking at someone else's view of the page */
.viewas{position:fixed;top:var(--bar);left:0;right:0;z-index:99;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding:8px max(var(--gut),env(safe-area-inset-left));background:var(--yellow);color:var(--on-yellow);border-bottom:3px solid var(--fg);font:500 14px/1.35 var(--sans)}
.viewas b{font:800 14px/1.2 var(--heavy);text-transform:uppercase;letter-spacing:.04em}
.viewas .btn{box-shadow:2px 2px 0 var(--ink-edge)}
body.kit-docked .viewas{right:var(--kit-w)}
body.previewing .poster{padding-top:calc(var(--bar) + 54px)}
html:has(body.previewing){scroll-padding-top:calc(var(--bar) + 66px)}
@media (max-width:640px){ .viewas-more{display:none} }
.kit-err{margin:12px 0 0;padding:10px 12px;background:color-mix(in srgb,var(--red) 13%,var(--card));color:var(--fg);font-size:14px;border:2px solid var(--red)}
.kit-next{display:block;margin:14px 0 4px;padding:12px 14px;background:var(--slab);color:var(--on-slab);border:2px solid var(--fg);text-decoration:none;transition:transform .2s,box-shadow .2s}
.kit-next:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red);color:var(--on-slab)}
.kit-next small{display:block;font:italic 800 10.5px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.kit-next b{display:block;font:800 17px/1.25 var(--heavy)}
.kit-next span{display:block;margin-top:3px;font:500 13px/1.4 var(--sans);opacity:.85}
.kit-next em{display:block;margin-top:8px;padding-top:8px;border-top:1.5px dashed currentColor;font-style:normal;font-size:13px;color:var(--yellow)}
.kit-h{margin:20px 2px 8px;font:italic 800 11px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.todos{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.todo{padding:10px 12px;border:2px solid var(--fg);background:var(--card);transition:background .3s}
.todo .tick{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.todo input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border:2.5px solid var(--fg);display:grid;place-items:center;cursor:pointer;background:var(--bg);transition:background .2s}
.todo input::after{content:"";width:11px;height:6px;border-left:3px solid var(--on-red);border-bottom:3px solid var(--on-red);transform:rotate(-45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1);margin-top:-3px}
.todo input:checked{background:var(--red);border-color:var(--red)}
.todo input:checked::after{transform:rotate(-45deg) scale(1)}
.todo input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.todo .tt{font:600 15px/1.4 var(--sans);padding-top:1px}
.todo .th{margin:4px 0 0 36px;font-size:13.5px;line-height:1.45;color:var(--fg3)}
.todo .tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0 36px;font-size:13.5px}
.todo .tmeta a{font-weight:700}
.todo .tmeta .locked{font:italic 600 12.5px/1.3 var(--sans);color:var(--fg3)}
.due{font:700 11px/1 var(--heavy);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px 3px;border:1.5px solid var(--fg);color:var(--fg2)}
.due.soon{border-color:var(--amber);color:var(--amber);background:color-mix(in srgb,var(--yellow) 22%,transparent)}
.due.late{background:var(--red);border-color:var(--red);color:var(--on-red)}
.due.wait{border-style:dashed;color:var(--fg3)}
.kit-h.now{color:var(--red)}
.kit-later{margin-top:22px}
.kit-later-note{margin:-2px 2px 10px;font-size:13px;color:var(--fg3);line-height:1.4}
.todo.done{background:transparent;border-style:dashed;border-color:var(--line)}
.todo.done .tt{color:var(--fg3);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.todo.pop{animation:pop .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{40%{transform:scale(1.03) rotate(-.6deg);background:var(--yellow)}}
.kit-done{margin-top:18px}
.kit-done summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin:0 2px 8px;font:italic 800 11px/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.kit-done summary::-webkit-details-marker{display:none}
.kit-done summary::before{content:"▸";font-size:12px;transition:transform .2s}
.kit-done[open] summary::before{transform:rotate(90deg)}
.kit-done summary span{color:var(--red);letter-spacing:0}
.kit-all{margin-top:16px;padding:16px;text-align:center;background:var(--yellow);color:var(--on-yellow);border:2.5px solid var(--fg);box-shadow:var(--hard);font-size:15px;transform:rotate(-.8deg)}
.kit-all b{font:400 22px/1.2 var(--display);display:block}
.kit-all span{display:block;margin-top:4px;font-size:17px}
.kit-foot{margin:22px 2px 0;font-size:13.5px;color:var(--fg3)}
.kit-foot a{font-weight:700}

.kit-pointer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;max-width:860px;padding:clamp(18px,3vw,28px);border:2.5px solid var(--fg);background:var(--yellow);color:var(--on-yellow);box-shadow:var(--shadow)}
.kit-pointer .h3{margin:0 0 6px}
.kit-pointer p{margin:0;max-width:54ch}
.gate-signin{display:flex;min-height:44px;margin:4px 0 6px}

@media (max-width:1599px){
  /* with the sidebar docked the bar is narrower, so the section links fold into the menu sooner */
  body.kit-docked .links{position:fixed;inset:var(--bar) var(--kit-w) auto 0;flex-direction:column;gap:0;padding:8px var(--gut) 14px;background:var(--bg);border-bottom:3px solid var(--fg);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
  body.kit-docked .links.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .25s,transform .25s}
  body.kit-docked .links a{padding:13px 4px;font-size:17px;border-bottom:1.5px dashed var(--line)}
  body.kit-docked .burger{display:inline-flex}
}
@media (max-width:639px){
  .kitfab{display:inline-flex}
  .kitbtn{display:none}
  body.kit-overlay .kitfab{display:none}
}