/* ============================================================
   Palette sampled from afsindonesia.org — AFS blue #034EA2 with the
   AFS spectrum (purple / magenta / red / orange / yellow), Lato + Montserrat.
   ============================================================ */
:root{
  --afs:#034EA2; --afs-mid:#1C7ABF; --afs-deep:#023B7A; --afs-tint:#E8F1FB;
  --purple:#90278E; --magenta:#EC145A; --pink:#EC145A; --red:#EF3E42; --orange:#F47929; --yellow:#FFD100;
  --green:#2F8F57; --green-tint:#E4F3EA;
  --amber-t:#FDF2DC; --amber-d:#8A5A0E;
  --paper:#F4F7FB; --surface:#FFFFFF; --surface-2:#EDF2F8; --surface-3:#DEE6F0;
  --ink:#232C3A; --ink-2:#525C6B; --ink-3:#828C9B;
  --line:#E1E8F1; --line-2:#C7D2E1;
  --on-accent:#FFFFFF;
  --shadow-1:0 1px 2px rgba(3,78,162,.06), 0 1px 3px rgba(35,44,58,.05);
  --shadow-2:0 6px 18px rgba(3,78,162,.10), 0 1px 3px rgba(35,44,58,.06);
  --shadow-3:0 20px 48px rgba(3,50,110,.22);
  --display:"Montserrat","Trebuchet MS",system-ui,sans-serif;
  --body:"Lato","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-s:7px; --r-m:12px; --r-l:18px; --r-xl:24px;
  --rail:262px; --shell:1300px;
  --spectrum:linear-gradient(96deg,#034EA2 0%,#1C7ABF 16%,#90278E 38%,#EC145A 56%,#EF3E42 68%,#F47929 84%,#FFD100 100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --afs:#5AA9F0; --afs-mid:#7FBEF5; --afs-deep:#0B2E5C; --afs-tint:#102847;
    --purple:#C97BC7; --magenta:#FF6B93; --pink:#FF6B93; --red:#FF7C7E; --orange:#FF9A52; --yellow:#FFDE4D;
    --green:#5FC98A; --green-tint:#11301F; --amber-t:#33260F; --amber-d:#E2A94F;
    --paper:#080F1C; --surface:#0F1B2E; --surface-2:#17263C; --surface-3:#22334D;
    --ink:#E9EEF6; --ink-2:#AFBBCC; --ink-3:#7C899C;
    --line:#22304A; --line-2:#33456280;
    --on-accent:#06121F;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 6px 20px rgba(0,0,0,.5);
    --shadow-3:0 20px 48px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --afs:#5AA9F0; --afs-mid:#7FBEF5; --afs-deep:#0B2E5C; --afs-tint:#102847;
  --purple:#C97BC7; --magenta:#FF6B93; --pink:#FF6B93; --red:#FF7C7E; --orange:#FF9A52; --yellow:#FFDE4D;
  --green:#5FC98A; --green-tint:#11301F; --amber-t:#33260F; --amber-d:#E2A94F;
  --paper:#080F1C; --surface:#0F1B2E; --surface-2:#17263C; --surface-3:#22334D;
  --ink:#E9EEF6; --ink-2:#AFBBCC; --ink-3:#7C899C;
  --line:#22304A; --line-2:#334562;
  --on-accent:#06121F;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 6px 20px rgba(0,0,0,.5);
  --shadow-3:0 20px 48px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.15}
a{color:var(--afs)}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--afs); outline-offset:2px; border-radius:5px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}
svg{display:block}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--afs)}
.muted{color:var(--ink-3)}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar::before{content:""; display:block; height:4px; background:var(--spectrum)}
.topbar-in{max-width:var(--shell); margin:0 auto; padding:0 22px; height:64px; display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; background:none; border:0; padding:4px 2px; cursor:pointer; text-align:left}
.brand > span{display:flex; flex-direction:column; align-items:flex-start}
.brand-name{display:block; font-family:var(--display); font-weight:800; font-style:italic; font-size:21px; letter-spacing:-.03em; line-height:1; color:var(--ink)}
.brand-sub{display:block; white-space:nowrap; font-family:var(--display); font-weight:700; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1; margin-top:5px}
.search{flex:1 1 190px; min-width:190px; max-width:430px; position:relative; display:flex; align-items:center}
.search svg{position:absolute; left:13px; color:var(--ink-3); pointer-events:none}
.search input{width:100%; padding:10px 13px 10px 38px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--surface-2); color:var(--ink); font-size:14.5px; font-family:var(--body)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{background:var(--surface); border-color:var(--afs); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--afs) 15%, transparent)}
.topnav{display:flex; gap:2px; margin-left:auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.topnav button{background:none; border:0; padding:8px 12px; border-radius:var(--r-s); cursor:pointer; font-size:14px; font-weight:700; font-family:var(--display); color:var(--ink-2); position:relative; white-space:nowrap; display:flex; align-items:center}
.topnav button svg{display:none}
.topnav button:hover{background:var(--surface-2); color:var(--ink)}
.topnav button[aria-current="page"]{color:var(--afs)}
.topnav button[aria-current="page"]::after{content:""; position:absolute; left:12px; right:12px; bottom:-13px; height:3px; background:var(--afs); border-radius:3px 3px 0 0}
.pip{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; background:var(--magenta); color:#fff; border-radius:999px; font-family:var(--mono); font-size:10.5px; font-weight:600}
.me-btn{display:flex; align-items:center; gap:9px; background:none; border:1.5px solid var(--line-2); padding:3px 12px 3px 3px; border-radius:999px; cursor:pointer; margin-left:6px}
.me-btn:hover{border-color:var(--afs); background:var(--afs-tint)}
.me-btn .me-label{font-size:13.5px; font-weight:700; font-family:var(--display); white-space:nowrap}

.demo-strip{background:var(--amber-t); border-bottom:1px solid color-mix(in srgb, var(--amber-d) 25%, transparent); color:var(--amber-d)}
.demo-strip div{max-width:var(--shell); margin:0 auto; padding:8px 22px; font-size:13px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.demo-strip strong{font-family:var(--display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}

main{max-width:var(--shell); margin:0 auto; padding:0 22px 96px}
.split{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:30px; align-items:start}
.split-wide{grid-template-columns:1fr 348px}
/* Sticky with no height of its own: once it pinned, anything past the fold was
   simply unreachable, and a wheel over the filters scrolled the member list
   instead. It gets its own scroll region, and overscroll-behavior stops that
   scroll handing off to the page when it reaches either end. */
.rail{position:sticky; top:92px; display:flex; flex-direction:column; gap:15px;
  max-height:calc(100vh - 108px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-1)}
.pad{padding:17px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--spectrum); margin:24px 0 20px; box-shadow:var(--shadow-2); isolation:isolate}
.hero-art{position:absolute; inset:0; z-index:0; opacity:.5}
.hero::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg,rgba(2,26,58,.52),rgba(2,26,58,.2) 54%,rgba(2,26,58,0) 80%)}
.hero-in{position:relative; z-index:1; padding:38px 34px 34px; color:#fff; max-width:660px}
.hero-eyebrow{font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:9px}
.hero h1{font-size:clamp(28px,3.9vw,44px); margin:12px 0 10px; color:#fff; text-shadow:0 2px 18px rgba(0,40,90,.28)}
.hero p{margin:0; font-size:16.5px; color:rgba(255,255,255,.94); max-width:52ch; text-shadow:0 1px 10px rgba(0,40,90,.25)}
.hero-stats{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px}
.hstat{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(6px); padding:8px 14px 8px 10px; border-radius:999px; color:#fff}
.hstat b{font-family:var(--mono); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.hstat span{font-size:12.5px; opacity:.92; font-weight:700; font-family:var(--display); letter-spacing:.03em}

/* ---------- page heads ---------- */
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:26px 0 20px; flex-wrap:wrap}
.phead h1{font-size:clamp(25px,3.2vw,34px)}
.phead p{margin:7px 0 0; color:var(--ink-2); max-width:60ch; font-size:15px}

/* ---------- filters ---------- */
.fgroup{border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0}
.fgroup > summary{list-style:none; cursor:pointer; padding:12px 17px; display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:700; font-family:var(--display)}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary .chev{transition:transform .18s ease; color:var(--ink-3)}
.fgroup[open] > summary .chev{transform:rotate(90deg)}
.fbody{padding:0 17px 15px; display:flex; flex-direction:column; gap:8px; max-height:236px; overflow-y:auto}
.check{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; color:var(--ink-2); border-radius:var(--r-s)}
.check:hover{color:var(--ink)}
.check input{accent-color:var(--afs); width:16px; height:16px; margin:0; flex:none}
.check .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.check .fl{flex:none}
.years{display:flex; align-items:center; gap:9px; padding:2px 17px 15px}
.years input{width:100%; padding:8px 10px; border:1.5px solid var(--line-2); border-radius:var(--r-s); background:var(--surface-2); color:var(--ink); font-family:var(--mono); font-size:13px}
.rail-head{display:flex; align-items:center; justify-content:space-between; padding:15px 17px 13px; border-bottom:1px solid var(--line)}
.rail-head h2{font-size:14.5px}
.linkbtn{background:none; border:0; padding:2px 4px; cursor:pointer; font-size:13px; color:var(--afs); font-weight:700; font-family:var(--display); border-radius:4px}
.linkbtn:hover{text-decoration:underline}
.linkbtn[disabled]{color:var(--ink-3); cursor:default; text-decoration:none}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:11px; margin-bottom:17px; flex-wrap:wrap}
.count{font-size:14px; color:var(--ink-2)}
.count b{font-family:var(--mono); color:var(--ink); font-weight:600}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 7px 3px 11px; border-radius:999px; background:var(--afs-tint); border:1px solid color-mix(in srgb, var(--afs) 26%, transparent); font-size:13px; color:var(--afs)}
.chip button{background:none; border:0; cursor:pointer; color:inherit; opacity:.6; line-height:1; padding:2px; border-radius:999px; font-size:15px}
.chip button:hover{opacity:1}
select.sortsel{margin-left:auto; padding:8px 11px; border:1.5px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font-size:13.5px; font-family:var(--body)}
.toolbar .mobile-filter{display:none}

/* ---------- illustrated avatars ---------- */
.ava{position:relative; display:inline-block; flex:none; border-radius:50%; overflow:visible; vertical-align:middle}
.ava svg{border-radius:50%; display:block}
.ava .fl{position:absolute; right:-3px; bottom:-2px; z-index:2; border-radius:3px; box-shadow:0 0 0 2px var(--surface), var(--shadow-1); overflow:hidden}
.ava.ring::after{content:""; position:absolute; inset:-3px; z-index:1; border-radius:50%; border:2px solid var(--hue); pointer-events:none}

/* ---------- person cards ---------- */
/* A card is four bands: who they are, the angkatan line, the chips, the footer.
   Each band is a different height per person — a two-line name, a three-line job
   title — so across a row nothing lined up and the grid read as ragged. Subgrid
   hands every card the same four row heights, so the bands align across the row
   however long anybody's job title is. */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:auto auto auto auto; gap:15px}
.grid > .pcard{grid-row:span 4}
@supports (grid-template-rows: subgrid){
  .grid > .pcard{display:grid; grid-template-rows:subgrid; gap:11px}
}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:15px 16px; display:flex; flex-direction:column; gap:11px; cursor:pointer; text-align:left; width:100%; box-shadow:var(--shadow-1); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease}
.pcard:hover{box-shadow:var(--shadow-2); border-color:color-mix(in srgb, var(--hue,var(--afs)) 45%, var(--line)); transform:translateY(-2px)}
.pcard-top{display:flex; gap:13px; align-items:flex-start}
.pcard-id{min-width:0; flex:1}
.pcard-id h3{font-size:15.5px; font-weight:700; line-height:1.24; overflow-wrap:anywhere}
.pcard-role{font-size:13.5px; color:var(--ink-2); margin-top:2px; line-height:1.38}
.pcard-role b{font-weight:700; color:var(--ink)}
.stampline{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:0 7px; align-items:center}
.stampline i{font-style:normal; color:var(--line-2)}
.tags{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); white-space:nowrap; font-weight:700; font-family:var(--display)}
.tag-ind{display:inline-flex; align-items:center; gap:5px; padding-left:6px; background:color-mix(in srgb, var(--hue) 12%, var(--surface)); color:var(--hue); border-color:color-mix(in srgb, var(--hue) 34%, transparent)}
.tag-ind svg{color:var(--hue)}
.tag-open{background:var(--afs-tint); color:var(--afs); border-color:color-mix(in srgb, var(--afs) 28%, transparent)}
.pcard-foot{display:flex; align-items:center; gap:9px; padding-top:11px; border-top:1px solid var(--line); margin-top:auto}
@supports (grid-template-rows: subgrid){ .grid > .pcard > .pcard-foot{margin-top:0; align-self:end} }
/* The chips band is the one that grows; let it take the slack so the footer
   stays on the line it shares with its neighbours. */
@supports (grid-template-rows: subgrid){ .grid > .pcard > .tags{align-content:start} }
.contact-state{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; font-family:var(--display)}
.dot{width:8px; height:8px; border-radius:50%; flex:none}
.dot-public{background:var(--green)} .dot-request{background:var(--orange)} .dot-hidden{background:var(--ink-3)}
.mini{margin-left:auto; font-size:13px; font-weight:700; font-family:var(--display); color:var(--afs); background:none; border:0; padding:4px 2px; cursor:pointer; border-radius:4px}
.pcard:hover .mini{text-decoration:underline}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 17px; border-radius:999px; border:1.5px solid transparent; font-size:14px; font-weight:700; font-family:var(--display); cursor:pointer; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--afs); color:var(--on-accent)}
.btn-primary:hover{background:var(--afs-deep)}
.btn-ghost{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--afs); color:var(--afs); background:var(--afs-tint)}
.btn-quiet{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
.btn-quiet:hover{color:var(--ink)}
.btn-wa{background:#25D366; color:#06301A}
.btn-wa:hover{filter:brightness(.94)}
.btn[disabled]{opacity:.55; cursor:default}
.btn-sm{padding:7px 13px; font-size:13px}

.empty{text-align:center; padding:70px 22px; border:2px dashed var(--line-2); border-radius:var(--r-xl); background:var(--surface)}
.empty h3{font-size:19px; margin:14px 0 7px}
.empty p{color:var(--ink-3); margin:0 auto 18px; max-width:44ch; font-size:14.5px}

/* ---------- industry board ---------- */
.ind-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:15px}
.ind-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:19px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:13px; box-shadow:var(--shadow-1); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; position:relative; overflow:hidden}
.ind-card::before{content:""; position:absolute; top:-46px; right:-46px; width:126px; height:126px; border-radius:50%; background:color-mix(in srgb, var(--hue) 10%, transparent)}
.ind-card:hover{box-shadow:var(--shadow-2); border-color:color-mix(in srgb, var(--hue) 45%, var(--line)); transform:translateY(-2px)}
.ind-icon{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--hue) 14%, var(--surface)); color:var(--hue); position:relative}
.ind-top{display:flex; align-items:flex-start; gap:13px; position:relative}
.ind-card h3{font-size:17.5px; line-height:1.2; flex:1; padding-top:3px}
.ind-n{font-family:var(--mono); font-size:22px; font-weight:600; color:var(--hue); font-variant-numeric:tabular-nums; line-height:1}
.ind-n small{font-size:9.5px; display:block; text-align:right; letter-spacing:.12em; color:var(--ink-3); font-weight:500; font-family:var(--display)}
.bar{height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.bar span{display:block; height:100%; background:var(--hue); border-radius:999px}
.ind-meta{font-size:13px; color:var(--ink-3); line-height:1.55}
.ind-meta b{color:var(--ink-2); font-weight:700}
/* They used to be stacked with a negative margin, the way a shared-with list
   is drawn. Every member here carries the same generic avatar until they add a
   photo, so overlapping identical discs read as a rendering fault rather than
   a stack — and the ring of the first one crowded the line of text above. */
.faces{display:flex; align-items:center; gap:5px; margin-top:2px}
.faces .ava svg{box-shadow:0 0 0 2.5px var(--surface); border-radius:50%}
.faces .more{margin-left:8px; font-family:var(--display); font-size:11.5px; font-weight:700; color:var(--hue)}

/* ---------- profile ---------- */
.back{display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; color:var(--ink-2); font-size:14px; font-weight:700; font-family:var(--display); padding:7px 4px; margin:20px 0 14px; border-radius:var(--r-s)}
.back:hover{color:var(--afs)}
.prof{display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start}
.prof-card{overflow:hidden}
.banner{position:relative; height:132px; background:linear-gradient(104deg, var(--hue), color-mix(in srgb, var(--hue) 45%, var(--afs)) 68%, var(--afs))}
.banner-art{position:absolute; inset:0; opacity:.42}
.stamp{position:absolute; right:22px; top:20px; transform:rotate(-9deg)}
.prof-hero{padding:0 24px 22px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.prof-hero .ava{margin-top:-54px}
.prof-hero .ava svg{box-shadow:0 0 0 4px var(--surface), var(--shadow-2)}
.prof-id{flex:1; min-width:230px; padding-top:14px}
.prof-id h1{font-size:clamp(23px,2.7vw,31px)}
.prof-id .pcard-role{font-size:15.5px; margin-top:5px}
.sect{padding:21px 24px; border-top:1px solid var(--line)}
.sect h2{font-size:11.5px; font-family:var(--display); font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--afs); margin-bottom:15px}
/* A section heading that carries its own Edit control on your own profile. */
.sect-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px}
/* Dialog internals for the in-place profile editors. */
.mdl-lead{margin:-4px 0 16px; font-size:13.5px; line-height:1.6; color:var(--ink-3)}
.cv-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cv-grid .field{margin-bottom:0; grid-column:1 / -1}
.cv-grid .field.half{grid-column:auto}
.chipset{display:flex; flex-wrap:wrap; gap:8px}
.chip-pick{cursor:pointer}
.chip-pick input{position:absolute; opacity:0; width:0; height:0}
.chip-pick span{display:inline-block; padding:7px 14px; border-radius:999px; font-size:13px;
  border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink-2); transition:.14s}
.chip-pick:hover span{border-color:var(--afs); color:var(--afs)}
.chip-pick.on span, .chip-pick input:checked + span{background:var(--afs-tint); border-color:var(--afs); color:var(--afs); font-weight:600}
@media (max-width:560px){ .cv-grid{grid-template-columns:minmax(0,1fr)} .cv-grid .field.half{grid-column:1 / -1} }
.sect-head h2{margin-bottom:0}
.btn-xs{padding:5px 11px; font-size:12px; min-height:0; border-radius:999px; gap:5px}
/* The measure was capped at 66ch inside a column that is 840px wide, so a bio
   stopped two-thirds of the way across and left a hole beside it. The column
   is its own limit. */
.sect p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.7}
/* A bio is written in paragraphs. Escaped into a single <p> the blank lines
   vanished and four separate thoughts ran together as one wall of type. */
.bio p{margin:0 0 13px; color:var(--ink-2); font-size:15.5px; line-height:1.7}
.bio p:last-child{margin-bottom:0}
.bio-sm p{font-size:13.5px; line-height:1.6; margin-bottom:9px}
.tl-row{display:grid; grid-template-columns:104px 1fr; gap:15px; padding:12px 0; border-top:1px dashed var(--line)}
.tl-row:first-child{border-top:0; padding-top:0}
.tl-when{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); padding-top:3px}
.tl-what{font-size:14.5px}
.tl-what b{font-weight:700}
.tl-what span{display:block; color:var(--ink-3); font-size:13.5px}
.exchange{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.exchange div{background:var(--surface); padding:13px 14px}
.exchange dt{font-family:var(--display); font-weight:700; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.exchange dd{margin:6px 0 0; font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:7px}
.side{display:flex; flex-direction:column; gap:15px; position:sticky; top:92px}
.contact-box{padding:19px}
.contact-box h2{font-size:16px; margin-bottom:5px; display:flex; align-items:center; gap:8px}
.contact-box p{font-size:13.5px; color:var(--ink-2); margin:0 0 15px; line-height:1.6}
.wa-num{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:16px; font-weight:500; padding:12px 14px; background:var(--green-tint); border:1.5px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius:var(--r-m); margin-bottom:12px; color:var(--green)}
.notice{display:flex; gap:10px; padding:12px 13px; border-radius:var(--r-m); font-size:13px; line-height:1.55; align-items:flex-start}
.notice svg{flex:none; margin-top:2px}
.notice-amber{background:var(--amber-t); color:var(--amber-d)}
.notice-good{background:var(--green-tint); color:var(--green)}
.notice-quiet{background:var(--surface-2); color:var(--ink-3)}
.stack{display:flex; flex-direction:column; gap:10px}
.kv{display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0; border-top:1px solid var(--line)}
.kv:first-child{border-top:0}
.kv dt{color:var(--ink-3)} .kv dd{margin:0; font-weight:700; text-align:right; display:flex; align-items:center; gap:7px}

/* ---------- rows / posts / tabs ---------- */
.row{display:flex; gap:15px; align-items:center; padding:16px 19px; border-top:1px solid var(--line); flex-wrap:wrap}
.row:first-of-type{border-top:0}
.row-main{flex:1; min-width:200px}
.row-main h3{font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.row-main p{margin:4px 0 0; font-size:13.5px; color:var(--ink-3)}
.row-actions{display:flex; gap:8px; flex-wrap:wrap}
.note{font-size:14px; color:var(--ink-2); background:var(--afs-tint); border-left:3px solid var(--afs); padding:9px 12px; border-radius:0 var(--r-s) var(--r-s) 0; margin:10px 0 0; width:100%}
.post{padding:19px; display:flex; flex-direction:column}
.post h3{font-size:17px; line-height:1.3; margin-bottom:6px}
.post .body{font-size:14.5px; color:var(--ink-2); margin:10px 0 14px; line-height:1.6}
.kind{display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 8px; border-radius:999px; font-size:12px; font-weight:800; font-family:var(--display); background:color-mix(in srgb, var(--hue) 13%, var(--surface)); color:var(--hue); border:1px solid color-mix(in srgb, var(--hue) 32%, transparent)}
.tabs{display:flex; gap:5px; border-bottom:1px solid var(--line); margin-bottom:19px; overflow-x:auto}
.tabs button{background:none; border:0; padding:10px 14px; cursor:pointer; font-size:14px; font-weight:700; font-family:var(--display); color:var(--ink-3); border-bottom:3px solid transparent; white-space:nowrap; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--afs); border-bottom-color:var(--afs)}

/* ---------- settings ---------- */
.opt{display:flex; gap:13px; padding:15px; border:1.5px solid var(--line); border-radius:var(--r-m); cursor:pointer; align-items:flex-start; background:var(--surface)}
.opt:hover{border-color:var(--line-2); background:var(--surface-2)}
.opt.on{border-color:var(--afs); background:var(--afs-tint)}
.opt > span{flex:1; min-width:0}
.opt input[type="radio"], .opt input[type="checkbox"]{accent-color:var(--afs); margin:3px 0 0; width:17px; height:17px; padding:0; flex:none}
.opt b{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14.5px; font-family:var(--display)}
.opt span.d{display:block; font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.55}
.togrow{display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--line)}
.togrow:first-child{border-top:0}
.togrow div{flex:1}
.togrow b{font-size:14.5px; font-weight:700; display:block; font-family:var(--display)}
.togrow small{color:var(--ink-3); font-size:13px}
.sw{position:relative; width:44px; height:25px; flex:none; background:var(--surface-3); border:0; border-radius:999px; cursor:pointer; transition:background .18s ease}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform .18s ease}
.sw[aria-checked="true"]{background:var(--green)}
.sw[aria-checked="true"]::after{transform:translateX(19px)}
/* The three questions every form asks, shown rather than described. Deliberately
   inert: no select, no delete, nothing to drag. */
