/* Team Laiq Khan. Hand-built stylesheet.
   Palette: electric red, electric blue, electric green, plus ink and paper to hold them up. */

@font-face { font-family: "Archivo"; src: url(/fonts/archivo-wdth.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plexmono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url(/fonts/reenie.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #05071a;
  --ink-2: #0a1030;
  --ink-3: #141c4a;
  --paper: #f3f5ff;
  --paper-2: #e4e9ff;
  --white: #fff;
  --blue: #0a3bff;
  --royal: #0a1fa8;
  --sky: #5b82ff;
  --red: #e8102f;
  --red-d: #d1001f;
  --green: #00f57a;
  --green-d: #00b85c;
  --g-blue: linear-gradient(135deg, #0a3bff 0%, #0a1fa8 100%);
  --g-red: linear-gradient(135deg, #ff1f3d 0%, #b0001f 100%);
  --g-green: linear-gradient(135deg, #00f57a 0%, #00b85c 100%);
  --g-tri: linear-gradient(90deg, #ff1f3d, #00f57a 50%, #0a3bff);
  --hard: 5px 5px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
  --f-disp: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-hand: "Reenie Beanie", "Segoe Print", cursive;
  --gut: clamp(18px, 4vw, 48px);
  --max: 1280px;
  --nav-h: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::after { /* paper grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .section--ink :focus-visible, .nav :focus-visible, .foot :focus-visible { outline-color: var(--green); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--green); color: var(--ink); padding: 10px 16px; z-index: 200; font-weight: 700; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; background: var(--paper); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--white); }
.section--blue { background: var(--g-blue); color: var(--white); }
.section--paper2 { background: var(--paper-2); }
.section--red { background: var(--g-red); color: var(--white); }
.section--green { background: var(--g-green); color: var(--ink); }

/* ---------- Type ---------- */
.disp { font-family: var(--f-disp); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.025em; line-height: .88; }
.cond { font-family: var(--f-disp); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; line-height: .9; }
.h2 { font-family: var(--f-disp); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(48px, 8vw, 112px); line-height: .88; letter-spacing: -.005em; }
.h3 { font-family: var(--f-disp); font-weight: 800; font-stretch: 100%; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; max-width: 38em; }
.lbl { font: 500 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.kicker i { width: 26px; height: 11px; border-radius: 99px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); flex: none; }
.kicker--green i { background: linear-gradient(90deg, var(--green) 50%, var(--blue) 50%); }
.note { font-family: var(--f-hand); font-size: clamp(24px, 2.4vw, 32px); line-height: .95; color: var(--red-d); transform: rotate(-2deg); display: inline-block; }
.on-ink .note, .section--ink .note, .hero .note, .casefile .note, .nf .note { color: var(--green); }
.section--blue .note, .section--red .note { color: var(--white); }
.section--green .note { color: var(--ink); }
.mono { font-family: var(--f-mono); }
.dim { opacity: .7; }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 64px); position: relative; }
.sec-head .kicker { margin-bottom: 4px; }
.sec-no { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; }
.under { position: relative; display: inline-block; white-space: nowrap; }
.under svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .22em; overflow: visible; }
.under path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1s .3s cubic-bezier(.6, 0, .2, 1); }
.in .under path, .under.in path { stroke-dashoffset: 0; }

/* ---------- Buttons, tags ---------- */
.btn {
  --bg: var(--ink); --fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .9em 1.7em; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--bg); color: var(--fg); text-decoration: none; font: 700 15px/1 var(--f-body); letter-spacing: .01em;
  box-shadow: var(--hard-sm); transition: transform .14s, box-shadow .14s; white-space: nowrap; position: relative;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn--red { --bg: var(--red); --fg: var(--white); }
.btn--blue { --bg: var(--blue); --fg: var(--white); }
.btn--green { --bg: var(--green); --fg: var(--ink); }
.btn--white { --bg: var(--white); --fg: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); }
.btn--line { --bg: transparent; --fg: var(--white); border-color: var(--white); box-shadow: 3px 3px 0 var(--green); }
.btn--line:hover { box-shadow: 5px 5px 0 var(--green); }
.btn--sm { padding: .7em 1.25em; font-size: 14px; }
.btn--lg { padding: 1.1em 2.1em; font-size: 17px; }
.section--ink .btn, .on-ink .btn { border-color: var(--green); box-shadow: 3px 3px 0 var(--green); }
.section--ink .btn:hover, .on-ink .btn:hover { box-shadow: 5px 5px 0 var(--green); }
.section--ink .btn--green, .on-ink .btn--green { border-color: var(--ink); box-shadow: 3px 3px 0 var(--white); }
.arr { width: 1.4em; height: 1em; flex: none; }
.tagpill { display: inline-block; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: var(--ink); color: var(--white); }
.tagpill--red { background: var(--red); } .tagpill--blue { background: var(--blue); } .tagpill--green { background: var(--green); color: var(--ink); }
.sticker { display: inline-block; padding: 8px 14px; border: 2px solid var(--ink); background: var(--green); color: var(--ink); font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); box-shadow: var(--hard-sm); }
.sticker--red { background: var(--red); color: var(--white); }
.sticker--blue { background: var(--blue); color: var(--white); }
.cap { display: inline-block; width: 70px; height: 28px; border-radius: 99px; background: linear-gradient(90deg, var(--red) 50%, var(--white) 50%); border: 2px solid var(--ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .35); }
.cap--b { background: linear-gradient(90deg, var(--blue) 50%, var(--white) 50%); }
.cap--g { background: linear-gradient(90deg, var(--green) 50%, var(--blue) 50%); }
.cap--r2 { background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.capdiv { display: flex; gap: 10px; align-items: center; margin-block: 28px; }
.capdiv .cap:nth-child(1) { transform: rotate(-8deg); } .capdiv .cap:nth-child(2) { transform: rotate(5deg) translateY(4px); } .capdiv .cap:nth-child(3) { transform: rotate(-3deg); }
.tape { position: absolute; width: 96px; height: 28px; background: rgba(0, 245, 122, .75); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 50%, 100% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%, 3% 50%); z-index: 3; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 80; background: var(--ink); color: var(--white); border-bottom: 2px solid var(--ink); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--g-tri); }
.nav__in { display: flex; align-items: center; gap: 22px; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 50%; }
.brand__t { font: 800 17px/1 var(--f-disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
.brand__t b { color: #ffc642; font-weight: 800; }
.nav__links { display: none; gap: clamp(12px, 1.6vw, 24px); }
.nav__links a { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 8px 2px; position: relative; white-space: nowrap; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: none; border-color: var(--white); box-shadow: 3px 3px 0 var(--green); }
.burger { width: 46px; height: 46px; border: 2px solid var(--white); border-radius: 50%; background: none; display: grid; place-content: center; gap: 6px; padding: 0; }
.burger i { display: block; width: 20px; height: 2px; background: var(--white); transition: transform .2s; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet-menu { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--ink); z-index: 79; padding: 24px var(--gut) 48px; overflow-y: auto; }
.sheet-menu nav { display: grid; }
.sheet-menu a { font: 900 clamp(34px, 9vw, 56px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; color: var(--white); text-decoration: none; padding: 14px 0; border-bottom: 1px dashed rgba(255, 255, 255, .25); letter-spacing: -.02em; opacity: 0; transform: translateY(16px); animation: rise .45s forwards; animation-delay: calc(var(--i) * 40ms); }
.sheet-menu a:nth-child(3n+1):hover { color: var(--red); } .sheet-menu a:nth-child(3n+2):hover { color: var(--green); } .sheet-menu a:nth-child(3n):hover { color: var(--sky); }
@keyframes rise { to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }
@media (min-width: 1180px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .burger { display: none; } .brand { margin-right: 0; } .nav__links { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 82% 40%, rgba(10, 59, 255, .55), transparent 70%), radial-gradient(40% 40% at 8% 100%, rgba(0, 245, 122, .14), transparent 70%), radial-gradient(30% 30% at 95% 95%, rgba(255, 31, 61, .2), transparent 70%); }
.hero__grid { display: grid; gap: 36px; padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 110px); align-items: center; }
.hero__h { font-family: var(--f-disp); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(54px, 19vw, 176px); line-height: .84; letter-spacing: -.035em; margin: 22px 0 28px; }
.hero__h span { display: block; }
.hero__h .o { color: transparent; -webkit-text-stroke: 2px var(--white); }
.hero__h .u { color: var(--green); position: relative; }
.hero__h .u svg { position: absolute; left: 0; bottom: -.06em; width: 78%; height: .2em; overflow: visible; }
.hero__h .u path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.2s .8s forwards cubic-bezier(.6, 0, .2, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__lead { font-size: clamp(18px, 1.7vw, 21px); max-width: 30em; color: rgba(255, 255, 255, .86); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__note { margin-top: 26px; display: block; max-width: 20em; }
.hero__art { position: relative; display: grid; place-items: center; min-height: 300px; }
.medal { position: relative; width: min(100%, 460px); aspect-ratio: 1; }
.medal__logo { position: absolute; inset: 17%; width: 66%; height: 66%; border-radius: 50%; box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--green), 10px 12px 0 7px var(--blue); transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.medal:hover .medal__logo { transform: rotate(3deg) scale(1.03); }
.medal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.medal__ring text { font: 600 19px var(--f-mono); letter-spacing: .32em; fill: var(--white); text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
.floaty { position: absolute; z-index: 2; will-change: transform; transition: transform .25s ease-out; }
.floaty .cap { width: 92px; height: 38px; }
.floaty--1 { top: 2%; right: 4%; --r: 24deg; } .floaty--2 { bottom: 10%; left: -2%; --r: -18deg; } .floaty--3 { top: 46%; right: -3%; --r: 70deg; }
.floaty .cap { transform: rotate(var(--r, 0deg)); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.3fr .9fr; } .hero__h { font-size: clamp(80px, 12vw, 176px); } }

.ticker { background: var(--green); color: var(--ink); border-block: 3px solid var(--ink); overflow: hidden; white-space: nowrap; transform: rotate(-1deg); margin-block: -14px; position: relative; z-index: 5; }
.ticker__in { display: inline-flex; animation: marq 32s linear infinite; padding: 16px 0; }
.ticker span { font: 900 clamp(22px, 3vw, 34px)/1 var(--f-disp); font-stretch: 62%; text-transform: uppercase; padding-inline: 20px; display: inline-flex; align-items: center; gap: 40px; }
.ticker span::after { content: ""; width: 34px; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); border: 2px solid var(--ink); flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Home sections ---------- */
.idx { border-top: 2px solid var(--ink); }
.idx a { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 4px 14px; padding: clamp(18px, 2.4vw, 30px) 10px; border-bottom: 2px solid var(--ink); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .25s; }
.idx a::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--red)); transform: translateY(101%); transition: transform .3s cubic-bezier(.5, 0, .1, 1); z-index: -1; }
.idx li:nth-child(3n+1) a { --c: var(--red); } .idx li:nth-child(3n+2) a { --c: var(--blue); } .idx li:nth-child(3n) a { --c: var(--green); }
.idx a:hover::before, .idx a:focus-visible::before { transform: none; }
.idx li:nth-child(3n+1) a:hover, .idx li:nth-child(3n+2) a:hover { color: var(--white); }
.idx__n { font: 500 13px var(--f-mono); letter-spacing: .1em; }
.idx__t { font: 800 clamp(30px, 5vw, 64px)/.95 var(--f-disp); font-stretch: 62%; text-transform: uppercase; }
.idx__d { grid-column: 2; font-size: 16px; opacity: .8; max-width: 36em; }
.idx .arr { grid-column: 3; grid-row: 1; justify-self: end; transition: transform .25s; width: 34px; }
.idx a:hover .arr { transform: translateX(6px) rotate(-8deg); }
@media (min-width: 860px) { .idx a { grid-template-columns: 70px 1.1fr 1fr 50px; } .idx__d { grid-column: 3; } .idx .arr { grid-column: 4; } }

.steps { display: grid; gap: 28px; counter-reset: s; }
.step { position: relative; padding: 26px 24px 28px; border: 2px solid var(--white); border-radius: 22px; background: rgba(5, 7, 26, .25); }
.step__n { font: 900 clamp(80px, 9vw, 130px)/.8 var(--f-disp); font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px var(--green); display: block; margin-bottom: 14px; }
.step h3 { margin-bottom: 8px; }
.step:nth-child(2) { transform: rotate(.8deg); } .step:nth-child(3) { transform: rotate(-.8deg); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } .step:nth-child(2) { margin-top: 28px; } }

.vteaser { display: grid; gap: 40px; align-items: center; }
.vteaser__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; max-width: 520px; }
.vteaser__form input { flex: 1 1 220px; min-width: 0; }
@media (min-width: 900px) { .vteaser { grid-template-columns: 1fr 1fr; gap: 64px; } }

.duo { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.mini-ev { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 18px 0; border-bottom: 2px dashed rgba(5, 7, 26, .35); align-items: start; }
.mini-ev:first-of-type { border-top: 2px dashed rgba(5, 7, 26, .35); }
.datebox { width: 76px; text-align: center; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--hard-sm); }
.datebox b { display: block; font: 900 34px/1 var(--f-disp); padding: 8px 0 4px; }
.datebox span { display: block; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 6px 0; }
.datebox--past span { background: var(--ink); }

.ytblock { display: grid; gap: 28px; align-items: center; }
.play { width: clamp(120px, 20vw, 200px); aspect-ratio: 1.4; background: var(--white); border: 3px solid var(--ink); border-radius: 28px; display: grid; place-items: center; box-shadow: 8px 8px 0 var(--ink); transform: rotate(-4deg); transition: transform .2s; }
.play:hover { transform: rotate(2deg) scale(1.04); }
.play svg { width: 38%; fill: var(--red); }
@media (min-width: 800px) { .ytblock { grid-template-columns: 1fr auto; } }

/* ---------- Posts ---------- */
.post { display: grid; gap: 10px; padding: 24px 22px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); text-decoration: none; box-shadow: var(--hard); transition: transform .15s, box-shadow .15s; align-content: start; }
.post:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.post__t { font: 800 clamp(22px, 2.4vw, 28px)/1.05 var(--f-disp); font-stretch: 90%; letter-spacing: -.015em; }
.post__x { opacity: .8; }
.post__go { font: 600 13px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.post__go::after { content: " \2192"; }
.post--lead { padding: clamp(26px, 4vw, 52px); background: var(--g-blue); color: var(--white); box-shadow: 8px 8px 0 var(--ink); margin-bottom: 28px; }
.post--lead .post__t { font-size: clamp(34px, 5vw, 64px); font-stretch: 100%; line-height: .95; max-width: 18em; }
.post--lead .post__x { font-size: 19px; max-width: 36em; opacity: .92; }
.post--lead .post__go { color: var(--green); }
.post--lead .tagpill { background: var(--green); color: var(--ink); }
.postlist { display: grid; gap: 22px; }
@media (min-width: 760px) { .postlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .postlist--3 { grid-template-columns: repeat(3, 1fr); } }
.stack-posts { display: grid; gap: 18px; }

/* ---------- Page header ---------- */
.pagehead { background: var(--ink); color: var(--white); position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.pagehead__in { padding-block: clamp(44px, 7vw, 96px) clamp(40px, 6vw, 72px); display: grid; gap: 22px; position: relative; z-index: 1; }
.pagehead h1 { font: 900 clamp(52px, 11vw, 150px)/.86 var(--f-disp); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; }
.pagehead h1 .hl { color: var(--green); }
.pagehead p.lead { color: rgba(255, 255, 255, .85); }
.pagehead__caps { position: absolute; right: var(--gut); top: 40px; display: none; gap: 8px; flex-direction: column; opacity: .95; }
.pagehead__caps .cap { transform: rotate(var(--r, 0deg)); }
.pagehead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 90% 0%, rgba(10, 59, 255, .6), transparent 70%); }
.pagehead--red::before { background: radial-gradient(50% 80% at 90% 0%, rgba(255, 31, 61, .45), transparent 70%); }
.pagehead--green::before { background: radial-gradient(50% 80% at 90% 0%, rgba(0, 245, 122, .28), transparent 70%); }
.pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--white) 0 2px, transparent 2px 14px); opacity: .18; }
@media (min-width: 900px) { .pagehead__caps { display: flex; } }

