/* Happy IMPACT — structure borrowed from aliabdaal.com (inset rounded panels, two-voice headlines,
   intent cards, hand-drawn marker accents). Signature: the marker-circled wall calendar. */

@font-face{font-family:"Moraeul Thai";src:url("assets/fonts/MoraeulThai.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --orange:#F26C21;        /* marker orange — strokes, CTAs */
  --marker:#D9530C;        /* orange for handwritten text (contrast-safe) */
  --orange-tint:#FFEADF;
  --blue:#1A56DB;          /* IMPACT blue — headlines, primary buttons */
  --blue-soft:#5B8DEF;
  --sky:#E9F2FF;           /* panel background */
  --sky-deep:#D6E5FF;
  --ink:#0D1B3E;           /* text */
  --ink-soft:#4A5878;
  --paper:#FFFFFF;
  --stage:#170A03;

  --f-ui:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --f-hand:"Moraeul Thai","IBM Plex Sans Thai",cursive;

  --r-panel:36px;
  --r-card:24px;
  --wrap:1180px;
  --gutter:32px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-weight:400;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--ink);color:#fff;padding:8px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:16px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.panel{position:relative;margin:16px;border-radius:var(--r-panel);overflow:hidden}
.panel--sky{background:var(--sky)}
.panel--orange{background:var(--orange-tint)}

.hand{font-family:var(--f-hand);color:var(--marker);font-size:30px;line-height:1.2}
.eyebrow{font-weight:500;font-size:15px;color:var(--ink-soft);letter-spacing:.01em}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:10px 26px 11px;font-family:var(--f-ui);font-weight:500;font-size:18px;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(13,27,62,.35)}
.btn--blue{background:var(--blue);color:#fff}
.btn--orange{background:var(--orange);color:var(--ink)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--sky-deep)}

.link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-weight:500;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;cursor:pointer}
.link:hover{color:var(--blue)}
.link__arrow{transition:transform .15s ease}
.link:hover .link__arrow{transform:translateX(4px)}

.round{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--orange);color:var(--ink);cursor:pointer;transition:transform .15s ease}
.round:hover{transform:scale(1.06)}
.round svg{width:20px;height:20px}

.tag{display:inline-block;border-radius:999px;padding:2px 12px 3px;font-weight:500;font-size:14px;line-height:1.3;white-space:nowrap}
.tag--ok{display:inline-flex;align-items:center;gap:5px;background:#DDF3E6;color:#11613A}
.tag__check{width:13px;height:13px;flex:none}
.tag__check path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tag--tbc{background:var(--paper);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue-soft)}
.js .tag--tbc{position:relative;background:none;box-shadow:none}
.doodle--tag{position:absolute;left:-6%;top:-22%;width:112%;height:144%;max-width:none;overflow:visible;pointer-events:none}
.doodle--tag path{fill:none;stroke:var(--blue-soft);stroke-width:1.6;stroke-dasharray:5 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tag--live{background:var(--orange);color:var(--ink)}
.tag--done{display:inline-flex;align-items:center;gap:5px;background:#E6EAF2;color:var(--ink-soft)}

/* ---------- marker strokes (draw on view) ---------- */
.mark{fill:none;stroke:var(--orange);stroke-linecap:round;stroke-linejoin:round}
.js .draw path{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s cubic-bezier(.65,.05,.3,1),opacity 0s}
.js .draw path + path{transition-delay:.8s;transition-duration:.25s}
.js .draw.is-drawn path{stroke-dashoffset:0;opacity:1}

/* ---------- doodles ---------- */
.hl{position:relative;display:inline-block}
.doodle{position:absolute;max-width:none;overflow:visible;pointer-events:none}
.doodle--underline,.doodle--wavy,.doodle--double{left:-2%;width:104%;bottom:-.16em;height:.34em}
.doodle--underline path{stroke-width:4}
.doodle--wavy path,.doodle--double path{stroke-width:3.5}
.hl--blue .doodle path{stroke:var(--blue-soft)}
.doodle--ring{left:-9%;top:-42%;width:118%;height:184%}
.doodle--ring path{stroke-width:3}
.hover-draw path{stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .4s ease,opacity 0s}
a:hover > .hover-draw path,a:focus-visible > .hover-draw path{stroke-dashoffset:0;opacity:1}
[data-hover]{position:relative}
[data-hover] .doodle{bottom:-.3em}

/* sketchy outline + offset marker fill behind cards */
.sketch{position:absolute;inset:0;z-index:-1;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.sketch__fill{fill:var(--sky)}
.sketch__line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.8}


/* ---------- nav ---------- */
.nav{position:relative;z-index:10;display:flex;align-items:center;gap:28px;padding-top:26px;padding-bottom:10px}
.logo{position:relative;display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;line-height:1}
.logo__happy{font-family:var(--f-hand);color:var(--marker);font-size:30px;transform:rotate(-6deg) translateY(-2px)}
.logo__impact{position:relative;font-weight:700;font-size:30px;color:var(--blue);letter-spacing:.01em}
.logo__smile{position:absolute;left:2%;width:98%;top:88%;height:auto;max-width:none;overflow:visible}
.logo__smile path{stroke-width:11}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{position:relative;font-weight:500;font-size:18px;text-decoration:none}
.nav__links a:hover{color:var(--blue)}
.nav__cta{white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding-bottom:28px}
.hero::before{content:"";position:absolute;right:-280px;top:-320px;width:980px;height:980px;border-radius:50%;border:110px solid rgba(26,86,219,.05);pointer-events:none}
.hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero__hello{display:inline-block;font-size:29px;transform:rotate(-4deg);margin-bottom:6px}
.hero__title{display:grid;justify-items:start;font-weight:700;font-size:clamp(75px,10.8vw,144px);line-height:1;letter-spacing:-.02em}
.hero__happy{position:relative;z-index:2;font-family:var(--f-hand);font-weight:400;color:var(--orange);font-size:.56em;line-height:1;margin:0 0 -.12em .04em;transform:rotate(-7deg);-webkit-text-stroke:.09em var(--sky);paint-order:stroke fill}
.hero__impact{position:relative;color:var(--blue)}
.hero__sparks{position:absolute;left:-.46em;top:-.18em;width:.44em;height:.44em;overflow:visible}
.hero__sparks path{stroke-width:5}
.js .hero__sparks path + path{transition-delay:.15s}
.js .hero__sparks path:nth-child(3){transition-delay:.3s}
.hero__smile{position:absolute;left:2%;width:98%;top:84%;height:auto}
.hero__smile path{stroke-width:9}
.js .hero__smile path{transition-duration:1.1s;transition-delay:.35s}
.hero__lede-line{display:block;white-space:nowrap}
.hero__lede{max-width:none;margin-top:48px;font-size:22px;line-height:1.35;text-wrap:pretty}
.hero__actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px;padding-bottom:0}


/* next-up card */
.next{position:relative}
.next::before{content:"";position:absolute;z-index:4;top:-14px;left:56%;width:124px;height:32px;transform:rotate(4deg);background:rgba(255,224,206,.85);box-shadow:0 1px 4px rgba(13,27,62,.14)}
.next__note{position:absolute;z-index:3;left:-118px;top:-34px;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.next__note .hand{font-size:32px;transform:rotate(-8deg);white-space:nowrap}
.next__arrow{width:96px;height:96px;margin:2px 0 0 54px}
.next__arrow path{stroke-width:4.5}
.next__card{position:relative;background:var(--paper);border-radius:28px;box-shadow:0 34px 70px -28px rgba(13,27,62,.35),0 2px 0 rgba(13,27,62,.04);overflow:hidden;transform:rotate(1.2deg)}
.next__art{display:block;height:210px}
a.next__art .art{transition:transform .4s ease}
a.next__art:hover .art{transform:scale(1.04)}
a.next__art:focus-visible{outline-offset:-4px}
.next__body{padding:24px 30px 28px}
.next__title{margin-top:4px;font-weight:700;font-size:32px;line-height:1.25;color:var(--ink)}
.next__title small{display:block;font-size:21px;font-weight:500;color:var(--blue);margin-top:4px}
.next__when{margin-top:12px;font-weight:500;font-size:18px}
.next__where{font-size:16px;color:var(--ink-soft)}
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.count__cell{position:relative;background:var(--sky);border-radius:16px;padding:8px 6px 6px;text-align:center}
.count__cell .doodle--ring{left:-9%;top:-14%;width:118%;height:128%}
.count__cell .doodle--ring path{stroke-width:3.5}
.count__n{display:block;font-weight:700;font-size:37px;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.count__u{font-size:14px;color:var(--ink-soft)}
.next__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}

/* "this year" strip — the logo row on Ali's hero */
.strip{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px;padding-top:26px;margin-top:4px}
.strip::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C180 3 380 6 560 4S860 3 998 5' fill='none' stroke='%235B8DEF' stroke-width='1.8' stroke-linecap='round' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.strip__label{font-size:15px;color:var(--ink-soft)}
.strip a{position:relative;font-weight:700;font-size:19px;text-decoration:none;color:var(--ink)}
.strip a:hover{color:var(--blue)}

/* ---------- split titles (two voices, like "How Can / I Help You?") ---------- */
.split-title{display:flex;flex-direction:column;gap:.05em;font-size:clamp(39px,5.0vw,66px);line-height:1.15;text-wrap:balance}
.split-title__light{font-weight:400;color:var(--ink)}
.split-title__bold{font-weight:700;color:var(--blue)}
.circled{position:relative;display:inline-block;padding:0 .08em}
.circled__ring{position:absolute;left:-12%;top:-24%;width:124%;max-width:none;height:150%;overflow:visible}
.circled__ring path{stroke-width:4}

/* ---------- events (intent cards) ---------- */
.events{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:120px;padding-bottom:120px}
.events__col{display:flex;flex-direction:column;gap:40px}
.events__col--offset{padding-top:0}
.events__col .split-title{margin-bottom:24px}
.card{display:flex;flex-direction:column;gap:12px;background:var(--sky);border-radius:var(--r-card);padding:40px 44px 40px}
.card__icon{width:76px;height:76px;margin-bottom:12px}
.card__title{font-weight:700;font-size:35px;line-height:1.2;color:var(--ink)}
.card__text{font-size:18px;color:var(--ink);max-width:440px}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-weight:500;font-size:16px;color:var(--ink-soft)}
.card .link{margin-top:8px;align-self:flex-start}
.card--more{background:var(--orange-tint)}
.js .card{position:relative;isolation:isolate;background:none;border-radius:0}
.card--more .sketch__fill{fill:var(--orange-tint)}

/* ---------- calendar ---------- */
.cal-panel{padding:104px 0 112px}
.cal-head{position:relative;display:flex;align-items:flex-end;gap:120px;margin-bottom:6px}
.cal-head__note{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:0;padding-bottom:0;margin-bottom:-66px}
.cal-head__note .hand{transform:rotate(-5deg)}
.cal-head__arrow{width:74px;height:60px;margin-left:-84px}
.cal-head__arrow path{stroke-width:3.5}
.cal-layout{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto 1fr;column-gap:32px;align-items:start}
.cal-layout > .cal{grid-column:1;grid-row:2/4}
.cal-layout > .agenda{display:contents}
.agenda__title{grid-column:2;grid-row:1}
.agenda__list{grid-column:2;grid-row:2}
.agenda-more{grid-column:2;grid-row:3;align-self:start}
.cal{background:var(--paper);border-radius:28px;padding:28px 28px 22px;box-shadow:0 24px 50px -32px rgba(13,27,62,.3)}
.js .cal{position:relative;isolation:isolate;background:none;border-radius:0;box-shadow:none}
.cal .sketch__fill,.agenda__item .sketch__fill{fill:var(--paper)}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cal__month{font-weight:700;font-size:30px;line-height:1;color:var(--ink);white-space:nowrap}
.cal__nav{display:flex;align-items:center;gap:10px}
.cal__today{border:0;background:var(--sky);border-radius:999px;padding:6px 16px 7px;font-weight:500;font-size:15px;white-space:nowrap;cursor:pointer}
.cal__today:hover{background:var(--sky-deep)}
.cal__table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal__table th{padding:8px 0 10px;font-weight:500;font-size:14px;color:var(--ink-soft);text-align:center}
.cal__table td{height:86px;padding:0;text-align:center;vertical-align:top;border-top:1px solid #EDF2FB}
.day{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;padding-top:10px}
.day__n{position:relative;z-index:1;font-weight:500;font-size:18px;line-height:1}
.day--out .day__n{color:#B5BFD3}
.day--today .day__n{color:var(--blue);font-weight:700}
.day--today::after{content:"";position:absolute;top:38px;width:6px;height:6px;border-radius:50%;background:var(--blue);display:none}
.day .day__label--today{color:var(--blue);margin-top:10px;transform:rotate(-5deg)}
.legend__today{display:none!important}
.day__btn{position:absolute;inset:2px;display:flex;flex-direction:column;align-items:center;padding-top:8px;border:0;background:none;border-radius:14px;cursor:pointer}
.day__btn:hover{background:var(--sky)}
.day--event .day__n{font-weight:700}
.ring{position:absolute;left:50%;top:-3px;width:62px;height:50px;transform:translateX(-50%) rotate(var(--rot,0deg));overflow:visible}
.ring path{fill:none;stroke:var(--orange);stroke-width:5.5;stroke-linecap:round}
.ring--tbc path{stroke:var(--blue);stroke-width:4;stroke-dasharray:.035 .03}
.day__label{position:relative;margin-top:22px;font-family:var(--f-hand);font-size:16px;line-height:1.1;color:var(--marker);white-space:nowrap}
.day__label--tbc{color:var(--blue)}
.day--flash .day__btn{animation:flash 1.4s ease}
@keyframes flash{0%,100%{background:transparent}25%{background:var(--orange-tint)}}
@keyframes flashFill{0%,100%{fill:var(--paper)}25%{fill:var(--orange-tint)}}
.agenda__item.is-flash .sketch__fill{animation:flashFill 1.4s ease}
.cal__pending{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.cal__pending:empty{display:none}
.cal__pending .hand{font-size:21px;color:var(--blue);transform:rotate(-3deg)}
.cal__pending ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.cal__pending-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:4px 6px;border-radius:10px;font-weight:500;font-size:15px;cursor:pointer}
.cal__pending-btn:hover{background:var(--sky)}
.cal__pending.day--flash{animation:flash 1.4s ease;border-radius:12px}
.datebox:disabled{cursor:default}
.datebox__mon{font-size:24px!important}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;padding-top:14px;border-top:1px solid #EDF2FB;font-size:14px;color:var(--ink-soft)}
.legend li{display:flex;align-items:center;gap:8px}
.legend svg{width:30px;height:24px;overflow:visible}
.legend .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);margin:0 11px}

.agenda__title{font-weight:700;font-size:24px;margin:6px 0 16px}
.agenda__list{display:flex;flex-direction:column;gap:14px}
.agenda__item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;background:var(--paper);border-radius:22px;padding:18px 22px 18px 18px;transition:box-shadow .2s ease,transform .2s ease}
.agenda__item.is-active{box-shadow:0 0 0 3px var(--orange);transform:translateX(-4px)}
.js .agenda__item{position:relative;isolation:isolate;background:none;border-radius:0}
.js .agenda__item.is-active{box-shadow:none}
.agenda__item.is-active .sketch__line{stroke:var(--orange);stroke-width:3.5;opacity:1}
.agenda__item--past{opacity:.55}
.agenda__icon{width:44px;height:44px;align-self:start}
.datebox{display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:84px;border:0;border-radius:16px;background:var(--orange);color:var(--ink);cursor:pointer;line-height:1;transform:rotate(-3deg)}
.agenda__item:nth-child(even) .datebox{transform:rotate(2.5deg)}
.datebox b{font-size:32px}
.datebox span{font-weight:500;font-size:14px;margin-top:2px}
.datebox--tbc{background:var(--paper);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue-soft)}
.nowrap{white-space:nowrap}
.nb{white-space:nowrap}
p,li,dd,figcaption{text-wrap:pretty}
.next__title,.agenda__name,.feature__title,.card__title{text-wrap:balance}
.cal-layout > *,.agenda__title,.agenda__list,.agenda-more,.agenda__item > div{min-width:0}
.agenda__when{white-space:nowrap}
.agenda__item--extra{display:none}
.agenda__list.is-open .agenda__item--extra{display:grid;animation:agendaIn .35s ease both}
@keyframes agendaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.agenda-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px 16px;border:0;border-radius:16px;background:none;font-family:var(--f-hand);font-size:22px;color:var(--marker);cursor:pointer}
.agenda-more:hover{background:rgba(255,255,255,.6)}
.agenda-more svg{width:32px;height:20px;transition:transform .25s ease}
.agenda-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.agenda__round{display:block;color:var(--blue)}
.agenda__name{font-weight:700;font-size:22px;line-height:1.3;margin-top:2px}
.agenda__meta{font-size:15px;color:var(--ink-soft);margin-top:4px}
.agenda__actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px}
.agenda__actions .link{font-size:15px}