.q-fixed{margin-bottom:16px; padding:12px 13px 4px; border:1px dashed var(--line-2);
  border-radius:14px; background:var(--surface-2)}
.q-fixed-top{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.q-card.is-fixed{opacity:.72; cursor:default; background:var(--surface); margin-bottom:9px}
.q-fixed-type{font-size:12.5px; color:var(--ink-3); font-family:var(--mono)}
.q-fixed-label{font-family:var(--display); font-weight:700; font-size:14px; padding:2px 2px 8px}
.q-card.is-fixed .q-move{color:var(--ink-4)}
/* a template question, whose wording is tied to a profile field */
.q-card.is-linked{border-color:color-mix(in srgb,var(--afs) 26%,var(--line))}
.q-linked-note{display:flex; align-items:flex-start; gap:6px; font-size:11.5px; line-height:1.45;
  color:var(--ink-3); padding:0 2px 8px}
.q-linked-note svg{flex:0 0 auto; margin-top:1px; color:var(--afs)}

.pickers{display:flex; gap:8px; flex-wrap:wrap}
.pick{padding:7px 14px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--surface); font-size:13.5px; font-weight:700; font-family:var(--display); cursor:pointer; color:var(--ink-2)}
.pick[aria-pressed="true"]{background:var(--afs); border-color:var(--afs); color:var(--on-accent)}

/* ---------- toast ---------- */
.toasts{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; width:calc(100% - 32px); max-width:460px}
.toast{background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:999px; font-size:14px; font-weight:700; font-family:var(--display); box-shadow:var(--shadow-3); animation:pop .24s cubic-bezier(.2,1.3,.4,1); display:flex; gap:10px; align-items:center; max-width:100%}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.96)}to{opacity:1; transform:none}}

@media (max-width:1000px){ .prof{grid-template-columns:minmax(0,1fr)} .side{position:static} }
@media (max-width:1080px){
  .topnav{order:3; width:100%; margin:0; padding:0 16px 8px; overflow-x:auto; border-top:1px solid var(--line)}
  .topbar-in{height:auto; flex-wrap:wrap; padding:11px 16px 0; gap:12px}
  .topnav button[aria-current="page"]::after{bottom:0}
  .search{order:2; max-width:none; flex-basis:100%}
}
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}
  /* stacked above the results on a phone: no pinning, no inner scroller */
  .rail{position:static; max-height:none; overflow:visible}
  .rail.collapsed{display:none}
  .toolbar .mobile-filter{display:inline-flex}
  .me-btn .me-label{display:none}
  .hero-in{padding:28px 22px 26px}
  /* This used to be display:none. The stamp is the one thing on the page that
     says where somebody went, and a phone is where most people read a profile,
     so it shrinks into the corner instead of leaving. */
  .stamp{right:12px; top:13px; transform-origin:top right; transform:rotate(-9deg) scale(.72)}
}

/* ---------- in-app messages ---------- */
.chat{display:grid; grid-template-columns:312px 1fr; gap:0; height:min(660px,calc(100vh - 210px)); overflow:hidden}
.conv-list{border-right:1px solid var(--line); overflow-y:auto; background:var(--surface)}
.conv{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; width:100%; text-align:left; background:none; border-left:3px solid transparent}
.conv:hover{background:var(--surface-2)}
.conv[aria-current="true"]{background:var(--afs-tint); border-left-color:var(--afs)}
.conv-b{min-width:0; flex:1}
.conv-b h3{font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px}
.conv-b h3 time{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); font-weight:400; flex:none}
.conv-b p{margin:3px 0 0; font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv.unread .conv-b p{color:var(--ink-2); font-weight:700}
.unread-dot{width:8px; height:8px; border-radius:50%; background:var(--magenta); flex:none}
.thread{display:flex; flex-direction:column; min-width:0; background:var(--paper)}
.thread-head{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.thread-head .t{flex:1; min-width:0}
.thread-head h3{font-size:15px}
.thread-head p{margin:2px 0 0; font-size:12.5px; color:var(--ink-3)}
.thread-body{flex:1; overflow-y:auto; padding:20px 20px 8px; display:flex; flex-direction:column; gap:12px}
.day{align-self:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); padding:4px 12px; border-radius:999px}
.bub{max-width:min(74%,520px); padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.55; position:relative}
.bub.them{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink)}
.bub.me{align-self:flex-end; background:var(--afs); color:var(--on-accent); border-bottom-right-radius:5px}
.bub time{display:block; margin-top:5px; font-family:var(--mono); font-size:10px; opacity:.62}
.composer{display:flex; gap:10px; align-items:flex-end; padding:14px 18px; border-top:1px solid var(--line); background:var(--surface)}
.composer textarea{flex:1; resize:none; padding:11px 14px; border:1.5px solid var(--line-2); border-radius:20px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:14.5px; max-height:120px}
.composer textarea:focus{outline:none; border-color:var(--afs); background:var(--surface)}
.chat-empty{display:grid; place-items:center; padding:60px 20px; text-align:center; color:var(--ink-3)}
/* Two panes side by side is a desktop shape. Squeezed onto a phone it gave a
   230px scrap of list above a 400px scrap of conversation and neither was
   usable. A phone gets one thing at a time, like every messaging app: the names,
   then the conversation, with a way back. */
.chat-back{display:none; align-items:center; justify-content:center; width:34px; height:34px;
  flex:none; margin-left:-4px; border:0; border-radius:50%; background:none; color:var(--ink-2); cursor:pointer}
.chat-back:hover{background:var(--surface-2)}
@media (max-width:860px){
  .chat{grid-template-columns:1fr; height:auto}
  .conv-list{border-right:0; max-height:none; overflow-y:visible}
  .chat > .thread{display:none}
  .chat.is-open > .conv-list{display:none}
  .chat.is-open > .thread{display:flex}
  .chat-back{display:inline-flex}
  .thread-body{max-height:none; min-height:52vh}
  .thread-head p{display:none}
  .conv{padding:13px 14px}
}

/* ---------- logged-out journey: flat pastel blocks, tight display type ---------- */
:root{
  --wash-blue:#E7F0FC; --wash-pink:#FDE7EE; --wash-sun:#FFF4D6; --wash-mint:#E3F3EA; --wash-lilac:#F2E9F5;
  --sec-gap:44px;
  --panel:#0B2E5C;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --wash-blue:#0F2340; --wash-pink:#33161F; --wash-sun:#33280D; --wash-mint:#10291C; --wash-lilac:#241A2B;
  --panel:#071628;
}}
:root[data-theme="dark"]{
  --wash-blue:#0F2340; --wash-pink:#33161F; --wash-sun:#33280D; --wash-mint:#10291C; --wash-lilac:#241A2B;
  --panel:#071628;
}
/* "public" means this page has no app navigation. "guest" means there is no
   session. They used to be one class, which is why a signed-in member opening a
   shared form was shown "Sign in" and had their own avatar hidden. */
body.public .topnav, body.public .search, body.public .demo-strip{display:none}
/* The nav carries the margin-left:auto that pushes everything after it to the
   right. Hide the nav on a public page and a signed-in member's own avatar
   fell back against the logo, so the account sits in a different place on the
   shop and the reunion than it does inside Pulang. It belongs on the right on
   every page. */
body.public .me-wrap{margin-left:auto}
body.guest #meBtn{display:none}
body:not(.guest) #ribbon{display:none}
.auth-actions{display:none; margin-left:auto; gap:9px; align-items:center}
body.guest .auth-actions{display:flex}

/* promo ribbon — flat, small, dark type on sun */
.ribbon{background:var(--wash-sun); border-bottom:1px solid color-mix(in srgb,var(--amber-d) 22%,transparent)}
.ribbon-in{max-width:var(--shell); margin:0 auto; padding:9px 22px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--ink)}
.ribbon b{font-family:var(--display); font-weight:800}
.ribbon .sep{color:var(--ink-3)}
.ribbon .rb-cta{background:var(--ink); color:var(--paper); border:0; border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:800; font-family:var(--display); cursor:pointer}
.ribbon .rb-cta:hover{background:var(--afs)}

/* type scale for the marketing page */
/* A size down, all of it — and a weight down with it. Everything on this page
   was set in the display face at 800, which is the weight the app uses for
   14px labels. At headline size it reads as shouting rather than as confidence;
   700 carries the same words with more authority and less volume. */
.k-h1{font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.07; font-size:clamp(24px,2.5vw,32px); margin:0; max-width:23ch}
.k-h2{font-family:var(--display); font-weight:700; letter-spacing:-.028em; line-height:1.14; font-size:clamp(22px,2.4vw,28px); margin:0}
.k-lede{font-size:clamp(14px,1.05vw,15.5px); line-height:1.5; color:var(--ink-2); margin:10px 0 0; max-width:44ch}
.k-eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; background:var(--surface); border:1px solid var(--line); color:var(--afs); padding:6px 13px; border-radius:999px}
/* Centred, with a small pill above the heading. The rule that used to carry
   the brand colours is now a short bar under the pill, so the spectrum is still
   here but it is punctuation rather than a banner. */
/* One rhythm for the whole page: 40px between sections, 18px between a header
   and the thing it introduces. It was being typed onto each section by hand,
   which is how the stat band ended up flush against the alumni wall. */
.k-sec{margin:var(--sec-gap) auto 18px; text-align:center; max-width:56ch}
.k-sec .k-h2{margin-bottom:8px}
.k-sec p{margin-inline:auto}
.k-pill{display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--afs); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.k-pill svg{color:var(--afs)}
.k-rule{height:5px; border-radius:999px; background:var(--spectrum); margin:0 0 16px; max-width:96px}
.k-rule.wide{max-width:none; margin:30px 0 26px; opacity:.9}
.k-sec p{margin:0; color:var(--ink-2); font-size:15px; max-width:54ch}

/* hero: text left, product right, and a strip along the bottom the way a
   landing page carries its logo row — which lets the chapter marquee live here
   instead of costing a section of its own further down. */
/* This was built at poster scale and took most of the first screen before
   anyone reached what the page is actually for. Same panel, less air. */
.k-hero{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:26px; align-items:center;
  background:var(--wash-blue); border-radius:24px; padding:20px 28px 0; margin:14px 0 12px;
  position:relative; overflow:hidden}
/* the faint graph paper under it, so the panel is not a flat rectangle */
.k-grid{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--afs) 9%,transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb,var(--afs) 9%,transparent) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(78% 62% at 30% 34%, #000 20%, transparent 78%);
          mask-image:radial-gradient(78% 62% at 30% 34%, #000 20%, transparent 78%)}
.k-hero-t{position:relative; z-index:1; min-width:0; padding-bottom:20px}
/* the swash under the phrase that carries the promise */
.k-mark{font-style:normal; position:relative; white-space:nowrap}
.k-mark::after{content:""; position:absolute; left:-.04em; right:-.04em; bottom:.02em; height:.34em;
  background:linear-gradient(90deg, color-mix(in srgb,var(--sun,var(--orange)) 62%,transparent),
                                    color-mix(in srgb,var(--magenta) 42%,transparent));
  border-radius:3px; z-index:-1; transform-origin:left center; animation:markIn .7s .35s both cubic-bezier(.2,.9,.3,1)}
@keyframes markIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .k-mark::after{animation:none} }
.k-hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:15px}
.btn-ink{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-ink:hover{background:var(--afs); border-color:var(--afs); color:#fff}
.btn-line{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-line:hover{background:var(--surface)}
.btn-lg{padding:13px 24px; font-size:15px}
.k-mini{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.k-mini span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-family:var(--display); font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.k-mini b{font-family:var(--mono); font-weight:600; color:var(--ink)}

/* the strip along the foot of the hero */
.k-strip{grid-column:1/-1; position:relative; z-index:1; display:flex; align-items:center; gap:18px;
  margin:0 -28px; padding:10px 28px; border-top:1px solid color-mix(in srgb,var(--afs) 13%,transparent);
  background:color-mix(in srgb,var(--surface) 42%,transparent)}
.k-strip-l{flex:none; display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.k-strip .chapter-mq{flex:1; min-width:0; background:none; border:0; border-radius:0; padding:0; margin:0}
.k-strip .chapter-mq .mq-track > span{font-size:13px; font-weight:700; letter-spacing:-.005em;
  color:var(--ink-3); opacity:.85}
.k-strip .chapter-mq .mq-track > span i{width:4px; height:4px}
.k-strip .chapter-mq .mq-track{animation-duration:56s}


/* product mock */
.mock{position:relative; min-width:0; perspective:1200px}
.mock-win{background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 44px rgba(3,50,110,.14); overflow:hidden; transform:rotate(-1.2deg)}
.mock-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block}
.mock-bar span{margin-left:8px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.mock-body{padding:13px; display:flex; flex-direction:column; gap:10px; background:var(--paper)}
.mock-row{display:flex; gap:11px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 12px}
.mock-row .t{min-width:0; flex:1}
.mock-row .t b{display:block; font-size:13.5px; font-family:var(--display); font-weight:700; line-height:1.25}
.mock-row .t span{display:block; font-size:12px; color:var(--ink-2); line-height:1.3}
.mock-row .t em{display:block; font-family:var(--mono); font-size:9.5px; font-style:normal; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; margin-top:3px}
.mock-pill{flex:none; font-size:10.5px; font-family:var(--display); font-weight:800; padding:3px 9px; border-radius:999px; background:var(--green-tint); color:var(--green)}
.mock-bub{align-self:flex-end; max-width:82%; background:var(--afs); color:var(--on-accent); border-radius:14px 14px 5px 14px; padding:9px 13px; font-size:12.5px; line-height:1.45}

/* the search line above the results, so the window reads as a directory
   rather than a chat */
.mock-search{display:flex; align-items:center; gap:8px; padding:9px 13px; margin:0;
  border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink-3); font-size:12px}
.mock-search svg{flex:none}
.mock-row.is-blank .t b .masked, .mock-row.is-blank .t span .masked{opacity:.9}
.mock-ava{flex:none; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, color-mix(in srgb,var(--hue) 24%,transparent),
                                     color-mix(in srgb,var(--hue) 9%,transparent));
  border:1px solid color-mix(in srgb,var(--hue) 26%,transparent)}
.mock-row.is-blank .mock-pill{background:var(--surface-2); color:var(--ink-3);
  display:inline-flex; align-items:center; gap:4px}

/* stat band */
.k-band{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin:var(--sec-gap) 0 0}
.k-band div{background:var(--surface); padding:15px 16px}
.k-band b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(20px,2.3vw,26px); letter-spacing:-.03em; line-height:1}
.k-band span{display:block; margin-top:6px; font-size:13px; color:var(--ink-3)}

/* notable wall */
.k-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px}
.nfig{border-radius:20px; overflow:hidden; background:var(--wash); display:flex; flex-direction:column}
.nframe{position:relative; aspect-ratio:1/1.02; display:grid; place-items:center}
.nframe .ph{position:absolute; inset:14px; border:2px dashed color-mix(in srgb,var(--hue) 38%,transparent); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--hue); text-align:center; padding:10px}
.nframe .ph span{font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.9}
.nflag{position:absolute; top:12px; right:12px; z-index:2; box-shadow:0 0 0 2px var(--surface); border-radius:3px; overflow:hidden}
.nbody{padding:14px 15px 17px; background:var(--surface); flex:1}
.nbody h3{font-size:15px; line-height:1.25; letter-spacing:-.02em}
.nbody .rl{font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.4}
.nbody .mt{margin-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--hue)}

/* alternating feature rows */
/* Five pastel fills, one per row, was the loudest thing on the page and the
   reason it read as a children's app rather than a directory. One surface now,
   with the colour spent on a single accent chip — the reference does the same
   thing: a neutral card, and the brand only where it means something. */
.k-rows{display:flex; flex-direction:column; gap:14px}
.k-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px 32px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.k-row-t{position:relative; padding-left:16px}
.k-row-t::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  border-radius:99px; background:var(--hue); opacity:.75}
.k-row:nth-child(even) .k-row-art{order:-1}
.k-row h3{font-family:var(--display); font-weight:800; font-size:clamp(19px,2vw,23px); letter-spacing:-.028em; line-height:1.14; margin-bottom:9px}
.k-row p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.58; max-width:46ch}
.k-row-art{display:grid; place-items:center}
.k-tile{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; box-shadow:0 14px 32px rgba(3,50,110,.08)}
.k-tile .hd{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:13px; color:var(--hue)}
.k-line{display:flex; align-items:center; gap:9px; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius:11px}
.k-line b{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* steps */
.k-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px}
.k-step{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 22px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* the number becomes a chip rather than a big coloured numeral */
.k-step .n{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  font-family:var(--display); font-weight:700; font-size:14px; line-height:1; margin-bottom:12px;
  color:var(--hue); background:color-mix(in srgb,var(--hue) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--hue) 24%,transparent)}
.k-step h3{font-size:16px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px}
.k-step p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.6}

.welcome-card{border-left:3px solid var(--magenta); margin-bottom:16px}
.masked{display:inline-block; border-radius:5px; background:var(--surface-3); color:transparent; user-select:none}

/* Career and education. A two-column timeline: the dates hold their own column
   so the roles line up down the page and scan like a CV rather than a list. */
.lin-drop{display:flex; align-items:center; gap:12px; padding:15px 17px; cursor:pointer;
  background:var(--surface-2); border:1.5px dashed var(--line-2); border-radius:var(--r-m); color:var(--ink-2)}
.lin-drop:hover{border-color:var(--afs); background:var(--afs-tint); color:var(--afs)}
.lin-drop b{display:block; font-family:var(--display); font-size:14.5px; color:var(--ink)}
.lin-drop span span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
.cv-empty{background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r-m); padding:16px 17px}
.cv-empty p{margin:0 0 11px; font-size:14px; color:var(--ink-3)}
.cv-empty p:last-child{margin-bottom:0}
.cv{display:flex; flex-direction:column; gap:2px}
.cv-row{display:grid; grid-template-columns:132px 1fr; gap:16px; padding:13px 0; border-top:1px solid var(--line)}
.cv-row:first-child{border-top:0; padding-top:4px}
.cv-when{font-family:var(--mono); font-size:12px; color:var(--ink-3); line-height:1.5; padding-top:2px}
.cv-now{display:block; margin-top:5px; font-family:var(--display); font-size:9.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--green)}
.cv-what b{display:block; font-family:var(--display); font-size:15.5px; letter-spacing:-.015em; line-height:1.3}
.cv-what .cv-org{display:block; font-size:14px; color:var(--ink-2); margin-top:3px}
.cv-what p{margin:7px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-3)}

/* What a member has put into the network, on their own profile. */
.prof-opps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:14px}
.prof-opp{text-align:left; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--hue); border-radius:var(--r-m); padding:12px 14px; cursor:pointer; font:inherit}
.prof-opp:hover{border-color:var(--hue); background:var(--surface)}
.prof-opp b{display:block; font-family:var(--display); font-size:14.5px; letter-spacing:-.01em; margin:6px 0 5px; line-height:1.35}
.po-kind{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:800;
  font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--hue)}
.po-meta{display:block; font-size:12px; color:var(--ink-3)}
.prof-notes{display:flex; flex-direction:column; gap:9px}
.prof-note{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:12px 14px}
.prof-note p{margin:0 0 6px; font-size:14px; line-height:1.55; color:var(--ink-2)}