/* ---------- Forms ---------- */
.sheet { background: var(--white); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); padding: clamp(20px, 3.4vw, 40px); position: relative; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label, .field > .lbl { font: 600 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.field small { font-size: 13px; opacity: .7; }
input[type=text], input[type=tel], input[type=email], input[type=search], input[type=password], input[type=date], select, textarea {
  width: 100%; border: 2px solid var(--ink); background: var(--paper); border-radius: 12px; padding: 13px 15px; font-size: 16px; line-height: 1.3; transition: box-shadow .12s, background .12s; appearance: none;
}
select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2305071a' stroke-width='2.4' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--white); box-shadow: 4px 4px 0 var(--blue); }
input::placeholder, textarea::placeholder { color: rgba(5, 7, 26, .42); }
.grid2 { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.form-msg { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 600; margin-block: 14px; }
.form-msg--err { background: #ffe3e7; border-color: var(--red-d); color: #7a0016; }
.form-msg--ok { background: #c9ffe3; border-color: var(--green-d); color: #00391d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sectionfield { border: 0; padding: 0; margin: 0 0 34px; min-inline-size: 0; }
.sectionfield > legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font: 800 24px/1 var(--f-disp); font-stretch: 62%; text-transform: uppercase; letter-spacing: .005em; }
.sectionfield > legend .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--green); font: 600 14px var(--f-mono); }

.opts { display: grid; gap: 12px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.opt__b { display: grid; gap: 4px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); transition: background .12s, box-shadow .12s, transform .12s; }
.opt input:checked + .opt__b { background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--green); transform: translate(-1px, -1px); }
.opt input:focus-visible + .opt__b { outline: 3px solid var(--blue); outline-offset: 3px; }
.opt__b b { font: 800 19px/1.1 var(--f-disp); font-stretch: 90%; }
.opt__b span { font-size: 14px; opacity: .8; }
.opt__price { font: 600 14px var(--f-mono); color: var(--red-d); }
.opt input:checked + .opt__b .opt__price { color: var(--green); }
@media (min-width: 640px) { .opts--2 { grid-template-columns: 1fr 1fr; } .opts--3 { grid-template-columns: repeat(3, 1fr); } }

.dates { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px; scroll-snap-type: x proximity; }
.dates .opt { flex: none; scroll-snap-align: start; }
.dates .opt__b { width: 74px; padding: 12px 6px; text-align: center; border-radius: 14px; gap: 2px; }
.dates .opt__b b { font-size: 28px; font-stretch: 100%; }
.dates .opt__b span { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.dates .opt input:disabled + .opt__b { opacity: .35; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(5, 7, 26, .1) 6px 8px); cursor: not-allowed; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.slots .opt__b { padding: 12px 8px; text-align: center; font: 600 15px var(--f-mono); border-radius: 99px; }
.slots .opt input:disabled + .opt__b { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.paybox { border: 2px dashed var(--ink); border-radius: 18px; padding: 18px; background: var(--paper); display: grid; gap: 14px; }
.amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.amount b { font: 900 clamp(34px, 5vw, 48px)/1 var(--f-disp); font-stretch: 100%; letter-spacing: -.02em; }
.amount small { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.methodinfo { border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; background: var(--white); font: 400 14px/1.7 var(--f-mono); }
.methodinfo b { font-family: var(--f-body); font-size: 16px; display: block; margin-bottom: 4px; }
.warn { font: 500 13px/1.45 var(--f-mono); background: var(--ink); color: var(--green); padding: 10px 14px; border-radius: 10px; }
.drop { border: 2px dashed var(--ink); border-radius: 16px; padding: 26px 18px; text-align: center; background: var(--white); transition: background .15s, border-color .15s; cursor: pointer; position: relative; }
.drop.is-over { background: #d8ffe9; border-color: var(--green-d); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop__t { font-weight: 700; }
.drop__s { font-size: 13px; opacity: .7; margin-top: 4px; }
.drop.has-file { border-style: solid; background: #eafff3; }
.drop__prev { max-height: 120px; margin: 12px auto 0; border: 2px solid var(--ink); border-radius: 8px; }

.officer { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
.officer img { width: 110px; height: 110px; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), 6px 8px 0 5px var(--blue); }
.officer h3 { font: 900 clamp(26px, 3vw, 34px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.02em; }
.officer p { font-size: 15px; opacity: .85; margin-top: 6px; }
.ghost-officer { border: 2px dashed var(--ink); border-radius: 18px; padding: 18px; text-align: center; font: 500 13px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

.bookgrid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .bookgrid { grid-template-columns: 1fr 340px; } .bookgrid aside { position: sticky; top: calc(var(--nav-h) + 24px); } }
.summary { background: var(--ink); color: var(--white); border-radius: 22px; padding: 24px; display: grid; gap: 12px; box-shadow: 8px 8px 0 var(--blue); }
.summary dl { margin: 0; display: grid; gap: 10px; }
.summary dt { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.summary dd { margin: 0; font-weight: 600; }
.summary hr { border: 0; border-top: 1px dashed rgba(255, 255, 255, .3); width: 100%; }
.receipt-ok { text-align: center; display: grid; gap: 16px; justify-items: center; padding-block: 12px; }
.refcode { font: 700 clamp(26px, 5vw, 40px)/1 var(--f-mono); letter-spacing: .06em; background: var(--green); color: var(--ink); padding: 14px 22px; border: 2px solid var(--ink); box-shadow: var(--hard-sm); transform: rotate(-1.5deg); }

.track { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.track .field { margin: 0; flex: 1 1 200px; }
.trackres { margin-top: 18px; }
.statusline { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.pill { display: inline-block; padding: 6px 12px; border-radius: 99px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--white); }
.pill--pending { background: var(--blue); } .pill--confirmed, .pill--approved, .pill--verified, .pill--completed, .pill--handled { background: var(--green); color: var(--ink); } .pill--rejected, .pill--revoked, .pill--cancelled, .pill--suspended, .pill--expired { background: var(--red); }

/* ---------- Events ---------- */
.toggle { display: inline-flex; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--white); box-shadow: var(--hard-sm); margin-bottom: 36px; }
.toggle button { border: 0; background: none; padding: 12px 24px; font: 600 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--green); }
.event { display: grid; gap: 18px; grid-template-columns: 76px 1fr; padding: 28px 0; border-bottom: 2px dashed rgba(5, 7, 26, .35); align-items: start; }
.event:first-child { border-top: 2px dashed rgba(5, 7, 26, .35); }
.event__t { font: 900 clamp(28px, 4vw, 48px)/.95 var(--f-disp); font-stretch: 62%; text-transform: uppercase; margin: 8px 0; }
.event__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; align-items: center; }
.event__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.event--past { opacity: .75; }
@media (min-width: 760px) { .event { grid-template-columns: 100px 1fr; gap: 32px; } .event .datebox { width: 100px; } .event .datebox b { font-size: 46px; } }
.empty { padding: 40px; text-align: center; border: 2px dashed var(--ink); border-radius: 18px; font: 500 14px var(--f-mono); }

/* ---------- Videos ---------- */
.vgrid { display: grid; gap: 28px; }
@media (min-width: 700px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vgrid { grid-template-columns: repeat(3, 1fr); } }
.vid { display: grid; gap: 12px; }
.vid__frame { position: relative; aspect-ratio: 16/9; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: var(--hard); display: block; width: 100%; padding: 0; color: var(--white); text-decoration: none; }
.vid:nth-child(3n+1) .vid__frame { --c: var(--red); } .vid:nth-child(3n+2) .vid__frame { --c: var(--blue); } .vid:nth-child(3n) .vid__frame { --c: var(--green); }
.vid__frame::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--blue)); opacity: .85; }
.vid__frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 5px); }
.vid__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.vid__big { position: absolute; z-index: 1; left: 18px; bottom: 12px; font: 900 64px/1 var(--f-disp); font-stretch: 125%; color: rgba(255, 255, 255, .28); }
.vid__play { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; }
.vid__play i { width: 66px; height: 66px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s; }
.vid__play i::after { content: ""; border-left: 18px solid var(--ink); border-block: 11px solid transparent; margin-left: 5px; }
.vid__frame:hover .vid__play i { transform: scale(1.1) rotate(-6deg); }
.vid__t { font: 800 21px/1.1 var(--f-disp); font-stretch: 90%; letter-spacing: -.01em; }
.vid__s { font-size: 14px; opacity: .75; }

/* ---------- Pictures ---------- */
.shots { columns: 2; column-gap: 18px; }
@media (min-width: 760px) { .shots { columns: 3; } }
@media (min-width: 1100px) { .shots { columns: 4; } }
.shot { break-inside: avoid; margin-bottom: 18px; position: relative; border: 2px solid var(--ink); background: var(--white); padding: 8px 8px 30px; box-shadow: var(--hard-sm); transition: transform .2s; cursor: zoom-in; display: block; width: 100%; text-align: left; }
.shot:nth-child(odd) { transform: rotate(-.9deg); } .shot:nth-child(even) { transform: rotate(.8deg); } .shot:hover { transform: rotate(0) scale(1.02); z-index: 2; }
.shot img { width: 100%; background: var(--paper-2); }
.shot figcaption, .shot .cap-t { position: absolute; left: 12px; right: 12px; bottom: 7px; font: 400 21px/1 var(--f-hand); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot__ph { display: grid; place-items: center; background: var(--c, var(--blue)); color: var(--white); font: 900 clamp(40px, 6vw, 70px)/1 var(--f-disp); font-stretch: 125%; position: relative; overflow: hidden; }
.shot__ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .1) 14px 16px); }
.shot__ph small { position: absolute; left: 10px; top: 8px; font: 500 11px var(--f-mono); letter-spacing: .12em; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(5, 7, 26, .94); }
.lightbox__in { height: 100%; display: grid; place-items: center; padding: 56px 18px; position: relative; }
.lightbox img { max-height: calc(100vh - 120px); max-width: 100%; border: 3px solid var(--white); box-shadow: 10px 10px 0 var(--blue); }
.lightbox__ph { width: min(80vw, 800px); aspect-ratio: 4/3; }
.lightbox button { position: absolute; background: var(--white); border: 2px solid var(--ink); width: 48px; height: 48px; border-radius: 50%; font-size: 20px; font-weight: 700; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--green); }
.lb-x { top: 14px; right: 14px; } .lb-p { left: 14px; top: 50%; } .lb-n { right: 14px; top: 50%; }
.lightbox__cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--white); font: 400 26px var(--f-hand); }

/* ---------- Notes ---------- */
.plans { display: grid; gap: 22px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { border: 2px solid var(--ink); border-radius: 22px; padding: 28px 24px; background: var(--white); box-shadow: var(--hard); display: grid; gap: 14px; align-content: start; position: relative; }
.plan--feat { background: var(--blue); color: var(--white); transform: translateY(-10px); box-shadow: 8px 8px 0 var(--ink); }
.plan__p { font: 900 clamp(44px, 5vw, 60px)/.9 var(--f-disp); font-stretch: 100%; letter-spacing: -.03em; }
.plan__p small { font: 500 13px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; opacity: .8; }
.plan .sticker { position: absolute; top: -16px; right: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip { border: 2px solid var(--ink); background: var(--white); padding: 9px 16px; border-radius: 99px; font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--green); box-shadow: 3px 3px 0 var(--green); }
.mats { display: grid; gap: 22px; }
@media (min-width: 700px) { .mats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .mats { grid-template-columns: repeat(3, 1fr); } }
.mat { border: 2px solid var(--ink); border-radius: 18px; background: var(--white); padding: 0; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: var(--hard); }
.mat__top { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--c, var(--blue)); color: var(--white); border-bottom: 2px solid var(--ink); }
.mat:nth-child(3n+1) { --c: var(--blue); } .mat:nth-child(3n+2) { --c: var(--red); } .mat:nth-child(3n) { --c: var(--green); }
.mat:nth-child(3n) .mat__top { color: var(--ink); }
.mat__subj { font: 600 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.mat__fmt { font: 500 11px var(--f-mono); border: 1.5px solid currentColor; padding: 4px 8px; border-radius: 99px; }
.mat__body { padding: 20px; display: grid; gap: 8px; align-content: start; }
.mat__body h3 { font: 800 24px/1.05 var(--f-disp); font-stretch: 85%; letter-spacing: -.01em; }
.mat__body p { font-size: 15px; opacity: .8; }
.mat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 2px dashed var(--ink); }
.price { font: 900 26px/1 var(--f-disp); letter-spacing: -.02em; }
.price small { font: 500 12px var(--f-mono); margin-right: 4px; letter-spacing: .08em; }
dialog.modal { border: 2px solid var(--ink); border-radius: 22px; padding: 0; width: min(94vw, 560px); max-height: 92vh; background: var(--white); box-shadow: 10px 10px 0 var(--blue); }
dialog.modal::backdrop { background: rgba(5, 7, 26, .78); }
.modal__in { padding: clamp(20px, 4vw, 34px); overflow-y: auto; max-height: 90vh; }
.modal__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font-weight: 700; }