/* ---------- feature rows ---------- */
.details{padding-top:124px;padding-bottom:110px;overflow-x:clip}
.details > .split-title{margin-bottom:64px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;scroll-margin-top:40px}
.feature + .feature{margin-top:96px}
.feature--flip .feature__art{order:2}
.feature__art{position:relative;aspect-ratio:1/1;max-width:100%}
.feature__art > .art{border-radius:var(--r-card)}
.feature__art::before{content:"";position:absolute;z-index:4;top:-14px;left:50%;width:132px;height:34px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,224,206,.85);box-shadow:0 1px 4px rgba(13,27,62,.14)}
.feature--flip .feature__art::before{transform:translateX(-50%) rotate(3deg)}
.feature__text{display:flex;flex-direction:column;gap:14px}
.feature__title{font-weight:700;font-size:42px;line-height:1.2;color:var(--ink)}
.feature__text > p{font-size:19px;max-width:520px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:10px 0 6px;font-size:17px}
.facts dt{color:var(--ink-soft)}
.facts dd{margin:0;font-weight:500}
.facts .tag{margin-left:10px}
.feature__note{display:flex;align-items:center;gap:8px;margin-top:4px}
.feature__note .hand{transform:rotate(-3deg)}
.feature__arrow{width:92px;height:46px;flex:none}
/* notes pointing right sit at the right edge of the text column, next to the picture */
.feature__note:not(.feature__note--left){align-self:flex-end;margin-right:-58px}
.feature__note--left{margin-left:-58px}
.feature__arrow path{stroke-width:3.5}
.feature__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:8px}

/* rounds — a real sequence, so it's numbered */
.rounds{display:flex;flex-direction:column;gap:12px;margin:10px 0 6px;counter-reset:r}
.rounds li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;counter-increment:r}
.rounds li::before{content:counter(r);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:700;font-size:19px}
.rounds li.is-next::before{background:var(--paper);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue-soft)}
.rounds li:not(:last-child)::after{content:"";position:absolute;left:18px;top:52px;bottom:-8px;width:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16'%3E%3Cpath d='M4 0c4 4-4 4 0 8s-4 4 0 8' fill='none' stroke='%235B8DEF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y}
.rounds .hl--ring{margin:4px 0 6px}
.rounds b{display:block;font-size:21px;line-height:1.1;font-weight:700}
.rounds span{font-size:16px;color:var(--ink-soft)}

/* ---------- art tiles ---------- */
.art{position:relative;overflow:hidden;width:100%;height:100%}
.art--voice{display:grid;place-items:center;background:
  radial-gradient(ellipse 70% 45% at 50% 108%,rgba(242,108,33,.7),transparent 70%),
  radial-gradient(ellipse 60% 60% at 50% 40%,rgba(242,108,33,.16),transparent 70%),
  var(--stage)}