/* The repeatable rows in settings for career and education. */
.cv-edit{display:flex; flex-direction:column; gap:11px; margin-bottom:12px}
.cv-entry{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 14px; position:relative}
.cv-entry .cv-del{position:absolute; top:9px; right:9px; width:28px; height:28px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3); cursor:pointer; line-height:1}
.cv-entry .cv-del:hover{border-color:var(--red,#EF3E42); color:var(--red,#EF3E42)}
.cv-entry .field{margin-bottom:9px}
.cv-entry .field:last-child{margin-bottom:0}
.cv-years{display:grid; grid-template-columns:1fr 1fr; gap:9px}
@media (max-width:560px){ .cv-row{grid-template-columns:1fr; gap:4px} .cv-when{padding-top:0} }
.skel-line{height:13px; border-radius:6px; background:var(--surface-3)}
.k-panel{background:var(--panel); border-radius:24px; padding:38px 32px; text-align:center; color:#fff; margin-top:var(--sec-gap)}
.k-panel .k-h2{color:#fff; margin-bottom:10px}
.k-panel p{margin:0 auto 20px; color:rgba(255,255,255,.86); font-size:15px; max-width:48ch}
.k-panel .row{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; border:0; padding:0}
.btn-sun{background:var(--yellow); color:#3A2A00; border-color:var(--yellow)}
.btn-sun:hover{filter:brightness(.94)}
.btn-clear{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-clear:hover{background:rgba(255,255,255,.12)}
.foot{margin-top:34px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--ink-3); font-size:13px}

@media (max-width:900px){
  /* 1fr will not shrink below the mock's own width, so the text ran off the
     side of the panel and overflow:hidden quietly cut it off. */
  .k-hero{grid-template-columns:minmax(0,1fr); padding:24px 20px 0; gap:16px}
  .k-hero-t{padding-bottom:16px}
  .k-h1{font-size:24px}
  .k-lede{max-width:none; font-size:14px; margin-top:11px}
  .k-hero-cta{margin-top:16px}
  .k-mini{gap:6px; margin-top:11px}
  .k-mini span{font-size:11px; padding:4px 9px; gap:5px}

  .k-row{grid-template-columns:1fr; padding:26px 24px; gap:22px}
  .k-row:nth-child(even) .k-row-art{order:0}
  .k-panel{padding:38px 24px}
}

/* ---------- auth + signup ---------- */
.auth-wrap{max-width:520px; margin:34px auto 0}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:30px}
.auth-card h1{font-size:26px; margin-bottom:8px}
.auth-card > p{margin:0 0 22px; color:var(--ink-2); font-size:14.5px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px}
.field label{font-size:13px; font-weight:700; font-family:var(--display); color:var(--ink-2)}
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea{padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--r-m); background:var(--surface-2); color:var(--ink); font:inherit; font-size:14.5px; width:100%}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--afs); background:var(--surface)}
/* A phone number is two answers, not one: which country, then the number as
   people actually write it down. */
.phone-pair{display:flex; gap:8px; align-items:stretch}
.phone-pair .dial{flex:0 0 auto; width:auto; max-width:42%; min-width:96px}
.phone-pair .phone-local{flex:1 1 auto; min-width:0}
/* Password reveal. The button sits inside the input's own box, so the input
   needs room on the right for it. */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px !important}
.pw-eye{position:absolute; top:0; right:0; height:100%; width:42px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); border-radius:0 var(--r-m) var(--r-m) 0}
.pw-eye:hover{color:var(--afs)}
.pw-eye:focus-visible{outline:2px solid var(--afs); outline-offset:-2px}
.field .hint{font-size:12.5px; color:var(--ink-3)}
.field.bad input, .field.bad select{border-color:var(--magenta); background:color-mix(in srgb, var(--magenta) 7%, var(--surface))}
.field .err{font-size:12.5px; color:var(--magenta); font-weight:700}
.two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.progress{display:flex; gap:6px; margin-bottom:24px}
.progress span{flex:1; height:5px; border-radius:999px; background:var(--surface-3)}
.progress span.on{background:var(--afs)}
.progress span.done{background:var(--green)}
.wiz-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px}
.wiz-head .of{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.wiz-actions{display:flex; gap:10px; margin-top:24px}
.wiz-actions .btn{flex:1}
.wiz-actions.is-center{justify-content:center; flex-wrap:wrap}
.wiz-actions.is-center .btn{flex:0 0 auto}
@media (max-width:420px){ .wiz-actions.is-center .btn{flex:1 1 100%} }
.review{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.review div{display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border-top:1px solid var(--line); font-size:14px}
.review div:first-child{border-top:0}
.review dt{color:var(--ink-3)} .review dd{margin:0; font-weight:700; text-align:right}
.done-mark{width:58px; height:58px; border-radius:50%; background:var(--green-tint); color:var(--green); display:grid; place-items:center; margin-bottom:18px}
@media (max-width:640px){ .two{grid-template-columns:minmax(0,1fr)} .land-in{padding:40px 24px 38px} }

/* ---------- discussions (forum) ---------- */
.boards{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px; margin-bottom:24px}
.board{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:17px; text-align:left; cursor:pointer; box-shadow:var(--shadow-1); display:flex; gap:13px; align-items:flex-start; transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease}
.board:hover{box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--hue) 45%,var(--line)); transform:translateY(-2px)}
.board .bi{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--hue) 14%,var(--surface)); color:var(--hue); flex:none}
.board h3{font-size:15.5px; margin-bottom:4px}
.board p{margin:0; font-size:13px; color:var(--ink-3); line-height:1.5}
.board .bm{margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--hue)}
.topic{display:flex; gap:14px; align-items:flex-start; padding:15px 18px; border-top:1px solid var(--line); cursor:pointer; width:100%; text-align:left; background:none}
.topic:first-of-type{border-top:0}
.topic:hover{background:var(--surface-2)}
.topic-b{flex:1; min-width:0}
.topic-b h3{font-size:15.5px; line-height:1.35; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.topic-b p{margin:4px 0 0; font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topic-meta{display:flex; gap:14px; flex:none; text-align:center; align-items:center}
.topic-meta div{min-width:52px}
.topic-meta b{display:block; font-family:var(--mono); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.topic-meta span{font-family:var(--display); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pin{color:var(--orange)}
.post-row{display:grid; grid-template-columns:132px 1fr; border-top:1px solid var(--line)}
.post-row:first-of-type{border-top:0}
.post-side{padding:18px 14px; text-align:center; background:var(--surface-2); border-right:1px solid var(--line)}
.post-side .ava{margin:0 auto 9px}
.post-side .nm{font-size:13px; font-weight:700; font-family:var(--display); line-height:1.3; word-break:break-word}
.post-side .sub{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-top:5px; line-height:1.5}
.post-main{padding:16px 20px; min-width:0}
.post-head{display:flex; align-items:center; gap:9px; margin-bottom:11px; flex-wrap:wrap}
.post-body{font-size:15px; line-height:1.7; color:var(--ink)}
.post-body p{margin:0 0 11px}
.post-body p:last-child{margin:0}
.quote{border-left:3px solid var(--afs); background:var(--afs-tint); padding:10px 13px; border-radius:0 var(--r-s) var(--r-s) 0; margin:0 0 12px; font-size:14px; color:var(--ink-2)}
.quote b{display:block; font-size:12px; color:var(--afs); font-family:var(--display); margin-bottom:3px}
.post-foot{display:flex; gap:9px; align-items:center; margin-top:14px; flex-wrap:wrap}
.cendol{display:inline-flex; align-items:center; gap:7px; background:var(--green-tint); color:var(--green); border:1px solid color-mix(in srgb,var(--green) 28%,transparent); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; font-family:var(--display); cursor:pointer}
.cendol:hover{background:color-mix(in srgb,var(--green) 18%,var(--surface))}
.cendol[aria-pressed="true"]{background:var(--green); color:#fff; border-color:var(--green)}
.ts-badge{background:var(--afs); color:var(--on-accent); border-color:var(--afs)}
@media (max-width:640px){
  .post-row{grid-template-columns:minmax(0,1fr)}
  .post-side{display:flex; align-items:center; gap:12px; text-align:left; border-right:0; border-bottom:1px solid var(--line); padding:12px 16px}
  .post-side .ava{margin:0}
  .topic-meta{display:none}
}


/* ---------- shared surface language (Klarna composition, AFS palette) ---------- */
.card{border-radius:20px; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease}
.pad{padding:18px}
.phead{margin:26px 0 18px}
.phead h1{font-family:var(--display); font-weight:800; letter-spacing:-.034em; line-height:1.06; font-size:clamp(25px,3.4vw,38px)}
.phead p{font-size:15.5px; color:var(--ink-2)}
.phead .k-rule{margin-bottom:14px}

/* in-app hero: flat wash, dark type — no gradient */
.hero{background:var(--wash-blue); border-radius:28px; margin:22px 0 20px; box-shadow:none; padding:0}
.hero::after{display:none}
.hero-in{padding:36px 34px; max-width:none; color:var(--ink)}
.hero h1{color:var(--ink); font-size:clamp(27px,3.8vw,42px); letter-spacing:-.038em; line-height:1.04; text-shadow:none; margin:12px 0 12px; max-width:22ch}
.hero p{color:var(--ink-2); text-shadow:none; font-size:16.5px; max-width:56ch}
.hero-eyebrow{color:var(--afs)}
.hstat{background:var(--surface); border:1px solid var(--line); color:var(--ink); backdrop-filter:none}
.hstat span{color:var(--ink-2)}
.hstat b{color:var(--ink)}
.hero-alt{background:var(--wash-pink)}
.hero-alt .hero-eyebrow{color:var(--magenta)}

/* hover life */
.pcard:hover{transform:translateY(-3px)}
.pcard .mini{transition:transform .18s ease}
.pcard:hover .mini{transform:translateX(3px)}
.ind-card:hover{transform:translateY(-3px)}
.ind-card .ind-icon{transition:transform .22s cubic-bezier(.2,1.2,.35,1)}
.ind-card:hover .ind-icon{transform:scale(1.08) rotate(-4deg)}
.board:hover .bi{transform:scale(1.08) rotate(-4deg)}
.board .bi{transition:transform .22s cubic-bezier(.2,1.2,.35,1)}
.post:hover, .nfig:hover{box-shadow:var(--shadow-2)}
.nfig{transition:transform .2s ease, box-shadow .2s ease}
.nfig:hover{transform:translateY(-3px)}
.topic{transition:background .16s ease, padding-left .18s ease}
.topic:hover{padding-left:24px}
.row{transition:background .16s ease}
.card .row:hover{background:color-mix(in srgb,var(--afs) 3%,transparent)}
.tag-ind{transition:transform .16s ease}
.pcard:hover .tag-ind{transform:translateY(-1px)}
.btn{transition:background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease}
.btn-primary:hover, .btn-ink:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--afs) 30%,transparent)}
.topnav button::after{transition:opacity .18s ease}
.chip{transition:background .16s ease, border-color .16s ease}
.chip:hover{background:color-mix(in srgb,var(--afs) 14%,transparent)}
.check{transition:color .14s ease, transform .14s ease}
.check:hover{transform:translateX(2px)}
.conv{transition:background .16s ease, border-left-color .16s ease}
.opt{transition:border-color .16s ease, background .16s ease, transform .14s ease}
.opt:hover{transform:translateY(-1px)}
.pick{transition:background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease}
.pick:hover{transform:translateY(-1px)}
.cendol{transition:background .16s ease, transform .12s ease}
.cendol:active{transform:scale(.96)}
.k-tile, .k-step, .k-row{transition:transform .2s ease, box-shadow .2s ease}
.k-step:hover{transform:translateY(-3px)}
.mock-win{transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.k-hero:hover .mock-win{transform:rotate(-.4deg) translateY(-4px)}

/* The alumni wall kept the carousel's own left-aligned 800-weight header, so it
   sat outside the language the rest of the page had moved to — and with no top
   margin its heading ran straight into the card above it. */
.k-carsec{margin-top:var(--sec-gap)}
.k-carsec .car-head{flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:18px}
.k-carsec .car-head .t{flex:none; max-width:56ch}
.k-carsec .car-head h2{font-weight:700; letter-spacing:-.028em; font-size:clamp(22px,2.4vw,28px)}
.k-carsec .car-head p{margin-inline:auto; font-size:15px}
.k-carsec .car-head .eyebrow{display:inline-flex; align-items:center; gap:7px; margin:0;
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--afs); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.k-carsec .car-nav{order:3}

/* ---- the alumni spotlight ------------------------------------------------
   Two columns, and every slide stacked in the same grid cell so the block keeps
   the height of its tallest slide and never jumps as it advances. */
.spot{display:grid; grid-template-columns:minmax(0,304px) minmax(0,1fr); gap:clamp(18px,2.6vw,32px);
  align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:24px; padding:clamp(18px,2.2vw,26px); box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* The foundation's own slide frames these twelve in a landscape tile, 2.50 by
   1.42 inches, and the photographs are cropped to suit that. Matching the ratio
   here means the crop the deck chose is the crop that shows. */
.spot-stage{display:grid; border-radius:16px; overflow:hidden; background:var(--surface-2);
  aspect-ratio:2.5/1.42; width:100%; align-self:center}
/* Both slides live in the same cell, so a symmetrical fade leaves two of them
   legible at once and the block reads as a double exposure. The outgoing one
   goes quickly; the incoming one waits for it to clear. */
.spot-shot{grid-area:1/1; margin:0; position:relative; opacity:0; transform:scale(1.03);
  transition:opacity .22s ease-in, transform .22s ease-in}
.spot-shot.is-on{opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1) .2s, transform .8s cubic-bezier(.2,.7,.3,1) .2s}
/* The pictures are already cropped to this ratio, so there is nothing left to
   push around — centre them and let them fill. */
.spot-shot img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.spot-ph{display:grid; place-items:center; gap:8px; width:100%; height:100%;
  color:var(--hue); background:color-mix(in srgb,var(--hue) 9%,transparent)}
.spot-ph b{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.04em}
.spot-flag{position:absolute; top:12px; right:12px; line-height:0; border-radius:5px; overflow:hidden;
  box-shadow:0 2px 8px rgba(8,15,28,.28)}

/* Two rows: the slides stack in the first, the controls own the second. They
   were all sharing one cell, so the dots sat on top of the last line of text. */
.spot-body{display:grid; grid-template-rows:1fr auto; min-width:0}
.spot-text{grid-area:1/1; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease-in, transform .2s ease-in}
.spot-text.is-on{opacity:1; transform:none; pointer-events:auto;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1) .2s, transform .5s cubic-bezier(.2,.7,.3,1) .2s}
.spot-meta{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px}
.spot-name{font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.05;
  color:var(--ink)}
.spot-name.big{font-size:clamp(24px,2.9vw,34px)}
.spot-quote{margin:0 0 14px; font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  line-height:1.28; font-size:clamp(20px,2.4vw,28px); color:var(--ink)}
.spot-quote::before{content:"\201C"}
.spot-quote::after{content:"\201D"}
.spot-role{margin:9px 0 0; font-size:clamp(14.5px,1.25vw,16px); line-height:1.5; color:var(--ink-2); max-width:38ch}
.spot-note{margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-3); max-width:38ch}

.spot-nav{grid-row:2; grid-column:1; display:flex; align-items:center; gap:14px; padding-top:20px}
.spot-dots{display:flex; gap:7px; flex:1; flex-wrap:wrap}
.spot-dot{width:7px; height:7px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:var(--line-2); transition:width .3s ease, background .3s ease}
.spot-dot.is-on{width:22px; background:var(--afs)}
.spot-dot:hover{background:var(--afs)}
.spot-arrows{display:flex; gap:8px; flex:none}

@media (max-width:760px){
  .spot{grid-template-columns:minmax(0,1fr); gap:16px; padding:14px}
  /* Keeps the slide's landscape tile on a phone too — the photographs are cut
     for it, so a square would crop them a second time. */
  .spot-stage{height:auto; aspect-ratio:2.5/1.42; width:100%; max-width:420px; margin-inline:auto}
  .spot-name.big{font-size:clamp(24px,7vw,32px)}
  .spot-role{max-width:none}
  .spot-nav{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .spot-shot, .spot-text{transition:none}
}

/* ---------- carousel ---------- */
.carousel{position:relative; margin-bottom:8px}
.car-head{display:flex; align-items:flex-end; gap:14px; margin-bottom:14px}
.car-head .t{flex:1; min-width:0}
.car-head h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(20px,2.4vw,27px); line-height:1.1}
.car-head p{margin:6px 0 0; font-size:14.5px; color:var(--ink-2); max-width:56ch}
.car-nav{display:flex; gap:8px; flex:none}
.car-btn{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .12s ease, opacity .16s ease}
.car-btn:hover{border-color:var(--afs); color:var(--afs); background:var(--afs-tint)}
.car-btn:active{transform:scale(.94)}
.car-btn[disabled]{opacity:.35; cursor:default; border-color:var(--line)}
.car-btn[disabled]:hover{background:var(--surface); color:var(--ink); border-color:var(--line)}
.car-track{display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 12px; overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track > *{flex:0 0 auto}
.car-track.w-card > *{width:min(300px,78vw)}
.car-track.w-fig > *{width:min(212px,60vw)}
.car-track.w-wide > *{width:min(360px,84vw)}
.botnav{display:none}
.tablewrap{overflow-x:auto; margin:0 -19px; padding:0 19px}
.hc-table{width:100%; border-collapse:collapse; font-size:13px; min-width:880px}
.hc-table th{text-align:left; font-family:var(--display); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); padding:0 12px 9px 0; border-bottom:1px solid var(--line-2); white-space:nowrap}
.hc-table td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45}
.hc-table tr:last-child td{border-bottom:0}
.hc-table .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.hc-table .tag{font-size:11px; padding:2px 7px}
.ava-img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:var(--surface-2)}
.photo-row{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.photo-actions{display:flex; gap:7px; flex-wrap:wrap}
.photo-hint{font-size:12.5px; color:var(--ink-3)}
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:13px; margin-bottom:16px}
.tier-card{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--hue);
  border-radius:var(--r-lg); padding:15px 17px}
.tier-top{display:flex; align-items:center; gap:8px; margin-bottom:7px; color:var(--hue)}
.tier-top b{font-family:var(--display); font-size:15px; letter-spacing:-.015em; color:var(--ink)}
.tier-top .n{margin-left:auto; font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink)}
.tier-card p{margin:0; font-size:13px; line-height:1.5; color:var(--ink-3)}
.sect.first{border-top:0}
.hc-table tr.clickable{cursor:pointer}
.hc-table tr.clickable:hover td{background:var(--surface-2)}
.hc-table tr.clickable:focus-visible{outline:2px solid var(--afs); outline-offset:-2px}
/* Register back office: payment pills, filters, the bulk bar. */
.hc-table tr.sel td{background:var(--afs-tint)}
.hc-table input[type="checkbox"]{width:16px; height:16px; cursor:pointer}
.pay{display:inline-block; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:var(--surface-3); color:var(--ink-3)}
.pay.pay-paid{background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green)}
.pay.pay-part{background:color-mix(in srgb,var(--orange) 16%,transparent); color:var(--orange)}
.pay.pay-waived{background:var(--afs-tint); color:var(--afs)}
.req{color:var(--pink); font-weight:700}
.fillme{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px; padding:13px 16px;
  border-radius:var(--r-m); background:var(--afs-tint); border:1px solid color-mix(in srgb,var(--afs) 22%,transparent)}
.fillme span{flex:1; min-width:200px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
/* the builder's step bar. Clickable, because coming back to step 2 after
   reading step 4 is the normal way anyone builds a form. */
.wizsteps{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:26px;
  border-bottom:1px solid var(--line); padding-bottom:0}
.wizstep{display:flex; align-items:center; gap:8px; padding:9px 14px 12px; border:0; background:none;
  cursor:pointer; font:inherit; font-size:13.5px; color:var(--ink-3); border-bottom:2.5px solid transparent;
  margin-bottom:-1px; white-space:nowrap; transition:color .15s, border-color .15s}
.wizstep .n{width:20px; height:20px; border-radius:50%; background:var(--surface-3); color:var(--ink-3);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:11px; flex:0 0 auto}
.wizstep:hover{color:var(--ink)}
.wizstep.done{color:var(--ink-2)}
.wizstep.on{color:var(--ink); font-weight:700; border-bottom-color:var(--afs)}
.wizstep.on .n{background:var(--afs); color:#fff}
.wizstep.done .n{background:color-mix(in srgb,var(--afs) 14%,transparent); color:var(--afs)}
@media(max-width:620px){
  .wizsteps{gap:2px}
  .wizstep{padding:8px 8px 10px; font-size:12.5px; gap:6px}
  .wizstep .n{width:18px; height:18px; font-size:10px}
}
.ev-review{margin-top:22px; padding:15px 16px; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--line)}
/* the question cards in the builder */
.q-card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:12px 13px; margin-bottom:10px}
.q-head{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.q-num{width:22px; height:22px; border-radius:50%; background:var(--afs); color:#fff; flex:0 0 auto;
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:11px}
.q-type{flex:1; padding:6px 9px !important; font-size:13px !important}
.q-move{display:flex; gap:4px; margin-left:auto}
.q-btn{width:26px; height:26px; border:1px solid var(--line-2); background:var(--surface);
  border-radius:7px; cursor:pointer; color:var(--ink-2); line-height:1; font-size:13px}
.q-btn:disabled{opacity:.35; cursor:default}
.q-btn:hover:not(:disabled){border-color:var(--afs); color:var(--afs)}
.q-del:hover{border-color:var(--pink); color:var(--pink)}
.q-card input, .q-card textarea, .q-card select{width:100%; padding:8px 11px; font:inherit; font-size:13.5px;
  border:1.5px solid var(--line-2); border-radius:var(--r-s); background:var(--surface); color:var(--ink); margin-bottom:7px}
.q-card .q-label{font-family:var(--display); font-weight:700}
/* The hint is not a second question. Given the same box as the label it read
   as one, so it loses the box and sits under the label as a caption. */
.q-card .q-hint{border:0; border-bottom:1px dashed var(--line-2); border-radius:0;
  background:transparent; padding:3px 3px 5px; margin:-2px 0 8px; width:calc(100% - 4px);
  font-size:12.5px; color:var(--ink-2)}
.q-card .q-hint::placeholder{color:var(--ink-3); font-style:italic}
.q-card .q-hint:focus{border-bottom-color:var(--afs); outline:none; background:transparent}
/* This was a grey checkbox the size of a full stop, reading "Required", and in
   testing nobody found it — people did not know a question could be either. It
   now says which of the two it currently is, and looks like something you press. */
.q-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px}
.q-req{display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  padding:6px 12px; border-radius:999px; border:1.5px solid var(--line-2);
  background:var(--surface); font-family:var(--display); font-weight:700;
  font-size:12.5px; color:var(--ink-2); transition:border-color .16s, background .16s, color .16s}