/* ---------- Ambassadors ---------- */
.ambgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.amb { border: 2px solid var(--ink); border-radius: 18px; background: var(--white); overflow: hidden; box-shadow: var(--hard); display: grid; }
.amb__ph { aspect-ratio: 1/1; background: var(--c, var(--blue)); display: grid; place-items: center; color: var(--white); font: 900 76px var(--f-disp); font-stretch: 125%; position: relative; border-bottom: 2px solid var(--ink); overflow: hidden; }
.amb:nth-child(3n+1) { --c: var(--blue); } .amb:nth-child(3n+2) { --c: var(--red); } .amb:nth-child(3n) { --c: var(--green); }
.amb:nth-child(3n) .amb__ph { color: var(--ink); }
.amb__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amb__ph .tick { position: absolute; right: 10px; bottom: 10px; background: var(--green); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; font: 600 10px var(--f-mono); letter-spacing: .1em; padding: 5px 9px; text-transform: uppercase; }
.amb__b { padding: 16px 18px 20px; display: grid; gap: 4px; }
.amb__b h3 { font: 800 22px/1.05 var(--f-disp); font-stretch: 90%; letter-spacing: -.01em; }
.amb__b p { font-size: 14px; opacity: .8; }
.amb__b .lbl { opacity: .65; margin-top: 8px; }
.find { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.find input { max-width: 420px; }
.howto { display: grid; gap: 16px; counter-reset: h; }
.howto li { counter-increment: h; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.howto li::before { content: counter(h); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--ink); font: 700 16px var(--f-mono); border: 2px solid var(--ink); }
.howto b { display: block; font-size: 18px; }

/* ---------- Verify ---------- */
.is-verify { background: var(--ink); }
.casefile { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.casefile::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(91, 130, 255, .1) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(91, 130, 255, .1) 39px 40px); mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent); }
.casefile__in { position: relative; padding-block: clamp(40px, 6vw, 84px) clamp(64px, 8vw, 120px); display: grid; gap: 40px; }
.casefile h1 { font: 900 clamp(46px, 9vw, 120px)/.86 var(--f-disp); font-stretch: 62%; text-transform: uppercase; }
.casefile h1 em { font-style: normal; color: var(--green); }
.idform { display: grid; gap: 14px; max-width: 640px; }
.idform label { color: var(--green); }
.idform__row { display: flex; flex-wrap: wrap; gap: 12px; }
.idform input { flex: 1 1 260px; background: var(--ink-2); border-color: var(--sky); color: var(--white); font: 600 clamp(20px, 3.4vw, 28px)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 18px; border-radius: 14px; }
.idform input::placeholder, .vteaser__form input::placeholder { color: rgba(255, 255, 255, .38); }
.idform input:focus { background: var(--ink-2); box-shadow: 4px 4px 0 var(--green); }
.idform .btn { border-color: var(--ink); box-shadow: 3px 3px 0 var(--white); }
.scanning { display: grid; place-items: center; padding: 60px 0; gap: 18px; font: 500 13px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.scanning i { width: 220px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.scanning i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--green); border-radius: 6px; animation: scan 0.9s infinite ease-in-out; }
@keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.result { display: grid; gap: 40px; align-items: start; animation: rise .5s both; }
@media (min-width: 1000px) { .result { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; } }
.stampbox { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 26px; }
.stamp { font: 900 clamp(30px, 5vw, 52px)/1 var(--f-disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; border: 5px solid currentColor; padding: 10px 20px; border-radius: 12px; transform: rotate(-4deg); display: inline-block; mix-blend-mode: normal; position: relative; }
.stamp::after { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 6px; opacity: .5; }
.stamp--verified { color: var(--green); } .stamp--pending { color: var(--sky); } .stamp--bad { color: var(--red); }
.facts { display: grid; gap: 0; border-top: 1px dashed rgba(255, 255, 255, .3); }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px dashed rgba(255, 255, 255, .3); align-items: baseline; }
.facts dt { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.facts dd { margin: 0; font-weight: 600; font-size: 18px; }
.facts dd.mono { font: 600 20px var(--f-mono); color: var(--green); letter-spacing: .06em; }
.checked { margin-top: 16px; font: 400 12px var(--f-mono); opacity: .6; }
.cardzone { display: grid; gap: 20px; justify-items: center; }
.cardflip { width: 100%; max-width: 560px; perspective: 1600px; }
.cardflip__tilt { aspect-ratio: 1012/638; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.cardflip__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.cardflip.is-flipped .cardflip__in { transform: rotateY(180deg); }
.cardflip canvas { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3.6%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
.cardflip canvas.back { transform: rotateY(180deg); }
.cardflip__glare { position: absolute; inset: 0; border-radius: 3.6%; pointer-events: none; z-index: 5; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity .2s; transform: translateZ(1px); }
.cardflip:hover .cardflip__glare { opacity: 1; }
.cardflip.is-flipped .cardflip__glare { display: none; }
.cardtools { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cardtools .btn { border-color: var(--ink); box-shadow: 3px 3px 0 var(--white); }
.cardtools .btn--ghost { --fg: var(--white); border-color: var(--white); box-shadow: 3px 3px 0 var(--blue); }
.cardnote { font-size: 14px; opacity: .7; max-width: 34em; text-align: center; }
.notfound { border: 2px dashed var(--red); border-radius: 18px; padding: 28px; display: grid; gap: 12px; max-width: 640px; }
.notfound h2 { font: 900 clamp(28px, 4vw, 44px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; color: var(--red); }

/* ---------- Article ---------- */
.article { max-width: 780px; padding-block: clamp(36px, 6vw, 80px) 40px; }
.back { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; display: inline-block; margin-bottom: 28px; }
.back::before { content: "\2190  "; }
.article__head { display: grid; gap: 18px; margin-bottom: 36px; }
.article h1 { font: 900 clamp(38px, 7vw, 76px)/.95 var(--f-disp); font-stretch: 100%; letter-spacing: -.03em; text-transform: none; }
.article__by { font: 500 13px var(--f-mono); letter-spacing: .06em; opacity: .7; }
.prose { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 clamp(26px, 3.4vw, 36px)/1.05 var(--f-disp); font-stretch: 80%; text-transform: uppercase; margin-top: 2em; background: linear-gradient(transparent 62%, var(--green) 62% 92%, transparent 92%); display: inline-block; }
.prose h3 { font-weight: 700; font-size: 1.2em; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; list-style: revert; display: grid; gap: .4em; }
.prose blockquote { border-left: 6px solid var(--red); padding: 4px 0 4px 20px; font-size: 1.15em; font-style: italic; }
.prose a { color: var(--blue); font-weight: 600; }
.prose hr { border: 0; border-top: 2px dashed var(--ink); }
.prose code { font-family: var(--f-mono); background: var(--paper-2); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.share { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 52px; padding-top: 24px; border-top: 2px solid var(--ink); }
.more { margin-top: 56px; display: grid; gap: 18px; }

/* ---------- Contact ---------- */
.contactgrid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .contactgrid { grid-template-columns: 1fr 380px; } }
.channels { display: grid; gap: 14px; }
.channels a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); text-decoration: none; font-weight: 700; box-shadow: var(--hard-sm); transition: transform .12s, box-shadow .12s; }
.channels a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.channels a:nth-child(3n+1) { border-left: 10px solid var(--red); } .channels a:nth-child(3n+2) { border-left: 10px solid var(--blue); } .channels a:nth-child(3n) { border-left: 10px solid var(--green); }

/* ---------- Legal and 404 ---------- */
.legal { max-width: 760px; padding-block: 60px 90px; }
.legal h2 { font: 800 28px/1.1 var(--f-disp); font-stretch: 80%; text-transform: uppercase; margin: 40px 0 10px; }
.legal p, .legal li { margin-bottom: 10px; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.nf { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 22px; padding: 60px var(--gut); background: var(--ink); color: var(--white); justify-items: center; }
.nf h1 { font: 900 clamp(120px, 28vw, 340px)/.8 var(--f-disp); font-stretch: 125%; color: transparent; -webkit-text-stroke: 3px var(--green); }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--white); padding-top: 28px; position: relative; overflow: hidden; }
.foot__marq { overflow: hidden; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 28px; }
.foot__marq-in { display: inline-flex; align-items: center; gap: 36px; animation: marq 40s linear infinite; }
.foot__marq span { font: 900 clamp(70px, 14vw, 200px)/.85 var(--f-disp); font-stretch: 125%; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .55); letter-spacing: -.03em; }
.foot__marq span:nth-child(4n+3) { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.foot__marq i { width: clamp(50px, 8vw, 110px); height: clamp(22px, 3.4vw, 46px); border-radius: 99px; background: linear-gradient(90deg, var(--red) 50%, var(--green) 50%); flex: none; }
.foot__grid { display: grid; gap: 36px; padding-block: 52px; }
.foot__grid h3 { color: var(--green); margin-bottom: 14px; }
.foot__grid li { margin-bottom: 8px; }
.foot__grid a { text-decoration: none; }
.foot__grid a:hover { color: var(--green); text-decoration: underline; }
.foot__about img { border-radius: 50%; margin-bottom: 14px; }
.foot__about p { max-width: 24em; opacity: .85; }
.foot__note { margin-top: 14px; color: var(--green); }
.foot__base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding-block: 22px 32px; border-top: 1px solid rgba(255, 255, 255, .15); font: 400 12px var(--f-mono); letter-spacing: .06em; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Admin ---------- */
.is-admin { background: var(--paper); }
.adm { padding-block: 40px 90px; }
.adm__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs button { border: 2px solid var(--ink); background: var(--white); padding: 10px 18px; border-radius: 99px; font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--green); }
.tabs .n { display: inline-block; min-width: 20px; margin-left: 8px; padding: 2px 6px; border-radius: 99px; background: var(--red); color: var(--white); font-size: 11px; }
.tablewrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 12px; background: var(--ink); color: var(--white); white-space: nowrap; }
td { padding: 12px; border-top: 1px solid rgba(5, 7, 26, .15); vertical-align: top; }
td .btn { margin: 2px 4px 2px 0; }
.rowact { display: grid; gap: 8px; min-width: 180px; }
.rowact select, .rowact input { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.admform { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .admform { grid-template-columns: 1fr 1fr; } }
.loginbox { max-width: 440px; margin: 80px auto; }

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

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media print { .nav, .foot, .ticker, body::after { display: none !important; } }

/* =====================================================================
   PUNCH PASS: louder colour blocking, logo-matched ring, coloured shadows
   ===================================================================== */
:root { --hard: 6px 6px 0 var(--ink); }

/* solid electric blocks instead of soft gradients */
.section--blue { background: var(--blue); }
.section--red { background: var(--red); }
.section--green { background: var(--green); }

/* slanted section edges. The triangles borrow the section's own colour so no paper shows through. */
.slant { position: relative; z-index: 3; padding-block: clamp(120px, 13vw, 190px); margin-block: -2px; }
.slant::before, .slant::after { content: ""; position: absolute; left: 0; right: 0; height: 44px; background: inherit; pointer-events: none; }
.slant::before { top: -43px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.slant::after { bottom: -43px; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* highlighter marks on headline words */
.mark { padding: .02em .14em .06em; margin: 0 -.02em; background: var(--c, var(--green)); color: var(--mc, var(--ink)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mark--green { --c: var(--green); --mc: var(--ink); } .mark--red { --c: var(--red); --mc: var(--white); }
.mark--ink { --c: var(--ink); --mc: var(--white); }

/* header strip: thicker tri-colour rail, logo with a green ring */
.nav::after { height: 5px; bottom: -3px; }
.brand img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px var(--ink); }

/* hero */
.medal::before { content: ""; position: absolute; inset: 13.5%; border-radius: 50%; background: conic-gradient(var(--blue), var(--sky), var(--royal), var(--blue)); animation: spin 12s linear infinite; box-shadow: 0 0 60px rgba(10, 59, 255, .6); }
.medal__logo { inset: 17.5%; width: 65%; height: 65%; box-shadow: 0 0 0 5px var(--ink); transform: none; }
.medal:hover .medal__logo { transform: scale(1.04) rotate(-2deg); }
.floaty .cap { width: 120px; height: 48px; border-width: 3px; }
.floaty--1 { top: -2%; right: 2%; } .floaty--2 { bottom: 4%; left: -6%; }
.floaty--4 { top: 18%; left: -8%; --r: -38deg; } .floaty--5 { bottom: -2%; right: 8%; --r: 18deg; }
.hero__glow { background: radial-gradient(60% 50% at 82% 40%, rgba(10, 59, 255, .75), transparent 70%), radial-gradient(40% 40% at 6% 100%, rgba(0, 245, 122, .32), transparent 70%), radial-gradient(34% 34% at 96% 98%, rgba(255, 31, 61, .45), transparent 70%); }
.hero__h .o { -webkit-text-stroke: 3px var(--white); }
.hero__h > span:first-child { color: var(--white); text-shadow: 6px 6px 0 var(--red); }
.hero__cta .btn--red { box-shadow: 5px 5px 0 var(--white); border-color: var(--ink); }
.hero__cta .btn--red:hover { box-shadow: 8px 8px 0 var(--white); }

/* crossing ticker tapes */
.tickers { position: relative; height: 138px; margin-top: -34px; z-index: 6; overflow: hidden; }
.tickers .ticker { position: absolute; left: -3%; right: -3%; margin: 0; border-block: 3px solid var(--ink); }
.ticker--green { top: 22px; transform: rotate(-1.8deg); }
.ticker--red { top: 52px; transform: rotate(1.4deg); background: var(--red); color: var(--white); border-color: var(--ink); z-index: 1; }
.ticker--red .ticker__in { animation-direction: reverse; animation-duration: 38s; }
.ticker--red span::after { background: linear-gradient(90deg, var(--green) 50%, var(--blue) 50%); }

/* index rows: colour tab and number pill */
.idx a { border-left: 16px solid var(--c, var(--red)); padding-left: clamp(12px, 2vw, 24px); grid-template-columns: 56px 1fr 36px; }
.idx__n { display: inline-grid; place-items: center; width: 46px; height: 28px; border-radius: 99px; background: var(--c, var(--red)); color: var(--white); font-weight: 600; transition: background .2s, color .2s; }
.idx li:nth-child(3n) .idx__n { color: var(--ink); }
.idx a:hover .idx__n { background: var(--ink); color: var(--white); }
.idx li:nth-child(3n) a:hover { color: var(--ink); }
@media (min-width: 860px) { .idx a { grid-template-columns: 70px 1.1fr 1fr 50px; } }

/* steps: one colour each */
.slant .step { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--ink); color: var(--white); }
.slant .step:nth-child(1) { background: var(--red); } .slant .step:nth-child(1) .step__n { -webkit-text-stroke-color: var(--white); }
.slant .step:nth-child(2) { background: var(--green); color: var(--ink); } .slant .step:nth-child(2) .step__n { -webkit-text-stroke-color: var(--ink); }
.slant .step:nth-child(3) .step__n { -webkit-text-stroke-color: var(--green); }
.section--blue .btn--green, .section--red .btn--white { border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }

/* verify teaser: colour glows */
#verify-teaser { background: radial-gradient(50% 60% at 100% 100%, rgba(255, 31, 61, .28), transparent 70%), radial-gradient(40% 50% at 0% 0%, rgba(0, 245, 122, .16), transparent 70%), var(--ink); }

/* coloured hard shadows, cycling through the three colours */
.post:nth-child(3n+1), .mat:nth-child(3n+1), .amb:nth-child(3n+1), .plan:nth-child(3n+1), .channels a:nth-child(3n+1) { box-shadow: 6px 6px 0 var(--red); }
.post:nth-child(3n+2), .mat:nth-child(3n+2), .amb:nth-child(3n+2), .plan:nth-child(3n+2), .channels a:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--blue); }
.post:nth-child(3n), .mat:nth-child(3n), .amb:nth-child(3n), .plan:nth-child(3n), .channels a:nth-child(3n) { box-shadow: 6px 6px 0 var(--green); }
.post:hover { box-shadow: 10px 10px 0 var(--ink) !important; }
.post--lead { box-shadow: 10px 10px 0 var(--green) !important; background: var(--blue); }
.plan--feat { background: var(--blue); box-shadow: 8px 8px 0 var(--green) !important; }
.sheet { box-shadow: 8px 8px 0 var(--blue); }
.datebox { box-shadow: 3px 3px 0 var(--red); }
.summary { box-shadow: 8px 8px 0 var(--red); }
.toggle { box-shadow: 3px 3px 0 var(--green); }
.refcode { box-shadow: 4px 4px 0 var(--ink); }
.btn { box-shadow: 4px 4px 0 var(--ink); }
.btn:hover { box-shadow: 7px 7px 0 var(--ink); }

/* page headers: solid colour slabs with a halftone and a slanted foot */
.pagehead { background: var(--blue); color: var(--white); border-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), 0 100%); padding-bottom: 38px; margin-bottom: -2px; }
.pagehead--red { background: var(--red); }
.pagehead--green { background: var(--green); color: var(--ink); }
.pagehead::before, .pagehead--red::before, .pagehead--green::before { background: radial-gradient(circle, rgba(255, 255, 255, .28) 2.2px, transparent 2.8px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 85%); mask-image: linear-gradient(100deg, transparent 25%, #000 85%); }
.pagehead--green::before { background: radial-gradient(circle, rgba(5, 7, 26, .28) 2.2px, transparent 2.8px) 0 0 / 22px 22px; }
.pagehead::after { display: none; }
.pagehead h1 { font-size: clamp(60px, 12.5vw, 176px); text-shadow: 6px 6px 0 var(--ink); }
.pagehead--green h1 { text-shadow: 6px 6px 0 var(--white); }
.pagehead h1 .hl { color: var(--green); }
.pagehead--red h1 .hl { color: var(--ink); text-shadow: none; }
.pagehead--green h1 .hl { color: var(--white); text-shadow: 6px 6px 0 var(--ink); }
.pagehead p.lead { color: rgba(255, 255, 255, .95); }
.pagehead--green p.lead, .pagehead--green .kicker { color: var(--ink); }
.pagehead .kicker i { background: linear-gradient(90deg, var(--green) 50%, var(--ink) 50%); }
.pagehead--green .kicker i { background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.pagehead--red .kicker i { background: linear-gradient(90deg, var(--white) 50%, var(--ink) 50%); }
.pagehead .btn--green { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pagehead .btn--line { border-color: var(--white); box-shadow: 4px 4px 0 var(--ink); }
.pagehead__caps .cap { width: 120px; height: 48px; border-width: 3px; }
.pagehead__caps { top: 56px; gap: 14px; }

/* footer marquee in all three colours */
.foot__marq span:nth-child(4n+1) { -webkit-text-stroke-color: var(--red); }
.foot__marq span:nth-child(4n+3) { color: var(--green); -webkit-text-stroke-color: var(--green); }
.foot__marq i { background: linear-gradient(90deg, var(--red) 33%, var(--green) 33% 66%, var(--blue) 66%); }

/* section numbers as pills */
.sec-no { display: inline-block; justify-self: start; background: var(--ink); color: var(--green); padding: 7px 12px; border-radius: 99px; transform: rotate(-1.5deg); }
.section--ink .sec-no, .section--blue .sec-no, .section--red .sec-no { background: var(--green); color: var(--ink); }
.casefile h1 em { color: var(--green); text-shadow: 5px 5px 0 var(--red); }

/* fixes after first review */
.tickers { height: 150px; margin-top: -40px; }
.ticker--green { top: 36px; transform: rotate(-2.2deg); z-index: 1; }
.ticker--red { top: 36px; transform: rotate(2.2deg); z-index: 2; }
.floaty { z-index: 0; }
.medal { z-index: 2; }

/* =====================================================================
   Gallery (photos + social videos) and certificates
   ===================================================================== */
#g-platform { margin-top: -14px; }
.shot--v { padding: 8px 8px 34px; }
.vposter { position: relative; overflow: hidden; background: var(--c, var(--blue)); color: var(--k, #fff); display: grid; place-items: center; }
.vposter::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .09) 14px 16px); }
.vposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vposter__t { position: relative; padding: 38px 16px 16px; font: 900 clamp(20px, 2.4vw, 30px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.vposter .plat { position: absolute; left: 8px; top: 8px; z-index: 2; background: var(--ink); color: var(--white); font: 600 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 99px; }
.vposter__play { position: absolute; z-index: 2; right: 10px; bottom: 10px; }
.vposter__play i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transition: transform .15s; }
.vposter__play i::after { content: ""; border-left: 13px solid var(--ink); border-block: 8px solid transparent; margin-left: 4px; }
.shot--v:hover .vposter__play i { transform: scale(1.12) rotate(-6deg); }

.embed { background: #000; border: 3px solid var(--white); box-shadow: 10px 10px 0 var(--blue); max-width: 100%; }
.embed iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.embed--wide { width: min(92vw, 960px); aspect-ratio: 16 / 9; }
.embed--tall { height: min(78vh, 720px); aspect-ratio: 9 / 16; width: auto; max-width: 92vw; }
.embed--ig { width: min(92vw, 440px); height: min(80vh, 760px); }
.embed--fbpost { width: min(92vw, 520px); height: min(80vh, 700px); }
.embed--none { display: grid; place-items: center; color: var(--white); background: var(--ink); font: 700 22px var(--f-body); text-align: center; padding: 20px; }
.lightbox__open { position: absolute; right: 14px; bottom: 14px; }
.lightbox__open[hidden] { display: none; }

/* certificate verification result */
.result--cert { display: grid; gap: 36px; }
@media (min-width: 1000px) { .result--cert { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 56px; } }
.certzone { display: grid; gap: 20px; justify-items: center; }
.certview { width: 100%; }
.certview canvas { width: 100%; height: auto; display: block; border: 3px solid var(--white); box-shadow: 12px 12px 0 var(--blue); background: #f6f8ff; }

/* verify page: card left at about 540px, boxed status banner, tight detail rows */
.result--card { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1000px) { .result--card { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: clamp(48px, 7vw, 108px); } }
.result--card .cardzone { justify-items: start; }
.result--card .cardflip { max-width: 540px; }
.result--card .cardtools { justify-content: flex-start; }
.result--card .cardnote { text-align: left; }
.vbanner { --vb: #1af079; --vbg: rgba(26, 240, 121, .09); display: flex; gap: 18px; align-items: center; padding: 22px 26px; border: 2px solid var(--vb); background: var(--vbg); margin-bottom: 22px; }
.vbanner > i { width: 16px; height: 16px; border-radius: 50%; background: var(--vb); flex: none; }
.vbanner h2 { font: 900 clamp(22px, 2.6vw, 28px)/1 var(--f-disp); font-stretch: 125%; text-transform: uppercase; color: var(--vb); }
.vbanner p { margin-top: 7px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.vb--pending { --vb: #6f8cff; --vbg: rgba(111, 140, 255, .1); }
.vb--bad { --vb: #ff3a52; --vbg: rgba(255, 58, 82, .1); }
.result--card .facts, .result--cert .facts { border-top: 1px solid rgba(120, 140, 255, .24); }
.result--card .facts div, .result--cert .facts div { grid-template-columns: 170px 1fr; padding: 16px 0; border-bottom: 1px solid rgba(120, 140, 255, .24); }
.result--card .facts dt, .result--cert .facts dt { font-size: 11px; color: #8da0e8; }
.result--card .facts dd, .result--cert .facts dd { font-size: 17px; }
.result--card .facts dd.mono, .result--cert .facts dd.mono { font-size: 17px; letter-spacing: .04em; }
@media (max-width: 520px) { .result--card .facts div, .result--cert .facts div { grid-template-columns: 120px 1fr; } }

/* =====================================================================
   Team: leadership, chambers, chamber pages
   ===================================================================== */
.leaders { display: grid; gap: 24px; }
.leader { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 24px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 8px 8px 0 var(--blue); max-width: 760px; }
.leader__ph { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--blue); display: grid; place-items: center; color: var(--white); font: 900 40px var(--f-disp); font-stretch: 125%; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.leader__ph img { width: 100%; height: 100%; object-fit: cover; }
.leader__n { font: 900 clamp(26px, 3.2vw, 40px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.02em; margin: 6px 0 8px; }
.leader p { font-size: 16px; opacity: .85; }
.leader--lg { box-shadow: 8px 8px 0 var(--red); }
@media (max-width: 520px) { .leader { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px; } .leader__ph { width: 84px; height: 84px; font-size: 28px; } }

.chambers { display: grid; gap: 28px; }
@media (min-width: 760px) { .chambers { grid-template-columns: repeat(2, 1fr); } }
.ch { display: grid; gap: 14px; align-content: space-between; min-height: 330px; padding: clamp(22px, 3vw, 34px); border: 3px solid var(--ink); border-radius: 26px; text-decoration: none; color: var(--white); box-shadow: 10px 10px 0 var(--ink); transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden; }
.ch--red { background: var(--red); } .ch--blue { background: var(--blue); } .ch--green { background: var(--green); color: var(--ink); }
.ch:hover, .ch:focus-visible { transform: translate(-4px, -4px) rotate(-.4deg); box-shadow: 14px 14px 0 var(--ink); }
.ch::after { content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .3) 2px, transparent 2.6px) 0 0 / 16px 16px; }
.ch--green::after { background: radial-gradient(circle, rgba(5, 7, 26, .25) 2px, transparent 2.6px) 0 0 / 16px 16px; }
.ch__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 1; }
.ch__n { font: 900 clamp(54px, 7vw, 92px)/.8 var(--f-disp); font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px currentColor; }
.ch--red .ch__n, .ch--blue .ch__n { -webkit-text-stroke-color: var(--white); } .ch--green .ch__n { -webkit-text-stroke-color: var(--ink); }
.ch__k { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border: 2px solid currentColor; padding: 6px 10px; border-radius: 99px; }
.ch__t { font: 900 clamp(46px, 5.8vw, 78px)/.88 var(--f-disp); font-stretch: 62%; text-transform: uppercase; position: relative; z-index: 1; }
.ch__x { font-size: 18px; max-width: 26em; position: relative; z-index: 1; }
.ch__f { display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; position: relative; z-index: 1; }
.ch__f .arr { width: 40px; transition: transform .2s; } .ch:hover .arr { transform: translateX(6px) rotate(-8deg); }

.does { display: grid; gap: 12px; margin-top: 24px; }
.does li { padding: 14px 18px 14px 20px; border: 2px solid var(--ink); border-left-width: 14px; border-radius: 12px; background: var(--white); font-weight: 600; }
.does li.does--0 { border-left-color: var(--red); } .does li.does--1 { border-left-color: var(--blue); } .does li.does--2 { border-left-color: var(--green); }

/* keep the capsules off the ring text */
.floaty--3 { top: 40%; right: -12%; }

/* verify page: details left, big card right */
@media (min-width: 1000px) {
  .result--card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 64px); }
  .result--card .cardzone { justify-items: stretch; }
  .result--card .cardflip { max-width: none; width: 100%; }
}
@media (min-width: 1300px) { .result--card { grid-template-columns: minmax(0, 1fr) 700px; } }
.result--card .cardflip canvas { border-radius: 3.4%; }

/* contrast fixes */
.pagehead--green h1 .hl { color: var(--blue); text-shadow: 6px 6px 0 var(--ink); }
.shot__ph[style*="var(--green)"] { color: var(--ink); }
.shot__ph[style*="var(--green)"]::before { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(5, 7, 26, .1) 14px 16px); }

/* =====================================================================
   Site search: nav button, overlay, results page
   ===================================================================== */
.nav__search { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 2px solid var(--white); border-radius: 99px; background: transparent; color: var(--white); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; transition: background .15s, color .15s; }
.nav__search:hover { background: var(--green); color: var(--ink); border-color: var(--green); }
.nav__search svg { flex: none; }
.nav__search-t { display: none; }
.nav__search kbd { display: none; font: 600 11px var(--f-mono); border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 6px; opacity: .8; }
@media (max-width: 1019px) { .nav__search { width: 46px; padding: 0; justify-content: center; } }
@media (min-width: 1180px) { .nav__search { height: 38px; } .nav__search-t { display: inline; } .nav__search kbd { display: inline; } .nav__links { margin-left: auto; } }
@media (min-width: 1180px) and (max-width: 1400px) { .nav__search-t, .nav__search kbd { display: none; } .nav__search { width: 38px; padding: 0; justify-content: center; } }

dialog.sdlg { border: 0; padding: 0; margin: 0; top: 0; left: 0; width: 100%; max-width: 100%; max-height: none; background: transparent; color: var(--white); overflow: visible; }
.sdlg::backdrop { background: rgba(5, 7, 26, .88); backdrop-filter: blur(3px); }
.sdlg__in { background: var(--ink); border-bottom: 5px solid var(--green); max-height: 88vh; overflow-y: auto; padding: clamp(18px, 3vw, 40px) var(--gut) 22px; }
.sdlg__in > * { max-width: 920px; margin-inline: auto; }
.sdlg__form { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--green); padding-bottom: 14px; }
.sdlg__form svg { flex: none; color: var(--green); }
.sdlg__form input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; color: var(--white); font: 800 clamp(24px, 4vw, 44px)/1.1 var(--f-disp); font-stretch: 100%; letter-spacing: -.01em; padding: 6px 0; box-shadow: none; appearance: none; }
.sdlg__form input:focus { background: transparent; box-shadow: none; outline: none; }
.sdlg__form input::placeholder { color: rgba(255, 255, 255, .35); }
.sdlg__form input::-webkit-search-cancel-button { display: none; }
.sdlg__x { flex: none; border: 2px solid rgba(255, 255, 255, .5); background: transparent; color: var(--white); border-radius: 8px; padding: 7px 10px; font: 600 12px var(--f-mono); letter-spacing: .08em; }
.sdlg__x:hover { background: var(--white); color: var(--ink); }
.sdlg__body { padding-top: 18px; }
.sdlg__hint { margin-top: 18px; font: 400 12px var(--f-mono); letter-spacing: .04em; opacity: .55; }
.sgroup { margin-bottom: 20px; }
.sgroup > .lbl { display: block; color: var(--green); margin-bottom: 10px; }
.sq { display: flex; flex-wrap: wrap; gap: 10px; }
.sq a, .sq button { border: 2px solid rgba(255, 255, 255, .35); background: transparent; color: var(--white); border-radius: 99px; padding: 8px 14px; font: 500 13px var(--f-mono); text-decoration: none; }
.sq a:hover, .sq button:hover { background: var(--green); border-color: var(--green); color: var(--ink); }

.sres { display: grid; gap: 4px; }
.sres a { display: grid; grid-template-columns: 96px 1fr 24px; gap: 4px 16px; align-items: start; padding: 14px 14px; border-radius: 12px; text-decoration: none; color: inherit; border: 2px solid transparent; }
.sres a:hover, .sres a.is-active { background: var(--green); color: var(--ink); }
.sres a:focus-visible { outline-offset: -2px; }
.stype { align-self: start; justify-self: start; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 99px; background: var(--c, var(--blue)); color: var(--white); }
.stype--Blog, .stype--Chamber { --c: var(--red); } .stype--Notes, .stype--Plan, .stype--Session { --c: var(--blue); } .stype--Event, .stype--Gallery { --c: var(--ink); } .stype--Person, .stype--Ambassador { --c: var(--royal); }
.stype--Page { --c: var(--green); color: var(--ink); }
.sres a:hover .stype, .sres a.is-active .stype { background: var(--ink); color: var(--white); }
.stitle { font: 800 clamp(18px, 2.2vw, 24px)/1.1 var(--f-disp); font-stretch: 90%; letter-spacing: -.01em; }
.ssnip { grid-column: 2; font-size: 15px; opacity: .78; margin-top: 2px; }
.sres .arr { width: 22px; grid-column: 3; grid-row: 1; align-self: center; opacity: .6; }
.sres mark, .sp mark { background: var(--green); color: var(--ink); padding: 0 .12em; border-radius: 3px; }
.sres a:hover mark, .sres a.is-active mark { background: var(--ink); color: var(--green); }
.sdlg__more { display: block; margin-top: 8px; text-align: center; padding: 14px; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 12px; color: var(--white); text-decoration: none; font: 600 13px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.sdlg__more:hover { background: var(--white); color: var(--ink); }
.snone { padding: 28px 8px; }
.snone h3 { font: 800 28px/1 var(--f-disp); font-stretch: 90%; margin-bottom: 8px; }
@media (max-width: 560px) { .sres a { grid-template-columns: 1fr 22px; } .stype { grid-column: 1 / -1; } .ssnip { grid-column: 1 / -1; } .sres .arr { grid-column: 2; grid-row: 2; } }

/* results page */
.spform { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.spform input { flex: 1 1 280px; min-width: 0; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; font: 600 clamp(18px, 2.4vw, 24px)/1.2 var(--f-body); padding: 16px 18px; box-shadow: 5px 5px 0 var(--ink); }
.spform input:focus { box-shadow: 5px 5px 0 var(--green); }
.sp .sres a { background: var(--white); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); margin-bottom: 14px; padding: 18px; color: var(--ink); }
.sp .sres a:hover { background: var(--green); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.sp .sres { gap: 0; }
.spgroup h2 { font: 800 28px/1 var(--f-disp); font-stretch: 62%; text-transform: uppercase; margin: 30px 0 14px; }
.chip .n { opacity: .6; margin-left: 6px; }

/* a note card you arrived at from search */
.mat.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 55% { box-shadow: 0 0 0 6px var(--green), 6px 6px 0 var(--ink); } 100% { box-shadow: 6px 6px 0 var(--ink); } }

.sdlg .stype--Event, .sdlg .stype--Gallery { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

/* =====================================================================
   Header: top bar, announcements, dropdown tabs
   ===================================================================== */
.topbar { display: none; background: var(--ink-2); color: var(--white); font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 760px) { .topbar { display: block; } }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; }
.topbar__w { display: flex; align-items: center; gap: 10px; opacity: .92; margin: 0; }
.topbar__w i { width: 20px; height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--red) 50%, var(--green) 50%); flex: none; }
.topbar__r { display: flex; align-items: center; gap: 10px; }
.topbar__soc { display: inline-flex; gap: 2px; margin-right: 6px; }
.soc { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--white); transition: background .15s, color .15s; }
.soc:hover { background: var(--green); color: var(--ink); }
.pill-join, .pill-admin { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 99px; font: 700 13px/1 var(--f-body); text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.pill-join { background: linear-gradient(90deg, #00a54f, #0a3bff); color: var(--white); box-shadow: 3px 3px 0 rgba(255, 255, 255, .25); }
.pill-join:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(255, 255, 255, .35); }
.pill-admin { border: 2px solid rgba(255, 255, 255, .5); color: var(--white); }
.pill-admin:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
@media (max-width: 1040px) { .topbar__w { display: none; } .topbar__in { justify-content: flex-end; } }

.announce { background: var(--blue); color: var(--white); border-bottom: 3px solid var(--ink); position: relative; z-index: 4; }
.announce[hidden] { display: none; }
.announce__in { display: flex; align-items: center; gap: 14px; height: 46px; }
.announce__t { display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--ink); color: var(--green); padding: 8px 14px; border-radius: 99px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.announce__t b { font-weight: 600; }
@media (max-width: 520px) { .announce__t b { display: none; } .announce__t { padding: 9px 10px; } }
.announce__track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.announce__roll { display: inline-flex; align-items: center; white-space: nowrap; animation: marq 40s linear infinite; }
.announce__track:hover .announce__roll { animation-play-state: paused; }
.announce__roll a, .announce__roll span { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--f-body); color: var(--white); text-decoration: none; padding: 4px 0; }
.announce__roll a:hover { text-decoration: underline; text-underline-offset: 4px; }
.announce__roll i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin: 0 26px; flex: none; }
.announce__x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: transparent; color: var(--white); font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; }
.announce__x:hover { background: var(--white); color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .announce__roll { animation: none !important; } .announce__track { overflow-x: auto; } }

/* dropdown tabs */
.nav__links { gap: clamp(10px, 1.3vw, 22px); }
.nav__links > a, .dd > a { font-size: 11.5px; letter-spacing: .1em; }
.dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.dd__b { display: inline-grid; place-items: center; width: 22px; height: 26px; padding: 0; border: 0; background: none; color: var(--white); border-radius: 6px; }
.dd__b svg { transition: transform .15s; }
.dd:hover .dd__b svg, .dd.open .dd__b svg { transform: rotate(180deg); }
.dd__menu { position: absolute; top: calc(100% + 18px); left: -14px; min-width: 270px; display: none; background: var(--ink); border: 2px solid var(--green); border-top-width: 5px; border-radius: 0 0 16px 16px; padding: 8px; box-shadow: 7px 7px 0 var(--blue); z-index: 95; }
.dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.dd:hover .dd__menu, .dd:focus-within .dd__menu, .dd.open .dd__menu { display: grid; }
.dd__menu a { padding: 11px 12px; border-radius: 8px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--white); }
.dd__menu a::after { display: none; }
.dd__menu a:hover, .dd__menu a:focus-visible { background: var(--green); color: var(--ink); }
.dd__menu a:first-child { margin-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, .25); border-radius: 8px 8px 0 0; }