.art--voice::before,.art--voice::after{content:"";position:absolute;top:-10%;width:34%;height:120%;background:linear-gradient(180deg,rgba(255,196,140,.32),transparent 75%);filter:blur(6px)}
.art--voice::before{left:6%;transform:rotate(-24deg);transform-origin:top}
.art--voice::after{right:6%;transform:rotate(24deg);transform-origin:top}
.art--voice img{position:relative;z-index:1;width:78%;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.art__tag{position:absolute;z-index:2;left:50%;bottom:9%;transform:translateX(-50%);background:var(--orange);color:var(--ink);border-radius:999px;padding:3px 16px 4px;font-weight:700;font-size:16px;white-space:nowrap}
.art--sports{background:var(--blue)}
.art--photo img{width:100%;height:100%;object-fit:cover}
.art--logo{display:grid;place-items:center;background:var(--sky)}
.art--logo img{width:72%;height:auto;filter:drop-shadow(0 14px 22px rgba(13,27,62,.18))}
.next__art .art--logo img{width:auto;height:84%}
.art--sports svg{width:100%;height:100%}
.art--party{display:grid;place-items:center;background:var(--orange);container-type:size}
.confetti{position:absolute;left:var(--x);top:var(--y);width:var(--w,14px);height:var(--h,8px);background:var(--c,#fff);border-radius:3px;transform:rotate(var(--r))}
/* sized in cqmin so the same ticket works in the big tile, the hero card and the stickers */
.ticket{--notch:3.6cqmin;position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;width:80cqmin;background:var(--paper);border-radius:4.6cqmin;transform:rotate(-7deg);box-shadow:0 22px 40px -18px rgba(23,10,3,.55);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent var(--notch),#000 calc(var(--notch) + 1px));
          mask:radial-gradient(circle at 0 50%,transparent var(--notch),#000 calc(var(--notch) + 1px))}
.ticket__main{padding:5.4cqmin 2cqmin 5.4cqmin 7cqmin;line-height:1}
.ticket__kicker{font-weight:500;font-size:3.9cqmin;color:var(--ink-soft);letter-spacing:.12em;white-space:nowrap}
.ticket__name{display:block;margin-top:1.4cqmin;font-weight:700;font-size:9.4cqmin;color:var(--blue);line-height:.9;white-space:nowrap}
.ticket__year{display:block;font-weight:700;font-size:10.4cqmin;color:var(--orange);line-height:.9}
.ticket__stub{display:flex;align-items:center;justify-content:center;padding:0 4cqmin;border-left:2.5px dashed #D3DCEC;writing-mode:vertical-rl;font-weight:700;font-size:3.9cqmin;letter-spacing:.14em;color:var(--ink)}

/* compact art inside the next-up card */
.next__art .art--voice img{width:62%}
.next__art .art__tag{bottom:10%;font-size:14px}
.next__art .ticket{transform:rotate(-4deg)}

/* ---------- photos ---------- */
.photos{padding-top:120px;padding-bottom:120px}
.polaroid-link{display:block;color:inherit;text-decoration:none;border-radius:4px}
.polaroid-link .polaroid{transition:transform .2s ease,box-shadow .2s ease}
.polaroid-link:hover .polaroid{transform:rotate(0deg) translateY(-6px);box-shadow:0 30px 50px -24px rgba(13,27,62,.5),0 0 0 1px rgba(13,27,62,.06)}
.polaroid-link:focus-visible{outline-offset:8px}
.photos__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:56px}
.photos__note{transform:rotate(-4deg);padding-bottom:10px}
.photos__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 48px;align-items:start}
.polaroid{position:relative;margin:0;background:var(--paper);padding:12px 12px 6px;box-shadow:0 22px 44px -24px rgba(13,27,62,.45),0 0 0 1px rgba(13,27,62,.06);max-width:100%}
.polaroid::before{content:"";position:absolute;z-index:2;top:-15px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,224,206,.85);box-shadow:0 1px 4px rgba(13,27,62,.14)}
.polaroid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.polaroid figcaption{padding:10px 4px 8px;font-size:24px;line-height:1.2}
.polaroid--wide{grid-column:1/-1;justify-self:center;width:min(820px,100%);transform:rotate(-1.5deg)}
.polaroid--tilt-r{transform:rotate(2.5deg)}
.polaroid--tilt-l{transform:rotate(-2deg)}
.polaroid--tilt-r::before{transform:translateX(-50%) rotate(5deg)}

/* ---------- about ---------- */
.about{padding:104px 0 0}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about__text{display:flex;flex-direction:column;gap:18px}
.about__text .split-title{margin-bottom:10px}
.about__text p{font-size:19px;max-width:540px}
.about__note{margin-top:4px;transform:rotate(-3deg);transform-origin:left}
.stickers{position:relative;height:540px}
.sticker{position:absolute;width:48%;aspect-ratio:1/1;border-radius:22px;border:8px solid var(--paper);background:var(--paper);box-shadow:0 22px 40px -22px rgba(13,27,62,.45)}
.sticker > .art{border-radius:14px}
.sticker::before{content:"";position:absolute;z-index:4;top:-18px;left:50%;width:96px;height:28px;transform:translateX(-50%) rotate(-6deg);background:rgba(255,224,206,.85);box-shadow:0 1px 4px rgba(13,27,62,.14)}
.sticker:nth-child(2)::before{transform:translateX(-50%) rotate(5deg)}
.sticker-label{position:absolute;z-index:5;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.sticker-label .hand{font-size:26px;white-space:nowrap}
.sticker-label svg{width:58px;height:58px;overflow:visible}
.sticker-label path{stroke-width:3.5}
.sticker-label--voice{left:-6%;top:-70px;flex-direction:column}
.sticker-label--voice .hand{transform:rotate(-8deg)}
.sticker-label--voice svg{margin:-4px 0 0 38px}
.sticker-label--quiz{right:-4%;top:-86px;flex-direction:column;align-items:flex-end}
.sticker-label--quiz .hand{transform:rotate(6deg)}
.sticker-label--quiz svg{margin:-4px 34px 0 0}
.sticker-label--buzz{left:calc(12% - 8px);bottom:40px;align-items:center}
.sticker-label--buzz svg{width:58px;height:40px}
.sticker-label--buzz .hand{transform:rotate(-5deg)}
.sticker:nth-child(1){left:2%;top:4%;transform:rotate(-6deg)}
.sticker:nth-child(2){right:0;top:0;transform:rotate(5deg)}
.sticker:nth-child(3){left:38%;bottom:0;transform:rotate(3deg)}
.sticker .art--logo img{width:78%}
.sticker .art--voice img{width:84%}
.sticker .art__tag{display:none}
.about__links{display:flex;align-items:center;gap:20px;padding-top:72px;padding-bottom:64px}
.about__links::before,.about__links::after{content:"";flex:1;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6c6-6 6 6 12 0s6 6 12 0' fill='none' stroke='%23F26C21' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") repeat-x left center}

/* ---------- footer ---------- */
.footer{display:grid;grid-template-columns:1.4fr 2fr;gap:40px;padding-top:72px;padding-bottom:72px}
.footer__brand p{margin-top:18px;font-size:16px;color:var(--ink-soft)}
.vfooter__logo img{height:34px;width:auto}
.vfooter__logo img[src*="rangers"]{height:22px}
.footer__col h3{font-weight:700;font-size:18px;margin-bottom:14px}
.footer__col li + li{margin-top:8px}
.footer__col a{font-size:16px;color:var(--ink-soft);text-underline-offset:4px}
.footer__col a:hover{color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .next__note{left:auto;right:6px;top:-62px;flex-direction:row;align-items:flex-start}
  .next__arrow{display:none}
}
@media (max-width:960px){
  :root{--gutter:24px}
  .feature__arrow{display:none}
  .feature__note:not(.feature__note--left){align-self:flex-start;margin-right:0}
  .feature__note--left{margin-left:0}
  .photos__grid{grid-template-columns:1fr;gap:40px}
  .polaroid--wide{grid-column:auto}
  .stickers{margin-top:72px}
  .hero__grid{grid-template-columns:1fr;gap:72px;padding-top:36px}
  .next{max-width:520px}
  .events{grid-template-columns:1fr;gap:28px;padding-top:88px;padding-bottom:88px}
  .events__col{gap:28px}
  .events__col--offset{padding-top:0}
  .cal-layout{grid-template-columns:1fr;grid-template-rows:none}
  .cal-layout > .cal,.agenda__title,.agenda__list,.agenda-more{grid-column:1;grid-row:auto}
  .agenda__title{margin-top:32px}
  .feature,.about__grid{grid-template-columns:1fr;gap:32px}
  .feature--flip .feature__art{order:0}
  .footer{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--gutter:16px;--r-panel:26px}
  body{font-size:17px}
  .panel{margin:8px}
  .nav{gap:16px;padding-top:18px}
  .nav__links{display:none}
  .nav__cta{margin-left:auto;padding:8px 14px 9px;font-size:15px}
  .logo__impact{font-size:26px}
  .logo__happy{font-size:26px}
  .hero__hello{font-size:24px}
  .hero__lede{font-size:19px;margin-top:36px}
  .hero__lede-line{display:inline;white-space:normal}
  .next__card{transform:none}
  .next__body{padding:20px 20px 24px}
  .next__title{font-size:27px}
  .count__n{font-size:30px}
  .strip{gap:6px 20px}
  .strip a{font-size:17px}
  .card{padding:30px 24px}
  .card__title{font-size:30px}
  .cal-panel{padding:72px 0 80px}
  .cal-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:28px}
  .cal-head__arrow{display:none}
  .cal-head__note{margin-bottom:0}
  .cal{padding:18px 10px 16px;border-radius:22px}
  .cal__bar{padding:0 6px}
  .cal__month{font-size:22px}
  .cal__nav{gap:6px}
  .cal__nav .round{width:40px;height:40px}
  .cal__today{padding:5px 12px 6px;font-size:14px}
  .cal__pending{padding-inline:6px}
  .cal__table td{height:60px}
  .ring{width:46px;height:38px;top:0}
  .day__label{display:none}
  .day--today::after{top:34px;display:block}
  .legend__today{display:flex!important}
  .sticker-label{display:none}
  .stickers{margin-top:16px}
  .legend{padding-inline:6px}
  .agenda__item{gap:14px;padding:14px 16px 16px 14px}
  .datebox{width:62px;height:72px}
  .agenda__item{position:relative;grid-template-columns:auto 1fr}
  .agenda__item > div{padding-right:34px}
  .agenda__item .agenda__icon{position:absolute;top:14px;right:14px;width:32px;height:32px}
  .agenda__when{white-space:normal}
  .cal-head__note .hand{font-size:24px}
  .agenda__icon{width:38px;height:38px}
  .datebox b{font-size:27px}
  .details{padding-top:88px;padding-bottom:80px}
  .feature + .feature{margin-top:72px}
  .feature__title{font-size:35px}
  .stickers{height:400px}
  .about{padding-top:72px}
  .about__links{flex-wrap:wrap;justify-content:center;gap:12px;padding-top:48px}
  .about__links::before,.about__links::after{display:none}
  .footer{grid-template-columns:1fr;gap:28px}
  .photos{padding-top:88px;padding-bottom:88px}
  .polaroid figcaption{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .draw path{stroke-dashoffset:0;opacity:1;transition:none}
  .btn,.round,.agenda__item,.link__arrow{transition:none}
  .hover-draw path{transition:none}
  .agenda__list.is-open .agenda__item--extra{animation:none}
  .agenda-more svg{transition:none}
  .polaroid-link .polaroid{transition:none}
  .agenda__item.is-flash .sketch__fill{animation:none}
  .day--flash .day__btn{animation:none;background:var(--orange-tint)}
}

/* ===================== IMPACT Voice 2 page ===================== */
.vhero{background:
  radial-gradient(ellipse 70% 50% at 50% 115%,rgba(242,108,33,.55),transparent 70%),
  radial-gradient(ellipse 50% 40% at 15% 0%,rgba(255,196,140,.16),transparent 70%),
  radial-gradient(ellipse 50% 40% at 85% 0%,rgba(255,196,140,.16),transparent 70%),
  var(--stage);color:#fff;padding-bottom:56px}
.logo--light .logo__impact{color:#fff}
.vhero .nav__links a{color:#fff}
.vhero__body{position:relative;padding-top:28px}
.vhero__back{display:inline-flex;gap:8px;margin-bottom:22px;color:rgba(255,255,255,.75);font-weight:500;font-size:16px;text-decoration:none}
.vhero__back:hover{color:#fff}
.vhero__visual{position:relative;border-radius:var(--r-card);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.vhero__visual img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card)}
.vhero__note{position:absolute;right:calc(var(--gutter) + 8px);top:6px;color:#FFB27A;font-size:30px;transform:rotate(-5deg)}
.vfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.vfacts li{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;padding:16px 20px}
.vfacts li > svg:not(.sketch){width:46px;height:46px;flex:none;color:#fff}
.vfacts small{display:block;font-size:14px;color:rgba(255,255,255,.65)}
.vfacts b{font-size:20px;line-height:1.3}

.vlive{padding-top:110px;padding-bottom:110px}
.vlive__head{position:relative;display:flex;align-items:flex-end;gap:48px;margin-bottom:28px}
.vlive__head>.split-title{flex:0 0 auto}
.vlive__note{display:flex;align-items:flex-end;gap:4px;margin-bottom:8px;min-width:0;max-width:420px}
.vlive__note .hand{transform:rotate(-4deg)}
.vlive__arrow{width:74px;height:60px;order:-1;margin-bottom:-40px}
.vlive__arrow path{stroke-width:3.5}
.vlive__frame{position:relative;padding:14px;background:var(--stage);border-radius:28px;box-shadow:0 30px 60px -30px rgba(23,10,3,.6)}
.vlive__player{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:18px;overflow:hidden;background:#000}
.vlive__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vlive__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.vlive__links p{color:var(--ink-soft)}
.vlive__fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;text-decoration:none;color:#fff;background:
  linear-gradient(180deg,rgba(23,10,3,.35),rgba(23,10,3,.75)),var(--poster) center/cover}
.vlive__play{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--orange);color:var(--ink);transition:transform .2s ease}
.vlive__fallback:hover .vlive__play{transform:scale(1.08)}
.vlive__play svg{width:34px;height:34px;margin-left:5px}
.vlive__fallback b{font-size:22px}

.vrounds{padding:96px 0 104px}
.vrounds .split-title{margin-bottom:40px}
.vsteps{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.vstep,.vschedule{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:30px 34px 32px}
.vstep .sketch__fill,.vschedule .sketch__fill,.vfacts .sketch__fill{fill:var(--paper)}
.vstep h3{font-weight:700;font-size:34px;line-height:1.15}
.vstep__when{font-weight:600;font-size:19px;color:var(--blue)}
.vstep p:not(.eyebrow):not(.vstep__when){font-size:17px;color:var(--ink-soft)}
.vstep .tag{margin-top:6px}
.vschedule{margin-top:32px}
.vschedule h3{font-weight:700;font-size:26px}
.vschedule p{font-size:17px;color:var(--ink-soft)}
.vschedule{align-items:stretch}
.vsched{columns:2;column-gap:40px;margin-top:14px;counter-reset:none}
.vsched li{display:grid;grid-template-columns:2.2em 7.5em 1fr;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,178,122,.22);break-inside:avoid;font-variant-numeric:tabular-nums}
.vsched__no{font-size:14px;color:var(--ink-soft);text-align:right}
.vsched__time{font-size:16px;color:var(--orange)}
.vsched__who{display:flex;align-items:baseline;gap:10px;min-width:0}
.vsched__who b{font-weight:700;font-size:17px}
.vsched__who small{font-size:13px;color:var(--ink-soft)}
.vsched__break .vsched__who b{font-weight:400;color:var(--ink-soft)}
@media (max-width:720px){.vsched{columns:1}.vsched li{grid-template-columns:1.8em 7em 1fr;gap:8px}}

.vpeople{padding-top:110px;padding-bottom:110px}
.vpeople__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:28px}
.vpeople__count{transform:rotate(-4deg);padding-bottom:10px}
.vpeople__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.vpeople__lede{margin:-8px 0 28px;color:var(--ink-soft)}
.vperson{display:flex}
.vperson__btn{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:12px 12px 14px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.vperson__btn .sketch__fill{fill:var(--sky)}
.vperson__btn .sketch__line{opacity:.55}
.vperson__thumb{position:relative;display:block;width:100%;aspect-ratio:3/4;margin-bottom:10px;border-radius:10px;overflow:hidden;background:#000}
.vperson__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vperson__btn:hover .vperson__thumb img{transform:scale(1.05)}
.vperson__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--orange);color:#120700;transform:translate(-50%,-50%);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .2s ease}
.vperson__btn:hover .vperson__play{transform:translate(-50%,-50%) scale(1.1)}
.vperson__play svg{width:22px;height:22px;margin-left:3px}
.vperson__btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:12px}

/* clip player */
.vplayer{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:22px;background:#0B0B0B;color:#FFF4EC;box-shadow:0 0 0 1.5px rgba(255,138,61,.4),0 40px 80px rgba(0,0,0,.6)}
.vplayer::backdrop{background:rgba(0,0,0,.78)}
.vplayer__box{display:flex;flex-direction:column;padding:16px 16px 18px}
.vplayer__head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 12px;margin-bottom:12px}
.vplayer__id{grid-column:1;font-weight:600;font-size:14px;color:#FFA35C;letter-spacing:.04em}
.vplayer__name{grid-column:1;font-weight:700;font-size:24px;line-height:1.2}
.vplayer__close{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#1E1E1E;color:#FFF4EC;cursor:pointer}
.vplayer__close:hover{background:#FF7A2F;color:#120700}
.vplayer__close svg{width:20px;height:20px}
.vplayer__video{width:100%;max-height:calc(100vh - 150px);border-radius:14px;background:#000;object-fit:contain}

/* music doodles: decorative, placed in free space only */
.mdoodle{position:absolute;display:block;pointer-events:none}
.mdoodle svg{width:100%;height:100%;overflow:visible}
.mdoodle path{fill:none;stroke:var(--marker);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.page-voice .mdoodle path{stroke:#FFA35C}
/* music doodles: strokes draw one after another (delays set inline in voice.js) */
.js .mdoodle .draw path{transition-duration:.55s}
.mdoodle--hero-notes{left:calc(var(--gutter) - 70px);top:120px;width:64px;height:64px;transform:rotate(-12deg)}
.vlive{position:relative}
.mdoodle--headphones{right:var(--gutter);top:92px;width:78px;height:78px;transform:rotate(8deg)}
.vrounds .wrap{position:relative}
.mdoodle--guitar{right:var(--gutter);top:-12px;width:110px;height:110px;transform:rotate(14deg)}
.vpeople{position:relative}
.vpeople__head{position:relative}
.mdoodle--mic{right:96px;bottom:-6px;width:70px;height:70px;transform:rotate(-14deg)}
.mdoodle--eq{right:0;bottom:-2px;width:80px;height:64px}
.vfooter{position:relative}
.mdoodle--wave{left:50%;top:-14px;width:180px;height:28px;transform:translateX(-50%)}
.vperson__id{font-weight:600;font-size:14px;color:var(--marker);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.vperson__name{font-weight:700;font-size:22px;line-height:1.25}

.vfooter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:64px;border-top:1px solid #EDF2FB}
.vfooter__orgs{display:flex;flex-wrap:wrap;gap:16px 48px}
.vfooter__orgs p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.vfooter__orgs small{font-size:14px;color:var(--ink-soft)}
.vfooter__orgs b{font-size:18px}
.vfooter__logo{display:inline-flex;align-items:center;height:52px;padding:0 16px;background:#fff;border-radius:12px}

@media (max-width:960px){
  .vfacts{grid-template-columns:1fr}
  .vsteps{grid-template-columns:1fr}
  .vlive__head{flex-direction:column;align-items:flex-start;gap:8px}
  .vlive__note{margin-bottom:0}
  .vlive__arrow{display:none}
}
@media (max-width:640px){
  .vhero__note{position:static;display:block;margin-top:14px;font-size:24px}
  .vfacts li{padding:12px 16px}
  .vlive{padding-top:72px;padding-bottom:72px}
  .vlive__frame{padding:8px;border-radius:20px}
  .vlive__player{border-radius:14px}
  .vrounds{padding:72px 0 80px}
  .vstep,.vschedule{padding:24px 22px 26px}
  .vstep h3{font-size:28px}
  .vpeople{padding-top:72px;padding-bottom:80px}
  .vpeople__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mdoodle--hero-notes,.mdoodle--mic{display:none}
  .mdoodle--headphones{top:auto;bottom:62px;width:56px;height:56px}
  .mdoodle--guitar{width:76px;height:76px;top:-6px}
  .mdoodle--eq{width:56px;height:46px}
  .vperson__name{font-size:19px}
}

/* Voice page runs fully in the stage palette: same tokens, dark values */
.page-voice{
  --stage:#000;
  --paper:#111;             /* card surface */
  --sky:#171717;            /* panels, chips */
  --sky-deep:#262626;
  --ink:#FFF4EC;
  --ink-soft:#B8ADA6;
  --blue:#FF8A3D;           /* headline accent becomes a brighter orange on black */
  --blue-soft:#FFB27A;
  --marker:#FFA35C;
  --orange:#FF7A2F;
  --orange-tint:#2A1408;
  color-scheme:dark;
  background:#000;color:var(--ink)}
.page-voice .vhero{margin-bottom:0}
.page-voice .btn--blue{background:var(--orange);color:#1A0B03}
.page-voice .btn--orange{color:#1A0B03}
.page-voice .tag--ok{background:#1E3A2A;color:#9FE3BD}
.page-voice .tag--tbc{background:none;color:var(--blue-soft)}
.page-voice .vrounds{background:#0B0B0B;box-shadow:inset 0 0 0 1px rgba(255,138,61,.14)}
.page-voice .vlive__frame{background:#000;box-shadow:0 0 0 1.5px rgba(255,138,61,.35),0 30px 60px -30px rgba(0,0,0,.8)}
.page-voice .vlive__links p{color:var(--ink-soft)}
.page-voice .vperson__btn .sketch__fill{fill:var(--sky)}
.page-voice .vperson__btn .sketch__line,.page-voice .vstep .sketch__line,.page-voice .vfacts .sketch__line,.page-voice .vschedule .sketch__line{stroke:#FFB27A;opacity:.55}
.page-voice .vfooter{border-top-color:rgba(255,255,255,.12)}
.page-voice :focus-visible{outline-color:var(--orange)}
.page-voice .skip{background:var(--orange);color:#1A0B03}
@media (max-width:560px){
  .vfooter__logo{height:44px;padding:0 12px}
  .vfooter__logo img{height:24px}
  .vfooter__logo img[src*="rangers"]{height:16px}
}
@media (max-width:560px){
  .vfooter__orgs p{display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px}
  .vfooter__orgs small{grid-column:1/-1}
}

/* ---------- login / back office (page-auth) ---------- */
.page-auth .nav{justify-content:space-between}
.auth{display:flex;flex-direction:column;align-items:center;gap:24px;padding:56px 16px 72px;min-height:calc(100vh - 140px)}
.auth__card{width:100%;max-width:460px;background:var(--paper);border-radius:28px;padding:36px 36px 30px;box-shadow:0 24px 50px -32px rgba(13,27,62,.3)}
.auth__hello{font-size:26px;margin:0 0 12px;transform:rotate(-2deg)}
.auth__title{font-weight:700;font-size:34px;line-height:1.2;color:var(--blue);margin:0 0 18px;text-wrap:balance}
.auth__title--sm{font-size:24px}
.auth__lead{color:var(--ink-soft);font-size:17px;margin:0 0 8px;text-wrap:pretty}
.auth__step{display:flex;flex-direction:column;gap:10px}
.auth__step[hidden]{display:none}
.auth__step label,.auth__step legend{font-weight:600;font-size:16px}
.auth__step fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.auth__step input,.auth__step select{font:inherit;font-size:18px;color:var(--ink);background:var(--paper);border:2px solid var(--sky-deep);border-radius:14px;padding:11px 14px;min-width:0;width:100%}
.auth__step input:focus,.auth__step select:focus{outline:none;border-color:var(--blue)}
.auth__step .btn{justify-content:center;margin-top:8px}
.auth__step .btn:disabled{opacity:.6;cursor:progress}
.auth__dob{display:grid;grid-template-columns:.8fr 1.5fr 1.1fr;gap:8px}
.auth__pin{letter-spacing:.5em;font-variant-numeric:tabular-nums;text-align:center}
.auth__back{align-self:center;border:0;background:none;font:inherit;font-size:15px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:4px}
.auth__small{font-size:14px;color:var(--ink-soft);margin:6px 0 0;text-align:center}
.auth__msg{min-height:1.6em;margin:14px 0 0;font-size:16px;font-weight:500;color:#C2410C;text-wrap:pretty}
.auth__msg.is-ok{color:#15803D}
.auth__privacy{margin:18px 0 0;padding-top:16px;border-top:1px solid #EDF2FB;font-size:13px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.auth__soon{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--sky)}
.auth__soon p{margin:0;font-size:16px}
@media (max-width:560px){.auth{padding:32px 8px 48px}.auth__card{padding:28px 22px 24px}.auth__dob{grid-template-columns:1fr 1fr;}.auth__dob select:nth-child(2){grid-column:1/-1;grid-row:1}}

/* ---------- back office ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag--warn{background:#FDE7D7;color:#9A3412}
.page-admin .auth{align-items:stretch}
.bo{width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:20px;min-width:0}
.bo__head .auth__title{margin-bottom:4px}
.bo__stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bo__stats li{background:var(--paper);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column}
.bo__stats b{font-size:34px;font-weight:700;color:var(--blue);line-height:1.2;font-variant-numeric:tabular-nums}
.bo__stats span{font-size:15px;color:var(--ink-soft)}
.bo__card{max-width:none}
.bo__search{display:flex;gap:10px}
.bo__search input{flex:1;min-width:0;font:inherit;font-size:17px;border:2px solid var(--sky-deep);border-radius:14px;padding:10px 14px}
.bo__search input:focus{outline:none;border-color:var(--blue)}
.bo__list{list-style:none;margin:8px 0 0;padding:0}
.bo__row--av{justify-content:flex-start}
.bo__row--av .bo__actions{margin-left:auto}
.bo__av{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--sky);color:var(--blue);font-weight:600;font-size:20px}
.bo__av img{width:100%;height:100%;object-fit:cover}
.bo__list--scroll{max-height:560px;overflow-y:auto;padding-right:6px}
.bo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 0;border-bottom:1px solid #EDF2FB}
.bo__who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.bo__who b{font-size:17px}
.bo__who small{font-size:14px;color:var(--ink-soft)}
.bo__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bo__actions select{font:inherit;font-size:15px;border:2px solid var(--sky-deep);border-radius:12px;padding:6px 10px;background:var(--paper)}
.bo__actions .btn{font-size:15px;padding:7px 16px 8px}
@media (max-width:560px){.bo__stats{gap:8px}.bo__stats li{padding:14px 12px}.bo__stats b{font-size:26px}.bo__stats span{font-size:13px}}
.page-auth [hidden]{display:none !important}
.page-admin #login,.page-admin #denied{align-self:center}

/* hero greeting: handwriting sweep, then the hand keeps waving */
.js .hero__hello-text{-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);-webkit-mask-size:230% 100%;mask-size:230% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.js .is-writing .hero__hello-text{animation:hello-write var(--write-dur,1.4s) cubic-bezier(.45,.05,.45,1) .15s forwards}
@keyframes hello-write{to{-webkit-mask-position:0 0;mask-position:0 0}}
.wave{display:inline-block;transform-origin:70% 80%}
.js .wave{opacity:0;transition:opacity .3s ease}
.js .is-writing .wave{opacity:1;transition-delay:calc(var(--write-dur,1.4s) - .2s);animation:hello-wave 2.2s ease-in-out calc(var(--write-dur,1.4s) + .1s) infinite}
@keyframes hello-wave{0%,55%,100%{transform:rotate(0)}8%{transform:rotate(16deg)}16%{transform:rotate(-8deg)}24%{transform:rotate(16deg)}32%{transform:rotate(-4deg)}40%{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){
  .js .hero__hello-text{-webkit-mask-image:none;mask-image:none}
  .js .is-writing .hero__hello-text,.js .is-writing .wave{animation:none}
}

/* nav: member menu */
.nav__user{position:relative;flex:none}
@media (max-width:640px){.nav__user{margin-left:auto}}
.nav__me{gap:8px;max-width:220px}
.nav__me-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__me svg{width:12px;height:8px;flex:none;transition:transform .2s ease}
.nav__me[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;list-style:none;margin:0;padding:6px;min-width:180px;background:var(--paper);border-radius:16px;box-shadow:0 18px 40px -18px rgba(13,27,62,.35),0 0 0 1px rgba(13,27,62,.06)}
.nav__menu[hidden]{display:none}
.nav__menu a,.nav__menu button{display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-radius:10px;background:none;font:inherit;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer}
.nav__menu a:hover,.nav__menu button:hover,.nav__menu a:focus-visible,.nav__menu button:focus-visible{background:var(--sky);color:var(--blue);outline:none}

/* schedule: names open the audition clip */
button.vsched__who{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.vsched__who b{text-decoration:underline;text-decoration-color:rgba(255,178,122,.45);text-underline-offset:5px}
button.vsched__who:hover b,button.vsched__who:focus-visible b{color:var(--orange);text-decoration-color:currentColor}
button.vsched__who:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.vsched__play{width:12px;height:12px;flex:none;color:var(--orange);align-self:center}
.hero__hello{max-width:100%;white-space:nowrap}
.hero__hello-text{display:inline-block;max-width:min(calc(100vw - 120px), 560px);overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;padding-block:.15em;margin-block:-.15em}
@media (max-width:640px){.nav__me{max-width:150px;padding-inline:12px}}

/* footer: social channels */
.footer__social h3{font-weight:700;font-size:18px;margin-bottom:14px}
.footer__social ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.footer__social a{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:999px;background:var(--sky);color:var(--ink);text-decoration:none;transition:transform .15s ease,background .15s ease}
.footer__social a:hover{transform:translateY(-2px);background:var(--sky-deep)}
.footer__social svg{width:36px;height:36px;flex:none;overflow:visible}
.footer__social span{display:flex;flex-direction:column;line-height:1.3}
.footer__social b{font-size:16px}
.footer__social small{font-size:14px;color:var(--ink-soft)}


/* Voice: organiser logos sit right above the site footer */
.page-voice .vfooter{padding-bottom:0}
.page-voice .footer[data-site-footer]{padding-top:36px}

/* ===================== IMPACT Buzz (/buzz) ===================== */
/* Signature: threads float as hand-drawn bubbles (ink outline + offset marker fill, like the pen icons);
   size follows likes + comments, the hottest one gets the orange marker ring. */
.page-buzz [hidden]{display:none !important}
.nav__links a[aria-current="page"]{color:var(--blue)}
.bhero{padding-bottom:20px}
.bhead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-top:44px}
.bhead > *{min-width:0}
.bhead__hello{font-size:28px;transform:rotate(-2deg);transform-origin:0 100%;margin-bottom:22px}
.bhead__lede{max-width:30em;margin-top:18px;font-size:20px;line-height:1.5;text-wrap:pretty}
.bhead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bhead__actions .btn svg{width:20px;height:20px;flex:none}

/* legend: three bubbles growing, note + arrow pointing at the big one */
.blegend{position:relative;margin:0 8px 6px 0;width:250px;height:190px}
.blegend__note{position:absolute;left:0;top:0;font-size:24px;line-height:1.15;transform:rotate(-4deg);white-space:nowrap}
.blegend__arrow{position:absolute;left:96px;top:36px;width:120px;height:84px;overflow:visible}
.blegend__arrow path{stroke-width:3}
.blegend__dots{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end;gap:10px}
.blegend__dots i{display:block;position:relative}
.blegend__dots i[data-s="1"]{width:28px;height:28px}
.blegend__dots i[data-s="2"]{width:44px;height:44px}
.blegend__dots i[data-s="3"]{width:72px;height:72px}
.blegend__dots svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* filter + view toggle */
.bbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:34px}
.bfilter{display:flex;flex-wrap:wrap;gap:8px}
.bfilter button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 16px 9px;background:var(--paper);font:inherit;font-size:16px;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--sky-deep);transition:background .15s ease,color .15s ease}
.bfilter button:hover{color:var(--blue)}
.bfilter button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.bfilter b{font-weight:600;font-size:13px;min-width:1.6em;padding:0 6px;border-radius:999px;background:var(--sky);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bfilter b:empty{display:none}
.bfilter button[aria-pressed="true"] b{background:rgba(255,255,255,.18);color:#fff}
.bview{font-size:16px}

/* the arena */
.barena-wrap{position:relative;padding-top:14px;padding-bottom:12px}
.barena{position:relative;margin:0;padding:0;list-style:none;height:600px;touch-action:pan-y}
.bubble{position:absolute;left:0;top:0;width:84px;height:84px;transform:scale(0);transform-origin:50% 50%;will-change:transform;z-index:1}
.bubble.is-hot{z-index:2}
.bubble.is-drag{z-index:3}
.bubble__btn{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;margin:0;background:none;border-radius:50%;color:var(--ink);cursor:pointer;transition:transform .2s ease}
.bubble__btn:hover{transform:scale(1.035)}
.bubble.is-drag .bubble__btn{cursor:grabbing;transform:scale(1.06)}
.bubble__btn:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:50%}
.bubble__svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.bubble__shadow{fill:#C9DAFF}
.bubble__face{fill:var(--paper)}
.bubble__line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85}
.bubble__shine{fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.35}
.bubble--question .bubble__shadow{fill:#FBB98F}
.bubble--question .bubble__face{fill:#FFF6EF}
.bubble--hidden .bubble__line{stroke-dasharray:5 6;opacity:.55}
.bubble--hidden .bubble__btn{opacity:.6}
.bubble__text{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3em;width:74%;text-align:center;pointer-events:none}
.bubble__kind{font-size:clamp(10px,calc(var(--R) * .1px + 3px),15px);font-weight:600;line-height:1.2;color:var(--marker)}
.bubble__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:clamp(11px,calc(var(--R) * .17px + 3px),24px);font-weight:600;line-height:1.3;text-wrap:balance;overflow-wrap:anywhere}
.bubble[data-size="s"] .bubble__title{-webkit-line-clamp:2}
.bubble[data-size="l"] .bubble__title{-webkit-line-clamp:4}
.bubble[data-size="s"] .bubble__kind,.bubble[data-size="xs"] .bubble__kind,.bubble[data-size="xs"] .bubble__meta{display:none}
.bubble[data-size="xs"] .bubble__title{-webkit-line-clamp:2;font-size:11px}
.bubble__meta{display:flex;gap:.7em;font-size:clamp(10px,calc(var(--R) * .1px + 3px),15px);line-height:1;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bubble__meta > span,.bitem__counts > span{display:inline-flex;align-items:center;gap:.25em}
.bubble__meta svg,.bitem__counts svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.bubble__meta .is-mine,.bitem__counts .is-mine{color:var(--marker)}
.bubble__meta .is-mine svg,.bitem__counts .is-mine svg{fill:var(--orange);stroke:var(--orange)}
.bubble__ring,.bubble__hot{display:none}
.bubble__ring{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.bubble__ring path{stroke-width:calc(170px / var(--R))} /* ~3.4px at any size; non-scaling-stroke breaks the dash draw-in */
.bubble__hot{position:absolute;right:-4%;top:-3%;font-size:clamp(18px,calc(var(--R) * .13px + 6px),30px);transform:rotate(12deg);white-space:nowrap;pointer-events:none;-webkit-text-stroke:.22em var(--sky);paint-order:stroke fill}
.is-hot .bubble__ring,.is-hot .bubble__hot{display:block}
.bubble.is-pulse .bubble__line{animation:bpulse 1.1s ease}
@keyframes bpulse{0%,35%{stroke:var(--orange);stroke-width:4;opacity:1}100%{stroke:var(--ink);stroke-width:2;opacity:.85}}
.bubble--ghost{pointer-events:none;opacity:.6}
.bubble--ghost .bubble__line{opacity:.3}
.bubble--ghost .bubble__shadow{fill:var(--sky-deep)}

/* empty / guest card over the ghost bubbles */
.bempty{position:absolute;inset:14px var(--gutter) 12px;z-index:5;display:grid;place-items:center;pointer-events:none}
.bempty__card{position:relative;isolation:isolate;max-width:440px;padding:30px 32px 32px;text-align:center;pointer-events:auto;background:var(--paper);border-radius:24px}
.bempty__card > .sketch .sketch__fill{display:none}
.bempty__card .hand{font-size:24px;transform:rotate(-3deg);margin-bottom:6px}
.bempty__card h2{font-size:28px;font-weight:700;line-height:1.3;color:var(--blue);text-wrap:balance}
.bempty__card p:not(.hand){margin:10px 0 20px;color:var(--ink-soft);font-size:17px;text-wrap:pretty}
.bempty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bstatus{min-height:1.5em;text-align:center;font-size:15px;color:var(--ink-soft)}

/* list view */
.blist{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin:0;padding:6px 0 18px;list-style:none}
.bitem{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;height:100%;padding:18px 22px 18px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s ease}
.bitem:hover{transform:translateY(-2px)}
.bitem .sketch__fill{fill:var(--paper)}
.bitem--question .sketch__fill{fill:#FFF6EF}
.bitem__kind{font-size:13px;font-weight:600;color:var(--blue)}
.bitem--question .bitem__kind{color:var(--marker)}
.bitem__title{font-size:18px;line-height:1.4;text-wrap:pretty}
.bitem__by{font-size:14px;color:var(--ink-soft)}
.bitem__counts{display:flex;gap:14px;margin-top:auto;padding-top:4px;font-size:14px;color:var(--ink-soft)}

/* dialogs */
.bdlg{width:min(620px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:4px;border:0;background:none;color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.bdlg::backdrop{background:rgba(13,27,62,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.bdlg__card{position:relative;isolation:isolate;padding:34px 36px 28px;background:var(--paper);border-radius:24px}
.bdlg__card > .sketch .sketch__fill{display:none}
.bdlg__close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--sky);color:var(--ink);cursor:pointer}
.bdlg__close svg{width:20px;height:20px}
.bdlg__close:hover{background:var(--sky-deep)}
.bdlg__kind{margin-bottom:8px}
.bkindtag{display:inline-block;border-radius:999px;padding:2px 12px 3px;font-size:14px;font-weight:600;background:var(--sky);color:var(--blue)}
.bkindtag--q{background:var(--orange-tint);color:var(--marker)}
.bdlg__title{padding-right:44px;font-size:28px;font-weight:700;line-height:1.3;color:var(--blue);text-wrap:balance;overflow-wrap:anywhere}
.bdlg__body{margin-top:12px;font-size:17px;white-space:pre-line;text-wrap:pretty;overflow-wrap:anywhere}
.bdlg__by{margin-top:12px;font-size:15px;color:var(--ink-soft)}
.bdlg__by b,.bcomment__by b{color:var(--ink);font-weight:600}
.bdlg__by time::before,.bcomment__by time::before{content:", "}
.bteam{display:inline-block;border-radius:999px;padding:0 8px 1px;font-size:12px;font-weight:600;background:var(--orange-tint);color:var(--marker);vertical-align:1px}
.bteam--muted{background:#E6EAF2;color:var(--ink-soft)}
.bdlg__note{margin-top:12px;padding:8px 14px;border-radius:12px;background:var(--orange-tint);font-size:15px}
.bdlg__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.blike{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 18px 9px 14px;background:var(--sky);font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s ease}
.blike:hover{background:var(--sky-deep)}
.blike:disabled{opacity:.5;cursor:not-allowed}
.blike svg{width:22px;height:22px;flex:none;overflow:visible}
.blike__fill{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.blike b{font-variant-numeric:tabular-nums}
.blike[aria-pressed="true"]{background:var(--orange-tint);color:var(--marker)}
.blike[aria-pressed="true"] .blike__fill{fill:var(--orange);stroke:var(--orange)}
.blike[aria-pressed="true"] svg{animation:bheart .4s ease}
@keyframes bheart{40%{transform:scale(1.3)}}
.bdlg__tools{display:flex;gap:4px}
.btool{border:0;background:none;padding:4px 8px;font:inherit;font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btool:hover{color:var(--blue)}
.btool--danger{color:#B42318}
.bcomments{margin-top:22px;padding-top:16px;border-top:1px solid #E3EBF8}
.bcomments__head{font-size:18px;font-weight:700}
.bcomments__list{margin:6px 0 0;padding:0;list-style:none}
.bcomment{padding:12px 0;border-bottom:1px solid #EDF2FB}
.bcomment.is-hidden{opacity:.55}
.bcomment__by{font-size:14px;color:var(--ink-soft)}
.bcomment__body{margin-top:2px;font-size:16.5px;white-space:pre-line;overflow-wrap:anywhere}
.bcomment__tools{margin-top:2px}
.bcomments__empty{padding:12px 0;font-size:15px;color:var(--ink-soft)}
.bcomments__form{display:flex;align-items:flex-end;gap:10px;margin-top:14px}
.bcomments__form textarea,.bfield input,.bfield textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:2px solid var(--sky-deep);border-radius:14px;padding:10px 14px;resize:vertical}
.bcomments__form textarea{flex:1;min-height:50px}
.bcomments__form textarea:focus,.bfield input:focus,.bfield textarea:focus{outline:none;border-color:var(--blue)}
.bcomments__form .btn{flex:none;padding:12px 22px}
.bcomments__form .btn:disabled,.bdlg__submit:disabled{opacity:.6;cursor:progress}
.bmsg{min-height:1.4em;margin-top:8px;font-size:15px;font-weight:500;color:#C2410C;text-wrap:pretty}
.bmsg:empty{min-height:0;margin:0}

/* compose */
.bkind{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;padding:0;border:0}
.bkind label{position:relative;cursor:pointer}
.bkind input{position:absolute;opacity:0;width:1px;height:1px}
.bkind span{display:flex;flex-direction:column;height:100%;padding:12px 16px;border:2px solid var(--sky-deep);border-radius:16px;transition:border-color .15s ease,background .15s ease}
.bkind b{font-size:17px}
.bkind small{font-size:14px;color:var(--ink-soft);line-height:1.4}
.bkind input:checked + span{border-color:var(--blue);background:var(--sky)}
.bkind input[value="question"]:checked + span{border-color:var(--orange);background:var(--orange-tint)}
.bkind input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.bfield{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.bfield > span{font-size:16px;font-weight:600}
.bfield > span small{margin-left:6px;font-size:14px;font-weight:400;color:var(--ink-soft)}
.bfield__count{align-self:flex-end;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.bdlg__submit{width:100%;justify-content:center;margin-top:16px}

@media (max-width:960px){
  .bhead{grid-template-columns:1fr;gap:20px}
  .blegend{width:auto;height:auto;display:flex;align-items:flex-end;gap:16px;margin:0}
  .blegend__note{position:static;font-size:21px}
  .blegend__arrow{display:none}
  .blegend__dots{position:static}
  .blegend__dots i[data-s="3"]{width:56px;height:56px}
}
@media (max-width:640px){
  .blegend{gap:12px}
  .blegend__note{font-size:19px}
  .blegend__dots{gap:6px;flex:none}
  .blegend__dots i[data-s="1"]{width:18px;height:18px}
  .blegend__dots i[data-s="2"]{width:28px;height:28px}
  .blegend__dots i[data-s="3"]{width:42px;height:42px}
}
@media (max-width:640px){
  .bhead{padding-top:28px}
  .bhead__hello{font-size:24px}
  .bhead__lede{font-size:18px}
  .bhead__actions .btn{padding:9px 20px 10px;font-size:17px}
  .bbar{margin-top:24px}
  .bfilter button{padding:7px 12px 8px;font-size:15px}
  .bview{font-size:15px}
  .bdlg{width:100%;margin:auto 0 0;max-height:92dvh;padding:0}
  .bdlg__card{padding:28px 20px 22px;border-radius:24px 24px 0 0}
  .bdlg__card > .sketch{display:none}
  .bdlg__title{font-size:23px}
  .bempty__card{padding:24px 20px 26px}
  .bempty__card h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .bubble__btn,.bitem,.bfilter button,.bkind span{transition:none}
  .bubble.is-pulse .bubble__line,.blike[aria-pressed="true"] svg{animation:none}
}

/* nav: five links (incl. IMPACT Buzz) stay on one line between 641px and 1180px */
.nav__links a{white-space:nowrap}
@media (max-width:1180px){.nav{gap:22px}.nav__links{gap:18px}.nav__links a{font-size:16.5px}}
@media (max-width:900px){.nav__links{display:none}.nav__user{margin-left:auto}}

/* ---------- mascots (assets/mascots, transparent webp) ---------- */
.bempty__card{margin-top:96px}
.bempty__mascot{position:absolute;left:50%;bottom:calc(100% - 22px);width:190px;height:auto;max-width:none;transform:translateX(-50%) rotate(-3deg);pointer-events:none}
.auth__mascot{width:170px;height:auto;margin:-8px 0 -46px;position:relative;z-index:1;transform:rotate(-4deg);pointer-events:none}
@media (max-width:640px){.bempty__mascot{width:150px}.bempty__card{margin-top:80px}.auth__mascot{width:140px;margin-bottom:-38px}}

/* home page mascots: one per section, never over text */
.mascot{display:block;height:auto;max-width:none;pointer-events:none}
.photos__head{position:relative}
.mascot--photos{position:absolute;right:0;bottom:-18px;width:230px;transform:rotate(-3deg)}
.mascot--cal{position:absolute;right:24px;bottom:22px;width:190px;transform:rotate(3deg)}
.mascot--about{width:210px;margin-top:4px;transform:rotate(-4deg)}

@media (max-width:960px){.mascot--photos{width:170px}.mascot--cal{width:150px;bottom:auto;top:0;right:0}}
@media (max-width:640px){
  .mascot--photos{position:static;width:150px;margin:4px 0 -8px auto}
  .mascot--cal{width:110px}
  .mascot--about{width:160px;align-self:flex-end}
}

/* mobile menu (nav-links.js): same links as the desktop nav, in a sheet under the bar */
.nav__burger{display:none;flex:none;place-items:center;width:44px;height:44px;margin-right:-6px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.nav__burger svg{width:28px;height:28px;overflow:visible}
.nav__burger path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transform-origin:14px 14px;transition:transform .25s ease,opacity .2s ease}
.nav__burger[aria-expanded="true"] .nav__burger-a{transform:translateY(5.7px) rotate(42deg)}
.nav__burger[aria-expanded="true"] .nav__burger-b{opacity:0}
.nav__burger[aria-expanded="true"] .nav__burger-c{transform:translateY(-5.6px) rotate(-42deg)}
.nav__burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.logo--light ~ .nav__burger{color:#fff}
.nav__drawer{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 4px);z-index:25;padding:8px;background:var(--paper);border-radius:20px;box-shadow:0 20px 44px -20px rgba(13,27,62,.4),0 0 0 1px rgba(13,27,62,.06)}
.nav__drawer[hidden]{display:none}
.nav__drawer ul{margin:0;padding:0;list-style:none}
.nav__drawer li + li{border-top:1px solid var(--sky)}
.nav__drawer a{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-radius:12px;font-size:18px;font-weight:500;color:var(--ink);text-decoration:none}
.nav__drawer a::after{content:"→";color:var(--marker);font-weight:400}
.nav__drawer a:hover,.nav__drawer a:focus-visible{background:var(--sky);color:var(--blue);outline:none}
.nav__drawer a[aria-current="page"]{color:var(--blue);font-weight:700}
@media (max-width:900px){.nav__burger{display:grid}}
@media (prefers-reduced-motion:reduce){.nav__burger path{transition:none}}
/* overflow:clip so focusing something near the edge can't scroll a rounded panel sideways */
.panel{overflow:clip}
@media (max-width:640px){.nav{gap:8px}.nav__burger{width:40px;height:40px;margin-right:-4px}}
@media (max-width:400px){.logo__happy,.logo__impact{font-size:23px}.nav__me{max-width:112px}}
.about__buzz{align-self:flex-start;margin-top:-4px}

/* back office: IMPACT Buzz moderation */
.bo__stats--4{grid-template-columns:repeat(4,1fr);margin:6px 0 16px}
.bo__stats--4 li{background:var(--sky)}
.bo__search select{font:inherit;font-size:16px;border:2px solid var(--sky-deep);border-radius:14px;padding:8px 10px;background:var(--paper)}
.bz__row b a{color:var(--ink);text-decoration:none}
.bz__row b a:hover{color:var(--blue);text-decoration:underline}
.bz__row.is-hidden .bo__who b{opacity:.6}
.bz__del{color:#B42318}
.bz__comments{flex-basis:100%;margin:4px 0 0;padding:4px 0 0 16px;list-style:none;border-left:3px solid var(--sky-deep)}
.bz__comment{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 0;border-bottom:1px solid #EDF2FB}
.bz__comment p{flex-basis:100%;margin:0;font-size:16px;white-space:pre-line;overflow-wrap:anywhere}
.bz__comment small{color:var(--ink-soft);font-size:13px}
.bz__comment.is-hidden p{opacity:.55}
@media (max-width:560px){.bo__stats--4{grid-template-columns:repeat(2,1fr)}.bo__search{flex-wrap:wrap}}

/* ===================== Profile (/profile) ===================== */
/* Signature: the photo in a pen-drawn marker ring with an offset orange fill, beside a crystal card
   whose level bar fills like a marker stroke. */
.page-profile [hidden]{display:none !important}
.phero{padding-bottom:12px}
.pcard{display:grid;grid-template-columns:auto 1fr 340px;align-items:center;gap:52px;padding-top:52px;padding-bottom:28px}
.pcard > *{min-width:0}

.pface{position:relative;width:184px;height:184px;flex:none;margin:14px}
.pface::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue-soft);transform:translate(8px,9px)}
.pface__pic{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--blue);border:5px solid var(--paper);box-shadow:0 0 0 2px var(--ink);transition:opacity .2s ease}
.pface__pic img{width:100%;height:100%;object-fit:cover}
.pface__initial{display:grid;place-items:center;width:100%;height:100%;font-size:78px;font-weight:700;line-height:1;color:#fff}
.pface__ring{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;overflow:visible;pointer-events:none}
.pface__ring path{stroke-width:1.5}
.pface__btn{position:absolute;right:-2px;bottom:4px;z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 10px 20px -10px rgba(13,27,62,.5);cursor:pointer;transition:transform .15s ease}
.pface__btn:hover{transform:translateY(-2px) rotate(-6deg)}
.pface__btn svg{width:30px;height:30px;overflow:visible}
.pface:focus-within .pface__btn{outline:3px solid var(--blue);outline-offset:3px}
.pface.is-busy .pface__pic{opacity:.45}
.pface__remove{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);border:0;background:none;padding:2px 6px;font:inherit;font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.pface__remove:hover{color:#B42318}

.pinfo__hello{font-size:28px;transform:rotate(-3deg);transform-origin:0 100%;margin-bottom:8px}
.pinfo__nameline{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.pinfo__name{font-size:clamp(36px,4.4vw,58px);font-weight:700;line-height:1.15;color:var(--blue);overflow-wrap:anywhere;text-wrap:balance}
.pinfo__edit{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--sky-deep);cursor:pointer;transition:transform .15s ease}
.pinfo__edit:hover{transform:rotate(-8deg);color:var(--blue)}
.pinfo__edit svg{width:20px;height:20px}
.pname{display:flex;flex-direction:column;gap:8px;max-width:560px}
.pname label{font-size:15px;font-weight:600}
.pname__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pname input{flex:1 1 220px;min-width:0;font:inherit;font-size:22px;font-weight:600;color:var(--ink);background:var(--paper);border:2px solid var(--sky-deep);border-radius:14px;padding:9px 14px}
.pname input:focus{outline:none;border-color:var(--blue)}
.pname .btn:disabled{opacity:.6;cursor:progress}
.pinfo__team{margin-top:10px;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.pinfo__level{display:flex;align-items:center;gap:12px;margin-top:14px}
.plv{display:inline-block;padding:3px 13px 4px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:16px;letter-spacing:.02em}
.plv__title{font-size:30px;transform:rotate(-3deg)}

.pgem{position:relative;isolation:isolate;padding:26px 28px 22px}
.pgem .sketch__fill{fill:var(--paper)}
.pgem__top{display:flex;align-items:center;gap:14px}
.pgem__icon{width:66px;height:66px;flex:none;overflow:visible}
.js .pgem__spark{animation:gemTwinkle 2.6s ease-in-out infinite}
@keyframes gemTwinkle{0%,100%{opacity:1}50%{opacity:.25}}
.pgem__count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.pgem__count b{font-size:56px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pgem__count .hand{font-size:30px}
.pgem__bar{position:relative;height:16px;margin-top:18px;border-radius:999px;background:var(--sky);box-shadow:inset 0 0 0 1.5px var(--sky-deep);overflow:hidden}
.pgem__bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--orange);transition:width 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.pgem__next{margin-top:10px;font-size:16px;color:var(--ink-soft);text-wrap:pretty}
.pgem__next b{color:var(--ink)}
.pmsg{min-height:1.6em;padding-bottom:8px;font-size:16px;font-weight:500;color:#15803D}
.pmsg.is-error{color:#C2410C}
.pmsg .link{margin-left:10px;font-size:16px}

.pmain{padding-top:56px;padding-bottom:88px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 72px;padding:0;list-style:none}
.pstats li{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:2px;padding:22px 26px 20px}
.pstats b{font-size:46px;font-weight:700;line-height:1.1;color:var(--blue);font-variant-numeric:tabular-nums}
.pstats span{font-size:16px;color:var(--ink-soft)}

.pgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.pgrid > *{min-width:0}
.pbuzz__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.pbuzz .split-title{font-size:clamp(34px,4vw,52px)}
.pbuzz__list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.pthread{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:4px;padding:18px 24px 16px;color:var(--ink);text-decoration:none;transition:transform .15s ease}
.pthread:hover{transform:translateY(-2px)}
.pthread .sketch__fill{fill:var(--sky)}
.pthread--q .sketch__fill{fill:#FFF0E6}
.pthread__kind{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue)}
.pthread--q .pthread__kind{color:var(--marker)}
.pthread__title{font-size:19px;line-height:1.4;text-wrap:pretty;overflow-wrap:anywhere}
.pthread:hover .pthread__title{color:var(--blue)}
.pthread__meta{display:flex;align-items:center;gap:14px;margin-top:2px;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pthread__meta > span{display:inline-flex;align-items:center;gap:4px}
.pthread__meta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.pthread__meta time{margin-left:auto}
.pbuzz__empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px 30px;border-radius:24px;background:var(--sky);text-align:center}
.pbuzz__empty img{width:220px;height:auto}
.pbuzz__empty p{font-size:17px;color:var(--ink-soft);text-wrap:pretty}
.pbuzz__empty b{display:block;font-size:22px;color:var(--ink)}

.pside{display:flex;flex-direction:column;gap:28px}
.pearn,.plog{position:relative;isolation:isolate;padding:24px 26px 20px}
.pearn .sketch__fill{fill:var(--orange-tint)}
.plog .sketch__fill{fill:var(--sky)}
.pside__title{font-size:21px;font-weight:700;margin-bottom:8px}
.pearn__list,.plog__list{margin:0;padding:0;list-style:none}
.pearn__list li{display:grid;grid-template-columns:48px 1fr;align-items:baseline;gap:8px;padding:9px 0;font-size:16px;line-height:1.4}
.pearn__list li + li{border-top:1px dashed rgba(13,27,62,.18)}
.pearn__list b{font-size:21px;font-weight:700;color:var(--marker);font-variant-numeric:tabular-nums}
.pearn__list small{display:block;font-size:13px;color:var(--ink-soft)}
.pearn__note{margin-top:8px;font-size:14px;color:var(--ink-soft);text-wrap:pretty}
.plog__list li{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:8px;padding:8px 0;font-size:15px}
.plog__list li + li{border-top:1px solid rgba(13,27,62,.08)}
.plog__amt{font-weight:700;color:#15803D;font-variant-numeric:tabular-nums}
.plog__amt.is-neg{color:#B42318}
.plog__list time{font-size:13px;color:var(--ink-soft);white-space:nowrap}
li.plog__empty{display:block;font-size:15px;color:var(--ink-soft)}

/* nav button: profile photo next to the name */
.nav__me-label{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.nav__me-face{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.nav__me-face--initial{display:grid;place-items:center;background:var(--blue);color:#fff;font-size:13px;font-weight:700;line-height:1}

@media (max-width:1080px){
  .pcard{grid-template-columns:auto 1fr;gap:28px 40px}
  .pgem{grid-column:1/-1;max-width:560px}
}
@media (max-width:760px){
  .pcard{grid-template-columns:1fr;justify-items:start;padding-top:28px}
  .pface{width:150px;height:150px;margin-bottom:40px}
  .pface__initial{font-size:62px}
  .pgem{justify-self:stretch}
  .pgrid{grid-template-columns:1fr;gap:56px}
}
@media (max-width:640px){
  .pmain{padding-top:40px;padding-bottom:64px}
  .pstats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:56px}
  .pstats li{padding:14px 12px}
  .pstats b{font-size:30px}
  .pstats span{font-size:13px;line-height:1.35}
  .pgem{padding:22px 20px 18px}
  .pgem__count b{font-size:46px}
  .pinfo__hello{font-size:24px}
  .plv__title{font-size:26px}
  .pthread{padding:16px 18px 14px}
}
@media (prefers-reduced-motion:reduce){
  .js .pgem__spark{animation:none}
  .pgem__bar i,.pthread,.pface__btn,.pinfo__edit{transition:none}
}
/* Buzz bylines: author photo */
.bface{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;object-fit:cover;vertical-align:-9px;box-shadow:0 0 0 1.5px var(--ink)}
.bface--initial{background:var(--blue);color:#fff;font-size:13px;font-weight:700;line-height:1}

/* profile photo cropper */
.pcrop{width:min(460px,calc(100vw - 32px))}
.pcrop__hint{margin-top:6px;font-size:15px;color:var(--ink-soft)}
.pcrop__stage{margin:16px auto 0;width:min(280px,100%);aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--sky)}
.pcrop__stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.pcrop__stage canvas:active{cursor:grabbing}
.pcrop__stage canvas:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.pcrop__zoom{display:flex;align-items:center;gap:10px;width:min(280px,100%);margin:16px auto 0;color:var(--ink-soft)}
.pcrop__zoom svg{width:22px;height:22px;flex:none}
.pcrop__zoom input{flex:1;min-width:0;accent-color:var(--orange)}
.pcrop__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media (max-width:640px){.pcrop{width:100%}.pcrop__actions .btn{flex:1;justify-content:center}}

/* nav: members get a round photo button (pen style: ink outline + offset orange fill) */
.nav__avatar{position:relative;display:block;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .15s ease}
.nav__avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--orange);transform:translate(3px,3px)}
.nav__avatar:hover{transform:translateY(-2px)}
.nav__avatar[aria-expanded="true"]{transform:none}
.nav__avatar .nav__me-face{position:relative;display:grid;place-items:center;width:44px;height:44px;box-shadow:0 0 0 2px var(--ink)}
.nav__avatar .nav__me-face--initial{font-size:19px}
.nav__avatar:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.logo--light ~ .nav__user .nav__avatar .nav__me-face{box-shadow:0 0 0 2px #fff}
.nav__menu-who{padding:10px 14px 8px;margin-bottom:4px;border-bottom:1px solid var(--sky);font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}

/* big activities: the yellow mascot stands beside the heading; the Voice artwork links to its page */
.details{position:relative}
.mascot--details{position:absolute;right:var(--gutter);top:96px;width:260px;transform:rotate(4deg)}
.feature__art--link{display:block;border-radius:var(--r-card);transition:transform .2s ease}
.feature__art--link:hover{transform:translateY(-4px) rotate(-.6deg)}
.feature__art--link:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
@media (max-width:960px){.mascot--details{width:190px;top:64px}}
@media (max-width:640px){.mascot--details{position:static;width:150px;margin:-36px 0 20px auto}}
@media (prefers-reduced-motion:reduce){.feature__art--link{transition:none}}

/* nav: round photo + display name (owner, 2026-10-10) */
.nav__avatar{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;padding:0 4px 0 0;border-radius:999px;color:var(--ink);font:inherit}
.nav__avatar::before{width:44px;height:44px;inset:0 auto auto 0}
.nav__avatar-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:600}
.nav__avatar-chev{width:12px;height:8px;flex:none;transition:transform .2s ease}
.nav__avatar[aria-expanded="true"] .nav__avatar-chev{transform:rotate(180deg)}
.nav__avatar:hover .nav__avatar-name{color:var(--blue)}
.logo--light ~ .nav__user .nav__avatar{color:#fff}
@media (max-width:640px){.nav__avatar{gap:7px}.nav__avatar-name{max-width:92px;font-size:15px}}
@media (max-width:400px){.nav__avatar-name{max-width:70px}}
/* mascots a little lower (owner, 2026-10-10) */
.mascot--cal{bottom:-6px}
.mascot--details{top:126px}
@media (max-width:960px){.mascot--cal{top:28px}.mascot--details{top:94px}}
@media (max-width:640px){.mascot--details{margin-top:-14px}}
@media (max-width:400px){
  .nav__avatar::before,.nav__avatar .nav__me-face{width:38px;height:38px}
  .nav__avatar .nav__me-face--initial{font-size:16px}
  .nav__avatar-name{max-width:66px;font-size:14px}
  .nav__avatar-chev{display:none}
}
/* profile photo is a button: tap to re-position / zoom */
button.pface__pic{padding:0;margin:0;cursor:zoom-in;font:inherit;color:inherit;display:block}
button.pface__pic:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
button.pface__pic:hover img{transform:scale(1.04)}
.pface__pic img{transition:transform .25s ease}
.pcrop__actions{align-items:center}
.pcrop__new{margin-right:auto;font-size:15px;cursor:pointer}
@media (max-width:640px){.pcrop__actions{flex-wrap:wrap}.pcrop__new{flex-basis:100%;margin:0 0 4px}}

/* ===================== Buzz: crystal leaderboard ===================== */
.board{padding-top:96px;padding-bottom:40px}
.board__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:48px}
.board__lede{font-size:17px;color:var(--ink-soft);text-wrap:pretty}
.board__lede .link{margin-left:6px;font-size:16px}
.gem{width:22px;height:22px;flex:none;overflow:visible}
.board__face{display:block;width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--ink)}
.board__face--initial{display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700;font-size:17px;line-height:1}
.board__you{display:inline-block;margin-left:6px;padding:0 8px 1px;border-radius:999px;background:var(--orange);color:var(--ink);font-size:12px;font-weight:700;vertical-align:2px}
.board__lv{font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.board__gems{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.board__gems b{font-size:20px;font-weight:700;color:var(--ink)}

.board__podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:24px;margin:0 0 28px;padding:0;list-style:none}
.board__step{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 20px 24px;text-align:center;min-width:0}
.board__step .sketch__fill{fill:var(--sky)}
.board__step--first{padding-top:40px;padding-bottom:30px}
.board__step--first .sketch__fill{fill:var(--orange-tint)}
.board__step.is-me .sketch__fill{fill:#FFE3CF}
.board__pic{position:relative;margin-bottom:6px}
.board__step .board__face{width:76px;height:76px;font-size:30px;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.board__step--first .board__face{width:104px;height:104px;font-size:40px}
.board__ring{position:absolute;inset:-22px;width:calc(100% + 44px);height:calc(100% + 44px);max-width:none;overflow:visible;pointer-events:none}
.board__ring path{stroke-width:1.6}
.board__place{font-size:24px;transform:rotate(-3deg)}
.board__step--first .board__place{font-size:30px}
.board__name{max-width:100%;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.board__step--first .board__name{font-size:22px}
.board__dept{font-size:14px;color:var(--ink-soft);min-height:1.4em}
.board__step .board__gems{margin-top:6px}
.board__step--first .board__gems b{font-size:26px}
.board__step--first .gem{width:28px;height:28px}

.board__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.board__row{display:grid;grid-template-columns:36px 40px 1fr auto auto;align-items:center;gap:14px;padding:10px 18px;border-radius:18px;background:var(--sky)}
.board__row.is-me{background:#FFE3CF;box-shadow:inset 0 0 0 2px var(--orange)}
.board__rank{font-size:20px;font-weight:700;color:var(--blue);text-align:center;font-variant-numeric:tabular-nums}
.board__who{display:flex;flex-direction:column;min-width:0}
.board__who b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board__who small{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board__row .board__gems{justify-content:flex-end;min-width:72px}
.board__me{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:20px;padding:14px 18px;border-radius:18px;background:#FFE3CF;box-shadow:inset 0 0 0 2px var(--orange);font-size:16px}
.board__me b{font-size:18px}

@media (max-width:760px){
  .board{padding-top:72px}
  .board__podium{grid-template-columns:1fr;gap:14px}
  .board__step--first{order:-1}
  .board__step{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;gap:2px 12px;padding:16px 18px}
  .board__step--first{padding:20px 18px}
  .board__pic{margin:0 6px 0 0}
  .board__step .board__face,.board__step--first .board__face{width:56px;height:56px;font-size:24px}
  .board__ring{inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px)}
  .board__place,.board__step--first .board__place{font-size:22px;flex-basis:auto}
  .board__name,.board__step--first .board__name{font-size:18px}
  .board__dept{display:none}
  .board__step .board__gems{margin:0 0 0 auto}
  .board__step--first .board__gems b{font-size:22px}
  .board__row{grid-template-columns:28px 36px 1fr auto;gap:10px;padding:10px 14px}
  .board__row .board__face{width:36px;height:36px}
  .board__row .board__lv{display:none}
}
.board__step--first .board__pic{margin-bottom:22px}
@media (max-width:760px){.board__step--first .board__pic{margin:0 14px 0 6px}}
@media (max-width:760px){
  .board__step,.board__step--first{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"pic place gems" "pic name gems" "pic lv gems";align-items:center;column-gap:14px;row-gap:0;text-align:left}
  .board__pic,.board__step--first .board__pic{grid-area:pic;margin:0 4px 0 2px}
  .board__step--first .board__pic{margin:0 10px 0 8px}
  .board__place{grid-area:place;transform:rotate(-2deg);transform-origin:0 50%}
  .board__name{grid-area:name}
  .board__step .board__lv{grid-area:lv}
  .board__step .board__gems{grid-area:gems;margin:0}
}
/* phones: the calendar mascot stays beside the title, clear of the handwritten note below it */
@media (max-width:640px){.mascot--cal{top:-6px;bottom:auto;right:-4px;width:108px}}

/* ---------- จริงหรือมั่ว (/quiz) ---------- */
.page-quiz [hidden]{display:none !important}
.qhero{padding-bottom:64px}
.qhead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-top:44px}
.qhead > *{min-width:0}
.qhead__hello{font-size:28px;transform:rotate(-2deg);transform-origin:0 100%;margin-bottom:22px}
.qhead__lede{max-width:30em;margin-top:18px;font-size:20px;line-height:1.5;text-wrap:pretty}
.qside{display:flex;flex-wrap:wrap;gap:10px}
.qwallet{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:999px;padding:10px 24px 10px 14px;box-shadow:inset 0 0 0 2px var(--sky-deep)}
.qwallet__gem{width:40px;height:40px;flex:none}
.qwallet p{margin:0;font-size:16px;line-height:1.2;color:var(--ink-soft)}
.qwallet b{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.qstage{padding-top:20px}
.qcard{position:relative;isolation:isolate;max-width:680px;margin:40px auto 0;padding:34px 40px 34px;background:var(--paper);border-radius:24px}
.qcard > .sketch .sketch__fill{display:none}
.qcard--center{margin-top:120px;text-align:center}
.qcard__mascot{position:absolute;left:50%;bottom:calc(100% - 22px);width:180px;height:auto;max-width:none;transform:translateX(-50%) rotate(-3deg);pointer-events:none}
.qcard .hand{font-size:25px;transform:rotate(-3deg);margin-bottom:6px}
.qcard__title{font-size:30px;font-weight:700;line-height:1.3;color:var(--blue);text-wrap:balance}
.qcard__text{margin:10px 0 18px;font-size:17px;color:var(--ink-soft);text-wrap:pretty}
.qcard__text b{color:var(--ink)}
.qcard__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.qcard__small{margin-top:10px;font-size:15px;color:var(--ink-soft);text-wrap:pretty}
.qcard__gain{margin:8px 0 14px;font-size:18px;text-wrap:pretty}
.qcard__gain b{color:var(--ink)}
.qmsg{margin-top:12px;font-size:15px;font-weight:500;color:#B4400F;text-wrap:pretty}
.qmsg:empty{display:none}

.qprog{display:flex;justify-content:center;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.qcard--center .qprog{justify-content:center;margin-bottom:14px}
.qprog li{flex:1;max-width:44px;height:8px;border-radius:99px;background:var(--sky-deep)}
.qprog li.is-right{background:#1F9A4F}
.qprog li.is-wrong{background:var(--orange)}
.qprog li.is-now{background:var(--blue)}

.qcat{display:inline-block;margin:0 0 12px;padding:3px 12px 4px;border-radius:999px;background:var(--sky);font-size:14px;font-weight:600;color:var(--blue)}
.qcat__extra{margin-left:4px;font-weight:500;color:var(--ink-soft)}
.qstatement{margin:0 0 26px;font-size:26px;font-weight:600;line-height:1.45;color:var(--ink);text-wrap:pretty}

.qbtns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 12px;border:2px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:4px 4px 0 var(--sky-deep);font-family:var(--f-ui);font-size:24px;font-weight:700;color:var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .2s ease}
.qbtn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--orange)}
.qbtn--true:hover:not(:disabled){background:#EAF7EF}
.qbtn--false:hover:not(:disabled){background:var(--orange-tint)}
.qbtn__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1F9A4F;color:#fff;font-size:19px;line-height:1}
.qbtn--false .qbtn__icon{background:var(--orange);color:var(--ink)}
.qbtn:disabled{cursor:default}
.qbtn:disabled:not(.is-answer){opacity:.45}
.qbtn.is-answer{background:var(--sky)}
.qbtn.is-miss{text-decoration:line-through;text-decoration-thickness:2px}
.qring{position:absolute;left:-16px;top:-14px;width:calc(100% + 32px);height:calc(100% + 28px);max-width:none;overflow:visible;pointer-events:none}
.qring path{stroke-width:3;vector-effect:non-scaling-stroke}

.qfeed{margin-top:16px;padding:16px 20px 18px;border-radius:16px;background:var(--sky)}
.qfeed__head{margin:0;font-size:19px}
.qfeed__head.is-right b{color:#1F7A44}
.qfeed__head.is-wrong b{color:#B4400F}
.qgain{display:inline-block;margin-left:6px;padding:1px 10px 2px;border-radius:999px;background:var(--orange);color:var(--ink);font-size:14px;font-weight:700;vertical-align:2px;animation:qpop .5s ease}
.qfeed__why{margin:6px 0 0;font-size:17px;line-height:1.55;text-wrap:pretty}
.qfeed__src{margin:6px 0 14px;font-size:13px;color:var(--ink-soft)}
@keyframes qpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

.qscore{margin:4px 0 0;line-height:1}
.qscore b{font-size:72px;font-weight:700;color:var(--blue)}
.qscore span{margin-left:6px;font-size:28px;color:var(--ink-soft)}

.qrules{padding-top:72px;padding-bottom:24px}
.qrules__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none}
.qrules__list li{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-radius:20px;background:var(--sky)}
.qrules__list b{min-width:2.2em;font-size:28px;font-weight:700;line-height:1.1;color:var(--blue)}
.qrules__list span{font-size:17px;line-height:1.45}
.qrules__list small{display:block;margin-top:4px;font-size:14px;color:var(--ink-soft);text-wrap:pretty}
.qrules__note{margin-top:18px;font-size:15px;color:var(--ink-soft);text-wrap:pretty}

/* tap feedback while the server checks: the picked button presses in, the other fades */
.qbtn.is-picked{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sky-deep);background:var(--sky)}
.qcard.is-checking .qbtn:not(.is-picked){opacity:.45}
.qcard.is-checking .qbtn.is-picked .qbtn__icon{animation:qthink .7s ease-in-out infinite}
@keyframes qthink{50%{transform:scale(.82)}}
.js .qring.draw path{transition-duration:.42s}
.qstreak{display:inline-block;margin-left:4px;font-family:var(--f-hand);font-size:20px;color:var(--orange);transform:rotate(-3deg)}

/* reset costs crystals: red price + red confirm button so it reads as spending */
.qcost{margin:6px auto 0;max-width:420px;padding:16px 18px 14px;border-radius:18px;background:#FDECEA;box-shadow:inset 0 0 0 2px #F3B8B2}
.qcost__head{margin:0;font-weight:700;font-size:18px;color:var(--ink)}
.qcost__price{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:6px 0 14px;color:var(--ink-soft);font-size:16px}
.qcost__price b{font-size:22px;color:#C81E1E}
.qcost__gem{width:24px;height:24px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 13 14 6h12l6 7-12 21Z' fill='%23D7261E' stroke='%238E1510' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M8 13h24M14 6l3 7 3 21M26 6l-3 7-3 21' fill='none' stroke='%238E1510' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
.qbtn-danger{background:#C81E1E;color:#fff}
.qbtn-danger:hover{background:#A51818}
.qcard__minus,.qrules__list b.qrules__minus{color:#C81E1E}
.qfire__icon{display:block;width:36px;height:36px;flex:none}
.qfire__icon svg{display:block;width:100%;height:100%}
.qfire.is-cold .qfire__icon{filter:grayscale(1);opacity:.55}
.qclock{margin:14px 0 0;font-size:15px;color:var(--ink-soft)}
.qclock b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* full-width "next" bar between the answer buttons and the explanation */
.qnext{display:flex;justify-content:center;width:100%;margin-top:20px;padding:14px 20px 15px;font-size:19px;font-weight:600}

@media (max-width:900px){.qhead{grid-template-columns:1fr;gap:20px}.qside{justify-self:start}.qrules__list{grid-template-columns:1fr}}
@media (max-width:640px){
  .qhead{padding-top:28px}
  .qhead__hello{font-size:24px}
  .qhead__lede{font-size:18px}
  .qcard{padding:26px 20px 24px}
  .qcard--center{margin-top:100px}
  .qcard__mascot{width:150px}
  .qstatement{font-size:21px}
  .qbtns{gap:12px}
  .qbtn{padding:16px 8px;font-size:21px}
  .qscore b{font-size:60px}
}
@media (prefers-reduced-motion:reduce){.qgain{animation:none}.qbtn{transition:none}}

/* crystal motion (gem-fx.js), shared by quiz, Buzz and profile */
.gemfx{position:fixed;z-index:9999;left:0;top:0;pointer-events:none;transform:translate(-50%,-50%)}
.gemfx svg{display:block;width:100%;height:100%}
.gemfx--gem{width:28px;height:28px}
.gemfx--tag{padding:2px 12px 3px;border-radius:999px;font:700 17px/1.2 var(--f-ui);white-space:nowrap}
.gemfx--plus{background:var(--orange);color:var(--ink);box-shadow:0 2px 0 rgba(13,27,62,.15)}
.gemfx--loss{display:flex;align-items:center;gap:4px;font:700 26px/1 var(--f-ui);color:#D7261E;white-space:nowrap;text-shadow:0 1px 0 #fff}
.gemfx--loss svg{width:34px;height:34px}

/* notice box: Level up / streak unlocked (gem-fx.js notice) */
.gemnote{position:fixed;z-index:10000;left:50%;top:18px;display:flex;align-items:center;gap:14px;width:min(420px,calc(100vw - 32px));padding:14px 44px 14px 16px;border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:5px 5px 0 var(--orange);transform:translateX(-50%);animation:gemnote-in .5s cubic-bezier(.2,1.4,.4,1)}
.gemnote--streak{box-shadow:5px 5px 0 #FFD84D}
.gemnote.is-out{opacity:0;transform:translate(-50%,-12px);transition:opacity .25s ease,transform .25s ease}
.gemnote__icon{flex:none;width:48px;height:48px}
.gemnote__icon svg{display:block;width:100%;height:100%}
.gemnote__text{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.gemnote__text b{font-size:19px;color:var(--blue)}
.gemnote--streak .gemnote__text b{color:#C2410C}
.gemnote__text span{font-size:15px;color:var(--ink-soft)}
.gemnote__close{position:absolute;right:8px;top:6px;width:32px;height:32px;border:0;background:none;font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer}
@keyframes gemnote-in{from{opacity:0;transform:translate(-50%,-24px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.gemnote{animation:none}}

/* Buzz: quiz streak leaderboard */
.fboard{padding-top:72px;padding-bottom:40px}
.fboard__list{display:grid;gap:10px;max-width:760px;margin:0;padding:0;list-style:none}
.fboard__row{display:flex;align-items:center;gap:14px;padding:10px 18px;border-radius:18px;background:var(--sky)}
.fboard__row.is-me{background:var(--orange-tint)}
.fboard__row .board__who{flex:1;min-width:0}
.fboard__fire{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-soft);white-space:nowrap}
.fboard__fire svg{width:28px;height:28px}
.fboard__fire b{font-size:22px;font-weight:700;color:#C2410C;font-variant-numeric:tabular-nums}
.fboard__empty{padding:18px 20px;border-radius:18px;background:var(--sky);color:var(--ink-soft);text-wrap:pretty}

/* profile: quiz streak stat + the "แลก crystal" teaser (locked, blurred) */
.pstats__fire{display:flex;align-items:center;gap:6px}
.pstats .pstats__fire span{font-size:inherit;line-height:inherit;color:inherit}
.pstats__fire-icon{display:block;width:.8em;height:.8em;flex:none}
.pstats__fire-icon svg{display:block;width:100%;height:100%}
.predeem{position:relative;isolation:isolate;padding:24px 26px 22px}
.predeem .sketch__fill{fill:var(--sky)}
.tag--soon{margin-left:6px;background:var(--ink);color:#fff;font-size:13px;vertical-align:3px}
.predeem__list{margin:6px 0 0;padding:0;list-style:none;filter:blur(3.5px);opacity:.7;user-select:none;pointer-events:none}
.predeem__list li{display:flex;flex-direction:column;padding:9px 0}
.predeem__list li + li{border-top:1px dashed rgba(13,27,62,.18)}
.predeem__list b{font-size:18px;color:var(--blue)}
.predeem__list span{font-size:15px;color:var(--ink-soft)}
.predeem__lock{position:absolute;left:50%;top:58%;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);margin:0;padding:10px 16px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 2px var(--ink);font-size:15px;font-weight:600;line-height:1.35;transform:translate(-50%,-50%)}
.predeem__lock svg{width:24px;height:24px;flex:none}

/* home hero: quiz button with a handwritten "new" note; arrow tail at the note, tip at the button */
.hero__quiz{display:flex;align-items:center;gap:4px;margin-top:22px}
.hero__quiz-btn{flex:none}
.hero__quiz-arrow{flex:none;width:58px;height:31px;max-width:none;overflow:visible}
.hero__quiz-arrow path{stroke-width:2.6}
.hero__quiz-note{margin:0;font-size:25px;line-height:1.15;transform:rotate(-4deg);transform-origin:left center}
@media (max-width:640px){.hero__quiz-arrow{width:44px;height:24px}.hero__quiz-note{font-size:22px}}

/* home about: the two member features */
.about__features{display:flex;flex-direction:column;gap:12px;max-width:540px;margin:0;padding:0;list-style:none}
.about__features li{padding:14px 18px;border-radius:18px;background:var(--paper);font-size:17px;line-height:1.55;text-wrap:pretty}
.about__feature{margin-right:4px;color:var(--blue);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.about__feature b{font-weight:700}

/* about stickers are links; the two feature cards use inline SVG art (#art-quiz, #art-buzz in index.html) */
a.sticker{display:block;transition:transform .2s ease,box-shadow .2s ease}
a.sticker:hover{box-shadow:0 28px 44px -20px rgba(13,27,62,.55)}
a.sticker:nth-child(1):hover{transform:rotate(-6deg) scale(1.04)}
a.sticker:nth-child(2):hover{transform:rotate(5deg) scale(1.04)}
a.sticker:nth-child(3):hover{transform:rotate(3deg) scale(1.04)}
a.sticker:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.art--svg svg{display:block;width:100%;height:100%}
.art-bank{display:none}

/* red "watch live" button in the next-event card and the upcoming list */
.btn--live{align-self:flex-start;margin-top:12px;padding:8px 20px 9px;background:#D7261E;color:#fff;font-weight:600;font-size:16px}
.btn--live:hover{background:#B51D17}
.btn--live__dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:livepulse 1.6s ease-out infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.btn--live__dot{animation:none}a.sticker{transition:none}}
.agenda__meta + .btn--live{margin:6px 0 4px;padding:6px 16px 7px;font-size:15px}

/* mobile nav order: logo ... menu button, user button (user button keeps the right edge) */
@media (max-width:900px){.nav__burger{margin-left:auto;margin-right:0}.nav .nav__burger + .nav__user{margin-left:0}}
@media (max-width:640px){.stickers{height:auto;aspect-ratio:1/1}}

/* quiz: the reset offer reads as a chance to win (jackpot +15), free the first time each day */
.qjack{position:relative;margin:8px auto 0;max-width:440px;padding:18px 20px 16px;border:2px solid var(--ink);border-radius:20px;background:linear-gradient(160deg,#FFF6D6,#FFE1C7);box-shadow:5px 5px 0 var(--orange)}
.qjack.is-off{opacity:.8;box-shadow:none}
.qjack__tag{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:2px 12px 3px;border-radius:999px;background:var(--ink);color:#FFD84D;font-size:14px;font-weight:700}
.qjack__gem{width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 13 14 6h12l6 7-12 21Z' fill='%23FFD84D' stroke='%23FFD84D' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.qjack__head{margin:0;font-size:20px;font-weight:600;color:var(--ink);text-wrap:balance}
.qjack__head b{color:#C2410C;font-size:24px}
.qjack__sub{margin:4px 0 14px;font-size:15px;color:var(--ink-soft)}
.qjack__go{background:var(--orange);color:var(--ink);font-weight:700;font-size:18px;padding:12px 28px 13px;animation:qjack-nudge 2.4s ease-in-out infinite}
.qjack__go:hover{background:#E05A12}
.qjack__cost{margin-left:6px;padding:1px 8px 2px;border-radius:999px;background:rgba(13,27,62,.12);font-size:14px}
@keyframes qjack-nudge{0%,80%,100%{transform:none}86%{transform:translateY(-3px) rotate(-1deg)}92%{transform:translateY(0) rotate(1deg)}}
.qcost__win{margin:-6px 0 14px;font-size:15px;color:var(--ink-soft)}
.qcost__win b{color:#1F7A44;font-size:18px}
@media (prefers-reduced-motion:reduce){.qjack__go{animation:none}}
.pearn.is-flash .sketch__fill{animation:flashFill2 1.6s ease}
@keyframes flashFill2{0%,100%{fill:var(--orange-tint)}30%{fill:#FFD84D}}

/* Buzz: level title next to the author's name */
.blv{display:inline-block;margin-left:4px;padding:0 8px 1px;border-radius:999px;background:var(--sky);color:var(--blue);font-size:12px;font-weight:600;line-height:1.6;vertical-align:1px;white-space:nowrap}
.blv--3,.blv--4{background:#FFF1C9;color:#9A5B00}
.blv--5,.blv--6{background:var(--ink);color:#FFD84D}
.bo__dn{display:block;margin-top:2px}
.bo__dn i{font-style:normal;color:var(--ink-soft)}
.vlive__tip{flex-basis:100%;margin:0;font-size:15px}

/* play button on contestant cards: hidden for now (owner, 2026-10-14); delete this line to bring it back */
.vperson__play{display:none!important}
/* home: hidden activities (Sports Day, Staff Party, ทำดี): stay hidden even where a rule sets display */
.feature[hidden],.card[hidden]{display:none!important}

/* nav: IMPACT Voice 2 link sits last, with an orange outline (owner, 2026-10-14) */

/* home upcoming list: blurred teaser card for activities not announced yet (owner, 2026-10-15) */
.agenda__item--soon{position:relative}
.agenda__item--soon>*{filter:blur(6px);user-select:none}
.agenda__item--soon::after{content:attr(data-soon);position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);padding:6px 20px 8px;border-radius:999px;background:var(--orange);color:var(--ink);font-family:var(--f-hand);font-size:24px;white-space:nowrap}
.agenda-more[hidden]{display:none}
/* nav: IMPACT Voice 2 sits last with a hand-drawn marker ring that draws itself once (owner, 2026-10-15) */
.nav__links a.nav__voice{position:relative;display:inline-block;margin:0 14px;font-weight:600}
.nav__voice-ring{position:absolute;left:-14px;top:-38%;width:calc(100% + 28px);height:176%;max-width:none;overflow:visible;pointer-events:none}
.nav__voice-ring path{stroke-width:3;stroke-dasharray:1 2;stroke-dashoffset:1;animation:navring .9s cubic-bezier(.65,.05,.3,1) .4s forwards}
@keyframes navring{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.nav__voice-ring path{animation:none;stroke-dashoffset:0}}