.q-req:hover{border-color:var(--ink-4)}
.q-req.on{border-color:var(--afs); background:color-mix(in srgb,var(--afs) 9%,transparent); color:var(--afs)}
.q-req input{width:auto !important; margin:0 !important; accent-color:var(--afs)}
.q-req-hint{font-size:11.5px; color:var(--ink-4)}
.q-add{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:4px}
/* one form in the list */
.ev-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line)}
.ev-row:last-child{border-bottom:0}
.ev-main{flex:1; min-width:240px}
.ev-title{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.ev-title b{font-family:var(--display); font-size:15.5px; letter-spacing:-.015em}
.ev-meta{display:flex; flex-wrap:wrap; gap:0 8px; margin-top:5px; font-size:12.5px; color:var(--ink-3)}
.ev-meta span:not(:last-child)::after{content:"·"; margin-left:8px; opacity:.55}
.ev-count{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--ink-3)}
.ev-count b{font-family:var(--display); font-size:14px; color:var(--ink)}
.ev-cap{display:flex; align-items:center; gap:8px}
.ev-bar{display:block; width:78px; height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.ev-bar span{display:block; height:100%; border-radius:99px; background:var(--afs)}
.ev-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
/* the status pill was stretching to the row height inside a flex parent */
.ev-title .pay, .ev-actions .pay{align-self:center}
/* badges on a profile */
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--hue); background:color-mix(in srgb,var(--hue) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--hue) 30%,transparent)}
.hc-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.hc-search{position:relative; flex:1 1 260px; min-width:210px; display:flex; align-items:center}
.hc-search svg{position:absolute; left:12px; color:var(--ink-3); pointer-events:none}
.hc-search input{width:100%; padding:10px 34px 10px 36px; font:inherit; font-size:14px;
  border:1.5px solid var(--line-2); border-radius:999px; background:var(--surface-2); color:var(--ink)}
.hc-search input:focus{outline:none; border-color:var(--afs); background:var(--surface)}
.hc-search input::-webkit-search-cancel-button{display:none}
.hc-clearq{position:absolute; right:9px; width:24px; height:24px; border:0; border-radius:50%;
  background:var(--surface-3); color:var(--ink-2); cursor:pointer; line-height:1; font-size:15px}