/* mobile sheet extras */
.sheet-menu a.sub { font: 500 15px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 12px 0 12px 22px; opacity: .85; border-bottom-style: dotted; animation-delay: 120ms; }
.sheet-menu a.mjoin, .sheet-menu a.madmin { display: flex; align-items: center; gap: 10px; margin-top: 22px; border: 0; border-radius: 99px; padding: 16px 22px; font: 700 17px/1 var(--f-body); letter-spacing: 0; text-transform: none; justify-content: center; }
.sheet-menu a.mjoin { background: linear-gradient(90deg, #00a54f, #0a3bff); }
.sheet-menu a.madmin { margin-top: 12px; border: 2px solid rgba(255, 255, 255, .5); }

.chip.is-on { background: var(--ink); color: var(--green); box-shadow: 3px 3px 0 var(--green); }
a.chip { text-decoration: none; display: inline-block; }
.howto--row { grid-template-columns: 1fr; }
@media (min-width: 900px) { .howto--row { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* keep the brand on one line */
.brand { flex: none; }
.brand__t { white-space: nowrap; font-size: 15px; }
@media (min-width: 1180px) and (max-width: 1360px) { .nav__links { gap: 10px; } .nav__links > a, .dd > a { font-size: 10.5px; letter-spacing: .06em; } .nav__in { gap: 14px; } }

/* =====================================================================
   Hero sized to the screen: header + hero + buttons fit in one fold
   ===================================================================== */
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: calc(100vh - 178px); min-height: calc(100svh - 178px); }
  .hero__grid { width: 100%; padding-block: clamp(18px, 4.5vh, 56px); gap: clamp(20px, 3vw, 48px); grid-template-columns: 1.25fr .75fr; }
  .hero__h { font-size: clamp(44px, min(7.2vw, 15.5vh), 128px); margin: clamp(10px, 2vh, 22px) 0 clamp(12px, 2.4vh, 24px); line-height: .86; letter-spacing: -.03em; }
  .hero__h > span:nth-child(1), .hero__h > span:nth-child(2) { display: inline; }
  .hero__h > span:nth-child(1) { margin-right: .2em; text-shadow: 4px 4px 0 var(--red); }
  .hero__h .o { -webkit-text-stroke-width: 2.5px; }
  .hero__lead { font-size: clamp(15px, 2.3vh, 20px); max-width: 32em; }
  .hero__cta { margin-top: clamp(14px, 3vh, 28px); }
  .hero__cta .btn--lg { padding: .8em 1.5em; font-size: clamp(14px, 2vh, 16px); }
  .hero__art { min-height: 0; }
  .medal { width: min(100%, 52vh, 440px); }
  .floaty .cap { width: clamp(70px, 9vh, 110px); height: clamp(28px, 3.6vh, 44px); }
}
@media (min-width: 900px) and (max-height: 780px) { .hero__note { display: none; } }

/* let the hero grow on big monitors */
@media (min-width: 1500px) and (min-height: 820px) {
  .hero__h { font-size: clamp(60px, min(7.4vw, 15.5vh), 176px); }
  .hero__lead { font-size: clamp(17px, 2.2vh, 24px); }
  .medal { width: min(100%, 54vh, 600px); }
}

/* =====================================================================
   Hero v2: one word per line, sized by screen height, big logo, tight top
   Header (top bar + nav + announcements) is about 178px tall.
   ===================================================================== */
@media (min-width: 900px) {
  .hero { display: block; min-height: 0; }
  .hero__grid {
    align-items: center; gap: clamp(16px, 2.5vw, 40px);
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    min-height: calc(100vh - 178px); min-height: calc(100svh - 178px);
    padding-block: clamp(8px, 1.6vh, 18px) clamp(10px, 2vh, 22px);
  }
  .hero__copy { align-self: start; padding-top: clamp(0px, .6vh, 8px); }
  .hero__h {
    font-size: clamp(44px, min(calc((100vh - 178px) * .225), 10.2vw, 150px), 150px);
    font-size: clamp(44px, min(calc((100svh - 178px) * .225), 10.2vw, 150px), 150px);
    line-height: .84; margin: clamp(8px, 1.4vh, 16px) 0 clamp(10px, 2vh, 20px); letter-spacing: -.03em;
  }
  .hero__h > span:nth-child(1), .hero__h > span:nth-child(2) { display: block; margin-right: 0; }
  .hero__h > span:nth-child(1) { text-shadow: 5px 5px 0 var(--red); }
  .hero__h .o { -webkit-text-stroke-width: 3px; }
  .hero__lead { font-size: clamp(15px, 2.3vh, 20px); max-width: 28em; }

  /* the logo gets the whole height of the fold */
  .hero__art { justify-self: center; align-self: center; width: min(100%, calc(100vh - 190px), 720px); width: min(100%, calc(100svh - 190px), 720px); aspect-ratio: 1; min-height: 0; display: block; position: relative; }
  .medal { width: 100%; }
  .medal::before { inset: 9.5%; }
  .medal__logo { inset: 12.5%; width: 75%; height: 75%; }
  .medal__ring text { font-size: 20px; }
  .floaty .cap { width: clamp(70px, 9vh, 120px); height: clamp(28px, 3.6vh, 48px); }
}

/* announcements: full-width bar, label hard left, ticker runs edge to edge */
.announce__in { display: flex; align-items: center; gap: 16px; height: 46px; width: 100%; padding: 0 0 0 clamp(10px, 1.4vw, 20px); max-width: none; }
.announce__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%); mask-image: linear-gradient(90deg, transparent, #000 2.5%); }
.announce__x { display: none; }

/* =====================================================================
   Hero v3: balanced. Title and logo a notch smaller, both centred.
   ===================================================================== */
@media (min-width: 900px) {
  .hero__grid { min-height: 0; align-items: center; padding-block: clamp(18px, 3.4vh, 38px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__copy { align-self: center; padding-top: 0; }
  .hero__h { font-size: clamp(40px, min(calc((100vh - 178px) * .19), 9vw, 128px), 128px); font-size: clamp(40px, min(calc((100svh - 178px) * .19), 9vw, 128px), 128px); }
  .hero__art { width: min(100%, calc((100vh - 178px) * .8), 540px); width: min(100%, calc((100svh - 178px) * .8), 540px); }
}

/* big screens: the hero fills the fold (tapes sit at the bottom), content stays centred */
@media (min-width: 900px) {
  .hero__grid { min-height: calc(100vh - 178px - 96px); min-height: calc(100svh - 178px - 96px); }
}

/* =====================================================================
   Hero v4: fills the first fold exactly; red and green tapes appear on scroll
   ===================================================================== */
@media (min-width: 900px) {
  .hero__grid { min-height: calc(100vh - 178px); min-height: calc(100svh - 178px); padding-block: clamp(14px, 3vh, 34px); }
  .hero__h { font-size: clamp(40px, min(calc((100vh - 178px) * .215), 10vw, 140px), 140px); font-size: clamp(40px, min(calc((100svh - 178px) * .215), 10vw, 140px), 140px); }
  .hero__art { width: min(100%, calc((100vh - 178px) * .9), 620px); width: min(100%, calc((100svh - 178px) * .9), 620px); }
}
.tickers { margin-top: 0; }

/* the hero background carries on behind the top of the crossing tapes (no light strip) */
.tickers::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 100% at 6% 0%, rgba(0, 245, 122, .3), transparent 72%),
    radial-gradient(36% 100% at 96% 0%, rgba(255, 31, 61, .42), transparent 72%),
    var(--ink);
}

/* =====================================================================
   Header: a little more room (taller bar, bigger logo, labels and button)
   ===================================================================== */
.brand img { width: 54px; height: 54px; }
.brand__t { font-size: 17px; }
.nav__in { gap: 20px; }
.nav__cta { padding: .85em 1.5em; font-size: 15px; }
@media (min-width: 1180px) {
  .nav__links { gap: clamp(12px, 1.25vw, 24px); }
  .nav__links > a, .dd > a { font-size: 12.5px; letter-spacing: .07em; padding: 10px 2px; }
  .nav__search { height: 44px; }
  .dd__b { height: 30px; }
}
@media (min-width: 1180px) and (max-width: 1799px) { .nav__search-t, .nav__search kbd { display: none; } .nav__search { width: 44px; padding: 0; justify-content: center; } }
@media (min-width: 1800px) { .nav__links > a, .dd > a { font-size: 13px; letter-spacing: .09em; } .nav__links { gap: clamp(16px, 1.5vw, 28px); } }

/* narrow laptops: keep everything on one line */
@media (min-width: 1180px) and (max-width: 1349px) {
  .brand img { width: 46px; height: 46px; }
  .brand__t { font-size: 15px; }
  .nav__in { gap: 12px; }
  .nav__links { gap: 10px; }
  .nav__links > a, .dd > a { font-size: 11px; letter-spacing: .04em; }
  .nav__cta { padding: .8em 1.15em; font-size: 14px; }
}

/* =====================================================================
   Admin dashboard
   ===================================================================== */
body.is-admin { background: #eef1fb; }
body.is-admin::after { display: none; }
.ad-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(60% 60% at 80% 0%, rgba(10, 59, 255, .35), transparent 70%), var(--ink); }
.ad-login__card { width: min(100%, 420px); background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 10px 10px 0 var(--blue); padding: 34px 30px; display: grid; gap: 4px; }
.ad-login__card img { border-radius: 50%; margin-bottom: 10px; }
.ad-login__card h1 { font: 900 30px/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.02em; }
.ad-login__card .field { margin: 18px 0 8px; }

.ad-app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.ad-side { background: var(--ink); color: var(--white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 4px solid var(--ink); z-index: 60; }
.ad-brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ad-brand img { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.ad-brand span { font: 800 15px/1.1 var(--f-disp); font-stretch: 110%; text-transform: uppercase; display: grid; }
.ad-brand small { font: 500 10px var(--f-mono); letter-spacing: .16em; color: var(--green); margin-top: 4px; }
#side-nav { padding: 10px 12px 20px; flex: 1; }
.ad-grp { font: 600 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); padding: 16px 10px 6px; }
.ad-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 10px; color: rgba(255, 255, 255, .88); text-decoration: none; font: 600 14.5px/1.2 var(--f-body); border: 0; background: none; text-align: left; }
.ad-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ad-link[aria-current="page"] { background: var(--green); color: var(--ink); }
.ad-badge { min-width: 22px; padding: 3px 7px; border-radius: 99px; background: var(--red); color: #fff; font: 700 11px/1 var(--f-mono); text-align: center; }
.ad-link[aria-current="page"] .ad-badge { background: var(--ink); }
.ad-side__foot { padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 8px; }
.ad-side__foot a, .ad-side__foot button { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-decoration: none; background: none; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 99px; padding: 10px 14px; text-align: center; }
.ad-side__foot a:hover, .ad-side__foot button:hover { background: #fff; color: var(--ink); }
.ad-main { min-width: 0; }
.ad-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 3vw, 32px); background: rgba(238, 241, 251, .94); backdrop-filter: blur(6px); border-bottom: 2px solid var(--ink); }
.ad-top h1 { font: 900 clamp(22px, 2.6vw, 30px)/1 var(--f-disp); font-stretch: 90%; text-transform: uppercase; letter-spacing: -.01em; margin-right: auto; }
.ad-top__r { display: flex; gap: 10px; }
.ad-menu { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); padding: 0; place-content: center; gap: 5px; }
.ad-menu i { display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.ad-scrim { display: none; }
.ad-view { padding: clamp(16px, 3vw, 32px); outline: none; }
@media (max-width: 960px) {
  .ad-app { grid-template-columns: 1fr; }
  .ad-side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-102%); transition: transform .22s; box-shadow: 10px 0 40px rgba(0, 0, 0, .4); }
  .ad-app.menu-open .ad-side { transform: none; }
  .ad-app.menu-open .ad-scrim { display: block; position: fixed; inset: 0; background: rgba(5, 7, 26, .6); z-index: 55; }
  .ad-menu { display: grid; }
  .ad-top__r .btn--ghost { display: none; }
}

/* cards and layout */
.ad-grid { display: grid; gap: 18px; }
.ad-stats { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 22px; }
.ad-stat { display: grid; gap: 6px; padding: 18px 20px; background: var(--white); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--c, var(--blue)); text-decoration: none; color: inherit; }
a.ad-stat:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--c, var(--blue)); }
.ad-stat span { font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ad-stat b { font: 900 clamp(28px, 3vw, 38px)/1 var(--f-disp); font-stretch: 100%; letter-spacing: -.02em; }
.ad-stat small { font-size: 13px; opacity: .7; }
.ad-stat--red { --c: var(--red); } .ad-stat--green { --c: var(--green); } .ad-stat--blue { --c: var(--blue); }
.ad-cols { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 1100px) { .ad-cols { grid-template-columns: 1.5fr 1fr; } .ad-cols--even { grid-template-columns: 1fr 1fr; } }
.ad-card { background: var(--white); border: 2px solid var(--ink); border-radius: 18px; padding: 20px; box-shadow: 6px 6px 0 var(--ink); min-width: 0; }
.ad-card > h2, .ad-card__h h2 { font: 800 20px/1.1 var(--f-disp); font-stretch: 85%; text-transform: uppercase; letter-spacing: -.005em; }
.ad-card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ad-card > h2 { margin-bottom: 14px; }
.ad-list { display: grid; }
.ad-list > * { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px dashed rgba(5, 7, 26, .25); font-size: 14.5px; }
.ad-list > *:first-child { border-top: 0; }
.ad-list small { opacity: .65; display: block; }
.ad-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.ad-bars > div { flex: 1; display: grid; align-content: end; gap: 3px; height: 100%; text-align: center; }
.ad-bars i { display: block; border-radius: 4px 4px 0 0; min-height: 2px; }
.ad-bars .b1 { background: var(--blue); } .ad-bars .b2 { background: var(--green); }
.ad-bars span { font: 500 9px var(--f-mono); opacity: .6; }
.ad-legend { display: flex; gap: 16px; font: 500 12px var(--f-mono); margin-top: 10px; }
.ad-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* toolbars, tables */
.ad-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.ad-tools .sp { flex: 1; }
.ad-tools input[type=search], .ad-tools select { width: auto; min-width: 200px; padding: 10px 14px; }
.ad-tools input[type=search] { flex: 1 1 240px; max-width: 420px; }
.ad-view table th { position: sticky; top: 0; }
.ad-view td .btn { margin: 2px 4px 2px 0; }
.ad-view .tablewrap { box-shadow: 5px 5px 0 var(--ink); max-height: none; }
.ad-view td small { opacity: .7; display: block; }
.ad-view tr.is-sel td { background: #e8efff; }
.ad-view .chk { width: 18px; height: 18px; accent-color: var(--blue); }
.ad-bulk { display: none; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 12px; margin-bottom: 14px; }
.ad-bulk.on { display: flex; }
.ad-bulk select { width: auto; padding: 8px 12px; background: #fff; color: var(--ink); }
.ad-empty { padding: 36px; text-align: center; border: 2px dashed var(--ink); border-radius: 16px; font: 500 14px var(--f-mono); background: var(--white); }

/* modal */
dialog.ad-modal { border: 3px solid var(--ink); border-radius: 20px; padding: 0; width: min(96vw, 760px); max-height: 92vh; background: var(--white); box-shadow: 10px 10px 0 var(--blue); color: var(--ink); overflow: hidden; }
dialog.ad-modal.wide { width: min(96vw, 1000px); }
dialog.ad-modal::backdrop, dialog.ad-confirm::backdrop { background: rgba(5, 7, 26, .72); }
.ad-modal__in { display: flex; flex-direction: column; max-height: 92vh; }
.ad-modal__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.ad-modal__h h2 { font: 800 21px/1.1 var(--f-disp); font-stretch: 85%; text-transform: uppercase; }
.ad-modal__x { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-size: 22px; line-height: 1; }
.ad-modal__b { padding: 20px; overflow-y: auto; }
dialog.ad-confirm { border: 3px solid var(--ink); border-radius: 18px; padding: 0; width: min(92vw, 440px); box-shadow: 8px 8px 0 var(--red); color: var(--ink); }
.ad-confirm__in { padding: 24px; display: grid; gap: 10px; }
.ad-confirm__in h2 { font: 800 22px/1.1 var(--f-disp); font-stretch: 85%; text-transform: uppercase; }
.ad-confirm__act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* toasts */
.ad-toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 300; max-width: min(92vw, 380px); }
.ad-toast { padding: 13px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 4px 4px 0 var(--green); animation: rise .25s both; }
.ad-toast--err { background: var(--red); box-shadow: 4px 4px 0 var(--ink); }

/* form builder */
.ff { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.ff > label { font: 600 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.ff .dim { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ff-group { display: grid; gap: 0 16px; padding: 14px 14px 2px; border: 2px dashed rgba(5, 7, 26, .35); border-radius: 14px; }
@media (min-width: 640px) { .ff-cols .ff-group, .ff-root.ff-cols, .ff-item__body.ff-cols { grid-template-columns: 1fr 1fr; } }
.ff-root { display: grid; gap: 0 16px; }
.ff--wide { grid-column: 1 / -1; }
.ff-list { display: grid; gap: 12px; }
.ff-item { border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); overflow: hidden; }
.ff-item__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--ink); color: #fff; font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.ff-item__bar button { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 6px; padding: 3px 8px; font: 600 12px var(--f-mono); }
.ff-item__bar button:hover { background: #fff; color: var(--ink); }
.ff-item__body { padding: 14px 14px 2px; display: grid; gap: 0 16px; }
.ff-days { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-days label { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); border-radius: 99px; padding: 7px 12px; font: 600 12px var(--f-mono); letter-spacing: .05em; text-transform: none; cursor: pointer; background: #fff; }
.ff-days input { accent-color: var(--blue); }
.ff-check { display: flex; align-items: center; gap: 10px; font: 600 14px var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.ff-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.ff-img { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ff-img input[type=text] { flex: 1 1 200px; }
.ff-img img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 2px solid var(--ink); }
.ad-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ad-actions .sp { flex: 1; }
.ad-detail { display: grid; gap: 4px; margin-bottom: 14px; }
.ad-detail div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(5, 7, 26, .25); font-size: 14.5px; }
.ad-detail dt { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.ad-detail dd { margin: 0; font-weight: 600; word-break: break-word; }
.ad-receipt { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; text-align: center; margin-bottom: 14px; }
.ad-receipt img { max-height: 340px; margin: 0 auto; }
.ad-receipt iframe { width: 100%; height: 340px; border: 0; }
.ad-md { display: grid; gap: 14px; }
@media (min-width: 900px) { .ad-md { grid-template-columns: 1fr 1fr; } }
.ad-preview { border: 2px solid var(--ink); border-radius: 12px; padding: 14px 18px; background: #fff; max-height: 420px; overflow: auto; font-size: 16px; }
.ad-note { font-size: 13px; opacity: .75; }
.ad-danger { border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }

.pill--valid, .pill--showing { background: var(--green); color: var(--ink); }
.ff:has(> input[type=hidden]) { display: none; }
.ad-view .tagpill--blue { background: var(--blue); }

/* =====================================================================
   Header elevated (same size, more depth), Join pill in our colours,
   floating CTAs, leader profile, author byline
   ===================================================================== */
:root { --gold: #ffc642; }

/* ---- header: depth, glow, animated rail. No dimension changes. ---- */
.nav {
  background:
    radial-gradient(48% 240% at 10% -50%, rgba(10, 59, 255, .6), transparent 62%),
    radial-gradient(34% 220% at 94% 150%, rgba(255, 31, 61, .42), transparent 62%),
    radial-gradient(26% 200% at 52% 160%, rgba(0, 245, 122, .16), transparent 62%),
    linear-gradient(180deg, #0d1646 0%, #080d2c 52%, #05071a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px -12px rgba(10, 59, 255, .6), 0 5px 0 var(--ink);
}
.nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 20px); -webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); }
.nav__in { position: relative; z-index: 1; }
.nav::after { background: linear-gradient(90deg, var(--red), var(--gold), var(--green), var(--blue), var(--red)); background-size: 200% 100%; animation: rail 8s linear infinite; }
@keyframes rail { to { background-position: -200% 0; } }

.brand { position: relative; }
.brand::before { content: ""; position: absolute; left: -7px; top: 50%; width: 68px; height: 68px; margin-top: -34px; border-radius: 50%; background: conic-gradient(var(--red), var(--gold), var(--green), var(--blue), var(--red)); animation: spin 9s linear infinite; z-index: 0; box-shadow: 0 0 22px rgba(255, 198, 66, .35); }
.brand img { position: relative; z-index: 1; }
.brand__t { text-shadow: 2px 2px 0 rgba(255, 31, 61, .95); }
.brand__t b { text-shadow: 2px 2px 0 rgba(255, 31, 61, .95), 0 0 16px rgba(255, 198, 66, .5); }

/* tabs: a pill pops up behind the hovered tab; the current page is a gold pill */
.nav__links > *:nth-child(3n+1) { --hv: var(--red); --hvt: #fff; }
.nav__links > *:nth-child(3n+2) { --hv: var(--blue); --hvt: #fff; }
.nav__links > *:nth-child(3n) { --hv: var(--green); --hvt: var(--ink); }
.nav__links > a, .dd > a { position: relative; isolation: isolate; transition: color .18s; }
.nav__links > a::after, .dd > a::after { display: none; }
.nav__links > a::before, .dd > a::before { content: ""; position: absolute; inset: 1px -9px; border-radius: 99px; background: var(--hv, var(--red)); transform: scale(.72); opacity: 0; transition: transform .24s cubic-bezier(.3, 1.7, .5, 1), opacity .16s; z-index: -1; }
.nav__links > a:hover, .nav__links > a:focus-visible, .dd:hover > a, .dd:focus-within > a { color: var(--hvt, #fff); }
.nav__links > a:hover::before, .nav__links > a:focus-visible::before, .dd:hover > a::before, .dd:focus-within > a::before { opacity: 1; transform: scale(1); }
.nav__links > a[aria-current="page"], .dd > a[aria-current="page"] { color: var(--ink); }
.nav__links > a[aria-current="page"]::before, .dd > a[aria-current="page"]::before { opacity: 1; transform: none; background: var(--gold); box-shadow: 2px 2px 0 rgba(255, 255, 255, .35); }
.dd:hover > .dd__b, .dd:focus-within > .dd__b { color: var(--hvt, #fff); }

/* search button: glassy with a hard blue shadow */
.nav__search { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .75); box-shadow: 3px 3px 0 var(--blue), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .14s, box-shadow .14s, background .14s; }
.nav__search:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--blue); }

/* Book button: glossy red with a shine that sweeps across now and then */
.nav .nav__cta { position: relative; overflow: hidden; background: linear-gradient(180deg, #ff5a72 0%, #ff1f3d 46%, #cf001e 100%); border-color: #fff; box-shadow: 3px 3px 0 var(--gold), inset 0 1px 0 rgba(255, 255, 255, .45); }
.nav .nav__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-130%); animation: shine 5s ease-in-out infinite; pointer-events: none; }
.nav .nav__cta:hover { box-shadow: 5px 5px 0 var(--gold), inset 0 1px 0 rgba(255, 255, 255, .45); }
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }

/* ---- Join Community: our colours (blue and gold), not the borrowed green gradient ---- */
.pill-join, .sheet-menu a.mjoin, .fab__btn--join { background: linear-gradient(135deg, #1747ff 0%, #0a3bff 40%, #0a1fa8 100%); color: #fff; }
.pill-join { box-shadow: inset 0 0 0 2px var(--gold), 3px 3px 0 rgba(255, 198, 66, .35); position: relative; overflow: hidden; }
.pill-join svg { color: var(--gold); }
.pill-join::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-130%); animation: shine 6s ease-in-out infinite 1.2s; pointer-events: none; }
.pill-join:hover { box-shadow: inset 0 0 0 2px var(--gold), 5px 5px 0 rgba(255, 198, 66, .5); }
.sheet-menu a.mjoin { box-shadow: inset 0 0 0 2px var(--gold); }
.sheet-menu a.mjoin svg { color: var(--gold); }

/* ---- floating quick actions, bottom right ---- */
.fab { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 70; display: grid; gap: 14px; justify-items: end; pointer-events: none; }
.fab__btn { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px 9px 9px; border-radius: 99px; border: 2px solid var(--ink); color: #fff; text-decoration: none; font: 700 15px/1 var(--f-body); letter-spacing: .01em; box-shadow: 4px 4px 0 var(--ink); will-change: transform; transition: box-shadow .22s, filter .2s; }
.fab__btn--book { background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) 0 0 / 260% 100% no-repeat, linear-gradient(135deg, #ff3b58 0%, var(--red) 45%, #c4001d 100%); animation: fabbob 5s ease-in-out infinite, sheen 6.5s ease-in-out infinite; }
.fab__btn--join { background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%) 0 0 / 260% 100% no-repeat, linear-gradient(135deg, #1747ff 0%, #0a3bff 40%, #0a1fa8 100%); animation: fabbob 5s ease-in-out infinite -2.5s, sheen 6.5s ease-in-out infinite 2.2s; }
.fab__btn svg { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 50%; background: #fff; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.fab__btn--book svg { color: var(--red-d); }
.fab__btn--join svg { color: #0a1fa8; }
.fab__btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; animation: ping 3.4s ease-out infinite; }
.fab__btn--join::before { box-shadow: 0 0 0 0 rgba(255, 198, 66, .7); }
.fab__btn--book::before { box-shadow: 0 0 0 0 rgba(255, 31, 61, .6); animation-delay: 1.7s; }
.fab__btn:hover { animation-play-state: paused; box-shadow: 6px 9px 0 var(--ink); filter: saturate(1.15); }
.fab__btn:hover svg { transform: rotate(-14deg) scale(1.14); }
.fab__btn:active { box-shadow: 1px 1px 0 var(--ink); }
.fab__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@keyframes fabbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes sheen { 0% { background-position: 160% 0, 0 0; } 55%, 100% { background-position: -70% 0, 0 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--ring, rgba(255, 198, 66, .6)); opacity: 1; } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); opacity: 0; } }
.fab__btn--join { --ring: rgba(255, 198, 66, .65); } .fab__btn--book { --ring: rgba(255, 31, 61, .6); }
.fab__btn:hover::before { animation: none; }
@media (max-width: 520px) { .fab__btn { font-size: 14px; padding: 7px 16px 7px 7px; } .fab__btn--join span { display: none; } .fab__btn--join { padding: 7px; } }
body.menu-open .fab { display: none; }
@media print { .fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab__btn, .fab__btn::before, .nav::after, .brand::before, .nav .nav__cta::after, .pill-join::after { animation: none !important; } }

/* ---- leader profile ---- */
.lh { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.lh__glow { position: absolute; inset: 0; background: radial-gradient(50% 70% at 86% 28%, rgba(10, 59, 255, .65), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 198, 66, .2), transparent 70%), radial-gradient(30% 40% at 100% 100%, rgba(255, 31, 61, .38), transparent 70%); }
.lh__grid { position: relative; display: grid; gap: 44px; padding-block: clamp(36px, 6vw, 84px) clamp(60px, 8vw, 110px); align-items: center; }
@media (min-width: 900px) { .lh__grid { grid-template-columns: 1.1fr .9fr; } }
.lh__h { font: 900 clamp(46px, 8.6vw, 120px)/.86 var(--f-disp); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.03em; margin: 18px 0 24px; }
.lh__h span { display: block; }
.lh__h .lh__dr { display: inline-block; font: 700 clamp(16px, 2vw, 24px)/1 var(--f-mono); font-stretch: 100%; letter-spacing: .2em; background: var(--gold); color: var(--ink); padding: 9px 16px; border-radius: 99px; transform: rotate(-3deg); margin-bottom: 18px; box-shadow: 3px 3px 0 var(--red); }
.lh__w1 { color: #fff; text-shadow: 5px 5px 0 var(--red); }
.lh__w2 { color: transparent; -webkit-text-stroke: 3px #fff; }
.lh__w3 { color: var(--gold); }
.lh__lead { font-size: clamp(17px, 1.7vw, 21px); max-width: 30em; color: rgba(255, 255, 255, .9); }
.lh__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.lh__photo { position: relative; margin: 0; justify-self: center; width: min(100%, 440px); transform: rotate(2deg); }
.lh__photo img { width: 100%; height: auto; display: block; border: 4px solid #fff; box-shadow: 12px 12px 0 var(--blue), 0 0 0 4px var(--ink); background: var(--ink-2); }
.lh__photo figcaption { position: absolute; left: 12px; bottom: -36px; color: var(--gold) !important; transform: rotate(-2deg); }
.lh__stk { position: absolute; right: -12px; top: 20px; transform: rotate(6deg); background: var(--gold); }
.lh__cap { position: absolute; width: 96px; height: 38px; transform: rotate(var(--r, 0deg)); }
.lh__cap--1 { left: -38px; bottom: 90px; --r: -26deg; } .lh__cap--2 { right: -34px; bottom: 150px; --r: 30deg; }
.facts-card { margin: 0; display: grid; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 8px 8px 0 var(--green); overflow: hidden; align-self: start; }
.facts-card div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 16px 22px; border-top: 1px dashed rgba(5, 7, 26, .3); align-items: baseline; }
.facts-card div:first-child { border-top: 0; }
.facts-card dt { font: 600 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.facts-card dd { margin: 0; font-weight: 700; }
.lh__sessions { background: var(--white); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--blue); padding: 6px 20px; }
.lh__sessions > * { padding: 16px 0; }
.is-leader .postlist--3 .post { color: var(--ink); }

/* home: meet the leader */
.lhome { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .lhome { grid-template-columns: .8fr 1.2fr; gap: 72px; } }
.lhome__ph { position: relative; margin: 0; width: min(100%, 380px); justify-self: center; transform: rotate(-2deg); }
.lhome__ph img { width: 100%; height: auto; display: block; border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.lhome__ph .sticker { position: absolute; right: -14px; bottom: 26px; background: var(--gold); transform: rotate(5deg); }

/* byline and author box on blog posts */
.byline { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.byline img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.byline span { display: grid; line-height: 1.2; } .byline b { font-size: 17px; } .byline small { font: 500 12px var(--f-mono); letter-spacing: .06em; opacity: .7; text-transform: uppercase; }
.authorbox { display: grid; grid-template-columns: 104px 1fr; gap: 22px; align-items: center; margin-top: 52px; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 7px 7px 0 var(--gold); }
.authorbox img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.authorbox h2 { font: 800 24px/1.1 var(--f-disp); font-stretch: 90%; margin: 6px 0 8px; }
.authorbox p { font-size: 15px; opacity: .85; margin-bottom: 12px; }
@media (max-width: 560px) { .authorbox { grid-template-columns: 1fr; text-align: left; } }

/* shine as a background layer (no overflow clipping, so no layout shift) */
.nav .nav__cta { overflow: visible; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) 0 0 / 260% 100% no-repeat, linear-gradient(180deg, #ff5a72 0%, #ff1f3d 46%, #cf001e 100%); animation: sheen 6s ease-in-out infinite; }
.nav .nav__cta::after { display: none; }
.pill-join { overflow: visible; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) 0 0 / 260% 100% no-repeat, linear-gradient(135deg, #1747ff 0%, #0a3bff 40%, #0a1fa8 100%); animation: sheen 7s ease-in-out infinite 1.4s; }
.pill-join::after { display: none; }
@media (prefers-reduced-motion: reduce) { .nav .nav__cta, .pill-join { animation: none !important; } }

/* leader name: three lines that fit their column */
.lh__h { font-size: clamp(38px, 5.2vw, 76px); line-height: .9; }
.lh__h span { white-space: nowrap; }
.lh__w2 { -webkit-text-stroke-width: 2.5px; }

/* hero logo ring: same rotating red / gold / green / blue band as the header logo */
.medal::before { background: conic-gradient(var(--red), var(--gold), var(--green), var(--blue), var(--red)); animation: spin 9s linear infinite; box-shadow: 0 0 34px rgba(255, 198, 66, .4), 0 0 70px rgba(10, 59, 255, .35); inset: 8.2%; }
.medal__logo { inset: 12.5%; width: 75%; height: 75%; box-shadow: 0 0 0 6px var(--ink); } /* equal width and inset on every screen, so the logo sits in the middle of the ring on phones too */

/* Sign-in steps, setup wizard and security panels */
.ad-login__card { gap: 6px; }
.ad-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; padding: 0; list-style: none; }
.ad-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid rgba(5, 7, 26, .25); border-radius: 99px; font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(5, 7, 26, .5); }
.ad-steps li b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(5, 7, 26, .12); font-size: 11px; }
.ad-steps li.on { border-color: var(--ink); color: var(--ink); background: var(--gold); }
.ad-steps li.on b { background: var(--ink); color: #fff; }
.ad-steps li.done { border-color: var(--green-d); color: var(--ink); background: #d9ffeb; }
.ad-steps li.done b { background: var(--green-d); color: #fff; }
.ad-login__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.ad-codes { background: var(--ink); color: var(--green); border-radius: 12px; padding: 16px; font: 600 17px/1.7 var(--f-mono); letter-spacing: .1em; text-align: center; margin: 0 0 12px; user-select: all; }
.ad-check { display: grid; gap: 0; }
.ad-check > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px dashed rgba(5, 7, 26, .25); }
.ad-check > div:first-child { border-top: 0; }
.ad-check span { font-weight: 600; } .ad-check small { display: block; font-weight: 400; opacity: .7; }
.ad-ok, .ad-warn { display: inline-block; padding: 5px 11px; border-radius: 99px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.ad-ok { background: var(--green); color: var(--ink); } .ad-warn { background: var(--red); color: #fff; }
.ad-forms { display: grid; gap: 22px; }
@media (min-width: 900px) { .ad-forms { grid-template-columns: 1fr 1fr; } }
.ad-forms .ad-card .field { margin-bottom: 12px; }

/* Header: edge to edge, logo at the left, links spread across, search and Book at the right */
.nav__in { max-width: none; padding-inline: clamp(14px, 1.6vw, 32px); }
.nav__side { display: contents; }
.brand { order: -2; }
@media (min-width: 1180px) {
  .nav__in { display: flex; gap: clamp(12px, 1.6vw, 30px); }
  .brand { order: 1; margin: 0; }
  .nav__links { display: contents; }
  .nav__links > * { order: 2; margin-inline: auto; }
  .nav__search { order: 4; } .nav__cta { order: 5; }
  .nav__links > a, .dd > a { font: 800 13px/1 var(--f-disp); font-stretch: 112%; letter-spacing: .05em; padding: 10px 2px; }
  .nav__links--r > *:nth-child(3n+1) { --hv: var(--blue); --hvt: #fff; }
  .nav__links--r > *:nth-child(3n+2) { --hv: var(--green); --hvt: var(--ink); }
  .nav__links--r > *:nth-child(3n) { --hv: var(--red); --hvt: #fff; }
}
@media (min-width: 1180px) and (max-width: 1649px) { .nav__links > a, .dd > a { font-size: 12px; font-stretch: 100%; letter-spacing: .02em; } .nav__cta { padding: .8em 1.1em; font-size: 14px; } }
@media (min-width: 1650px) { .nav__links > a, .dd > a { font-size: 13px; font-stretch: 112%; letter-spacing: .05em; } }
@media (min-width: 1800px) { .nav__links > a, .dd > a { font-size: 14.5px; } }
@media (min-width: 1180px) and (max-width: 1279px) { .nav__links > a, .dd > a { font-size: 10.5px; letter-spacing: 0; } }

/* home: a vision for every student (leader message) */
.vision-sec { padding-block: clamp(36px, 5vw, 72px); }
.vision { position: relative; display: grid; border-radius: 28px; overflow: hidden; color: #fff; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--blue); background: radial-gradient(120% 90% at 0% 0%, #14246b 0%, #0a1244 45%, #05071a 100%); isolation: isolate; }
.vision::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 22px); }
.vision__copy { padding: clamp(28px, 4.4vw, 64px); display: grid; justify-items: start; align-content: center; gap: 18px; position: relative; z-index: 2; }
.vision__h { font: 900 clamp(38px, 5.4vw, 76px)/.95 var(--f-disp); font-stretch: 100%; letter-spacing: -.02em; margin: 6px 0 0; max-width: 9em; text-wrap: balance; }
.vision__h .vg { color: var(--green); } .vision__h .vy { color: var(--gold); }
.vision__q { color: var(--red); margin-top: 6px; }
.vision__quote { margin: 0; font: italic 600 clamp(19px, 1.9vw, 26px)/1.4 var(--f-body); max-width: 30em; }
.vision__msg { margin: 0; max-width: 34em; opacity: .78; font-size: 16px; line-height: 1.6; }
.vision__btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 99px; background: #fff; color: var(--ink); font: 800 16px/1 var(--f-body); text-decoration: none; border: 2px solid #fff; box-shadow: 4px 4px 0 var(--red); transition: transform .14s, box-shadow .14s; margin-top: 6px; }
.vision__btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
.vision__btn svg { transition: transform .2s; } .vision__btn:hover svg { transform: translateX(4px); }
.vision__by { display: flex; align-items: center; gap: 14px; padding-top: 22px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .22); width: 100%; max-width: 34em; }
.vision__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); }
.vision__by span { display: grid; line-height: 1.25; } .vision__by b { font: 800 18px var(--f-disp); font-stretch: 100%; } .vision__by small { opacity: .7; font-size: 14px; }
.vision__ph { margin: 0; position: relative; min-height: 340px; }
.vision__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
@media (min-width: 900px) {
  .vision { grid-template-columns: 1.05fr .95fr; min-height: 600px; }
  .vision__ph img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); object-position: 50% 12%; }
}
@media (max-width: 899px) { .vision__ph { order: -1; min-height: 320px; } .vision__ph img { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); } .vision { box-shadow: 6px 6px 0 var(--blue); } }
.vision__copy { padding: clamp(26px, 3.4vw, 48px) clamp(26px, 4.4vw, 64px); gap: 14px; }
.vision__h { font-size: clamp(36px, 4.6vw, 64px); max-width: 10em; }
@media (min-width: 900px) { .vision { min-height: 540px; } }
.ad-steps.two { grid-template-columns: repeat(2, 1fr); } .ad-steps.two li[data-s="3"] { display: none; }
.ad-off { display: inline-block; padding: 5px 11px; border-radius: 99px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(5, 7, 26, .12); color: var(--ink); }
/* header: equal breathing room on both sides, growing with the screen */
.nav__in { padding-inline: clamp(14px, calc((100vw - 1180px) * .22 + 14px), 110px); }
@media (min-width: 1180px) { .nav__in { gap: 8px; } }
@media (min-width: 1180px) { .nav__search { margin-inline: auto; } }
@media (min-width: 1180px) { .nav__cta { margin-left: auto; } }

/* booking page: the two side cards, refined to sit together */
.bookgrid aside { display: grid; gap: 26px; align-content: start; }
.bookgrid aside .sheet { margin-top: 0 !important; padding: 24px; }
.bookgrid .summary { padding: 24px; gap: 14px; }
.bookgrid .summary dl { gap: 14px; }
.bookgrid .summary dd { font-size: 16px; line-height: 1.3; }
.bookgrid .summary .amount { align-items: center; }
.bookgrid .summary .amount b { font-size: clamp(32px, 3.4vw, 42px); }
.bookgrid .officer { grid-template-columns: 84px 1fr; gap: 16px; }
.bookgrid .officer img { width: 84px; height: 84px; object-fit: cover; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), 4px 6px 0 5px var(--blue); }
.bookgrid .officer h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.08; letter-spacing: -.01em; }
.bookgrid .officer p { font-size: 14px; margin-top: 6px; }
.bookgrid aside .sheet > p { margin-top: 18px !important; padding-top: 16px; border-top: 1px dashed rgba(5, 7, 26, .3); font-size: 15px !important; line-height: 1.55; }

/* ================= home: events rail, why us, voices, chambers, community ================= */
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.sec-head--row > div { display: grid; gap: 14px; max-width: 44em; }
.sec-head--c { justify-items: center; text-align: center; }
.sec-head--c .lead { max-width: 34em; }

/* rails */
.rail { position: relative; }
.rail__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 6px 4px 30px; margin-inline: -4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 min(320px, 82%); scroll-snap-align: start; }
.rail__track > .empty { flex-basis: 100%; }
.rail__btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.rail--static .rail__btns { display: none; }
.rail__b { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); color: var(--ink); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); transition: transform .14s, box-shadow .14s, background .14s; }
.rail__b:hover:not(:disabled) { background: var(--gold); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.rail__b:disabled { opacity: .35; box-shadow: none; }

/* event cards */
.evc { display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); overflow: hidden; box-shadow: 6px 6px 0 var(--ink); }
.evc__cover { position: relative; aspect-ratio: 16 / 10; display: grid; align-content: center; justify-items: start; padding: 20px 22px; color: #fff; overflow: hidden; background: var(--red); isolation: isolate; }
.evc__cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 20px); }
.evc__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.evc--red .evc__cover { background: linear-gradient(135deg, #ff1f3d, #a80019); }
.evc--blue .evc__cover { background: linear-gradient(135deg, #1747ff, #0a1fa8); }
.evc--green .evc__cover { background: linear-gradient(135deg, #00f57a, #008f48); color: var(--ink); }
.evc--gold .evc__cover { background: linear-gradient(135deg, #ffc642, #e08a00); color: var(--ink); }
.evc__d { display: grid; line-height: .9; }
.evc__d b { font: 900 clamp(60px, 6vw, 84px)/.85 var(--f-disp); font-stretch: 100%; letter-spacing: -.03em; }
.evc__d span { font: 700 13px var(--f-mono); letter-spacing: .14em; margin-top: 8px; }
.evc__t { position: absolute; left: 22px; bottom: 16px; font: 600 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(5, 7, 26, .85); color: #fff; }
.evc__s { position: absolute; left: 14px; top: 14px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 2px solid var(--ink); }
.evc__s--up { background: var(--green); color: var(--ink); } .evc__s--done { background: #fff; color: var(--ink); }
.evc__c { position: absolute; right: 14px; top: 14px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.evc__b { display: grid; align-content: start; gap: 14px; padding: 20px 22px 22px; }
.evc__b h3 { font: 800 20px/1.2 var(--f-body); min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evc__host { display: flex; align-items: center; gap: 12px; margin: 0; }
.evc__host img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); object-fit: cover; flex: none; }
.evc__host span { display: grid; line-height: 1.25; min-width: 0; } .evc__host b { font-size: 15px; } .evc__host small { font-size: 13px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evc__w { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0; font: 500 12.5px var(--f-mono); letter-spacing: .02em; opacity: .8; }
.evc .btn { justify-self: stretch; text-align: center; }
.evc--done .evc__cover { filter: saturate(.55); }

/* why us */
.whys { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why { display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 6px 6px 0 var(--ink); transition: transform .18s, box-shadow .18s; }
.why:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.why__art { position: relative; height: 176px; display: grid; place-items: center; color: #fff; overflow: hidden; isolation: isolate; }
.why__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 18px); }
.why__art svg { width: 84px; height: 84px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(4px 4px 0 rgba(5, 7, 26, .5)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.why:hover .why__art svg { transform: scale(1.1) rotate(-4deg); }
.why__art i { position: absolute; right: 16px; top: 12px; font: 900 46px/1 var(--f-disp); font-style: normal; opacity: .28; }
.why--red .why__art { background: linear-gradient(135deg, #ff1f3d, #a80019); }
.why--blue .why__art { background: linear-gradient(135deg, #1747ff, #0a1fa8); }
.why--green .why__art { background: linear-gradient(135deg, #00f57a, #008f48); color: var(--ink); }
.why--gold .why__art { background: linear-gradient(135deg, #ffc642, #e08a00); color: var(--ink); }
.why__b { padding: 22px; display: grid; gap: 10px; align-content: start; }
.why__b h3 { font: 800 21px/1.15 var(--f-body); } .why__b h3 b { color: var(--blue); }
.why--red .why__b h3 b { color: var(--red); } .why--green .why__b h3 b { color: #00863f; } .why--gold .why__b h3 b { color: #b86e00; }
.why__b p { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .82; }

/* voices */
.voices { columns: 1; column-gap: 22px; }
@media (min-width: 700px) { .voices { columns: 2; } } @media (min-width: 1040px) { .voices { columns: 3; } }
.voice { break-inside: avoid; margin: 0 0 22px; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 16px; }
.voice--red { box-shadow: 5px 5px 0 var(--red); } .voice--blue { box-shadow: 5px 5px 0 var(--blue); } .voice--green { box-shadow: 5px 5px 0 var(--green); } .voice--gold { box-shadow: 5px 5px 0 var(--gold); }
.voice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.voice__stars { display: inline-flex; gap: 3px; } .voice__stars i { width: 17px; height: 17px; background: rgba(5, 7, 26, .15); clip-path: polygon(50% 0, 63% 33%, 98% 36%, 71% 58%, 80% 92%, 50% 74%, 20% 92%, 29% 58%, 2% 36%, 37% 33%); } .voice__stars i.on { background: #ffb800; }
.voice blockquote { margin: 0; font: italic 500 16.5px/1.6 var(--f-body); }
.voice figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px dashed rgba(5, 7, 26, .3); }
.voice__av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 15px var(--f-disp); flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.voice--red .voice__av { background: var(--red); } .voice--blue .voice__av { background: var(--blue); } .voice--green .voice__av { background: var(--green); color: var(--ink); } .voice--gold .voice__av { background: var(--gold); color: var(--ink); }
.voice figcaption span:last-child { display: grid; line-height: 1.25; } .voice figcaption b { font-size: 15.5px; } .voice figcaption small { font-size: 13px; opacity: .7; }

/* chambers */
.chc { display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--white); text-decoration: none; color: var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .18s, box-shadow .18s; }
.chc:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.chc__art { position: relative; aspect-ratio: 16 / 9; display: grid; align-content: end; padding: 18px 20px; background: linear-gradient(135deg, #0a1244, #05071a); color: #fff; overflow: hidden; isolation: isolate; }
.chc__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 20px); }
.chc--red .chc__art { background: linear-gradient(135deg, #3a0612, #05071a 70%); } .chc--blue .chc__art { background: linear-gradient(135deg, #0a1fa8, #05071a 70%); } .chc--green .chc__art { background: linear-gradient(135deg, #00562a, #05071a 70%); }
.chc__no { position: absolute; right: 16px; top: 10px; font: 900 56px/1 var(--f-disp); opacity: .2; }
.chc__name { font: 900 clamp(26px, 2.6vw, 34px)/.95 var(--f-disp); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.01em; }
.chc__name b { display: block; font-weight: 900; color: var(--red); } .chc--blue .chc__name b { color: #6f8dff; } .chc--green .chc__name b { color: var(--green); }
.chc__b { padding: 20px 22px 22px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.chc__b h3 { font: 800 20px/1.15 var(--f-body); }
.chc__b p { margin: 0; font-size: 15px; line-height: 1.5; opacity: .8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 700 14px var(--f-body); color: var(--blue); }
.chc:hover .chc__go svg { transform: translateX(4px); } .chc__go svg { transition: transform .2s; }

/* community */
.cstats { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-bottom: 34px; }
.cstat { display: grid; justify-items: center; gap: 4px; padding: 24px 12px; border: 2px solid var(--ink); border-radius: 20px; text-align: center; box-shadow: 5px 5px 0 var(--ink); background: var(--white); }
.cstat b { font: 900 clamp(36px, 5vw, 60px)/1 var(--f-disp); font-stretch: 100%; letter-spacing: -.02em; }
.cstat span { font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.cstat--blue { background: #e9efff; } .cstat--blue b { color: var(--blue); } .cstat--green { background: #dcffec; } .cstat--green b { color: #00863f; } .cstat--red { background: #ffe5e9; } .cstat--red b { color: var(--red); }
@media (max-width: 560px) { .cstats { gap: 10px; } .cstat { padding: 16px 6px; } }
.cmc { display: grid; justify-items: center; gap: 6px; padding: 24px 18px 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); text-align: center; box-shadow: 5px 5px 0 var(--ink); }
.cmc__ph { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font: 900 30px var(--f-disp); color: #fff; background: var(--blue); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); margin-bottom: 10px; }
.cmc__ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cmc__ph--red { background: var(--red); } .cmc__ph--green { background: var(--green); color: var(--ink); } .cmc__ph--gold { background: var(--gold); color: var(--ink); }
.cmc__tick { position: absolute; right: -2px; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 12.5l4.5 4.5L19 7.5%22 fill=%22none%22 stroke=%22%2305071a%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / 62% no-repeat; border: 2px solid var(--ink); }
.cmc h3 { font: 800 18px/1.2 var(--f-body); } .cmc p { margin: 0; font-size: 14.5px; opacity: .85; line-height: 1.35; }
.cmc small { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .65; min-height: 1.3em; }
.cmc .btn { margin-top: 12px; }
.cmc, .evc, .chc { min-width: 0; }

/* desktop: render at 90% so a 100% browser looks like the 90% view (admin panel excluded) */
@media (min-width: 1100px) {
  html:not(:has(body.is-admin)) { zoom: .9; }
  html:not(:has(body.is-admin)) .hero__grid { min-height: calc(100svh / .9 - 178px); }
}
.pagehead p.lead, .pagehead .lead { color: #fff; opacity: 1; }

/* ask the team (WhatsApp), ambassador application, certificate claim */
.askcards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 360px)); }
.ask { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: center; padding: 22px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); box-shadow: 6px 6px 0 var(--ink); }
.ask--green { box-shadow: 6px 6px 0 var(--green); } .ask--blue { box-shadow: 6px 6px 0 var(--blue); } .ask--red { box-shadow: 6px 6px 0 var(--red); }
.ask__av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--f-disp); background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.ask--green .ask__av { background: var(--green); color: var(--ink); } .ask--blue .ask__av { background: var(--blue); } .ask--red .ask__av { background: var(--red); }
.ask h3 { font: 800 18px/1.2 var(--f-body); } .ask__r { margin: 2px 0 0; font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ask__t { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; opacity: .85; }
.ask .btn { grid-column: 1 / -1; margin-top: 10px; text-align: center; }
.callout { margin: 0 0 18px; padding: 14px 16px; border: 2px dashed var(--ink); border-radius: 14px; background: #fff8e1; font-size: 15px; line-height: 1.5; }
.callout a { color: var(--blue); font-weight: 700; }
.applygrid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .applygrid { grid-template-columns: .8fr 1.2fr; } .applygrid > div:first-child { position: sticky; top: calc(var(--nav-h) + 24px); } }
#apply-form .field, #claim-form .field, #join-extra .field { margin-bottom: 14px; }
#apply-form .ff-check { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/1.4 var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; }
#apply-form .ff-check input { margin-top: 3px; flex: none; }

/* verify: safe public summary, holder unlock, badge */
.safety { margin-top: 18px; padding: 14px 16px; border: 2px dashed currentColor; border-radius: 14px; font-size: 15px; line-height: 1.5; opacity: .95; }
.unlockzone { padding: 24px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: 6px 6px 0 var(--green); align-self: start; }
.unlockzone .field { margin-bottom: 12px; }
.badgebox { display: grid; gap: 14px; justify-items: start; margin-top: 22px; padding: 18px; border: 2px dashed currentColor; border-radius: 18px; }
.badgebox canvas { width: 180px; height: 180px; border-radius: 14px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--green); }
a[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* join page */
.chambtns { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0 0 8px; padding: 0; border: 0; }
.cb { position: relative; display: grid; gap: 4px; text-align: left; padding: 18px 18px 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .14s, box-shadow .14s, background .14s; cursor: pointer; }
.cb:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.cb__n { font: 700 12px var(--f-mono); letter-spacing: .12em; opacity: .55; }
.cb b { font: 800 19px/1.15 var(--f-body); } .cb small { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.cb.on { background: var(--green); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.cb--red.on { background: var(--red); color: #fff; } .cb--blue.on { background: var(--blue); color: #fff; } .cb--gold.on { background: var(--gold); } .cb--ink.on { background: var(--ink); color: #fff; }
.cb.on::after { content: "Selected"; position: absolute; right: 12px; top: 12px; font: 700 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.cb:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.chamnote { min-height: 1.6em; margin: 6px 2px 26px; font-size: 16px; opacity: .85; }
.joingrid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .joingrid { grid-template-columns: 1fr 1fr; } }
.joinform .field { margin-bottom: 14px; }
.joinagree { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 16px; font: 500 15px/1.4 var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; }
.joinagree input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--blue); }

/* membership terms on the join form and the legal page */
.terms { margin: 28px 0 18px; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: #fff8e1; box-shadow: 5px 5px 0 var(--gold); }
.terms ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.terms li { padding-left: 22px; position: relative; font-size: 15.5px; line-height: 1.5; }
.terms li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 3px; background: var(--red); }
.terms a { color: var(--blue); font-weight: 700; }
.joinagree a { color: var(--blue); font-weight: 700; }
.legal h3 { font: 800 19px/1.2 var(--f-body); margin: 26px 0 8px; }
.legal__toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.legal__toc a { padding: 8px 14px; border: 2px solid var(--ink); border-radius: 99px; font: 600 13px var(--f-mono); text-decoration: none; background: #fff; }
.legal__toc a:hover { background: var(--green); }
.legal h2[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* leader profile: background cards and books */
.pcards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.pcard { padding: 26px; border: 2px solid var(--ink); border-radius: 22px; background: var(--white); box-shadow: 7px 7px 0 var(--ink); }
.pcard--red { box-shadow: 7px 7px 0 var(--red); } .pcard--blue { box-shadow: 7px 7px 0 var(--blue); } .pcard--green { box-shadow: 7px 7px 0 var(--green); } .pcard--gold { box-shadow: 7px 7px 0 var(--gold); }
.pcard h3 { font: 900 24px/1.1 var(--f-disp); font-stretch: 85%; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px dashed rgba(5, 7, 26, .3); }
.pcard ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pcard li { display: grid; gap: 4px; padding-left: 18px; position: relative; }
.pcard li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }
.pcard--red li::before { background: var(--red); } .pcard--blue li::before { background: var(--blue); } .pcard--green li::before { background: #00b85c; } .pcard--gold li::before { background: #e08a00; }
.pcard li b { font: 800 16.5px/1.25 var(--f-body); } .pcard li span { font-size: 15.5px; line-height: 1.55; opacity: .85; }
.books { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.book { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 6px 6px 0 var(--ink); }
.book__spine { align-self: stretch; min-height: 120px; border-radius: 6px 12px 12px 6px; border: 2px solid var(--ink); background: var(--red); position: relative; display: block; }
.book--blue .book__spine { background: var(--blue); } .book--green .book__spine { background: var(--green); }
.book__spine i { position: absolute; left: 10px; right: 10px; top: 18px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); box-shadow: 0 14px 0 rgba(255, 255, 255, .55); }
.book h3 { font: 800 20px/1.2 var(--f-body); margin: 10px 0 8px; } .book p { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .85; }

/* footer contacts */
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr; } }
.foot__talk li a { display: grid; gap: 2px; }
.foot__num { font: 500 13px var(--f-mono); letter-spacing: .04em; opacity: .75; }
.askband .ask { color: var(--ink); }

/* a person's own social links */
.slinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.slink { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 2px solid currentColor; border-radius: 99px; font: 700 13px var(--f-body); text-decoration: none; color: inherit; transition: transform .14s, background .14s, color .14s; }
.slink:hover { transform: translateY(-2px); background: var(--green); color: var(--ink); border-color: var(--ink); }
.slink svg { width: 16px; height: 16px; flex: none; }
.slinks--on-dark .slink { color: #fff; border-color: rgba(255, 255, 255, .55); }
.slinks--on-dark .slink:hover { color: var(--ink); border-color: var(--green); }
.leader .slinks { margin-top: 14px; }

/* ===== audit fixes ===== */
/* readable text on green page headers and on the gallery channel cards */
.pagehead--green p.lead, .pagehead--green .lead { color: var(--ink); }
.channels a { color: var(--ink); }
/* number, time and other inputs look like the rest of the form */
input[type=number], input[type=time], input[type=url], input:not([type]) { width: 100%; border: 2px solid var(--ink); background: var(--paper); border-radius: 12px; padding: 13px 15px; font-size: 16px; line-height: 1.3; appearance: none; }
input[type=number]:focus, input[type=time]:focus, input[type=url]:focus, input:not([type]):focus { outline: none; background: var(--white); box-shadow: 4px 4px 0 var(--blue); }
input[type=checkbox], input[type=radio], input[type=file], input[type=hidden] { width: auto; }
/* labels and chips were drawn at 10 to 12px and then scaled to 90 percent: keep them legible */
.lbl, .kicker, .sec-no, .field > label, .field > .lbl { font-size: 13px; }
.tagpill, .evc__s, .evc__c, .evc__t, .announce__t, .stype { font-size: 12px; }
.cb.on::after { font-size: 11px; }
@media (min-width: 1180px) and (max-width: 1279px) { .nav__links > a, .dd > a { font-size: 11.5px; letter-spacing: 0; } }
@media (min-width: 1280px) and (max-width: 1649px) { .nav__links > a, .dd > a { font-size: 13px; } }
/* between 1020 and 1179 px the search button is icon only */
@media (min-width: 1020px) and (max-width: 1179px) { .nav__search { width: 46px; padding: 0; justify-content: center; } }
/* long buttons may wrap on small phones instead of overflowing */
@media (max-width: 430px) { .btn { white-space: normal; text-align: center; } }
/* the paper grain forced a full-screen blend on every scroll frame on phones */
@media (hover: none) { body::after { mix-blend-mode: normal; opacity: .03; } }
/* dropdown closes with Escape even while it holds focus */
.dd.closed .dd__menu { display: none !important; }
/* announcement bar: only the first copy is real, and it pauses while focused */
.announce__roll .ar { display: contents; }
.announce__track:focus-within .announce__roll { animation-play-state: paused; }

/* ===== phones ===== */
.nav__search, .burger { flex: none; }
.brand { min-width: 0; }
@media (max-width: 480px) {
  .nav__in { gap: 8px; }
  .brand__t { font-size: 14px; white-space: nowrap; }
  .brand { gap: 10px; }
}
@media (max-width: 359px) { .brand__t { font-size: 12px; } .brand img { width: 46px; height: 46px; } }
/* labels that were 10 to 11px */
.opt__b span { font-size: 12px; }
.facts dt, .result--card .facts dt, .result--cert .facts dt { font-size: 12px; }
.amb__ph .tick { font-size: 11px; }
/* comfortable tap targets for the text links in the footer and legal pages */
@media (max-width: 760px) {
  .foot__grid a, .foot__base a { display: inline-block; padding-block: 7px; }
  .foot__base { gap: 10px 20px; }
  .legal a, .terms a, .joinagree a { padding-block: 3px; display: inline-block; }
}
/* touch screens: swipe the carousels, and keep the footer clear of the floating buttons */
@media (hover: none) { .rail__btns { display: none; } }
@media (max-width: 760px) { .foot { padding-bottom: 92px; } }

/* ---- public ambassador profile and directory links ---- */
a.amb--link { display: block; color: inherit; text-decoration: none; }
a.amb--link:hover h3, a.amb--link:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.prof__head { display: flex; gap: 22px; align-items: center; margin-bottom: 22px; }
.prof__ph { width: 120px; height: 144px; flex: none; border: 2px solid var(--green); border-radius: 16px; overflow: hidden; background: #16206b; display: grid; place-items: center; box-shadow: 5px 5px 0 var(--blue); }
.prof__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof__ph span { font: 900 40px var(--f-disp); color: #fff; letter-spacing: .04em; }
.prof__n { font: 900 clamp(30px, 5vw, 54px)/.95 var(--f-disp); font-stretch: 80%; text-transform: uppercase; margin-top: 10px; }
.prof__sub { margin-top: 10px; font-size: 17px; opacity: .85; }
.prof__about { margin: 4px 0 18px; font-size: 17px; line-height: 1.6; opacity: .92; max-width: 40em; white-space: pre-line; }
@media (max-width: 560px) { .prof__head { flex-direction: column; align-items: flex-start; } }

/* ---- ambassador profile: an about page, like an author profile ---- */
.aprof { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.aprof__grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.aprof__n { font: 900 clamp(42px, 7vw, 88px)/.88 var(--f-disp); font-stretch: 70%; text-transform: uppercase; margin: 14px 0 12px; }
.aprof__sub { font-size: 19px; opacity: .8; }
.aprof__st { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 99px; font: 700 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.aprof__st--ok { background: var(--green); color: var(--ink); }
.aprof__st--pending { background: var(--blue); color: #fff; }
.aprof__st--bad { background: var(--red); color: #fff; }
.aprof h2 { font: 900 clamp(22px, 2.6vw, 30px)/1 var(--f-disp); font-stretch: 100%; text-transform: uppercase; margin: 40px 0 14px; }
.aprof__about p { font-size: 19px; line-height: 1.7; max-width: 38em; white-space: pre-line; }
.aprof__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.aprof__chips li { border: 2px solid var(--ink); border-radius: 99px; background: var(--white); padding: 8px 16px; font-weight: 600; box-shadow: 3px 3px 0 var(--green); }
.aprof__links { display: flex; flex-wrap: wrap; gap: 10px; }
.aprof__more { display: block; margin-top: 30px; }
.aprof__verify { margin-top: 44px; padding: 20px 22px; border: 2px dashed var(--ink); border-radius: 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aprof__box { display: grid; gap: 20px; position: sticky; top: 110px; }
.aprof__ph { aspect-ratio: 4 / 5; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, #1a2a8f, #0d1550); display: grid; place-items: center; box-shadow: 8px 8px 0 var(--blue); }
.aprof__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aprof__ph span { font: 900 84px var(--f-disp); color: #fff; letter-spacing: .04em; }
.aprof__share { display: flex; gap: 10px; flex-wrap: wrap; }
.facts-card dd.mono { font-family: var(--f-mono); letter-spacing: .04em; }
@media (max-width: 860px) { .aprof__grid { grid-template-columns: minmax(0, 1fr); } .aprof__box { position: static; order: -1; max-width: 380px; } }
.aprof .back { display: block; width: max-content; }