.hc-clearq:hover{background:var(--line-2)}
.hc-summary{font-size:13px; color:var(--ink-3); margin:0 0 14px}
.hc-summary b{font-family:var(--display); color:var(--ink)}
.hc-filters{display:flex; gap:8px; flex-wrap:wrap}
.hc-filter{font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink-2)}
.hc-filter b{font-family:var(--display); margin-left:4px}
.hc-filter:hover{border-color:var(--afs); color:var(--afs)}
.hc-filter.on{background:var(--afs); border-color:var(--afs); color:#fff}
.hc-bulk{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px;
  padding:11px 14px; border-radius:var(--r-m); background:var(--afs-tint);
  border:1px solid color-mix(in srgb,var(--afs) 22%,transparent)}
.hc-bulk b{font-family:var(--display); font-size:13.5px; color:var(--afs); margin-right:4px}
.wa-list{display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 6px; max-height:170px; overflow:auto}
.hc-breaks{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 30px}
.hc-break{min-width:0}
.hc-bar{display:grid; grid-template-columns:minmax(96px,34%) 1fr auto; align-items:center; gap:10px; padding:4px 0}
.hc-bar .l{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hc-bar .t{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.hc-bar .f{display:block; height:100%; border-radius:99px; min-width:3px; transition:width .4s ease}
.hc-bar .n{font-size:12.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.hc-bar .n b{font-family:var(--display); color:var(--ink); font-size:13.5px}
.hc-bar .n i{font-style:normal; opacity:.7}
.hc-insights{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.hc-insights li{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.hc-insights li svg{flex:0 0 auto; margin-top:3px; color:var(--sun, var(--orange))}
@media (max-width:560px){ .hc-bar{grid-template-columns:minmax(80px,44%) 1fr auto} }
.hc-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(100deg,var(--afs),var(--magenta)); color:#fff;
  border-radius:var(--r-lg); padding:14px 18px; margin-bottom:16px;
  text-decoration:none; box-shadow:var(--shadow-2)}
.hc-banner:hover{filter:brightness(1.06)}
.hc-banner-t{flex:1; min-width:220px}
.hc-banner-t b{display:flex; align-items:center; gap:7px; font-family:var(--display);
  font-weight:800; font-size:15px; letter-spacing:-.015em}
.hc-banner-t > span{display:block; font-size:12.5px; opacity:.9; margin-top:3px}
.hc-banner .btn{background:#fff; color:var(--afs); border-color:#fff}
/* Charity Homecoming */
/* The hero was still eating most of a phone screen before anything on the page
   had a chance to say anything. Everything in it is a size down again, and the
   padding with it. */
.hc-hero{background:linear-gradient(150deg,var(--afs-tint),color-mix(in srgb,var(--magenta) 9%,transparent));
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(22px,2.8vw,34px) clamp(18px,3vw,32px);
  text-align:center; max-width:920px; margin:0 auto 16px}
.hc-hero-in{max-width:680px; margin-inline:auto}
body.hc .hc-hero{border-color:#E8DCC4;
  background:linear-gradient(168deg, #FFFDF8 0%, #F4F8FB 46%, color-mix(in srgb, var(--hc-blue) 16%, #FFFDF8) 100%)}
body.hc .hc-clockwrap{background:#FFFDF8; border-color:#E3D2AE}
body.hc .hc-way{background:#FFFDF8; border-color:#E8DCC4}
body.hc .hc-way:hover{border-color:var(--hc-navy); box-shadow:0 8px 20px rgba(7,71,117,.10)}
body.hc .hc-way svg{color:var(--hc-navy)}
.hc-kicker{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 13px}
.hc-kicker span{display:inline-flex; align-items:center; gap:6px}
.hc-kicker .dot{opacity:.5}
/* the kicker wraps on a phone and the separator was left dangling at the end of
   the first line, pointing at nothing */
@media (max-width:560px){ .hc-kicker .dot{display:none} }
.hc-hero h1{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(22px,2.9vw,30px); line-height:1.08; margin:0 0 7px}
.hc-lead{font-size:clamp(13.5px,1.4vw,15.5px); line-height:1.45; color:var(--ink-2); margin:0 0 15px}
.hc-where{font-size:14.5px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 22px}
.hc-cta{display:flex; flex-direction:column; align-items:center; gap:10px}
.hc-seats{font-size:13.5px; color:var(--ink-3)}
/* Countdown. Set as the biggest thing on the page, it read as shouting: a 62px
   digit beside a 44px title left nothing else room to matter. Still the anchor
   of the hero, now at a size the title can live next to. Tabular figures so ticking seconds never shuffle the row width,
   and the colons are separate elements so the four units stay evenly sized. */
.hc-clockwrap{background:color-mix(in srgb,var(--surface) 74%,transparent);
  border:1px solid color-mix(in srgb,var(--afs) 16%,var(--line));
  border-radius:var(--r-l); padding:12px 14px 13px; margin:0 auto 20px;
  max-width:440px; box-shadow:0 1px 2px rgba(16,24,40,.04)}
.hc-clock-label{display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.hc-clock{display:flex; justify-content:center; align-items:flex-start; gap:4px}
.hc-clock-u{min-width:clamp(52px,11vw,74px)}
.hc-clock-u b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(30px,5.8vw,46px); line-height:.95; letter-spacing:-.045em;
  color:var(--afs); font-variant-numeric:tabular-nums}
.hc-clock-u:first-child b{color:var(--magenta)}
.hc-clock-u i{display:block; font-style:normal; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-top:7px}
.hc-clock-sep{font-family:var(--display); font-weight:800; color:var(--line-2);
  font-size:clamp(24px,4.8vw,38px); line-height:1; padding-top:2px}
.hc-clock-now{display:flex; align-items:center; justify-content:center; gap:9px; color:var(--magenta); font-size:15px}
@media (max-width:420px){
  .hc-clock{gap:1px}
  .hc-clock-sep{display:none}
  .hc-clock-u{min-width:0; flex:1 1 0}
}
/* Decade leaderboard. */
.hc-lb{display:flex; flex-direction:column; gap:9px}
.hc-lb-row{display:grid; grid-template-columns:30px 74px 1fr 34px; align-items:center; gap:10px}
.hc-lb-row .rk{font-size:15px; text-align:center}
.hc-lb-row .dc{font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:-.01em}
.hc-lb-row .t{height:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; overflow:hidden}
.hc-lb-row .f{display:block; height:100%; border-radius:99px; background:var(--afs); transition:width .4s ease}
.hc-lb-row.lead .f{background:linear-gradient(90deg,var(--afs),var(--magenta))}
.hc-lb-row .n{font-family:var(--display); font-weight:800; font-size:14px; text-align:right}
@media (max-width:560px){
  .hc-clock-u{min-width:0; flex:1 1 0; padding:8px 2px 6px}
  .hc-lb-row{grid-template-columns:24px 62px 1fr 28px; gap:7px}
}
/* ---- the reunion's own colours -------------------------------------------
   Sampled out of the key art rather than guessed: the cream is 21% of that
   image and the navy, sky and gold are its strongest hues. Scoped to body.hc,
   which render() sets only on this route — the network itself stays AFS blue
   on white, and nothing here leaks into it. */
body.hc{
  --hc-cream:#F9F4EA; --hc-cream-2:#F3EADC; --hc-sky:#B8D6E5;
  --hc-blue:#68A8CA;  --hc-navy:#074775;    --hc-gold:#E6B657;

  --paper:var(--hc-cream);
  --surface:#FFFDF8;
  --surface-2:var(--hc-cream-2);
  --surface-3:#E9DCC7;
  --line:#E6DAC6;
  --line-2:#D8C8AC;
  --afs:var(--hc-navy);
  --afs-tint:#E4EEF5;
  --ink:#16303F;
  --ink-2:#435A68;
  --ink-3:#7A8A94;
  --panel:#0A3557;
  --spectrum:linear-gradient(90deg, var(--hc-navy), var(--hc-blue), var(--hc-sky), var(--hc-gold));
}
/* the ribbon and the promo banner follow the cream, not the old blue */
body.hc .ribbon{background:#F6EBD3; border-bottom-color:#E3D2AE}
body.hc .topbar{background:color-mix(in srgb, #FFFDF8 93%, transparent)}
body.hc .hc-banner{background:linear-gradient(100deg, var(--hc-navy), #2E6E9C 62%, var(--hc-blue))}
body.hc .btn-primary{background:var(--hc-gold,#E6B657); border-color:var(--hc-gold,#E6B657);
  color:#553800}
body.hc .btn-primary:hover{background:#F0C671; border-color:#F0C671; color:#553800}
body.hc .btn-primary svg{color:#553800}
/* the gold is the reunion's accent, so the countdown's lead figure takes it */
body.hc .hc-clock-u:first-child b{color:var(--hc-gold-d,#C8912A)}

/* ---- the four ways in ----------------------------------------------------
   Registering is the ask, so it keeps the solid button above. These three are
   alternatives or additions and are weighted accordingly: one quiet row. */
.hc-ways{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:11px;
  margin:24px auto 0; max-width:860px; text-align:left}
.hc-way{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  gap:11px; padding:15px 17px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  color:inherit; text-decoration:none; text-align:left; font:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.hc-way:hover{transform:translateY(-2px); border-color:var(--afs); box-shadow:0 8px 20px rgba(7,71,117,.10)}
/* nothing to click yet, so it does not pretend to be clickable */
.hc-way svg{flex:none; margin-top:1px; color:var(--afs)}
.hc-way > span{display:flex; flex-direction:column; min-width:0; height:100%}
.hc-way b{display:block; font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-.01em; line-height:1.25}
.hc-way i{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
  line-height:1.4; margin-top:3px}

/* ---- a section on this page ---------------------------------------------- */
.hc-sec{margin:var(--sec-gap,44px) 0 0}
.hc-sec-head{text-align:center; max-width:56ch; margin:0 auto 20px}
.hc-sec-head h2{font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,29px); line-height:1.14; margin:0}
.hc-sec-head p{margin:9px 0 0; font-size:15px; line-height:1.55; color:var(--ink-2)}
.hc-pill{display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--afs); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px}
.hc-sec-sub{display:flex; align-items:center; gap:8px; margin:22px 0 12px; font-size:13.5px;
  color:var(--ink-2)}
.hc-sec-sub b{font-family:var(--display); font-weight:700; color:var(--ink)}
.hc-sec-cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
/* The base rule is the wizard's — ten places in hcTicketStep, hcPayStep and
   hcOrder rely on it, and they are left-aligned with their own inline margins.
   The centred variant belongs to the landing sections and is scoped to them;
   defining it unscoped centred the wizard's fine print too. */
.hc-fine{font-size:12.5px; color:var(--ink-3); line-height:1.55; margin:0}

/* The story form is a homecoming page, so it takes the homecoming palette:
   cream ground, navy ink, gold on the required marks. Only inside body.hc, so
   nothing here touches the Pulang forms that share these class names. */
body.hc .st-card{background:#FFFDF8; border-color:#E8DCC4}
body.hc .st-req{color:var(--hc-gold-d,#C8912A)}
body.hc .st-star{border-bottom-color:#E8DCC4}
body.hc .st-q{border-top-color:#EFE6D4}
body.hc .st-radio{background:#FFFDF8; border-color:#E3D2AE}
body.hc .st-radio:hover{border-color:var(--hc-navy)}
body.hc .st-radio.on{border-color:var(--hc-navy);
  background:color-mix(in srgb, var(--hc-navy) 7%, transparent)}
body.hc .st-radio input{accent-color:var(--hc-navy)}
body.hc .st-blurb{color:var(--ink-2)}

/* ---- the story collection form ---------------------------------------------
   The committee published these questions on a Google form already, so the
   wording is fixed and the shape has to read the same: a required mark on every
   question, the four narrative answers set apart from the short factual ones. */
.st-req{color:var(--afs); font-weight:600; margin-left:1px}
.st-opt{margin-left:6px; font-family:var(--display); font-weight:600; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:2px 7px; vertical-align:1px}
body.hc .st-opt{border-color:#E8DCC4}
.st-blurb{font-size:14.5px; line-height:1.62; color:var(--ink-2); margin:0 0 14px}
.st-star{margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.st-qs{margin-top:4px}
/* A hairline between the long answers, so four textareas do not read as one slab */
.st-q{padding-top:16px; border-top:1px solid var(--line)}
.st-q label{line-height:1.5}
.st-q textarea{margin-top:2px}
.st-exp{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 10px}

/* The native file input renders as "Choose Files / No file chosen" in the
   browser's own chrome, which cannot be styled and looks nothing like the rest
   of the form. Hide it, drive it from a label, and list what was picked. The
   input stays in the DOM and keeps its id, so the change handler is untouched. */
.st-file-in{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.st-file{display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:14px 16px; border:1.5px dashed var(--line-2, var(--line)); border-radius:14px;
  background:var(--surface-2); transition:border-color .16s, background .16s}
.st-file:hover{border-color:var(--afs); background:var(--surface)}
.st-file-in:focus-visible + .st-file{border-color:var(--afs);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--afs) 22%, transparent)}
.st-file-ic{display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:11px; background:var(--surface); color:var(--afs);
  border:1px solid var(--line)}
.st-file-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.st-file-t b{font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--ink)}
.st-file-t i{font-style:normal; font-size:12.5px; color:var(--ink-3); line-height:1.45}

.st-files{list-style:none; margin:10px 0 0; padding:0; display:flex;
  flex-direction:column; gap:6px}
.st-files li{display:flex; align-items:center; gap:10px; padding:8px 10px 8px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.st-file-n{flex:1 1 auto; min-width:0; font-size:13px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.st-file-s{flex:none; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.st-file-x{flex:none; width:24px; height:24px; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-3);
  font-size:16px; line-height:1; display:grid; place-items:center; padding:0}
.st-file-x:hover{border-color:var(--red, #C7382F); color:var(--red, #C7382F)}

body.hc .st-file{background:#FBF6EC; border-color:#DCC79B}
body.hc .st-file:hover{border-color:var(--hc-navy); background:#FFFDF8}
body.hc .st-file-ic{background:#FFFDF8; border-color:#E8DCC4; color:var(--hc-navy)}
body.hc .st-files li{background:#FFFDF8; border-color:#E8DCC4}
body.hc .st-file-x{background:#FBF6EC; border-color:#E8DCC4}
.st-yn{display:flex; gap:9px; margin-top:4px; flex-wrap:wrap}
.st-radio{flex:1 1 130px; display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 14px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); font-size:14.5px; transition:border-color .16s, background .16s}
.st-radio:hover{border-color:var(--ink-4)}
.st-radio.on{border-color:var(--afs); background:color-mix(in srgb, var(--afs) 7%, transparent)}
.st-radio input{accent-color:var(--afs); margin:0; flex:none}
.st-radio span{font-weight:500}
/* Stacking these flipped the flex main axis, which turned the 130px basis into a
   130px minimum *height* and made two words sit in two enormous boxes. Once the
   axis is vertical the basis has to go back to the content. */
@media (max-width:560px){
  .st-yn{flex-direction:column}
  .st-radio{flex:0 0 auto}
}

/* ---- the shop --------------------------------------------------------------
   Deliberately plainer than the reunion pages: a shop is read by someone
   deciding whether to spend money, and the picture and the price are what they
   came for. Everything else gets out of the way. */
.shop-wrap{max-width:1120px; margin:0 auto; padding:0 0 110px}
.shop-head{max-width:640px; margin:26px auto 30px; text-align:center}
.shop-head h1{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(28px,4.6vw,46px); line-height:1.06; margin:14px 0 12px}
.shop-head p{font-size:clamp(14.5px,1.5vw,16.5px); line-height:1.6; color:var(--ink-2); margin:0}

.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px}
.shop-card{border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--surface); display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .16s}
.shop-card:hover,.shop-card:focus,.shop-card:visited{text-decoration:none; color:inherit}
.shop-card b,.shop-card span{text-decoration:none}
.shop-card b{color:var(--ink)}
.shop-card:hover{transform:translateY(-3px); border-color:var(--afs);
  box-shadow:0 14px 34px rgba(7,71,117,.12)}
.shop-card:focus-visible{outline:2px solid var(--afs); outline-offset:3px}
.shop-card.is-out{opacity:.62}
.shop-shot{position:relative; aspect-ratio:1/1; background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden}
.shop-shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.shop-card:hover .shop-shot img{transform:scale(1.04)}
.shop-noshot{color:var(--ink-4)}
.shop-out,.shop-inb{position:absolute; top:10px; left:10px; font-family:var(--display);
  font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:rgba(16,24,40,.78); color:#fff}
.shop-inb{background:var(--afs)}
.shop-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.shop-body b{font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.015em}
.shop-blurb{font-size:12.5px; color:var(--ink-3); line-height:1.45}
.shop-price{margin-top:auto; padding-top:8px; font-family:var(--display); font-weight:800;
  font-size:17px; color:var(--afs); letter-spacing:-.02em}
.shop-card.is-skel{height:330px; background:var(--surface-2); cursor:default}

/* The shop floor is one column again — the basket sits in the header. */
.shop-main{display:block}

/* The basket in the header, with the count riding on the corner of the bag.
   It is a link off the shop and a button inside it, so both are styled here. */
.cart-btn{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:4px; border-radius:12px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); cursor:pointer; text-decoration:none;
  transition:background .16s, color .16s, border-color .16s}
.cart-btn:hover{background:var(--surface-2); color:var(--afs); border-color:var(--line)}
.cart-btn:focus-visible{outline:2px solid var(--afs); outline-offset:2px}
.cart-n{position:absolute; top:2px; right:1px; min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--afs); color:#fff; font-family:var(--display); font-weight:800;
  font-size:10.5px; line-height:1; border:2px solid var(--surface)}
body.hc .cart-n{background:var(--hc-navy,#074775)}

/* The case for Pulang, made on the page where somebody has just proved they
   turn up to things. Sits apart from the ticket: a bordered panel, its own
   heading, and a picture of the directory rather than a description of it. */
.ppitch{margin-top:22px; padding:20px 19px 18px; border:1px solid var(--line);
  border-radius:18px; background:var(--surface); text-align:left; box-shadow:var(--shadow-1)}
.ppitch-eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:10.5px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--afs)}
.ppitch-top h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:20px; line-height:1.2; margin:10px 0 8px}
.ppitch-top p{font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 16px}

/* the directory, shown small */
.ppitch-shot{border:1px solid var(--line); border-radius:13px; overflow:hidden;
  background:var(--surface-2); margin-bottom:16px}
.ppitch-bar{display:flex; align-items:center; gap:5px; padding:8px 11px;
  background:var(--surface-3); border-bottom:1px solid var(--line)}
.ppitch-bar i{width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.ppitch-bar span{margin-left:7px; font-family:var(--mono); font-size:10px; color:var(--ink-4)}
.ppitch-search{display:flex; align-items:center; gap:7px; margin:9px 10px;
  padding:7px 10px; border-radius:9px; background:var(--surface);
  border:1px solid var(--line); font-size:11.5px; color:var(--ink-3)}
.ppitch-row{display:flex; align-items:center; gap:9px; padding:7px 11px; background:var(--surface);
  border-top:1px solid var(--line)}
.ppitch-row .t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.ppitch-row .t b{font-family:var(--display); font-weight:700; font-size:12.5px}
.ppitch-row .t span{font-size:10.5px; color:var(--ink-3)}
.ppitch-pill{font-size:9.5px; font-weight:700; font-family:var(--display); color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:999px; padding:3px 8px; white-space:nowrap}
.ppitch-bub{margin:10px; padding:9px 12px; border-radius:12px 12px 12px 4px;
  background:color-mix(in srgb,var(--afs) 9%,transparent); color:var(--ink-2);
  font-size:11.5px; line-height:1.45}

.ppitch-facts{display:flex; flex-direction:column; gap:11px; margin-bottom:17px}
.ppitch-fact{display:flex; align-items:flex-start; gap:10px}
.ppitch-fact svg{flex:0 0 auto; margin-top:2px; color:var(--afs)}
.ppitch-fact span{display:flex; flex-direction:column; gap:1px}
.ppitch-fact b{font-family:var(--display); font-weight:700; font-size:13px}
.ppitch-fact span span{font-size:12px; color:var(--ink-3); line-height:1.45}
.ppitch-skip{display:block; width:100%; margin-top:11px; text-align:center; color:var(--ink-3)}

/* the application form, read back to whoever has to vouch for it */
.qform{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px 22px}
.qf{display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--line)}
.qf span{flex:0 0 128px; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-3); font-family:var(--display); font-weight:700}
.qf b{font-size:14px; font-weight:600; word-break:break-word}

/* the running basket, pinned so the total is never something you scroll to find */
.shop-bar{position:fixed; left:0; right:0; bottom:0; z-index:80; padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.shop-bar-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:14px}
.shop-bar-n{font-size:14px; color:var(--ink-2)}
.shop-bar-t{margin-left:auto; font-family:var(--display); font-weight:800; font-size:18px}
@media (max-width:700px){ .shop-bar{bottom:calc(56px + env(safe-area-inset-bottom))} }
body.public .shop-bar{bottom:0}

/* a tag you can press, for the one on your own profile that opens an editor */
.tag-edit{cursor:pointer; font:inherit; gap:5px}
.tag-edit:hover{border-color:var(--afs); color:var(--afs)}
.tag-edit:focus-visible{outline:2px solid var(--afs); outline-offset:2px}

/* what an admin sees against an event that is somebody else's to run */
.ev-readonly{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--ink-3); padding:6px 2px}
.ev-readonly svg{color:var(--ink-4)}

.shop-opts{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.shop-opt{cursor:pointer; padding:8px 15px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); font-family:var(--display); font-weight:700; font-size:13.5px;
  transition:border-color .16s, background .16s, color .16s}
.shop-opt:hover{border-color:var(--ink-4)}
.shop-opt.on{background:var(--afs); border-color:var(--afs); color:#fff}

/* one product, on its own page */
.shop-detail{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:start; margin-top:6px}
.shop-gal-main{border-radius:18px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); aspect-ratio:1/1; display:grid; place-items:center}
.shop-gal-main img{width:100%; height:100%; object-fit:cover; display:block}
.shop-gal-main.is-none{color:var(--ink-4)}
.shop-thumbs{display:flex; gap:9px; margin-top:10px; flex-wrap:wrap}
.shop-thumb{width:66px; height:66px; padding:0; border-radius:11px; overflow:hidden;
  cursor:pointer; border:1px solid var(--line); background:var(--surface-2);
  transition:border-color .16s, transform .16s}
.shop-thumb:hover{transform:translateY(-2px)}
.shop-thumb.on{border-color:var(--afs); box-shadow:0 0 0 2px color-mix(in srgb,var(--afs) 30%,transparent)}
.shop-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.shop-info h1{font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(24px,3.4vw,36px); line-height:1.1; margin:0 0 8px}
.shop-tag{font-size:15.5px; line-height:1.5; color:var(--ink-2); margin:0 0 14px}
.shop-detail-price{font-family:var(--display); font-weight:800; font-size:26px;
  color:var(--afs); margin:0 0 18px; letter-spacing:-.02em}
.shop-desc p{font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0 0 12px; max-width:60ch}
.shop-more{position:absolute; bottom:10px; right:10px; display:inline-flex; align-items:center;
  gap:4px; font-family:var(--display); font-weight:700; font-size:11px; padding:3px 8px;
  border-radius:999px; background:rgba(16,24,40,.72); color:#fff}
@media (max-width:760px){ .shop-detail{grid-template-columns:minmax(0,1fr)} }

/* Two across on a phone, not one. auto-fill with a 240px minimum gives a single
   column below about 500px, which turns a 25-item shop into an endless vertical
   scroll — you cannot compare two things you cannot see at once. Two narrow
   cards beat one wide one for browsing. */
@media (max-width:560px){
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px}
  .shop-body{padding:11px 12px 13px; gap:3px}
  .shop-body b{font-size:13.5px; line-height:1.3}
  .shop-blurb{font-size:11.5px; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .shop-price{font-size:14.5px; padding-top:6px}
  .shop-out,.shop-inb{font-size:9.5px; padding:3px 7px; top:7px; left:7px}
  .shop-more{font-size:9.5px; padding:2px 6px; bottom:7px; right:7px}
  .shop-head{margin:16px auto 22px}
}

/* the gallery already on a product, in the back office */
.sp-gal{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 8px}
.sp-gal-i{margin:0; position:relative; width:70px}
.sp-gal-i img{width:70px; height:70px; object-fit:cover; border-radius:10px; display:block;
  border:1px solid var(--line)}
.sp-gal-i figcaption{position:absolute; left:0; right:0; bottom:0; text-align:center;
  font-size:9.5px; font-family:var(--display); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; background:rgba(16,24,40,.72);
  border-radius:0 0 10px 10px; padding:2px 0}

/* checkout */
.shop-lines{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.shop-line{display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line)}
.shop-line:last-child{border-bottom:0}
.shop-line .t{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.shop-line .t b{font-family:var(--display); font-weight:700; font-size:14.5px}
.shop-line-t{font-family:var(--display); font-weight:800; white-space:nowrap}
.shop-addmore{margin-top:10px}
.shop-addmore .btn{width:100%; justify-content:center; gap:6px}
.shop-qty{display:flex; align-items:center; gap:4px; flex:none}
.shop-qty button{width:28px; height:28px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); font-size:15px; line-height:1}
.shop-qty button:hover{border-color:var(--afs); color:var(--afs)}
.shop-qty b{min-width:24px; text-align:center; font-variant-numeric:tabular-nums}

.shop-ful{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.shop-fulopt{display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:13px 15px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface);
  transition:border-color .16s, background .16s}
.shop-fulopt:hover{border-color:var(--ink-4)}
.shop-fulopt.on{border-color:var(--afs); background:color-mix(in srgb,var(--afs) 6%,transparent)}
.shop-fulopt input{accent-color:var(--afs); margin:2px 0 0; flex:none}
.shop-fulopt span{display:flex; flex-direction:column; gap:2px; min-width:0}
.shop-fulopt b{font-family:var(--display); font-weight:700; font-size:14.5px}
.shop-fulopt i{font-style:normal; font-size:12.5px; color:var(--ink-3); line-height:1.45}
.shop-fulopt em{font-style:normal; font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--afs)}
.shop-addr{margin-top:18px; padding-top:6px; border-top:1px solid var(--line)}

/* ---- the AFS70 memory wall -------------------------------------------------
   A masonry of cards in the homecoming palette. Two kinds on purpose: one that
   leads with a photograph and one that leads with the sentence set large. A
   wall of identical cards reads like a table; the mix is what makes it a wall.
   CSS columns rather than grid, because the whole point is uneven heights. */
.wall-wrap{max-width:1180px; margin:0 auto; padding:0 0 60px}

.wall-head{max-width:720px; margin:26px auto 30px; text-align:center}
.wall-head h1{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(30px,5.2vw,54px); line-height:1.04; margin:14px 0 12px}
.wall-head p{font-size:clamp(15px,1.6vw,17.5px); line-height:1.6; color:var(--ink-2);
  margin:0 auto; max-width:56ch}
.wall-stats{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin:20px 0 0;
  font-size:13.5px; color:var(--ink-3)}
.wall-stats b{font-family:var(--display); font-weight:800; font-size:19px; color:var(--ink);
  margin-right:5px}
.wall-cta{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px}

.wall-tools{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:0 0 20px}
.wall-chips{display:flex; gap:7px; flex-wrap:wrap}
.wall-chip{font-family:var(--display); font-weight:700; font-size:13px; cursor:pointer;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); transition:border-color .16s, background .16s, color .16s}
.wall-chip:hover{border-color:var(--ink-4)}
.wall-chip.on{background:var(--hc-navy,#074775); border-color:var(--hc-navy,#074775); color:#fff}
.wall-search{position:relative; display:flex; align-items:center; gap:8px; flex:0 1 320px;
  padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.wall-search svg{color:var(--ink-3); flex:none}
.wall-search input{border:0; background:none; padding:0; font-size:14px; width:100%; outline:none}

.wall-grid{columns:3 300px; column-gap:16px}
.wall-card{break-inside:avoid; margin:0 0 16px; border-radius:18px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--surface);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .16s}
.wall-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--hc-navy,#074775) 40%, transparent);
  box-shadow:0 14px 34px rgba(7,71,117,.13)}
.wall-card:focus-visible{outline:2px solid var(--hc-navy,#074775); outline-offset:3px}
.wall-shot{overflow:hidden; background:var(--surface-2)}
.wall-shot img{display:block; width:100%; height:auto; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.wall-card:hover .wall-shot img{transform:scale(1.04)}
.wall-body{padding:16px 18px 17px}
.wall-quote{font-size:15.5px; line-height:1.55; color:var(--ink); margin:0 0 12px}
.wall-by b{display:block; font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:-.01em; color:var(--ink)}
.wall-by span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}

/* the ones with no photograph carry the sentence instead */
.wall-card.is-quote{background:linear-gradient(160deg,#FFFDF8,#F1F6FA)}
.wall-card.is-quote .wall-body{padding:26px 22px 22px}
.wall-card.is-quote .wall-quote{font-family:var(--display); font-weight:700;
  font-size:clamp(18px,2vw,23px); line-height:1.32; letter-spacing:-.02em; margin-bottom:16px}
.wall-card.is-quote .wall-quote::before{content:"\201C"; display:block;
  font-size:44px; line-height:.6; color:var(--hc-gold,#E6B657); margin-bottom:8px}

.wall-card.is-skel{height:var(--h,200px); background:
  linear-gradient(100deg,var(--surface-2) 30%,color-mix(in srgb,var(--surface-2) 60%,#fff) 50%,var(--surface-2) 70%);
  background-size:220% 100%; animation:wallskel 1.3s ease-in-out infinite; cursor:default}
@keyframes wallskel{ to{ background-position:-120% 0 } }
@media (prefers-reduced-motion:reduce){
  .wall-card.is-skel{animation:none}
  .wall-card,.wall-shot img{transition:none}
}

.wall-empty{margin-top:10px}
.wall-foot{display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap;
  margin:34px 0 0; font-size:12.5px; color:var(--ink-3); text-align:center}
.wall-foot svg{flex:none}

/* ---- one story, in a modal over the wall ---- */
.wall-scrim{align-items:start; padding:clamp(12px,4vh,48px) 16px; overflow:auto}
.wall-modal{position:relative; width:min(760px,100%); max-height:none; padding:0; overflow:hidden}
.wall-x{position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer; border-radius:999px;
  border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(6px); color:var(--ink-2)}
.wall-x:hover{color:var(--ink); border-color:var(--ink-4)}
.wall-modal-shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px;
  background:var(--line)}
.wall-modal-shots.is-one{grid-template-columns:minmax(0,1fr)}
.wall-modal-shots figure{margin:0; background:var(--surface-2); overflow:hidden}
.wall-modal-shots img{display:block; width:100%; height:100%; max-height:340px; object-fit:cover}
.wall-modal-body{padding:24px 28px 26px}
.wall-modal-body h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px,3vw,30px); line-height:1.1; margin:0 0 5px}
.wall-read-meta{font-size:13.5px; color:var(--ink-3); margin:0 0 20px}
.wall-pull{margin:0 0 26px; padding:0 0 0 18px; border-left:3px solid var(--hc-gold,#E6B657);
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(18px,2.3vw,24px); line-height:1.34; color:var(--ink)}
.wall-answers section{margin:0 0 22px}
.wall-answers h3{font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 7px}
.wall-answers p{font-size:15.5px; line-height:1.68; color:var(--ink-2); margin:0 0 11px; max-width:66ch}
.wall-answers p:last-child{margin-bottom:0}
.wall-modal-cta{display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line)}
body.hc .wall-modal{background:#FFFDF8; border-color:#E8DCC4}
body.hc .wall-modal-cta{border-top-color:#E8DCC4}
body.hc .wall-x{background:color-mix(in srgb,#FFFDF8 88%,transparent); border-color:#E8DCC4}

body.hc .wall-card{background:#FFFDF8; border-color:#E8DCC4}
/* :not(.on) matters. Without it this rule and .wall-chip.on have the same
   specificity, this one comes later, and the selected chip ends up with a cream
   background still wearing the white text .on gave it — an invisible label. */
body.hc .wall-chip:not(.on){background:#FFFDF8; border-color:#E8DCC4}
body.hc .wall-search{background:#FFFDF8; border-color:#E8DCC4}


.wall-grid-peek{columns:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin-top:20px}
.wall-grid-peek .wall-card{margin:0}
.wall-grid-peek .wall-shot img{height:190px; object-fit:cover}
.wall-grid-peek .wall-quote{font-size:14.5px}
.wall-grid-peek .wall-card.is-quote .wall-quote{font-size:clamp(16px,1.7vw,19px)}
.wall-grid-peek .wall-card.is-quote .wall-body{padding:20px 18px 18px}
.hc-wallsec-cta{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px}

@media (max-width:700px){
  .wall-grid{columns:1}
  .wall-tools{flex-direction:column; align-items:stretch}
  .wall-search{flex:1 1 auto}
  .wall-head{margin-top:16px}
}

/* ---- the stories tab in the back office ---- */
.tag-lock{background:color-mix(in srgb, var(--orange) 15%, transparent); color:var(--orange);
  border-color:color-mix(in srgb, var(--orange) 32%, transparent)}
/* A line of the story in its own column, so the committee can pick one out of a
   list of two hundred without opening each in turn. Clamped rather than cut
   mid-word, and given a width the table will not fight over. */
.st-cell{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13px; line-height:1.5; color:var(--ink-2);
  min-width:200px; max-width:340px}
.st-ans{margin-bottom:18px}
.st-ans:last-of-type{margin-bottom:20px}
.st-ans-q{display:block; font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.st-ans p{font-size:15px; line-height:1.68; color:var(--ink); margin:0 0 9px; max-width:68ch}
.st-ans p:last-child{margin-bottom:0}
.st-shots{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px}
.st-shot{display:block; text-decoration:none; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--surface-2); transition:border-color .16s, transform .16s}
.st-shot:hover{border-color:var(--afs); transform:translateY(-2px)}
.st-shot img{display:block; width:100%; height:130px; object-fit:cover}
.st-shot span{display:block; padding:8px 10px; font-size:11.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hc-sec .hc-fine{margin:14px 0 0; font-size:13px; text-align:center}

/* The what-and-why, last thing inside the hero panel. It has been three things
   in a row and neither of the first two worked: centred it gave a six-line
   paragraph two ragged edges and split "Pulang Kampung" across a line, and in a
   card of its own it read as a stray slab of text between two panels. It is
   part of the same statement as the date, the clock and the ways in, so it sits
   in the same box, left-aligned, behind a rule. */
.hc-standfirst{margin:22px 0 0; padding:20px 2px 0; text-align:left;
  border-top:1px solid var(--line);
  font-size:15px; line-height:1.68; color:var(--ink-2)}
.hc-standfirst b{color:var(--ink)}
body.hc .hc-standfirst{border-top-color:#E8DCC4}
@media (max-width:560px){ .hc-standfirst{margin-top:18px; padding-top:16px; font-size:14.5px} }

/* a watercolour bloom, reused by both dark blocks */
.hc-wash{position:absolute; inset:-30% -10%; pointer-events:none; opacity:.7;
  background:radial-gradient(38% 46% at 20% 22%, rgba(184,214,229,.40), transparent 62%),
             radial-gradient(34% 42% at 82% 76%, rgba(230,182,87,.28), transparent 64%)}

/* ---- 1. why: a statement, not a card ----------------------------------- */
.hc-why-panel{position:relative; overflow:hidden; margin:var(--sec-gap,44px) 0 0;
  border-radius:24px; padding:clamp(28px,4vw,52px) clamp(22px,4vw,48px);
  background:linear-gradient(150deg, #0A3557 0%, #0F4B78 52%, #14618F 100%); color:#fff}
.hc-why-in{position:relative; max-width:64ch; margin:0 auto; text-align:center}
.hc-why-panel h2{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(23px,3vw,34px); line-height:1.14}
.hc-figure{display:flex; align-items:center; gap:clamp(16px,2.4vw,26px); text-align:left;
  margin:clamp(20px,3vw,30px) 0 0; padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:18px}
.hc-figure b{flex:none; font-family:var(--display); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(46px,7.5vw,78px); line-height:.9; color:var(--hc-gold,#E6B657)}
.hc-figure span{font-size:clamp(13.5px,1.35vw,15px); line-height:1.55; color:rgba(255,255,255,.9)}
.hc-why-call{margin:clamp(18px,2.6vw,26px) 0 0; font-family:var(--display); font-weight:700;
  letter-spacing:-.02em; font-size:clamp(16px,1.9vw,21px); color:var(--hc-gold,#E6B657)}
.hc-pill.on-dark{color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26)}
.hc-pill.on-dark svg{color:var(--hc-gold,#E6B657)}

/* ---- 2. the three days: cards with a tinted head and a watermark -------- */
.hc-days{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch}
.hc-day{position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .2s ease, box-shadow .2s ease}
.hc-day:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(7,71,117,.12)}
.hc-day header{position:relative; overflow:hidden; padding:18px 20px 15px;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--hue) 17%, transparent),
    color-mix(in srgb, var(--hue) 5%, transparent));
  border-bottom:1px solid var(--line)}
.hc-day-mark{position:absolute; right:8px; top:-16px; font-family:var(--display); font-weight:800;
  font-size:104px; line-height:1; color:var(--hue); opacity:.13; pointer-events:none}
.hc-day-n{position:relative; font-family:var(--display); font-weight:800; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--hue) 75%, #333)}
.hc-day h3{position:relative; margin:7px 0 0; font-family:var(--display); font-weight:700;
  letter-spacing:-.035em; font-size:clamp(22px,2.4vw,27px); line-height:1.05; color:var(--ink)}
.hc-day-when{position:relative; display:block; margin-top:4px; font-family:var(--mono);
  font-size:11px; letter-spacing:.05em; color:var(--ink-3)}
.hc-day-sub{margin:14px 20px 0; font-size:13px; line-height:1.45; color:var(--ink-2)}
.hc-day ul{list-style:none; margin:13px 0 0; padding:0 20px 18px; display:flex;
  flex-direction:column; gap:13px; flex:1}
.hc-day li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.5;
  color:var(--ink-2)}
.hc-day li svg{flex:none; margin-top:2px; color:var(--hue)}
.hc-day li b{display:block; font-family:var(--display); font-weight:700; font-size:13.5px;
  color:var(--ink); margin-bottom:2px}
@media (max-width:900px){ .hc-days{grid-template-columns:minmax(0,1fr)} }

/* ---- swipe rails on the phone --------------------------------------------
   Everything on this page is a set of three-to-six equal things: three days,
   two passes, four cottages, six courses of the dinner. Stacked, they turned a
   reunion page into eleven screens of scrolling, and the reader gave up long
   before the ticket prices. On a phone each set becomes one horizontal rail
   instead: the same information, a fraction of the height, and swiping through
   four cottages is how a phone expects to be read.

   The next card is deliberately left showing at the right edge — that overhang
   is the only affordance anyone needs to know a row scrolls.

   Nothing here touches the desktop layouts, which have the width to lay the
   whole set out at once and should keep doing so. */
/* The film as the hero. The frame keeps the artwork's shape so nothing moves
   when the poster loads, and the badge says what it is without a caption. */
.hc-art-film{padding:0}
.hc-art-film .hc-film-frame{position:relative; aspect-ratio:16/9; background:var(--hc-cream,#F9F4EA)}
.hc-art-film video{display:block; width:100%; height:100%; object-fit:cover}
.hc-film-badge{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center;
  gap:6px; padding:7px 12px; border-radius:999px; font-family:var(--display); font-weight:700;
  font-size:11.5px; letter-spacing:.03em; color:#fff;
  background:rgba(7,20,35,.55); backdrop-filter:blur(6px)}
.hc-film-badge svg{color:var(--hc-gold,#E6B657)}
@media (max-width:560px){ .hc-film-badge{left:10px; bottom:10px; font-size:10.5px; padding:6px 10px} }

/* Two helpers for saying a thing at two lengths. A phone gets the short one and
   the desktop the long one; neither ships text the other has to scroll past.
   These are the only way to shorten copy per-breakpoint in a page rendered once
   from a string. */
@media (max-width:700px){ .no-m{display:none !important} }
@media (min-width:701px){ .only-m{display:none !important} }

/* ---- picture 1: the hero, taken down a size ----
   Date and place belong on one line: they are one fact, and split across two
   they read as two headings. Everything under them comes down to match. */
@media (max-width:700px){
  .hc-hero{padding:16px 14px 18px}
  .hc-kicker{font-size:9.5px; gap:5px; margin:0 0 11px; flex-wrap:nowrap; white-space:nowrap}
  .hc-kicker span{gap:4px}
  .hc-kicker .dot{display:inline !important}
  .hc-kicker svg{width:11px; height:11px}
  .hc-clockwrap{max-width:none; padding:9px 8px 10px; margin-bottom:14px}
  .hc-clock-label{font-size:9px; margin-bottom:6px}
  .hc-clock{gap:2px}
  .hc-clock-u{min-width:0; flex:1 1 0}
  .hc-clock-u b{font-size:clamp(22px,7.4vw,30px)}
  .hc-clock-u i{font-size:8px; margin-top:5px}
  .hc-clock-sep{font-size:clamp(17px,5vw,22px)}
  .hc-cta .btn-lg{padding:12px 22px; font-size:15px}
  .hc-seats{font-size:11.5px}
}

/* ---- picture 5: the two navy panels read as one ----
   The case for giving and the button that asks are the same thought, and a
   cream gap between two identical dark boxes made them look like a repeat. */
@media (max-width:700px){
  /* body.hc, not the bare class: .hc-close sets its margin with a shorthand
     further down the sheet, and at equal specificity the later rule wins. */
  body.hc .hc-why-panel{margin-bottom:0; border-radius:22px 22px 0 0}
  body.hc .hc-close{margin-top:0; border-radius:0 0 22px 22px}
  body.hc .hc-why-panel::after{content:""; position:absolute; left:22px; right:22px; bottom:0;
    height:1px; background:rgba(255,255,255,.14); z-index:2}
}

/* ---- the two passes, side by side on a phone ----
   A price against a price is a comparison, so both have to be on screen at
   once. Equal height comes free from the grid; the rest is making the type fit
   half a phone without shouting. */
@media (max-width:700px){
  .hc-passes{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px; align-items:stretch}
  .hc-pass{padding:15px 13px 16px}
  .hc-pass h3{font-size:15px; line-height:1.18}
  .hc-pass-span{font-size:11px; line-height:1.35}
  .hc-pass-price b{font-size:clamp(18px,5.4vw,24px); letter-spacing:-.03em}
  .hc-pass-price span{font-size:11px}
  .hc-pass ul{gap:6px}
  .hc-pass li{font-size:11.5px; line-height:1.4; gap:6px; align-items:flex-start}
  .hc-pass li svg{flex:none; width:12px; height:12px; margin-top:2px}
  .hc-pass-flag{font-size:9.5px; padding:4px 9px}
}

/* ---- picture 5: the day cards, tightened ----
   The header block, the summary line and every item were all set for a desktop
   column three times this wide. */
@media (max-width:700px){
  /* a chip is small, so several fit a screen at once — no need for 82% each */
  .hc-chips.hc-rail > *{flex:0 0 auto !important}
  .hc-chip{padding:9px 14px; font-size:13.5px; white-space:nowrap}
  .hc-contact{gap:8px}
  .hc-sec-head p{font-size:14px}
  .hc-sec-head h2{font-size:clamp(21px,6vw,27px); line-height:1.14}
}

/* ---- picture 1: the three ways in, three across on a phone ----
   Stacked they were three full-width slabs eating a third of a screen for two
   words each. Across, they are a row of thumbs. */
@media (max-width:700px){
  .hc-ways{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px; margin-top:18px;
    max-width:none}
  .hc-way{grid-template-columns:minmax(0,1fr); gap:6px; padding:12px 8px 11px; text-align:center;
    justify-items:center}
  .hc-way svg{margin:0 auto}
  .hc-way b{font-size:12.5px; line-height:1.2}
  .hc-way i{font-size:10.5px; line-height:1.3; margin-top:2px}
}

@media (max-width:700px){
  .hc-rail{
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:row !important;
    /* .hc-chips sets flex-wrap:wrap further down the sheet and would otherwise
       win at equal specificity, leaving a "rail" that simply stacked. */
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-behavior:smooth;
    align-items:stretch;
    /* bleed to the screen edges so the overhang reads as "more this way"
       rather than as a card that has been cut off */
    margin-inline:-16px;
    padding:2px 16px 14px;
  }
  .hc-rail::-webkit-scrollbar{display:none}
  .hc-rail > *{
    flex:0 0 82% !important;
    scroll-snap-align:center;
    margin:0 !important;
  }
  /* the last card should be able to reach the middle like the others */
  .hc-rail::after{content:""; flex:0 0 4px}
}

/* ---- 3. the akbar: the other dark block -------------------------------- */
.hc-akbar{position:relative; overflow:hidden; margin:var(--sec-gap,44px) 0 0; border-radius:24px;
  padding:clamp(26px,3.6vw,44px) clamp(22px,3.6vw,42px); color:#fff;
  background:linear-gradient(155deg, #10233A 0%, #133A5C 60%, #0E2A45 100%)}
.hc-akbar-in{position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,3vw,38px); align-items:start}
.hc-akbar-head h2{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(24px,3vw,33px); line-height:1.08}
.hc-akbar-head p{margin:10px 0 0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82)}
.hc-akbar-where{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:12.5px;
  padding:6px 12px; border-radius:999px; color:var(--hc-gold,#E6B657);
  background:rgba(230,182,87,.14); border:1px solid rgba(230,182,87,.32)}
.hc-akbar-where b{color:#fff}
.hc-bill{list-style:none; counter-reset:bill; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.hc-bill li{display:flex; gap:10px; align-items:flex-start; padding:13px 14px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13)}
.hc-bill li svg{flex:none; margin-top:1px; color:var(--hc-gold,#E6B657)}
.hc-bill b{display:block; font-family:var(--display); font-weight:700; font-size:13.5px; color:#fff}
.hc-bill span{font-size:12px; line-height:1.45; color:rgba(255,255,255,.72)}
@media (max-width:860px){
  .hc-akbar-in{grid-template-columns:minmax(0,1fr)}
  .hc-bill{grid-template-columns:minmax(0,1fr)}
}

/* ---- 4. tickets: two feature cards, then a list ------------------------ */
.hc-passes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .hc-passes{grid-template-columns:minmax(0,1fr)} }
.hc-pass{position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; padding:22px 22px 20px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.hc-pass.is-pick{border-color:color-mix(in srgb, var(--hc-gold,#E6B657) 55%, transparent);
  box-shadow:0 10px 30px rgba(230,182,87,.20)}
.hc-pass-flag{position:absolute; top:-11px; left:22px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; color:#6B4400;
  background:var(--hc-gold,#E6B657)}
.hc-pass h3{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(19px,2.1vw,23px); line-height:1.15}
.hc-pass-span{display:block; margin-top:4px; font-size:12.5px; color:var(--ink-3)}
.hc-pass-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:16px 0 0}
.hc-pass-price b{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(26px,3.2vw,34px); line-height:1; color:var(--ink)}
.hc-pass-price span{font-size:12.5px; color:var(--ink-3)}
.hc-pass-price s{margin-right:4px}
.hc-pass ul{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; flex:1}
.hc-pass li{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45;
  color:var(--ink-2)}
.hc-pass li svg{flex:none; margin-top:2px; color:var(--green,#2E7D5B)}

.hc-rows{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:var(--surface)}
.hc-row{display:flex; align-items:center; gap:14px; padding:14px 17px;
  border-bottom:1px solid var(--line)}
.hc-row:last-child{border-bottom:0}
.hc-row:hover{background:var(--surface-2)}
.hc-row-t{flex:1; min-width:0; font-size:13px; line-height:1.4; color:var(--ink-3)}
.hc-row-t b{display:block; font-family:var(--display); font-weight:700; font-size:14.5px;
  color:var(--ink); letter-spacing:-.01em}
.hc-row-p{flex:none; display:flex; align-items:baseline; gap:8px}
.hc-row-p b{font-family:var(--display); font-weight:800; font-size:16.5px; letter-spacing:-.02em}
.hc-row-p s{font-size:12.5px; color:var(--ink-3)}

/* ---- 5. staying: rows, not cards -------------------------------------- */
.hc-stays{display:flex; flex-direction:column; gap:12px}
.hc-stay{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(14px,2.4vw,28px);
  align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:18px 20px; box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .18s ease}
.hc-stay:hover{border-color:color-mix(in srgb, var(--afs) 34%, transparent)}
.hc-stay h3{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:17px}
.hc-stay-t p{margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); max-width:56ch}
.hc-specs{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.hc-specs span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2)}
.hc-specs svg{color:var(--afs)}
.hc-stay-p{text-align:right; white-space:nowrap}
.hc-stay-p b{display:block; font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(19px,2.2vw,24px); line-height:1.1}
.hc-stay-p s{font-size:12.5px; color:var(--ink-3)}
.hc-stay-p i{display:block; font-style:normal; margin-top:3px; font-size:11.5px; font-weight:700;
  font-family:var(--display); color:#8A5B00}
@media (max-width:640px){
  .hc-stay{grid-template-columns:minmax(0,1fr)}
  .hc-stay-p{text-align:left}
}

/* ---- 6. who may come: chips ------------------------------------------- */
.hc-chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.hc-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.hc-chip svg{color:var(--afs)}
.hc-chip b{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink)}
.hc-chip i{font-style:normal}

/* ---- 7. the quiet note ------------------------------------------------- */
.hc-note{margin:var(--sec-gap,44px) 0 0; padding:20px 22px; border-radius:18px;
  background:var(--surface-2); border:1px solid var(--line)}
.hc-note .t{display:flex; align-items:flex-start; gap:8px; font-family:var(--display);
  font-weight:700; font-size:14.5px; line-height:1.4; color:var(--ink); margin-bottom:8px}
/* Centring the icon against a heading that wraps to two lines leaves it
   stranded between them. Pin it to the first line instead. */
.hc-note .t svg{color:var(--afs); flex:none; margin-top:2px}
.hc-note p{margin:0; font-size:14px; line-height:1.62; color:var(--ink-2); max-width:74ch}

.hc-sec-tight{margin-top:calc(var(--sec-gap,44px) * .7)}

/* ---- the close: the third and last dark block ------------------------- */
.hc-close{position:relative; overflow:hidden; margin:var(--sec-gap,44px) 0 6px; border-radius:24px;
  padding:clamp(30px,4vw,52px) clamp(22px,4vw,44px); text-align:center; color:#fff;
  background:linear-gradient(150deg, #0A3557 0%, #14618F 58%, #2E86B4 100%)}
.hc-close-in{position:relative; max-width:58ch; margin:0 auto}
.hc-close h2{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(22px,2.8vw,31px); line-height:1.14}
.hc-close p{margin:11px 0 0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86)}
.hc-close-cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.hc-btn-gold{background:var(--hc-gold,#E6B657); border-color:var(--hc-gold,#E6B657); color:#553800}
.hc-btn-gold:hover{background:#F0C671; border-color:#F0C671; color:#553800}
.hc-btn-ghost{background:transparent; border-color:rgba(255,255,255,.5); color:#fff}
.hc-btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.hc-tags{display:block; margin-top:20px; font-family:var(--mono); font-size:11px;
  letter-spacing:.05em; color:rgba(255,255,255,.6)}
.hc-close-signin{font-size:13px !important; margin-top:14px !important; color:rgba(255,255,255,.75) !important}
.hc-close-signin .linkbtn{color:var(--hc-gold,#E6B657)}

/* Dropped when this block was rewritten and caught by counting markup against
   css — both are still used. */
.hc-tix-link{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px;
  color:var(--afs); text-decoration:none}
.hc-tix-link:hover{text-decoration:underline}
.hc-contact{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; font-size:13.5px; color:var(--ink-2)}
.hc-contact > span{display:inline-flex; align-items:center; gap:7px}

/* ---- the key art --------------------------------------------------------- */
.hc-art{max-width:920px; margin:14px auto 16px; border-radius:22px; overflow:hidden;
  background:var(--hc-cream,#F9F4EA);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 18px 40px rgba(7,71,117,.10)}
.hc-art img{display:block; width:100%; height:auto}
/* The heading is for anything reading the page rather than looking at it: the
   artwork carries the title visually, and drawing it twice was the point of
   using the artwork at all. */
.hc-h1-quiet{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}
@media (max-width:560px){ .hc-art{border-radius:16px; margin:10px 0 14px} }

.hc-film{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px); align-items:center; margin:0 0 20px}
/* a margin of paper around the picture, and a plate under it */
.hc-film-mount{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:10px 10px 0; box-shadow:var(--shadow-2)}
.hc-film-frame{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#0b1220}
.hc-film-frame video{width:100%; height:100%; display:block; object-fit:cover; background:#0b1220}
/* The poster is now the key art, so the cover is a scrim over it rather than a
   gradient of its own — otherwise the picture is hidden behind the thing meant
   to invite you into it. */
.hc-film-cover{position:absolute; inset:0; width:100%; border:0; cursor:pointer; padding:0;
  display:grid; place-items:center; overflow:hidden; color:#fff; background:none}
.hc-film-scrim{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(7,71,117,.30), rgba(7,71,117,.52));
  transition:background .3s ease}
.hc-film-cover:hover .hc-film-scrim{background:radial-gradient(60% 60% at 50% 50%, rgba(7,71,117,.20), rgba(7,71,117,.44))}
.hc-film-play{position:relative; width:60px; height:60px; border-radius:50%; display:grid;
  place-items:center; background:rgba(255,255,255,.96); color:var(--afs); padding-left:4px;
  box-shadow:0 10px 26px rgba(8,15,28,.32); transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.hc-film-cover:hover .hc-film-play{transform:scale(1.08)}
.hc-film-cover:focus-visible{outline:3px solid var(--afs); outline-offset:-3px}
.hc-film-plate{display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 10px; padding:11px 4px 12px}
/* the eyebrow takes the row and pushes the running time to the far end, so the
   time is not left sitting on a line of its own under the title */
.hc-film-eyebrow{flex:1 1 auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--afs)}
.hc-film-title{flex:1 1 100%; font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:16.5px; line-height:1.25; color:var(--ink)}
.hc-film-time{flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  color:var(--ink-3)}
.hc-film-quote{margin:0; padding-left:clamp(14px,1.6vw,20px); border-left:2px solid var(--line-2)}
.hc-film-mark{display:block; font-family:var(--display); font-weight:800; font-size:40px;
  line-height:.6; color:var(--afs); opacity:.34}
.hc-film-quote blockquote{margin:8px 0 0; font-family:var(--display); font-weight:700;
  letter-spacing:-.02em; font-size:clamp(16px,1.55vw,19px); line-height:1.4; color:var(--ink)}
.hc-film-quote figcaption{margin-top:10px; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; font-family:var(--display); font-weight:700; color:var(--ink-3)}
.hc-film-quote.hc-film-solo{
  margin:clamp(30px,4.5vw,52px) auto clamp(6px,1.5vw,16px);
  max-width:760px; padding:0 20px; border-left:0; text-align:center}
.hc-film-quote.hc-film-solo .hc-film-mark{
  font-size:clamp(44px,5vw,60px); line-height:.55; color:var(--hc-gold,#E6B657);
  opacity:1; margin-bottom:14px}
.hc-film-quote.hc-film-solo blockquote{
  margin:0 auto; max-width:24ch;
  font-size:clamp(21px,2.9vw,32px); line-height:1.28; letter-spacing:-.025em}
.hc-film-quote.hc-film-solo figcaption{margin-top:16px; font-size:11px; opacity:.85}

@media (max-width:760px){
  .hc-film{grid-template-columns:minmax(0,1fr); gap:16px}
  .hc-film-quote{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px}
  .hc-film-mark{display:none}
  .hc-film-quote blockquote{font-size:16px}
  .hc-film-play{width:54px; height:54px}
}
.hc-why{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:15px; margin-bottom:18px}
.hc-why p{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 11px}
.hc-also{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px}
.hc-also-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:13px}
.hc-also-grid b{display:flex; align-items:center; gap:7px; font-family:var(--display); font-size:14.5px; margin-bottom:5px}
.hc-also-grid span{font-size:13.5px; color:var(--ink-3); line-height:1.5}
.hc-pitch{display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:start;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; margin-bottom:18px}
.hc-pitch-t h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:19px; line-height:1.2; margin:4px 0 10px}
.hc-pitch-t p{font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 10px}
.hc-list{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px}
.hc-list li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.hc-list li svg{flex:0 0 auto; margin-top:2px; color:var(--afs)}
.sect-mini{display:flex; align-items:center; gap:8px; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin:20px 0 12px; padding-top:14px; border-top:1px solid var(--line)}
.sect-mini b{font-family:var(--display); letter-spacing:0; text-transform:none; font-size:14.5px; color:var(--ink)}
@media (max-width:640px){ .hc-pitch{grid-template-columns:minmax(0,1fr)} .hc-pitch-art{max-width:200px} }
.content-row{display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.content-row:last-child{border-bottom:0}
.content-row .t{flex:1; min-width:0}
.content-row .t b{display:block; font-family:var(--display); font-size:14.5px; line-height:1.3}
.content-row .t > span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.content-row .a{display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end}
.hc-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin-bottom:16px}
.hc-stat{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:11px 13px}
.hc-stat b{display:block; font-family:var(--display); font-size:22px; letter-spacing:-.02em}
.hc-stat span{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
@media (max-width:640px){ .content-row{flex-wrap:wrap} .content-row .a{width:100%; justify-content:flex-start} }
.opp-apps{margin-top:13px; padding-top:13px; border-top:1px dashed var(--line-2)}
.opp-app{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)}
.opp-app:last-child{border-bottom:0; padding-bottom:0}
.opp-app .t{flex:1; min-width:0}
.opp-app .t b{display:block; font-family:var(--display); font-size:14px}
.opp-app .t > span{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}
.opp-app .t p{margin:6px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.opp-app .a{display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:0 0 auto}
.opp-applied{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px;
  font-size:13.5px; color:var(--green); background:color-mix(in srgb,var(--green) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 26%,transparent);
  border-radius:var(--r-m); padding:9px 12px}
@media (max-width:560px){ .opp-app{flex-wrap:wrap} .opp-app .a{flex-direction:row; width:100%} }
/* nested replies */
.post-row.nested{border-top:1px solid var(--line); padding-left:calc(10px + var(--d) * 20px); position:relative}
.post-row.nested .post-side{align-self:flex-start}
.post-row.nested .nm{font-size:13px}
.post-row.nested .post-body{font-size:14.5px}
.post-row .thread-line{position:absolute; left:calc(2px + (var(--d) - 1) * 20px); top:0; bottom:0;
  width:2px; background:var(--line-2); border-radius:2px}
.post-kids{margin:12px -19px -16px 0}
.post-kids .post-row:last-child{border-bottom:0}
.replying-to{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13.5px;
  color:var(--ink-2); background:var(--afs-tint); border:1px solid color-mix(in srgb,var(--afs) 22%,transparent);
  border-radius:var(--r-m); padding:10px 13px; margin-bottom:12px}
@media (max-width:700px){
  .post-row.nested{padding-left:calc(8px + var(--d) * 11px)}
  .post-row .thread-line{left:calc(1px + (var(--d) - 1) * 11px)}
  .post-kids{margin-right:-14px}
}
.ann-mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 17px 14px; display:flex; flex-direction:column; gap:9px; min-height:212px;
  box-shadow:var(--shadow-1); transition:box-shadow .18s ease, transform .18s ease}
.ann-mini:hover{box-shadow:var(--shadow-2); transform:translateY(-2px)}
.ann-mini.pinned{border-left:3px solid var(--magenta)}
.ann-mini-top{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ann-mini h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:16.5px; line-height:1.25; margin:2px 0 0}
.ann-mini > p{font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ann-mini-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px}
.ann-open{margin-bottom:6px}
.car-fade{position:absolute; top:0; bottom:12px; width:52px; pointer-events:none; z-index:1}
.car-fade.r{right:0; background:linear-gradient(to left,var(--paper),transparent)}

/* ---------- motion: marquees, reveals, stagger ---------- */
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track > span{display:inline-flex; align-items:center; gap:10px; padding:0 22px; white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon .mq-track{animation-duration:38s}
.ribbon .mq-track > span{font-size:13.5px; color:var(--ink)}
.ribbon .mq-track b{font-family:var(--display); font-weight:800}
.ribbon .dotsep{width:5px; height:5px; border-radius:50%; background:color-mix(in srgb,var(--amber-d) 55%,transparent); display:inline-block}
.chapter-mq{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:17px 0; margin:6px 0 0}
.chapter-mq .mq-track{animation-duration:44s}
.chapter-mq .mq-track > span{font-family:var(--display); font-weight:800; font-size:clamp(17px,2vw,23px); letter-spacing:-.02em; color:var(--ink-3); transition:color .2s ease}
.chapter-mq .mq-track > span:hover{color:var(--afs)}
.chapter-mq .mq-track > span i{width:6px; height:6px; border-radius:50%; background:var(--line-2); display:inline-block; font-style:normal}

.reveal{opacity:1}
body.can-reveal .reveal{opacity:0; transform:translateY(18px)}
body.can-reveal .reveal.in{opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
/* ---- scroll-driven motion ------------------------------------------------
   --p is 0 when the element's top touches the bottom of the screen and 1 when
   it has left the top, set by wireScroll(). Everything below is a function of
   that one number, so the whole page moves off a single loop. */
#sxbar{position:fixed; top:0; left:0; right:0; height:2px; z-index:95; transform:scaleX(0);
  transform-origin:0 50%; background:var(--spectrum); will-change:transform}
body.public #sxbar{display:block}

/* the window in the hero drifts against the page, and settles as it goes */
.mock[data-sx]{--p:.5; will-change:transform}
.mock[data-sx] .mock-win{
  transform:rotate(calc(-1.2deg + (var(--p) - .5) * 1.6deg))
            translateY(calc((0.5 - var(--p)) * -26px))}
/* and the graph paper behind it moves slower, which is what makes it read as
   depth rather than as a texture stuck to the panel */
.k-hero .k-grid{--p:.5; transform:translateY(calc((0.5 - var(--p)) * 26px))}

/* sections settle into place: a touch of scale as they arrive, nothing as they
   leave — motion on the way out just makes a page feel unstable */
.k-sec[data-sx]{--p:.5;
  transform:scale(calc(0.965 + min(var(--p), .5) * 0.07));
  transform-origin:50% 100%}

/* the feature rows alternate the side they come in from */
body.can-reveal .k-rows.stagger > *{opacity:0; transform:translateY(16px) translateX(-22px)}
body.can-reveal .k-rows.stagger > *:nth-child(even){transform:translateY(16px) translateX(22px)}
body.can-reveal .k-rows.stagger.in > *{transform:none}

@media (prefers-reduced-motion:reduce){
  #sxbar{display:none}
  .mock[data-sx] .mock-win, .k-hero .k-grid, .k-sec[data-sx]{transform:none}
}

/* Children arrive one after another rather than the whole block at once. The
   index is set on the element by wireReveals, so any grid picks it up without
   the markup having to know. */
body.can-reveal .stagger > *{opacity:0; transform:translateY(14px)}
body.can-reveal .stagger.in > *{opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 80ms),
             transform .55s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 80ms)}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .reveal, body.can-reveal .reveal, body.can-reveal .reveal.in,
  body.can-reveal .stagger > *, body.can-reveal .stagger.in > *{opacity:1; transform:none; transition:none}
  .grid > .pcard{animation:none !important; opacity:1 !important}
}
.grid > .pcard{animation:rise .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.grid > .pcard:nth-child(1){animation-delay:.01s}
.grid > .pcard:nth-child(2){animation-delay:.04s}
.grid > .pcard:nth-child(3){animation-delay:.07s}
.grid > .pcard:nth-child(4){animation-delay:.10s}
.grid > .pcard:nth-child(5){animation-delay:.13s}
.grid > .pcard:nth-child(6){animation-delay:.16s}
.grid > .pcard:nth-child(n+7){animation-delay:.19s}

/* card hover reveals the actions instead of just tinting */
.pcard-foot{position:relative; overflow:hidden}
.pcard-acts{position:absolute; inset:11px 0 0; display:flex; gap:7px; align-items:center; justify-content:flex-end;
  background:var(--surface); transform:translateY(115%); transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.pcard:hover .pcard-acts, .pcard:focus-within .pcard-acts{transform:translateY(0)}
.pcard-acts .btn{padding:5px 11px; font-size:12px}
.ava svg{transition:transform .25s cubic-bezier(.2,1.1,.3,1)}
.pcard:hover .ava svg, .conv:hover .ava svg{transform:scale(1.06)}

/* counting stats */
.k-band b{font-variant-numeric:tabular-nums}

/* ---------- advanced filter ---------- */
.presets{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.preset{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line-2);
  background:var(--surface); font-size:12.5px; font-weight:700; font-family:var(--display); color:var(--ink-2); cursor:pointer;
  transition:transform .12s ease, border-color .16s ease, background .16s ease, color .16s ease}
.preset:hover{transform:translateY(-1px); border-color:var(--afs); color:var(--afs); background:var(--afs-tint)}
.preset[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.adv{padding:14px 17px 16px; display:flex; flex-direction:column; gap:15px}
.adv-lab{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.02em; color:var(--ink-2); display:flex; align-items:center; justify-content:space-between; gap:8px}
.seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:3px}
.seg button{flex:1; border:0; background:transparent; padding:6px 10px; border-radius:999px; font-size:12.5px; font-weight:700; font-family:var(--display); color:var(--ink-3); cursor:pointer; transition:background .16s ease, color .16s ease}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--afs); box-shadow:var(--shadow-1)}
.decades{display:flex; gap:6px; flex-wrap:wrap}
.dec{padding:5px 11px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--surface); font-family:var(--mono); font-size:11.5px; cursor:pointer; color:var(--ink-2); transition:transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease}
.dec:hover{transform:translateY(-1px); border-color:var(--afs)}
.dec[aria-pressed="true"]{background:var(--afs); border-color:var(--afs); color:var(--on-accent)}
.rng{display:flex; flex-direction:column; gap:7px}
.rng-row{display:flex; align-items:center; gap:10px}
.rng-row label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); width:34px; flex:none}
.rng-row input[type="range"]{flex:1; accent-color:var(--afs); height:4px}
.rng-row output{font-family:var(--mono); font-size:12px; width:38px; text-align:right; color:var(--ink)}

/* ---------- mobile ---------- */
@media (max-width:700px){
  /* one compact sticky row up top: mark + search + you */
  .topbar-in{height:58px; flex-wrap:nowrap; padding:0 13px; gap:9px}
  .brand{gap:0}
  .brand > span{display:none}
  .search{flex:1 1 auto; min-width:0; max-width:none; order:0}
  .search input{padding:9px 12px 9px 34px; font-size:16px}
  .search svg{left:11px}
  .me-btn{margin-left:0; padding:3px}
  .me-btn .me-label{display:none}

  /* navigation becomes a bottom bar, the way a phone expects */
  /* The nav in the header cannot be pinned to the viewport: the header uses
     backdrop-filter, which makes it the containing block for fixed children.
     So on mobile the header nav is hidden and #botnav (a sibling of <main>)
     is the real bottom bar. */
  .topnav{display:none}
  .botnav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:5px 6px 7px;
    justify-content:space-between; gap:0;
    padding-bottom:max(7px, env(safe-area-inset-bottom))}
  body.public .botnav{display:none}
  main#app{padding-bottom:78px}
  .botnav::-webkit-scrollbar{display:none}
  .botnav button{flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
    font-family:var(--display); font-weight:700; color:var(--ink-2);
    padding:7px 4px 5px; font-size:10px; letter-spacing:-.01em; border-radius:10px}
  .botnav button svg{display:block}
  .botnav button[aria-current="page"]{background:var(--afs-tint); color:var(--afs)}
  .botnav button[aria-current="page"]::after{display:none}
  .botnav .pip{position:absolute; top:2px; right:8px; margin:0; min-width:15px; height:15px; font-size:9px}
  body{padding-bottom:70px}
  .toasts{bottom:84px}

  /* no hover on a phone, so a hover-revealed action row is dead weight */
  .pcard-acts{display:none}

  /* horizontal scroll beats three rows of wrapped pills */
  .presets{flex:1 1 100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding:2px 0 5px}
  .presets::-webkit-scrollbar{display:none}
  .preset{flex:0 0 auto; min-height:38px}
  .sortsel{min-height:40px}
  .toolbar{gap:9px}
  .chips{gap:5px}

  /* comfortable thumbs */
  .btn{min-height:42px}
  .btn-sm{min-height:38px; padding:8px 13px}
  .car-btn{width:42px; height:42px}
  .sw{width:48px; height:27px}
  .sw::after{width:21px; height:21px}
  .sw[aria-checked="true"]::after{transform:translateX(21px)}
  .check{padding:3px 0}
  .check input{width:19px; height:19px}

  /* every remaining control gets a thumb-sized hit area, without growing visually */
  .sw{position:relative}
  .sw::before{content:""; position:absolute; inset:-9px -6px}
  .cendol{min-height:38px}
  .back{min-height:42px}
  .tag{min-height:28px}
  button.tag{min-height:36px}
  .linkbtn{position:relative; padding:8px 4px}
  .chip{padding:5px 5px 5px 12px}
  .chip button{width:26px; height:26px; display:grid; place-items:center; font-size:17px}
  .car-btn{min-height:42px}

  /* no zoom-on-focus: iOS enlarges the page for any field under 16px */
  input[type="text"], input[type="email"], input[type="search"], input[type="number"],
  input[inputmode="numeric"], select, textarea, .field input, .years input{font-size:16px}

  main{padding:0 16px 90px}
  .hero-in{padding:26px 20px}
  .pad{padding:15px}
  .sect{padding:18px 17px}
  .prof-hero{padding:0 17px 18px}
  .contact-box{padding:17px}
  .row{padding:14px 16px}
  .post{padding:17px}
  .conv{padding:13px 14px}
  .thread-head, .composer{padding:11px 14px}
  .thread-body{padding:15px 15px 6px}
  .bub{max-width:88%}
  .auth-wrap{margin-top:22px}
  .auth-card{padding:22px 19px; border-radius:20px}
  .k-panel{border-radius:22px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .exchange{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl-row{grid-template-columns:78px minmax(0,1fr); gap:11px}
  .phead{margin:20px 0 14px}
  .car-head{flex-wrap:wrap}
}
@media (max-width:420px){
  .exchange{grid-template-columns:minmax(0,1fr)}
  .botnav button{font-size:9.5px}
  .k-band{grid-template-columns:1fr 1fr}
}

/* ---------- Kabar: announcements + member posts ---------- */
.ann{position:relative; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--afs);
  border-radius:6px var(--r-l) var(--r-l) 6px; padding:20px 22px; margin-bottom:13px; box-shadow:var(--shadow-1)}
.ann.pinned{border-left-color:var(--magenta); background:linear-gradient(96deg, color-mix(in srgb,var(--magenta) 5%,var(--surface)), var(--surface) 40%)}
.ann-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px}
.official{display:inline-flex; align-items:center; gap:6px; background:var(--afs); color:var(--on-accent);
  font-family:var(--display); font-weight:800; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px}
.ann.pinned .official{background:var(--magenta)}
.ann-when{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:auto}
.ann h3{font-size:19px; letter-spacing:-.02em; line-height:1.25; margin-bottom:9px}
.ann p{margin:0 0 10px; font-size:15.5px; color:var(--ink-2); line-height:1.6; max-width:74ch}
.ann p:last-of-type{margin-bottom:0}
.ann-foot{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:15px; padding-top:13px; border-top:1px solid var(--line)}
.deadline{display:inline-flex; align-items:center; gap:7px; background:var(--amber-t); color:var(--amber-d);
  font-family:var(--display); font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:999px}
.noted{display:inline-flex; align-items:center; gap:7px; background:none; border:1.5px solid var(--line-2);
  color:var(--ink-2); font-family:var(--display); font-weight:700; font-size:12.5px; padding:6px 13px;
  border-radius:999px; cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease}
.noted:hover{border-color:var(--afs); color:var(--afs)}
.noted[aria-pressed="true"]{background:var(--afs); border-color:var(--afs); color:var(--on-accent)}

.composer-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow-1)}
.composer-row{display:flex; gap:12px; align-items:flex-start}
.composer-row textarea{flex:1; min-height:46px; resize:vertical; padding:12px 14px; border:1.5px solid var(--line-2);
  border-radius:var(--r-m); background:var(--surface-2); color:var(--ink); font:inherit; font-size:15px}
.composer-row textarea:focus{outline:none; border-color:var(--afs); background:var(--surface)}
.composer-foot{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; padding-left:58px}
.kindpick{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--surface); font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--ink-2);
  transition:transform .12s ease, border-color .16s ease, color .16s ease, background .16s ease}
.kindpick:hover{transform:translateY(-1px)}
.kindpick[aria-pressed="true"]{background:color-mix(in srgb,var(--hue) 12%,var(--surface)); border-color:var(--hue); color:var(--hue)}

.fpost{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px 20px; margin-bottom:13px; box-shadow:var(--shadow-1); transition:box-shadow .18s ease}
.fpost:hover{box-shadow:var(--shadow-2)}
.fpost-top{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.fpost-id{flex:1; min-width:0}
.fpost-id h4{font-family:var(--display); font-weight:700; font-size:15.5px; margin:0; letter-spacing:-.015em}
.fpost-id .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.kindtag{display:inline-flex; align-items:center; gap:5px; flex:none; font-family:var(--display); font-weight:800;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--hue) 13%,var(--surface)); color:var(--hue)}
.fpost-body p{margin:0 0 10px; font-size:15.5px; line-height:1.65; color:var(--ink)}
.fpost-body p:last-child{margin:0}
.pchange{display:flex; align-items:center; gap:9px; margin-top:13px; padding:11px 14px; border-radius:var(--r-m);
  background:var(--afs-tint); color:var(--afs); font-size:13.5px; font-weight:700; font-family:var(--display)}
.photo-ph{margin-top:13px; aspect-ratio:16/8; border-radius:var(--r-m); border:2px dashed var(--line-2);
  display:grid; place-items:center; color:var(--ink-3); background:var(--surface-2); gap:7px; text-align:center}
.photo-ph span{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase}
.fpost-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:15px; padding-top:13px; border-top:1px solid var(--line)}
.salut{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); font-family:var(--display); font-weight:700; font-size:12.5px; padding:6px 13px; border-radius:999px;
  cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease}
.salut:hover{border-color:var(--magenta); color:var(--magenta)}
.salut:active{transform:scale(.96)}
.salut[aria-pressed="true"]{background:var(--magenta); border-color:var(--magenta); color:#fff}
.cmts{margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.cmt{display:flex; gap:10px; align-items:flex-start}
.cmt-b{flex:1; min-width:0; background:var(--surface-2); border-radius:4px 13px 13px 13px; padding:10px 13px}
.cmt-b .who{font-family:var(--display); font-weight:700; font-size:13px}
.cmt-b .who span{font-family:var(--mono); font-weight:400; font-size:10px; color:var(--ink-3); margin-left:7px; letter-spacing:.04em}
.cmt-b p{margin:4px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.cmt-write{display:flex; gap:10px; align-items:center}
.cmt-write input{flex:1; padding:10px 13px; border:1.5px solid var(--line-2); border-radius:999px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:14.5px}
.cmt-write input:focus{outline:none; border-color:var(--afs); background:var(--surface)}
.kabar-head{display:flex; align-items:center; gap:10px; margin:26px 0 14px}
.kabar-head h2{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em}
.kabar-head .cnt{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.kabar-head .line{flex:1; height:1px; background:var(--line)}
@media (max-width:700px){
  .ann{padding:16px 17px; border-radius:5px 16px 16px 5px}
  .ann h3{font-size:17px}
  .composer-foot{padding-left:0}
  .fpost{padding:16px 17px}
}

/* ---------- account menu (everything that is "mine") ---------- */
.me-wrap{position:relative; margin-left:6px}
.me-btn{position:relative}
.me-dot{position:absolute; top:1px; right:1px; min-width:17px; height:17px; padding:0 5px; border-radius:999px;
  background:var(--magenta); color:#fff; font-family:var(--mono); font-size:9.5px; font-weight:600;
  display:grid; place-items:center; border:2px solid var(--surface)}
.me-menu{position:absolute; top:calc(100% + 10px); right:0; z-index:70; width:296px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-3); overflow:hidden;
  animation:menuIn .16s cubic-bezier(.2,.9,.3,1)}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.me-head{display:flex; gap:12px; align-items:center; padding:16px 17px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.me-head .t{min-width:0}
.me-head b{display:block; font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:-.015em}
.me-head span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.me-item{display:flex; align-items:center; gap:12px; width:100%; padding:12px 17px; background:none; border:0;
  cursor:pointer; text-align:left; font-size:14.5px; color:var(--ink); border-top:1px solid var(--line);
  transition:background .14s ease, padding-left .16s ease}
.me-item:first-of-type{border-top:0}
.me-item:hover{background:var(--afs-tint); padding-left:21px}
.me-item svg{color:var(--ink-3); flex:none}
.me-item:hover svg{color:var(--afs)}
.me-item .lbl{flex:1; min-width:0}
.me-item .cnt{font-family:var(--mono); font-size:11px; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--magenta); color:#fff; display:grid; place-items:center}
.me-item.quiet{color:var(--ink-2); font-size:13.5px}
.me-sep{height:1px; background:var(--line)}
.me-scrim{position:fixed; inset:0; z-index:65; background:transparent}
/* the builder's owner line when there is nothing to choose */
.ev-owner{display:flex; align-items:center; gap:8px; padding:11px 13px; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--line); font-size:14.5px}
.ev-owner svg{color:var(--afs); flex:none}
.ev-owner b{font-family:var(--display); font-weight:700; letter-spacing:-.01em}

/* ---------- directory sub-tabs ---------- */
.seg-nav{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; margin-bottom:18px}
.seg-nav button{border:0; background:none; padding:9px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:8px; transition:background .16s ease, color .16s ease}
.seg-nav button:hover{color:var(--ink)}
.seg-nav button[aria-current="true"]{background:var(--surface); color:var(--afs); box-shadow:var(--shadow-1)}

@media (max-width:700px){
  /* The menu becomes a sheet that clears the bottom bar. For `fixed` to mean
     "against the viewport" the header must not be a containing block, and
     backdrop-filter makes any element into one — the same trap that forced the
     nav out of the header and into #botnav. On a phone the header is a 58px
     strip with nothing behind it worth blurring, so it is simply opaque.
     The header also outranks the bottom bar here (70 over 60) so that the
     scrim, which lives inside the header, can cover the whole screen — the two
     bars never overlap, so nothing is hidden by the swap. */
  .topbar{background:var(--surface); backdrop-filter:none; z-index:70}
  .me-menu{position:fixed; top:auto; bottom:calc(78px + env(safe-area-inset-bottom));
    left:12px; right:12px; width:auto; border-radius:var(--r-xl);
    max-height:calc(100dvh - 150px); overflow-y:auto; overscroll-behavior:contain}
  .me-item{padding:15px 18px; font-size:15.5px}
  .me-item:hover{padding-left:22px}
  .seg-nav{width:100%; justify-content:stretch}
  .seg-nav button{flex:1; justify-content:center; padding:11px 10px}
}

/* the promoted-forms strip: a utility rail, not a hero section */
.prail{margin:2px 0 22px}
.prail-head{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.prail-head h2{display:flex; align-items:center; gap:7px; margin:0; font-family:var(--display);
  font-weight:800; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--afs)}
.prail-n{font-size:12px; color:var(--ink-3)}
.prail .car-nav{margin-left:auto; gap:6px}
.prail .car-btn{width:30px; height:30px; min-height:30px}
.prail .car-track{padding:2px 2px 6px}
/* The track is flex, so the card width belongs on the card. The old rule set
   grid-auto-columns, which a flex container ignores entirely — which is why
   these were sized by their own text. */
.car-track.w-ecard > .ecard{flex:0 0 clamp(244px,25vw,300px)}
.ecard{position:relative; display:flex; gap:10px; padding:12px 13px 11px; text-decoration:none;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden;
  transition:border-color .15s, transform .12s, box-shadow .15s}
/* a colour rail keyed to the kind, so the card is not a plain white box */
.ecard::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--k)}
.ecard:hover{border-color:var(--k); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(16,24,40,.18)}
.ecard-body{display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:1; min-width:0; padding-left:4px}
.ecard-head{display:flex; align-items:center; gap:7px; width:100%}
.ecard-kind{display:inline-flex; align-items:center; gap:4px; font-family:var(--display);
  font-weight:800; font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--k)}
.ecard-soon{margin-left:auto; font-family:var(--display); font-weight:800; font-size:9px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--orange); padding:2px 6px;
  border-radius:20px; background:color-mix(in srgb,var(--orange) 14%,transparent); white-space:nowrap}
/* Who is running it decides whether a form is worth opening, so it sits above
   the title in the card's own colour rather than lost among the grey chips. */
.ecard-org{display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font-family:var(--display); font-weight:800; font-size:10.5px; letter-spacing:.02em;
  color:var(--k); background:color-mix(in srgb,var(--k) 11%,transparent);
  border-radius:20px; padding:2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ecard-org svg{flex:0 0 auto; opacity:.85}
.ecard-body > b{font-family:var(--display); font-weight:800; font-size:13.5px; line-height:1.25;
  color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ecard-chips{display:flex; flex-wrap:wrap; gap:4px}
.ecard-chips span{display:inline-flex; align-items:center; gap:4px; font-size:10.5px;
  color:var(--ink-2); background:var(--surface-2); border-radius:20px; padding:2px 7px; white-space:nowrap}
.ecard-chips svg{color:var(--ink-3)}
.ecard .ecard-cta{margin-top:auto; padding-top:7px; display:inline-flex; align-items:center;
  gap:4px; font-family:var(--display); font-weight:800; font-size:11.5px; color:var(--k)}
/* the badge on offer, because that is the reason to collect one */
.ecard-badge{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding-top:2px}
.ecard-badge > span{font-family:var(--display); font-weight:800; font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* ---- the register table, made readable ----
   The headers are whole questions ("Angkatan, or the year you got involved"),
   so left alone they set the column width and the table runs off the screen. */
/* A header like "How are you connected to AFS?" wraps to three lines while
   "Name" is one, so these are centred against each other rather than sitting
   on a shared baseline. */
.hc-table th{font-size:9.5px; letter-spacing:.08em; max-width:150px; white-space:normal; line-height:1.3;
  vertical-align:middle; padding-top:9px; padding-bottom:9px}
.hc-table td{vertical-align:middle}
.hc-table .cell{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-width:190px; line-height:1.4}
.hc-table .dash{color:var(--ink-3)}
.hc-table tr.clickable{cursor:pointer}
.hc-table tr.clickable:hover{background:var(--surface-2)}
.hc-table .rowgo{color:var(--line-2); width:26px; text-align:right}
.hc-table tr.clickable:hover .rowgo{color:var(--afs)}
/* the first column stays put while the answers scroll under it */
.hc-table thead th:first-child, .hc-table tbody td:first-child{position:sticky; left:0; z-index:1;
  background:var(--surface); box-shadow:1px 0 0 var(--line)}
.hc-table tr.clickable:hover td:first-child{background:var(--surface-2)}

/* The name cell used to carry the name, "Pulang member" and the ticket code
   stacked on top of each other. All three are their own column now. */
.hc-table .who-name{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink);
  display:block; min-width:104px}
.ismember{display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--green);
  background:color-mix(in srgb,var(--green) 13%,transparent); padding:2px 6px; border-radius:20px;
  white-space:nowrap}
.hc-table .tkt-link{font-size:11.5px; letter-spacing:.05em; white-space:nowrap}
/* filtering the answers by what people actually picked */
.ev-filters{display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end; margin:12px 0 4px;
  padding-top:12px; border-top:1px solid var(--line)}
.evf{display:flex; flex-direction:column; gap:4px; min-width:150px}
.evf > span{font-family:var(--display); font-weight:800; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); max-width:190px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.evf select{padding:7px 10px; font:inherit; font-size:13px; border:1.5px solid var(--line-2);
  border-radius:var(--r-s); background:var(--surface); color:var(--ink)}
.evf.on > span{color:var(--afs)}
.evf.on select{border-color:var(--afs); background:var(--afs-tint)}
.evf-count{font-size:12.5px; color:var(--ink-3); margin:10px 0 0}
.evf-count b{color:var(--ink)}
/* the stat strip above a form's answers */
.ev-strip{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.ev-stat{flex:1; min-width:110px; display:flex; flex-direction:column; gap:2px;
  padding:13px 15px; border-radius:14px; background:var(--surface); border:1px solid var(--line)}
.ev-stat b{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
.ev-stat span{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.ev-stat-badge{flex-direction:row; align-items:center; gap:11px; flex:0 0 auto; min-width:0}
.ev-stat-badge span{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:700;
  color:var(--ink-2); font-family:var(--display); max-width:150px}
.ev-nobadge{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-3)}
/* ---- the badge editor in the builder ---- */
.badge-edit{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:14px;
  padding:16px; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--line)}
.badge-prev{display:flex; flex-direction:column; align-items:center; gap:9px; width:120px; text-align:center}
.badge-prev > span{font-family:var(--display); font-weight:700; font-size:11.5px; color:var(--ink-2); line-height:1.35}
.badge-opts{flex:1; min-width:230px}
.hue-row{display:flex; gap:7px; flex-wrap:wrap}
.hue{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  background:var(--h); box-shadow:0 0 0 1px var(--line-2) inset}
.hue.on{border-color:var(--ink); box-shadow:0 0 0 2px var(--surface) inset}
.sym{width:32px; height:32px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.sym:hover{border-color:var(--afs); color:var(--afs)}
.sym.on{background:var(--afs); border-color:var(--afs); color:#fff}
.badge-up{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 6px}

/* the badge shelf on a profile */
.bdg-row{display:flex; flex-wrap:wrap; gap:16px 10px; margin-top:2px}
/* the profile photo is a control now: look at it, or replace it if it is yours */
.prof-photo{position:relative; border:0; padding:0; background:none; cursor:pointer; line-height:0;
  border-radius:50%; display:block}
.prof-photo-hint{position:absolute; right:2px; bottom:2px; width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
  display:grid; place-items:center; opacity:0; transform:scale(.86);
  transition:opacity .15s, transform .15s; box-shadow:0 3px 10px rgba(16,24,40,.16)}
.prof-photo:hover .prof-photo-hint, .prof-photo:focus-visible .prof-photo-hint{opacity:1; transform:scale(1)}
.prof-photo.mine:hover .prof-photo-hint{color:var(--afs); border-color:var(--afs)}
/* the lightbox */
.lightbox{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(8,15,28,.82); backdrop-filter:blur(3px); padding:24px;
  animation:lbIn .18s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .lightbox{animation:none} }
.lightbox-in{display:flex; flex-direction:column; align-items:center; gap:16px; max-width:min(560px,92vw)}
.lightbox-img{width:min(420px,80vw); height:min(420px,80vw); border-radius:50%; overflow:hidden;
  background:var(--surface); box-shadow:0 24px 60px -12px rgba(0,0,0,.6); cursor:zoom-in}
.lightbox-img.zoomed{cursor:zoom-out; border-radius:20px}
.lightbox-img img, .lightbox-img > span{width:100%; height:100%; object-fit:cover; display:block}
.lightbox-img.zoomed img{object-fit:contain; background:#0b1524}
.lightbox-name{font-family:var(--display); font-weight:800; font-size:17px; color:#fff; text-align:center}
.lightbox-acts{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}
.lightbox-close{position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center; cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
/* ---- the medallion ---- */
.bdg-art{width:var(--sz,56px); height:var(--sz,56px); border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; position:relative;
  background:radial-gradient(circle at 32% 26%,
    color-mix(in srgb,var(--hue) 55%,#fff) 0%, var(--hue) 62%,
    color-mix(in srgb,var(--hue) 78%,#000) 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 22%,transparent),
             0 5px 12px -4px color-mix(in srgb,var(--hue) 65%,transparent)}
/* the inner hairline that makes it read as a seal rather than a dot */
.bdg-art::after{content:""; position:absolute; inset:11%; border-radius:50%;
  border:1px dashed rgba(255,255,255,.45)}
.bdg-art.has-art{background:var(--surface); box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 26%,transparent),
             0 5px 12px -4px rgba(16,24,40,.28); overflow:hidden}
.bdg-art.has-art::after{display:none}
.bdg-art img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.bdg{display:flex; flex-direction:column; align-items:center; gap:7px; width:84px; text-align:center}
.bdg-l{font-family:var(--display); font-weight:700; font-size:11px; line-height:1.3; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* the LinkedIn import, folded away until wanted */
.lin-sect details{margin:0}
.lin-sect summary{display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--ink-2)}
.lin-sect summary::-webkit-details-marker{display:none}
.lin-sect summary:hover{color:var(--afs)}
.lin-sect summary .chev{margin-left:auto; color:var(--ink-3); transition:transform .18s}
.lin-sect details[open] summary .chev{transform:rotate(180deg)}
.lin-sect p{font-size:13.5px; color:var(--ink-3); margin:12px 0}
/* the arrival toggle in the register */
.att{border:1px solid var(--line-2); background:var(--surface); color:var(--ink-3); cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px}
.att:hover{border-color:var(--afs); color:var(--afs)}
.att.on{background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green-d,var(--green));
  border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.tkt-link{display:block; font-size:11px; letter-spacing:.06em; color:var(--ink-3); text-decoration:none}
.tkt-link:hover{color:var(--afs); text-decoration:underline}
/* ---- the ticket and the door ---- */
.tkt{text-align:center}
.tkt h1{text-align:center}
.tkt .tags{justify-content:center}
.tkt-holder{display:flex; flex-direction:column; gap:2px; padding:13px 0 16px;
  border-top:1px solid var(--line); border-bottom:1px dashed var(--line-2); margin-bottom:20px}
.tkt-holder .d{font-family:var(--display); font-weight:800; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.tkt-holder b{font-family:var(--display); font-weight:800; font-size:21px; color:var(--ink)}
/* the quiet zone is part of the code, so the white stays white in both themes */
.tkt-qr{display:inline-block; padding:12px; background:#fff; border-radius:14px;
  border:1px solid var(--line); line-height:0}
.tkt-code{font-family:var(--mono); font-size:19px; letter-spacing:.22em; color:var(--ink-2);
  margin:13px 0 0; user-select:all}
.tkt-org{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); text-align:left}
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media(max-width:820px){ .two-up{grid-template-columns:minmax(0,1fr)} }
.scan-box{position:relative; border-radius:14px; overflow:hidden; background:var(--ink);
  aspect-ratio:4/3; display:grid; place-items:center}
.scan-box video{width:100%; height:100%; object-fit:cover; display:block}
.scan-frame{position:absolute; inset:18% 22%; border:3px solid rgba(255,255,255,.85);
  border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.28)}

/* ---- the scanner, filling the screen -------------------------------------
   A viewfinder inside a card is fine on a desk and useless at a door, where the
   phone is at arm's length and the ticket is somebody else's. Below 900px the
   camera takes the whole screen and everything else floats on top of it. */
@media (max-width:900px){
  body.scanning{overflow:hidden}
  body.scanning .topbar, body.scanning .botnav{display:none}
  body.scanning main#app{padding:0}
  .scan-stage{position:fixed; inset:0; z-index:80; background:#000}
  .scan-stage .scan-box{position:absolute; inset:0; border-radius:0; aspect-ratio:auto; height:100%}
  .scan-stage .scan-frame{inset:calc(24% + env(safe-area-inset-top)) 12%; border-radius:18px;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.42)}
  .scan-top{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center;
    gap:12px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px; color:#fff;
    background:linear-gradient(rgba(0,0,0,.55), transparent)}
  .scan-top .t{flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:15px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .scan-top .n{font-family:var(--mono); font-size:12px; opacity:.85; flex:none}
  .scan-x{flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center}
  .scan-under{position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    background:linear-gradient(transparent, rgba(0,0,0,.72) 38%)}
  .scan-under .hint{color:rgba(255,255,255,.9); display:block; text-align:center; margin-bottom:12px}
  .scan-under .scan-manual input{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff}
  .scan-under .scan-manual input::placeholder{color:rgba(255,255,255,.5)}
  /* the two cards underneath belong to the desk, not the door */
  .scan-deskonly{display:none}
}
/* on a desk there is room for both, so the viewfinder just gets taller */
@media (min-width:901px){
  .scan-top, .scan-under{display:none}
  .scan-box{aspect-ratio:16/11}
}
.scan-manual{display:flex; gap:9px}
.scan-manual input{flex:1; padding:11px 13px; font-family:var(--mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase; border:1.5px solid var(--line-2);
  border-radius:var(--r-s); background:var(--surface); color:var(--ink)}
.scan-manual input:focus{outline:none; border-color:var(--afs)}
.scan-log{display:flex; flex-direction:column; gap:7px; max-height:420px; overflow-y:auto}
/* ---- the landing page on a phone ----------------------------------------
   These live down here on purpose. They were first written up beside the hero's
   own phone rules, which sit earlier in the file than .hc-banner and .mock-win —
   so at equal specificity the base rules won and none of it did anything. A
   media query changes when a rule applies, not how strongly. */
@media (max-width:700px){
  /* the banner wrapped to three lines and put its button on a row of its own,
     which cost 173px of a phone screen before the page had said anything */
  .hc-banner{gap:9px 12px; padding:11px 14px}
  .hc-banner-t{min-width:0; flex:1 1 auto}
  .hc-banner-t b{font-size:13px; line-height:1.28}
  .hc-banner-t > span{font-size:11px; margin-top:2px; line-height:1.35}
  .hc-banner .btn{flex:none; padding:7px 13px; font-size:12.5px; min-height:32px}

  /* the window keeps its shape but stops taking a screen of its own */
  .mock-win{transform:none}
  .mock-search{padding:8px 11px; font-size:11.5px}
  .mock-body{padding:9px; gap:7px}
  .mock-row{padding:8px 9px; gap:9px}
  .mock-ava{width:32px; height:32px}
  .mock-row .t b{font-size:12.5px}
  .mock-row .t span{font-size:11px}
  .mock-bub{font-size:11.5px; padding:8px 11px}
  /* one result is enough to show what a result looks like */
  .mock-row:nth-of-type(2){display:none}

  /* label and marquee on one line rather than stacked */
  .k-strip{flex-direction:row; align-items:center; gap:12px; padding:9px 20px; margin:0 -20px}
  .k-strip-l{font-size:9.5px; letter-spacing:.1em}
}

/* ---- the confirmation, as a page ----------------------------------------
   Parked, not unmounted: display:none keeps the <video> in the document with
   its stream attached, so the scan loop's own teardown check still finds it and
   carrying on does not ask for the camera again. */
.parked{display:none}
.scanres{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; min-height:min(78vh, 640px); padding:8px 0 24px}
.scanres-card{display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%; max-width:440px; padding:32px 24px 28px;
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface);
  box-shadow:var(--shadow-2)}
.scanres-mark{width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:10px; border:2px solid currentColor; background:var(--surface)}
.scanres-status{font-family:var(--display); font-weight:800; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase}
.scanres-name{font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(28px,6.4vw,40px); line-height:1.08; margin:4px 0 0; color:var(--ink)}
.scanres-name.quiet{color:var(--ink-3); font-size:clamp(22px,5vw,30px)}
.scanres-meta{margin:6px 0 0; font-size:15px; color:var(--ink-2)}
.scanres-code{margin-top:12px; padding:5px 12px; border-radius:999px; background:var(--surface-2);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-3)}
/* What they wrote on the form. Label above value, because the labels are the
   committee's own wording and can be long ("Angkatan, or the year you got
   involved"), and a two-column table would set them in a ribbon. */
.scanres-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px 16px;
  width:100%; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line); text-align:left}
.scanres-facts dt{font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
.scanres-facts dd{margin:3px 0 0; font-size:15px; line-height:1.35; color:var(--ink); overflow-wrap:anywhere}
.scanres-acts{display:flex; flex-direction:column; gap:9px; width:100%; max-width:440px}
.scanres-acts .btn{width:100%; justify-content:center}
.scanres-tally{font-size:12.5px; color:var(--ink-3)}
.scanres.ok  .scanres-mark, .scanres.ok  .scanres-status{color:var(--green)}
.scanres.bad .scanres-mark, .scanres.bad .scanres-status{color:var(--pink)}
.scanres.dup .scanres-mark, .scanres.dup .scanres-status{color:var(--ink-3)}
.scanres.ok  .scanres-card{border-color:color-mix(in srgb,var(--green) 34%,transparent)}
.scanres.bad .scanres-card{border-color:color-mix(in srgb,var(--pink) 34%,transparent)}
.scan-manual{display:flex; gap:9px}
.scan-manual input{flex:1; padding:11px 13px; font-family:var(--mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase; border:1.5px solid var(--line-2);
  border-radius:var(--r-s); background:var(--surface); color:var(--ink)}
.scan-manual input:focus{outline:none; border-color:var(--afs)}
.scan-log{display:flex; flex-direction:column; gap:7px; max-height:420px; overflow-y:auto}
.scan-hit{display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line)}
.scan-hit b{display:block; font-family:var(--display); font-weight:700; font-size:14px}
.scan-hit .d{font-size:12.5px; color:var(--ink-3)}
.scan-hit.new{background:color-mix(in srgb,var(--green) 12%,transparent); border-color:color-mix(in srgb,var(--green) 34%,transparent)}
.scan-hit.new svg{color:var(--green)}
.scan-hit.dup svg{color:var(--ink-3)}
.scan-hit.bad{background:color-mix(in srgb,var(--pink) 11%,transparent); border-color:color-mix(in srgb,var(--pink) 32%,transparent)}
.scan-hit.bad svg{color:var(--pink)}

/* ---- buying a reunion ticket ---- */
.tkt-buy{text-align:left; margin-top:4px}
.pay-pick{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:640px){ .pay-pick{grid-template-columns:minmax(0,1fr)} }
.pay-opt{display:flex; flex-direction:column; gap:7px; text-align:left; cursor:pointer; font:inherit;
  padding:17px 16px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-m);
  background:var(--surface); transition:border-color .15s, transform .12s, box-shadow .15s}
.pay-opt:hover{border-color:var(--afs); transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,24,40,.07)}
.pay-ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--afs-tint); color:var(--afs)}
.pay-opt b{font-family:var(--display); font-weight:800; font-size:16.5px; color:var(--ink)}
.pay-opt > span:not(.pay-ic):not(.pay-go){font-size:13px; color:var(--ink-3); line-height:1.55}
.pay-go{display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font-family:var(--display); font-weight:800; font-size:12.5px; color:var(--afs)}
/* one ticket tier */
.tix-list{display:flex; flex-direction:column; gap:8px; margin-bottom:4px}
.tix{display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--r-m);
  border:1.5px solid var(--line-2); background:var(--surface); cursor:default}
label.tix{cursor:pointer}
.tix.on{border-color:var(--afs); background:var(--afs-tint)}
.tix-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tix-t b{font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink)}
.tix-t span{font-size:12px; color:var(--ink-3); line-height:1.45}
.tix-p{flex:0 0 auto; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums}
.tix-p .was{display:block; font-size:11px; color:var(--ink-3); text-decoration:line-through; font-weight:400}
.tix-q{flex:0 0 auto; display:flex; align-items:center; gap:4px}
.tix-q button{width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:15px; line-height:1}
.tix-q button:hover:not(:disabled){border-color:var(--afs); color:var(--afs)}
.tix-q button:disabled{opacity:.35; cursor:default}
.tix-q b{min-width:20px; text-align:center; font-family:var(--mono); font-size:14px}
.tix-r input{width:auto}
.tix-total{display:flex; align-items:baseline; gap:12px; margin:20px 0 14px; padding:15px 16px;
  border-radius:var(--r-m); background:var(--ink); color:#fff}
.tix-total span{flex:1; font-family:var(--display); font-weight:700; font-size:14px; opacity:.85}
.tix-total b{font-family:var(--mono); font-size:23px; font-variant-numeric:tabular-nums}
.tix-summary{margin-top:18px; padding-top:13px; border-top:1px solid var(--line)}
.tix-summary div{display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:12.5px; color:var(--ink-3)}
.tix-summary b{font-family:var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums}
/* the donation ask */
.donate{padding:15px 16px; border-radius:var(--r-m); border:1.5px solid color-mix(in srgb,var(--pink) 30%,transparent);
  background:color-mix(in srgb,var(--pink) 7%,transparent)}
.donate p{font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 12px}
.donate-row{display:flex; align-items:center; gap:11px; margin-bottom:11px}
.donate-row button{width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:17px; line-height:1}
.donate-row button:hover:not(:disabled){border-color:var(--pink); color:var(--pink)}
.donate-row button:disabled{opacity:.35; cursor:default}
.donate-amt{font-family:var(--mono); font-size:20px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums}
.donate-quick{display:flex; gap:6px; flex-wrap:wrap}
.donate-quick button{border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:20px; padding:5px 11px; font:inherit; font-size:12px; font-weight:700; cursor:pointer}
.donate-quick button:hover{border-color:var(--pink); color:var(--pink)}
.donate-quick button.on{background:var(--pink); border-color:var(--pink); color:#fff}
.donate-thanks{display:flex; align-items:center; gap:7px; margin:11px 0 0 !important;
  font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--pink)}
/* the account details */
.bank{padding:16px; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--line)}
.bank-row{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px}
.bank-row:first-of-type{border-top:0}
.bank-row dt{color:var(--ink-3); margin:0}
.bank-row dd{margin:0; font-weight:700; text-align:right; color:var(--ink)}
.bank-row dd.big{font-size:16px; letter-spacing:.03em; font-variant-numeric:tabular-nums}
.wa-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.wa-row .btn{flex:1; min-width:150px}

/* The directory hero, brought down to size. It was set at landing-page scale —
   a 42px headline and a three-line paragraph above the thing people actually
   came for, which is the search and the filters. Last block wins, so these
   override the earlier hero rules deliberately. */
.hero{border-radius:20px; margin:12px 0 16px}
.hero-in{padding:20px 22px 18px}
.hero-eyebrow{font-size:10px; letter-spacing:.14em; gap:7px}
.hero h1{font-size:clamp(20px,2.1vw,27px); line-height:1.12; letter-spacing:-.03em;
  margin:8px 0 7px; max-width:30ch}
.hero p{font-size:13.5px; line-height:1.55; max-width:74ch}
.hero-stats{margin-top:14px; gap:7px}
.hstat{padding:5px 11px 5px 8px; gap:7px}
.hstat b{font-size:13px}
.hstat span{font-size:11.5px}
/* the directory's own hero: one line of type, then the counts */
.hero-tight .hero-in{padding:15px 20px 16px}
.hero-tight h1{display:flex; align-items:center; gap:10px; margin:0 0 11px; max-width:none;
  font-size:clamp(17px,1.85vw,24px); line-height:1.2}
.hero-tight h1 svg{flex:0 0 auto; color:var(--afs)}
.hero-tight .hero-stats{margin-top:0}
@media(max-width:620px){
  .hero-in{padding:16px 16px 15px}
  .hero h1{font-size:20px; max-width:none}
  .hero p{font-size:13px}
}

/* ---- the first-visit tour ---- */
.tour{position:fixed; inset:0; z-index:130; pointer-events:none}
/* the hole is a transparent box with an enormous shadow, which darkens
   everything except the control being explained */
.tour-hole{position:absolute; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,15,28,.72), 0 0 0 2px var(--afs) inset;
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease}
@media (prefers-reduced-motion:reduce){ .tour-hole{transition:none} }
.tour-card{position:absolute; width:min(340px,calc(100vw - 24px)); pointer-events:auto;
  background:var(--surface); border-radius:16px; padding:16px 17px 14px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.5); border:1px solid var(--line)}
.tour-n{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:7px}
.tour-card h3{margin:0 0 6px; font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:-.02em; color:var(--ink)}
.tour-card p{margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.tour-acts{display:flex; gap:8px; align-items:center}

/* ---- the badge cabinet ---- */
.bdg-head{display:flex; align-items:center; gap:7px; margin:17px 0 11px}
.bdg-n{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:var(--surface-2); border-radius:20px; padding:1px 8px; letter-spacing:0}
.bdg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.bdg-card{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:20px 14px 16px; text-decoration:none; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); transition:border-color .15s, transform .12s, box-shadow .15s}
.bdg-card:hover{border-color:var(--afs); transform:translateY(-3px);
  box-shadow:0 12px 26px -10px rgba(16,24,40,.2)}
.bdg-card b{font-family:var(--display); font-weight:800; font-size:13.5px; line-height:1.3; color:var(--ink)}
.bdg-card span{font-size:11.5px; color:var(--ink-3)}

/* one copy control per field, because m-banking asks for them separately */
.bank-row.copyable{align-items:center}
.bank-row .cpy{flex:0 0 auto; margin-left:10px; display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:20px}
.bank-row .cpy:hover{border-color:var(--afs); color:var(--afs)}
.bank-row .cpy:active{transform:scale(.96)}
.done-mark-pay{background:var(--afs-tint); color:var(--afs)}

/* what a reunion ticket still owes */
.tkt-owed{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:14px;
  padding:11px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line)}
.tkt-owed span{font-family:var(--display); font-weight:800; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.tkt-owed b{font-family:var(--mono); font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums}
.tkt-owed .mono{font-size:11px; color:var(--ink-3); letter-spacing:.05em; text-transform:none}

.swatchrow{display:flex;gap:8px;flex-wrap:wrap}
.bswatch{width:34px;height:34px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.bswatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.sec-h{font-size:15px;margin:0 0 4px}
.sec-sub{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.card.pad{padding:18px;margin-bottom:14px}
.row-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 40px}