/* Beyond the Label, Phase 1.
Restyled 17 Sep 2026 to the client's Figma (BTL-Website, file PAFnUeh4OqWc9XkGgUawLa).
The Figma is a 1440px desktop spec only: every breakpoint below 1100px here is an
extrapolation, not a designer decision, and is labelled as such where it matters.
RULE (Anna, 17 Sep 2026): the Figma is the source of copy, layout, design and
images. Values below are the Figma's own hexes and geometry; do not "improve" them.
Known, flagged consequences: white text on #00B7C3 buttons is 2.4:1 contrast (the
Figma draws it that way); BRAVE sits on the turquoise wash (the Figma draws it that
way). Change either only when Anna says so.
*/
:root{
/* Figma swatches: Iris 100 #232452 (navy), Fuschia 100 #51B3C0, Fuschia 80 #DEF3F5
(card ice), Fuschia 60 white, Iris 60 #E7E7E7; buttons and links #00B7C3. */
--turquoise:#00B7C3; --turquoise-light:#DEF3F5; --blue:#0A79BE;
--navy:#232452; --white:#FFFFFF;
--ice:#DEF3F5;
--turquoise-mid:rgba(0,183,195,.38);
--ink:#232452; --ink-soft:rgba(35,36,82,.74);
--line:rgba(35,36,82,.12); --bg:#FFFFFF;
--bg-alt:#EAFEFF; /* the light end of the wash, for .alt bands on pages without a Figma frame */
/* Figma "Iris 101" (page wash) and "Iris 102" (footer): #59CED7 -> #C6EDF0 -> #EAFEFF.
Iris 101 is a 2744px layer of which the part below the hero (from 25% down) is
visible, so its stops are re-based to the visible section. */
--wash-strong:#59CED7;
--wash-mid:#C6EDF0;
--wash-faint:#EAFEFF;
/* Figma type: Museo 700/500 for headings, nav and buttons; Open Sans for body;
Nunito Bold as the defined "Desktop/H4" card style. Museo is a licensed face and is
not on Google Fonts: "Museo" is first in the stack so a client-supplied webfont
slots in with no CSS change, and Nunito (the designer's own card face) stands in
until then. Calibri/Carlito, the interim from 14 Sep, is gone. */
--font:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-head:"Museo",Nunito,"Open Sans",system-ui,sans-serif;
--wrap:1216px; --r:10px; --r-sm:5px;
/* BRAVE artwork is 53.8% ink inside its canvas, so the BOX must be >=279px
to keep the mascot itself above the 150px digital minimum. */
--brave-box:clamp(285px,46vw,340px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--turquoise)}
:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.17;margin:0 0 .5em;font-weight:700;letter-spacing:0}
h1{font-size:clamp(2.1rem,4.6vw,3.75rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.875rem)} /* Figma 46/54 */
h3{font-size:clamp(1.2rem,2vw,1.6875rem);line-height:1.12} /* Figma Desktop/H4 27/30 */
p{margin:0 0 1em}
/* Figma content column: 1216px, x112 to x1328 at 1440. The 20px gutters sit OUTSIDE it
(25 Sep 2026 audit: they were inside, so every page was 40px narrower than the Figma). */
.wrap{max-width:calc(var(--wrap) + 40px);margin:0 auto;padding-inline:20px}
.small{font-size:.9375rem;line-height:1.4;color:var(--ink-soft)}
.plain{list-style:none;margin:0;padding:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- nav (Figma "Menu": 81px white bar, mark left, Museo 500 links, CTA button) ---- */
.header{position:sticky;top:0;z-index:50;background:var(--white);
box-shadow:0 1px 0 var(--line)}
/* Figma Menu: logo at x82, "Contact Us" ends at x1317 (so 82px left, 123px right at 1440). */
.nav{max-width:1440px;margin:0 auto;padding:11px clamp(20px,8.54vw,123px) 11px clamp(20px,5.7vw,82px);min-height:81px;
display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{margin-right:auto;display:flex;align-items:center}
.brand img{height:59px;width:auto}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
font-size:1.25rem;min-width:44px;min-height:44px;padding:6px 12px;cursor:pointer;color:var(--navy)}
.navlist{display:flex;gap:3px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.navlist>li{position:relative}
.navlist a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
text-decoration:none;font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--navy)}
.navlist a:hover,.has-sub:hover>a,.has-sub:focus-within>a{color:var(--turquoise)}
.navlist a[aria-current=page]{font-weight:700}
.has-sub{display:flex;align-items:center}
.has-sub>a::after{content:"";width:16px;height:16px;flex:none;
background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
/* Desktop: the chevron is drawn on the link and the panel opens on hover/focus, so the
toggle button is hidden. Mobile (<=900px) shows it, because there is no hover. */
.subtoggle{display:none;background:none;border:0;cursor:pointer;color:var(--navy);min-width:44px;min-height:44px;padding:6px 10px;font-size:.9rem;line-height:1}
/* Figma hover frame: an ice (#DEF3F5) panel 167px wide, 5px radius, directly under the
parent, four 35px rows in Museo 500 16px; the hovered row turns solid white. The panel
fades and slides in over 300ms ease-out (Figma's default transition) and sits flush
against the link so the pointer never crosses a gap; closing waits 150ms so a diagonal
move into the panel does not drop it. */
.sub{position:absolute;top:100%;left:-4px;min-width:167px;background:var(--ice);
border-radius:var(--r-sm);padding:0;list-style:none;margin:0;z-index:60;overflow:hidden;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .3s ease-out .15s,transform .3s ease-out .15s,visibility 0s linear .45s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity .3s ease-out,transform .3s ease-out,visibility 0s}
.sub a{display:flex;align-items:center;height:35px;font-family:var(--font-head);font-weight:500;font-size:1rem;padding:0 16px;border-radius:0;color:var(--navy);
transition:background .3s ease-out,color .3s ease-out}
.sub a:hover,.sub a:focus-visible{background:var(--white);color:var(--navy)}
.navlist a,.has-sub>a::after{transition:color .3s ease-out,background-color .3s ease-out}
.navcta{margin-left:6px}
.navcta .btn{padding:8px 14px;font-size:1rem;min-width:112px;text-align:center}
/* Figma "Contact Us": Museo 700 WHITE on turquoise. .navlist a (navy, 500) was out-ranking .btn (25 Sep 2026 audit). */
.navlist .navcta a.btn{color:var(--white);font-weight:700}
.navlist .navcta a.btn:hover,.navlist .navcta a.btn:focus-visible{color:var(--white)}
/* ---- buttons: Figma "Login" component, 5px radius, Museo 700, WHITE on turquoise.
The hover frame shows the hovered button ("Call 1767") in navy: that is the hover. ---- */
.btn{display:inline-block;background:var(--turquoise);color:var(--white);
font-family:var(--font-head);font-weight:700;font-size:1.125rem;line-height:1.2;
padding:11px 22px;border-radius:var(--r-sm);text-decoration:none;border:2px solid var(--turquoise);
transition:background .3s ease-out,border-color .3s ease-out,color .3s ease-out}
.btn:hover,.btn:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
/* Figma "Outlink Button" on the KV: white pill, turquoise text, 213x52, 21px. */
.btn.onkv{background:var(--white);border-color:var(--white);color:var(--turquoise);
font-size:1.33rem;padding:12px 24px;border-radius:6px;box-shadow:0 6px 18px rgba(35,36,82,.16)}
.btn.onkv:hover,.btn.onkv:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* ---- sections ---- */
.section{padding-block:clamp(44px,6vw,88px)}
.section.alt{background:var(--bg-alt)}
.section>.wrap>h2{max-width:24ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.375rem);line-height:1.42;max-width:68ch} /* Figma 22/31 */
/* Figma section header: heading in the left column (448px), intro in the right (654px). */
/* Figma: intro at x586, i.e. 26px after the 448px heading column (25 Sep 2026 audit). */
.sechead{display:grid;grid-template-columns:minmax(0,448px) minmax(0,654px);
justify-content:start;gap:24px 26px;align-items:start;margin-bottom:34px}
.sechead h2{margin:0}
.sechead .lede{margin:0}
/* Page wash: the Figma runs one gradient from just below the hero to the bottom of the
Collective card, strongest at the top. */
.wash{background:linear-gradient(180deg,var(--wash-strong) -19%,var(--wash-mid) 34%,var(--wash-faint) 100%)}
/* About and BTL Festival frames: "Iris 101" there is a flat #DEF3F5, not the homepage gradient. */
.wash.flat{background:var(--ice)}
.crumbs{padding-block:14px;font-size:.85rem}
.crumbs ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--turquoise-mid)}
.crumbs a{color:var(--ink-soft)}
/* ---- KV hero (Figma "KV for Microsite_v2", 1440x603, full bleed) ----
The headline, date and venue are baked into the supplied artwork, which the launch
checklist rules out for the final asset: they also live in the .kv-copy block as real
HTML so search engines and assistants get them, and so they are readable on phones
where the baked text is too small. On desktop that block is visually hidden. */
.kv{position:relative;background:var(--wash-strong)}
.kv-img{display:block;width:100%;height:auto;aspect-ratio:2880/1207}
.kv-cta{position:absolute;left:50%;top:59.2%;transform:translate(-50%,-50%);margin:0}
/* KV life: the artwork's own flowers and bee as cut-outs on their original spots
(lib/render.js kvHero), CSS-animated; static and identical to the art under
prefers-reduced-motion. */
/* Sized to the ARTWORK, not the .kv box: below 1000px .kv also holds the .kv-copy block, and
inset:0 stretched the layer over it, so the sprites drifted off the art (fixed 25 Sep 2026). */
.kv-fx{position:absolute;top:0;left:0;right:0;aspect-ratio:2880/1207;overflow:hidden;pointer-events:none}
.kv-fx picture{position:absolute;display:block;margin:0}
.kv-fx img{display:block;width:100%;height:auto}
.kv-fx-flowers-left,.kv-fx-flowers-mid{transform-origin:50% 96%;animation:kv-sway 4.6s ease-in-out infinite alternate}
.kv-fx-flowers-mid{animation-duration:5.4s;animation-delay:-2.1s}
.kv-fx-bee{animation:kv-bee-path 11s ease-in-out infinite}
.kv-fx-bee img{animation:kv-bob .55s ease-in-out infinite alternate}
@keyframes kv-sway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.3deg)}}
@keyframes kv-bob{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes kv-bee-path{
0%{transform:translate(0,0) rotate(0)}
18%{transform:translate(-90%,-70%) rotate(-8deg)}
38%{transform:translate(-220%,-20%) rotate(4deg)}
55%{transform:translate(-150%,60%) rotate(8deg)}
72%{transform:translate(-30%,90%) rotate(-3deg)}
100%{transform:translate(0,0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.kv-fx *{animation:none !important}}
.kv-copy{padding:20px 20px 26px;text-align:center;background:var(--white)}
.kv-copy h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:.2em}
.kv-copy p{margin:0 0 14px;font-weight:600}
/* Below 1000px the artwork's baked date line drops under about 12px, so the HTML copy
block takes over and the overlay pill goes (one CTA, not two). No cropping of the
artwork on small screens: the BRAVE characters sit at its edges and a crop would
breach mascot restriction 3. */
@media (min-width:1001px){
.kv-copy{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:1000px){
.kv-cta{display:none}
}
/* ---- hero carousel ----
No-JS baseline: all slides stay in the DOM and stack, so the content is always
crawlable. JS adds .is-live, which switches to one slide at a time. */
.carousel-ui{display:none;align-items:center;justify-content:center;gap:14px;padding:18px 0 4px}
.carousel.is-live .carousel-ui{display:flex}
/* Live carousel (Anna, 21 Sep 2026: "make the carousel slides animate on transition"):
the slides stack in one grid cell and slide horizontally, the new one entering from
the side the reader is heading in while the old one leaves the other way, 600ms
ease-out. JS parks the incoming slide off-screen first (.enter-r / .enter-l, no
transition), then flips it to .active; the outgoing slide gets .leave-l / .leave-r
and hides once it has gone. Gated on :has() like before, so a browser without it
keeps the stacked no-JS layout. Reduced motion: no movement, instant swap. */
.carousel.is-live:has(.slide.active) .slides{display:grid;overflow:hidden}
.carousel.is-live:has(.slide.active) .slide{grid-area:1/1;transform:translateX(100%);visibility:hidden;
transition:transform .6s ease-out,visibility 0s linear .6s}
.carousel.is-live:has(.slide.active) .slide.enter-r{transform:translateX(100%);visibility:visible;transition:none}
.carousel.is-live:has(.slide.active) .slide.enter-l{transform:translateX(-100%);visibility:visible;transition:none}
.carousel.is-live:has(.slide.active) .slide.active{transform:none;visibility:visible;transition:transform .6s ease-out;z-index:1}
.carousel.is-live:has(.slide.active) .slide.leave-l{transform:translateX(-100%)}
.carousel.is-live:has(.slide.active) .slide.leave-r{transform:translateX(100%)}
.slide-text{padding-block:clamp(40px,7vw,80px)}
.slide-text .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.slide-text h2{font-size:clamp(2rem,4.6vw,3.25rem)}
.slide-text .lead{font-size:clamp(1.05rem,1.8vw,1.375rem);max-width:56ch}
.cbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--navy);font-size:1.3rem;line-height:1;cursor:pointer}
.cbtn:hover{border-color:var(--turquoise);background:var(--ice)}
/* Figma Home frame (21 Sep 2026): four dots centred on the wash directly under the KV,
no arrows drawn, so the prev/next buttons exist for keyboard users only. Slides 2 to 4
are placeholders at the KV's aspect ratio until the designer supplies them. */
.carousel{position:relative}
/* 25 Sep 2026 audit: the Figma's dots (Group 86, 95x14) sit ON the wash 22px under the KV,
with no band of their own; the "Watch" heading is 122px below the KV. */
.carousel .carousel-ui{position:absolute;left:0;right:0;top:100%;background:none;padding:17px 0 0;gap:10px;z-index:2}
.home .wash>.section:first-child{padding-top:clamp(64px,8.5vw,122px)}
.visually-hidden-until-focus:not(:focus-visible){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.slide-placeholder{aspect-ratio:2880/1207;background:var(--ice);display:grid;place-items:center;text-align:center;padding:24px}
.slide-placeholder h2{font-size:clamp(1.6rem,4vw,3rem);margin:0 0 .3em;color:var(--navy)}
.slide-placeholder p{margin:0;font-size:clamp(1rem,1.6vw,1.375rem);color:rgba(35,36,82,.7)}
.dots{display:flex;gap:3px}
/* Figma dots: navy #232452 active, ice #DEF3F5 inactive, 14px mark, 27px pitch. The button itself is 24px so it
is a usable touch target; the visible dot is the ::after. */
.dot{position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.dot::after{content:"";position:absolute;inset:5px;border-radius:999px;background:var(--ice)}
.dot[aria-selected=true]::after{background:var(--navy)}
.eyebrow{display:inline-block;background:var(--turquoise);color:var(--navy);
font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;margin-bottom:14px}
/* ---- video banner (Figma "CTA banner": 1216x500 navy, radius 10, play glyph) ---- */
.video-box{position:relative;background:var(--navy);color:#fff;border-radius:var(--r);
min-height:clamp(220px,34.7vw,500px);display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:32px;margin-top:28px}
.video-box h3{color:#fff;font-size:clamp(1.6rem,3.3vw,2.96rem);line-height:1.07;margin:0 0 20px}
.video-box h3 span{display:block;font-weight:500}
.video-box .play{width:45px;height:60px;display:block}
.video-box .small{color:rgba(255,255,255,.8);margin-top:18px;max-width:52ch}
/* ---- cards ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--r);padding:24px;
display:flex;flex-direction:column;gap:6px}
.card h3{margin-bottom:2px}
.card .small{margin:0}
.card.link{text-decoration:none;box-shadow:0 1px 0 var(--line);transition:box-shadow .3s ease-out}
.card.link:hover{box-shadow:0 10px 26px rgba(35,36,82,.10);}
.tag{display:inline-block;background:var(--ice);color:var(--navy);
font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;margin:2px 4px 2px 0;
align-self:flex-start;width:fit-content}
.tag.sense{background:var(--navy);color:#fff}
.tag.warn{background:var(--ice);color:var(--navy)}
/* White panel (Figma "Rectangle 15": the Collective card, the About objectives card). */
.panel{background:var(--white);border-radius:var(--r);padding:clamp(24px,3.5vw,48px)}
/* Figma: the white card and the support cards run x104 to x1339, 8px left and 11px right of the content column. */
@media (min-width:1101px){.panel,.support-grid{margin-left:-8px;margin-right:-11px}}
/* ---- facts strip (Figma Festival: four headed columns, Nunito 27 / Open Sans 20) ---- */
/* Figma columns at x112 / 419 / 745 / 1052, text boxes 220 / 250 / 192 / 223 wide. */
.facts{display:grid;grid-template-columns:25.25% 26.8% 25.25% minmax(0,1fr);gap:24px 0;margin-top:36px}
.fact:nth-child(1) dd{max-width:220px}.fact:nth-child(2) dd{max-width:250px}.fact:nth-child(3) dd{max-width:192px}.fact:nth-child(4) dd{max-width:223px}
.fact .hours{display:block}.fact .hours+.hours{margin-top:26px}
.fact{padding:0}
.fact dt{font-family:var(--font);font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;color:var(--navy);line-height:31px;margin-bottom:9px} /* Figma Open Sans Bold 24/31 */
.fact dd{margin:0;font-size:clamp(1.05rem,1.6vw,1.375rem);line-height:1.27}
.presale{font-weight:700;font-size:clamp(1.05rem,1.55vw,1.375rem);line-height:31px;margin:45px 0 14px} /* Figma Open Sans Bold 22/31 */
/* ---- tables ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
caption{text-align:left;padding:14px 16px;font-weight:700;color:var(--ink-soft);font-size:.9rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ice);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-alt)}
/* ---- support block (Figma "Need Support?": white section, ice cards 293x285, r10) ---- */
.support{background:var(--white)}
/* Figma: partner logos sit in a row ABOVE the cards, aligned to the columns. Each card
carries its own logo cell so the pairing survives when the grid stacks on phones. */
.scard{display:flex;flex-direction:column}
/* Figma logo row: up to 99px tall (IMH), centred on one line, 18px above the cards. */
.slogo{height:99px;display:flex;align-items:center;margin-bottom:18px}
.slogo img{max-height:99px;max-width:min(100%,260px);width:auto;height:auto;object-fit:contain;object-position:left bottom}
/* An empty logo cell stays as a spacer so all four cards share a top edge (Figma). */
.support .sechead{margin-bottom:56px}
.support .card{background:var(--ice);padding:22px 20px;min-height:285px;gap:8px;flex:1}
.support .card .small a{color:var(--ink);text-decoration:none}
.support .card .small a:hover{text-decoration:underline}
.support .card h3{margin:0 0 6px}
.support .card .small{color:var(--ink);font-size:1rem;line-height:1.375;flex:1}
.support .card .btn{font-size:1.125rem;padding:9px 18px;min-width:138px;text-align:center}
.support .card p:last-child{margin:0}
.support .emergency{margin-top:24px;padding:14px 18px;border-radius:var(--r-sm);
background:var(--ice);font-weight:600}
.support .emergency a{color:var(--navy)}
.contacts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.contacts a{background:#fff;padding:7px 14px;border-radius:999px;
text-decoration:none;color:var(--navy);font-weight:600;font-size:.9rem;border:1px solid var(--line)}
.contacts a:hover{background:var(--turquoise);color:var(--navy)}
/* ---- faq ---- */
.faqs{display:grid;gap:10px;margin-top:24px}
.faq{border-radius:var(--r);background:#fff;box-shadow:0 1px 0 var(--line)}
.faq summary{cursor:pointer;padding:16px 20px;list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--turquoise);font-weight:700}
.faq[open] summary::after{content:"\2212"}
.faq summary h3{margin:0;font-size:1.05rem;font-weight:700}
.faq>p{padding:0 20px 18px;margin:0;color:var(--ink-soft)}
/* ---- collective / agency logos (Figma: white card, 5 columns, individual logos) ----
The designer went with individual logos, not the 31-up composite the tracker floated,
which is also the GEO-friendly choice: every partner keeps its own alt text. Cells
cap BOTH axes so wide wordmarks and compact roundels carry equal optical weight. */
/* minmax(0,1fr), not 1fr: a 1fr track's minimum is the image's intrinsic width, so wide
logo files would push the grid past the viewport on phones (measured at 390px). */
/* Figma: 5 columns, row pitch ~130px, each logo at its own drawn size (--w from the data).
Without --w (roster fallback) logos are capped on both axes instead. */
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:38px 24px;align-items:center;justify-items:center}
.logos img{width:var(--w,auto);max-width:min(100%,200px);max-height:120px;height:auto;object-fit:contain}
@media (max-width:900px){ .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px} .logos img{width:calc(var(--w,150px)*.8);max-height:72px;max-width:min(100%,150px)} }
@media (max-width:520px){ .logos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.partners{columns:3;column-gap:32px;margin-top:20px;font-size:.95rem}
.partners li{break-inside:avoid;margin-bottom:6px}
/* ---- notices ---- */
.notice{border-left:4px solid var(--navy);background:var(--ice);padding:14px 18px;
border-radius:var(--r-sm);margin:20px 0;font-size:.92rem}
.notice strong{color:var(--navy)}
.placeholder{border:2px dashed var(--turquoise-mid);background:rgba(255,255,255,.6);
border-radius:var(--r);padding:28px;text-align:center;color:var(--ink-soft)}
/* ---- BRAVE ---- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.brave-wrap{display:flex;justify-content:center}
.brave{height:var(--brave-box);width:var(--brave-box);object-fit:contain;margin:-6% 0;display:block}
.section.has-brave{background:var(--white)}
@media (prefers-reduced-motion:reduce){
video.brave{display:none}
video.brave+img.brave,.brave-wrap>img.brave{display:block}
}
/* About page (Figma): BRAVE waving beside the intro, then the two BRAVE states side by
side. These sit on the page wash per the Figma; see the restriction-4 note in
docs/HANDOVER.md before changing the background under them. */
.about-h1{text-align:center;font-size:clamp(2.2rem,4.6vw,4.1rem);line-height:1.17;margin-bottom:.3em}
/* Figma: BRAVE at x224 (112px into the column), text at x490, 710px wide. */
.about-intro{display:grid;grid-template-columns:212px minmax(0,710px);gap:54px;justify-content:start;align-items:center;margin-top:21px;padding-left:112px}
.about-intro img{width:212px;height:auto}
.about-lede{margin:0;font-weight:500}
.objectives-panel{margin-top:81px;padding-block:clamp(28px,4vw,48px)}
/* Figma objective columns are centred at x282 / 588 / 893 / 1198: four ~300px columns. */
@media (min-width:901px){.objectives-panel{padding:48px 0 63px 36px}.objectives{gap:0}}
.objectives-h{text-align:center;font-size:clamp(1.3rem,2vw,1.6875rem);margin-bottom:1.4em}
.objectives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;text-align:center}
.objectives p{margin:0;font-size:1.125rem;line-height:1.33;max-width:244px;margin-inline:auto}
/* Figma (21 Sep, afternoon): a 98 to 111px icon above each objective, 40px gap; the third has none yet. */
.objective img,.objective-ic{display:block;height:108px;width:auto;max-width:120px;margin:0 auto 23px;object-fit:contain}
/* Figma About: "Meet BRAVE" text, both BRAVEs and both symbolism paragraphs share columns
starting at x488 and x959 (376px and 847px into the content column). */
.brave-head{grid-template-columns:minmax(0,28.78%) minmax(0,654px);gap:24px 2.14%}
.brave-pair{display:grid;grid-template-columns:30.92% 38.73% minmax(0,1fr);gap:0;justify-content:start;margin-top:37px}
.brave-pair figure:first-child{grid-column:2}
.brave-pair figure{margin:0}
.brave-pair img{width:100%;max-width:251px;height:auto;display:block;margin:0}
.brave-pair figure+figure img{max-width:244px}
.symbolism{display:grid;grid-template-columns:30.92% 38.73% minmax(0,1fr);gap:24px 0;margin-top:41px}
.symbolism p:nth-of-type(1){max-width:410px}.symbolism p:nth-of-type(2){max-width:339px}
.symbolism h3{margin:0;font-size:clamp(1.3rem,2vw,1.6875rem)}
.symbolism p{margin:0;font-size:1.125rem;line-height:1.33}
/* ---- footer (Figma "Follow Us!" band on the wash, BRAVE mowing the grass) ---- */
.footer{position:relative;margin-top:0;overflow:hidden;
background:linear-gradient(180deg,var(--wash-strong) 2.6%,var(--wash-mid) 52.4%,var(--wash-faint) 100%)}
/* Figma footer (25 Sep 2026 audit): 481px tall at 1440; heading 71px down, text 427px
wide, roundels at 202px, and the grass band starts right under them. */
.follow{text-align:center;padding:clamp(40px,4.93vw,71px) 20px 0;position:relative;z-index:1}
.follow h2{font-size:clamp(1.6rem,2.7vw,2.375rem);line-height:1.187;margin-bottom:8px} /* Figma 38/45 */
.follow p{max-width:427px;margin:0 auto 20px;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.45} /* Figma 20/29, 427 wide */
.social{display:flex;justify-content:center;gap:24px;list-style:none;margin:0;padding:0}
.social a{display:block;width:52px;height:52px;border-radius:999px;background:var(--navy);color:#fff;
transition:background .3s ease-out,color .3s ease-out}
.social a:hover{background:var(--turquoise);color:var(--navy)}
.social svg{width:52px;height:52px;display:block}
/* Footer band. Two layers: the grass+flowers raster sits at the bottom, and BRAVE with
the wheelbarrow (inline SVG) stands on it at the Figma's position.
Figma geometry at 1440: BRAVE 341px wide (23.7%), feet 54px above the band's bottom
edge, which is 3.72% of the band width (the grass is 119/1439 tall). A 341px floor
keeps BRAVE at or above the 150px digital minimum on narrower screens; the band's
min-height makes room for that, with the page wash showing as sky above the grass. */
.footband{position:relative;overflow:hidden;margin-top:clamp(20px,3vw,46px);pointer-events:none;
/* padding-top is headroom: BRAVE's head sits 0.15cqw above the grass image's top
edge at any width and bobs 4px higher, and overflow:hidden would crop it (measured
-3px at 2560). The space above the grass is the page wash, so this is invisible. */
padding-top:max(32px,2cqw);
min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;container-type:inline-size}
.grass{display:block;width:100%;height:auto}
/* Static since 21 Sep 2026 (Anna: "stop movement in footer"): BRAVE stands at the Figma's
position, 26% in. No walk, bob or wheel spin. */
.mower{position:absolute;left:26%;bottom:25%;bottom:3.72cqw;width:max(23.7%,341px)}
/* The Home frame alone draws this BRAVE further left, at x135 (9.4%), beside the bee. */
.home .mower{left:9.375%}
/* Desktop: the grass band tucks 21px under the roundels so the footer is the Figma's 481px. */
@media (min-width:761px){.footband{margin-top:-21px}}
/* 761-900px: at 26% the barrow (341px floor) runs into the can BRAVE; use the Home position. */
@media (min-width:761px) and (max-width:900px){.mower{left:9.375%}}
.mower svg,.mower img{display:block;width:100%;height:auto}
/* Figma footer, 21 Sep 2026: BRAVE with a watering can at 67.3% / 25.07% wide, feet 46px
above the band bottom (3.19cqw); a flower cluster flush left, 81px wide (5.63%), 62px up;
a bee at 8.26%, 175px up. */
.fb-flowers,.fb-can,.fb-bee{position:absolute;display:block;pointer-events:none}
.fb-flowers{left:0;bottom:4.3cqw;width:5.63%}
.fb-flowers img,.fb-can,.fb-bee{display:block;width:100%;height:auto}
.fb-can{left:67.3%;bottom:3.19cqw;width:25.07%;z-index:1}
.fb-bee{left:8.26%;bottom:12.13cqw;width:1.55%}
/* Footer life (Anna, 21 Sep 2026 evening: "make the flower and bee move"): the flower
cluster sways about its base and the bee drifts in a slow loop with a quick hover
bob. These are the Figma's own separate layers, so nothing is cut out of artwork. */
.fb-flowers{transform-origin:50% 100%;animation:fb-sway 4.8s ease-in-out infinite alternate}
.fb-bee{animation:fb-fly 12s ease-in-out infinite}
.fb-bee img{animation:fb-bob .5s ease-in-out infinite alternate}
@keyframes fb-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes fb-bob{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@keyframes fb-fly{
0%{transform:translate(0,0) rotate(0)}
20%{transform:translate(120%,-90%) rotate(6deg)}
45%{transform:translate(300%,-30%) rotate(-5deg)}
65%{transform:translate(220%,70%) rotate(4deg)}
85%{transform:translate(60%,40%) rotate(-3deg)}
100%{transform:translate(0,0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.fb-flowers,.fb-bee,.fb-bee img{animation:none}}
@media (max-width:760px){
/* Grass is scaled up and cropped (not BRAVE) so the band reads on a phone; BRAVE is
sized by height so the body stays above the 150px minimum. */
.grass{height:120px;object-fit:cover;object-position:18% 100%}
.mower{width:auto;height:168px;bottom:44px}
.mower svg,.mower img{width:auto;height:100%}
/* Phones (1 Oct 2026): two BRAVEs cannot share a phone width. The can BRAVE at a
legal 150px body would be wider than the screen, and squeezed in beside the barrow
it covered that BRAVE's face (brand rules 5 and the 150px minimum). Phones show the
barrow BRAVE alone, centred and whole; the can BRAVE returns from 761px. */
.fb-can{display:none}
.mower,.home .mower{left:50%;transform:translateX(-50%)}
.fb-flowers{width:auto;height:110px;bottom:40px}
.fb-flowers img{width:auto;height:100%}
.fb-bee{display:none}
}
@media (max-width:1100px){
.sechead{grid-template-columns:1fr}
}
/* Tablet (621 to 900px): the Figma has no tablet frame. Card grids drop to two columns
here rather than one, so an iPad portrait is not a single long stack. */
@media (max-width:900px){
.hero-grid,.slide-text .hero-grid,.about-intro,.brave-pair{grid-template-columns:1fr}
.symbolism{grid-template-columns:1fr}
.g3,.g4,.facts,.objectives{grid-template-columns:repeat(2,minmax(0,1fr))}
.partners{columns:2}
.about-intro{justify-items:center;text-align:center;padding-left:0}
.brave-pair figure:first-child{grid-column:auto}
.brave-pair img,.brave-pair figure+figure img{margin:0 auto}
.navtoggle{display:block}
.navlist{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding-block:8px}
.navlist.show{display:flex}
.has-sub{flex-wrap:wrap}
.has-sub>a{flex:1}
.sub{position:static;display:none;box-shadow:none;border:0;margin:0 0 4px 14px;width:100%;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
.sub.show{display:block}
.sub a{padding:11px 14px;font-size:1rem}
.navlist>li>a{padding:10px 10px}
.navcta{margin:6px 0 0} .navcta .btn{display:block;text-align:center}
.has-sub>a::after{display:none}
.subtoggle{display:inline-block}
.support .card{min-height:0}
.slogo{height:auto;margin-bottom:10px}
.slogo:empty{display:none}
.slogo img{max-height:56px}
}
@media (max-width:620px){
.g2,.g3,.g4,.facts,.objectives{grid-template-columns:1fr}
.partners{columns:1}
body{font-size:16px}
.brand img{height:48px}
/* Tables: let the columns wrap instead of forcing a 520px sideways scroll. Wide
tables still scroll inside .tablewrap if their content cannot wrap further. */
table{min-width:0;font-size:.875rem}
th,td{padding:10px 10px}
/* Five-column tables stack into labelled rows on phones (table.stack-sm, cells
carry data-label). The header row is hidden visually but stays for screen readers. */
.stack-sm thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.stack-sm tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.stack-sm tr:last-child{border-bottom:0}
.stack-sm th[scope=row],.stack-sm td{display:flex;gap:12px;border:0;padding:4px 14px}
.stack-sm th[scope=row]::before,.stack-sm td::before{content:attr(data-label);flex:0 0 7.5em;
font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
.stack-sm th[scope=row]{font-family:var(--font-head);font-size:1.05rem}
.stack-sm .tag{margin:0 4px 4px 0}
.section{padding-block:36px}
.wcards{grid-template-columns:1fr}
.video-box{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
.carousel.is-live .slide,.carousel.is-live .slide.active{transition:none}
}
/* A button that is deliberately not yet wired up, pending client-supplied links. */
.btn-placeholder{opacity:.6;cursor:not-allowed;background:transparent;
border-style:dashed;color:inherit}
/* Build Reference s6: "If long, the card scrolls internally", so a workgroup with many
events scrolls within its own panel instead of pushing the rest of the page down. */
.scrollpanel{max-height:min(60vh,520px);overflow-y:auto;border:1px solid var(--line);
border-radius:var(--r);background:#fff}
.scrollpanel .tablewrap{border:0;border-radius:0}
.scrollpanel thead th{position:sticky;top:0;z-index:1}
/* ---- BTL Festival tabs (Figma 18 Sep 2026) ----
"What's at the Festival?" centred; four pills 284x68, 60px radius, Museo 700 24px,
white text. The Figma shows two states: the Stage Schedule frame draws every pill
turquoise; the other frames draw the active pill navy and the rest pale ice with
white text, which is unreadable (1.2:1). Built as: active navy, others turquoise. */
.fest-tabs{background:var(--white)}
/* Figma: the tab band's heading sits 65px under the ice band; ~60px under the last row to the footer. */
@media (min-width:901px){.fest-tabs{padding-block:65px 60px}#festival-info{padding-top:65px;padding-bottom:61px}}
.section>.wrap>h2.center,h2.center{text-align:center;max-width:none}
.pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:38px 0 32px}
.pill{display:flex;align-items:center;justify-content:center;min-height:68px;padding:10px 18px;
border-radius:60px;background:var(--turquoise);color:var(--white);text-decoration:none;text-align:center;
font-family:var(--font-head);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.15;
transition:background .3s ease-out,color .3s ease-out}
.pill:hover,.pill:focus-visible{background:var(--navy);color:var(--white)}
.pill.active{background:#232455;color:var(--white)}
.tabintro{margin:0 0 24px;max-width:none}
/* Stage Schedule: day pills 386x50, 60px radius, Open Sans Bold 22; active #00B4C8,
inactive 20% navy. Rows: time (regular 22) and programme (semibold 22), 43px apart. */
.daypills{display:flex;justify-content:flex-start;gap:27px;flex-wrap:nowrap;margin:0 0 36px;padding-left:4px}
/* 25 Sep 2026 audit: Figma day pills are 386x50 with a 2px border, left-aligned at x116. */
.daypill{flex:0 1 386px;min-width:0;min-height:50px;padding:8px 22px;border-radius:60px;background:transparent;cursor:pointer;
border:2px solid rgba(35,36,82,.2);color:rgba(35,36,82,.2);font-family:var(--font);font-weight:700;font-size:clamp(1rem,1.6vw,1.375rem)}
.daypill.active,.daypill[aria-selected=true]{border-color:#00B4C8;color:#00B4C8}
.daypill{transition:border-color .3s ease-out,color .3s ease-out}
.daypill:hover{border-color:var(--navy);color:var(--navy)}
/* Figma rows: time at x120, programme at x320, 22/31, 43px apart (left-aligned, not centred). */
.slots{margin:0;padding-left:8px;display:grid;gap:12px}
.slot{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px 0;font-size:clamp(1.05rem,1.6vw,1.375rem);line-height:31px}
.slot dt{margin:0}
.slot dd{margin:0;font-weight:600}
/* JS gates the day panels; no-JS shows all three stacked (same fail-safe as the hero). */
.days.is-live:has(.day.active) .day:not(.active){display:none}
.days:not(.is-live) .daypills{display:none}
.days:not(.is-live) .day+.day{margin-top:40px}
.slots-h{font-family:var(--font);font-weight:700;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:31px;margin:0 0 16px;padding-left:8px;color:var(--navy)} /* Figma Open Sans Bold 24 */
/* Food Booths (Figma 21 Sep, afternoon): plain 18px rows on the page, no card, turquoise booth codes,
bold navy header, thin dividers. */
.tablewrap:has(.food){border:0;background:transparent;padding:0;box-shadow:none}
.food{min-width:0;font-size:1.125rem}
.food caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.food thead th{background:transparent;font-size:1.125rem;font-weight:700;color:var(--navy);letter-spacing:0;text-transform:none;padding:10px 12px 14px}
.food th,.food td{padding:14px 12px;border-bottom:1px solid rgba(35,36,82,.12)}
.food th[scope=row]{color:var(--turquoise);font-weight:700}
/* 25 Sep 2026 audit, Figma Food Booths frame: rules run x122 to x1313; columns at x152 / 310 /
684 / 937; header Open Sans Bold 24, rows SemiBold 22/31 on a 56px pitch; no rule under
the header or the last row; the hovered row (Rectangle 23) is #DEF3F5 at 40%. */
.food thead th,.food tbody tr:last-child th{border-bottom:0}
.food tbody tr:hover{background:rgba(222,243,245,.4)}
.food .tag{vertical-align:middle;margin:0 4px 0 0;line-height:1.5}
@media (min-width:901px){
.tablewrap:has(.food){margin:0 15px 0 10px}
.food{font-size:1.375rem;line-height:31px}
.food thead th{font-size:1.5rem;line-height:42px;padding:0 30px 12px}
.food thead th:nth-child(1){width:158px}.food thead th:nth-child(2){width:374px}.food thead th:nth-child(3){width:253px}
.food th,.food td{padding:12px 30px;vertical-align:middle} /* 12+31+12+1px rule = the 56px pitch */
.food td[data-label=Vendor],.food td[data-label=Cuisine]{font-weight:600}
}
.days:not(.is-live) .day h3{position:static;width:auto;height:auto;margin:0 0 16px;clip:auto;overflow:visible;font-size:1.25rem}
/* Event Layout: map box 1199x523 #DCEFF5, r17; pins 45px turquoise with white bold 18.6;
tooltip card white r11.6 with soft shadow; legend two columns, 34px ice roundels. */
.map{position:relative;background:#DCEFF5;border-radius:17px;aspect-ratio:1199/523;overflow:visible;margin:0 8px 36px 9px} /* Figma box x121 to x1320 */
.map-img{position:absolute;inset:0;width:100%;height:auto;display:block}
/* Figma (21 Sep, afternoon): pins are white discs with a navy ring and navy numeral, so they
read on the teal zone blocks of the site drawing. */
.pin{position:absolute;width:45px;height:45px;margin:-22px 0 0 -22px;border-radius:999px;border:1.5px solid var(--navy);cursor:pointer;
background:var(--white);color:var(--navy);font-family:var(--font);font-weight:700;font-size:1.16rem;
box-shadow:0 4px 8px rgba(111,147,162,.3);transition:background .3s ease-out,color .3s ease-out}
.pin:hover,.pin:focus-visible,.pin[aria-expanded=true]{background:var(--navy);color:var(--white)}
.pin-card{position:absolute;transform:translate(-50%,calc(-100% - 34px));width:205px;background:var(--white);border-radius:12px;
padding:11px 14px;box-shadow:0 5px 5px rgba(111,147,162,.2);z-index:2;font-size:.8rem;line-height:1.35}
.pin-card strong{display:block;font-weight:800;margin-bottom:4px;font-size:.8rem}
/* Figma legend: roundels at x159 / 592 / 1037, names 50px after them, rows 60px apart. */
.legend{list-style:none;margin:0;padding:0 0 0 3.87%;display:grid;grid-template-columns:37.04% 38.07% minmax(0,1fr);gap:26px 0}
.legend li.has-list{grid-column:1/-1}
.legend li{display:grid;grid-template-columns:34px auto minmax(0,1fr);gap:16px;align-items:center;font-size:clamp(1rem,1.6vw,1.375rem);line-height:1.3}
.legend .num{width:34px;height:34px;border-radius:999px;background:var(--ice);color:var(--turquoise);font-weight:700;
display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}
.legend strong{font-weight:600;white-space:nowrap}
/* Exhibitor Booths: the Figma lists E1 to E17 under the pin name, one per line, 22/31. */
.legend{align-items:start}
.legend li{align-items:start}
.legend .num{margin-top:-.1em}
/* Figma: "E1 Redemption" as plain 22/32 lines, E1 to E9 under the name (x209), E10 to E17 at x592. */
.legend-list{list-style:none;margin:12px 0 0;padding:0;line-height:32px;font-size:clamp(1rem,1.6vw,1.375rem);display:grid;
grid-template-columns:minmax(0,383px) auto;grid-template-rows:repeat(9,auto);grid-auto-flow:column;grid-column:2/-1}
.legend .legend-list li{display:block;line-height:32px}
.legend .legend-list{margin-top:-4px} /* the li's 16px row gap + this = the Figma's 12px */
.legend li.has-list{grid-template-columns:34px auto minmax(0,1fr);grid-template-areas:"n name ." ". list list"}
.legend li.has-list strong{grid-area:name} .legend li.has-list .legend-list{grid-area:list}
.legend-list b{font-weight:400}
/* Workshop Events (Figma 21 Sep 2026): 384x537 cards, three columns, 28px gap, 169px image. */
.wcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 28px}
@media (min-width:901px){.wcards{margin-top:65px;padding-left:9px}} /* Figma cards x121, 65px under the pills */
.wcard{border:3px solid #DCEFF5;border-radius:17px;background:var(--white);overflow:hidden;display:flex;flex-direction:column}
.wimg{height:169px;background:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wimg img{width:100%;height:100%;object-fit:cover;display:block}
.wimg img.wlogo{width:auto;height:auto;max-height:118px;max-width:74%;object-fit:contain}
.wbody{padding:22px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.datepill{display:inline-block;background:var(--ice);color:var(--turquoise);font-weight:700;font-size:clamp(1.1rem,1.55vw,1.375rem);line-height:32px;
padding:2px 19px;border-radius:20px} /* Figma 148x36, Open Sans Bold 22 */
.wbody h3{font-family:var(--font);font-weight:700;font-size:1.375rem;line-height:1.28;margin:8px 0 0}
.wtime{margin:0;font-size:1.125rem;color:var(--turquoise);line-height:1.7}
.wdesc{margin:0 0 10px;font-size:1.125rem;line-height:1.35}
.wbtn{font-size:1.125rem;padding:10px 22px;margin-top:auto;min-width:256px;text-align:center}
@media (max-width:900px){
.pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pill{min-height:56px}
.wcards{grid-template-columns:repeat(2,minmax(0,1fr))}
.legend{grid-template-columns:1fr;gap:18px;padding-left:0}
.legend-list{grid-template-columns:1fr 1fr}
.slot{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:620px){
.pills{grid-template-columns:1fr;gap:10px}
.daypills{flex-direction:column;align-items:stretch;padding-left:0}
.daypill{flex:none}
.slot{grid-template-columns:1fr;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.map{aspect-ratio:auto;height:280px}
.pin{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:1rem}
.pin-card{width:180px}
.legend li{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"n name" "n desc"}
.legend li strong{grid-area:name;white-space:normal} .legend li span:last-child,.legend li .legend-list{grid-area:desc}
.legend-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
.wbody{padding:20px 18px 24px}
}
/* ================= Client feedback round 1 (Amos, 25 Sep 2026) =================
These deliberately depart from the Figma where the client asked for it. */
/* Section header stacked: heading on its own line, copy below it at full width, so it
runs to two lines at desktop (Collective, Meet BRAVE, Fest intro). */
.sechead.stack{grid-template-columns:minmax(0,1fr);gap:14px}
.sechead.stack .lede{max-width:none;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.5}
.oneline{white-space:nowrap}
@media (max-width:760px){.oneline{white-space:normal}}
.section>.wrap>h2.oneline{max-width:none}
/* Need Support: three cards; the Mindline and SOS logos ARE the card headings. */
.support .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.slogo-h{margin:0 0 6px;min-height:60px;display:flex;align-items:center}
.slogo-h img{max-height:60px;max-width:min(100%,240px);width:auto;height:auto;display:block}
@media (max-width:900px){.support .g3{grid-template-columns:1fr}}
/* About: each symbolism paragraph sits directly under its BRAVE, centred on it. */
.brave-pair figure{text-align:center}
.brave-pair figure img{margin:0 auto}
.brave-pair figcaption{margin-top:20px;font-size:1.125rem;line-height:1.33;max-width:410px;margin-inline:auto}
.brave-pair figure+figure figcaption{max-width:339px}
.symbolism-h{margin:40px 0 0;font-size:clamp(1.3rem,2vw,1.6875rem)}
@media (min-width:901px){
/* Images on row 1, their captions on row 2, "Symbolism" in column 1 level with the captions. */
.brave-pair{grid-template-columns:30.92% 38.73% minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
.brave-pair figure{display:contents}
.brave-pair figure:first-child>*{grid-column:2}
.brave-pair figure+figure>*{grid-column:3}
.brave-pair figure>img{grid-row:1}
.brave-pair figure>figcaption{grid-row:2;justify-self:center}
.brave-pair figure>img{justify-self:center}
.symbolism-h{grid-column:1;grid-row:2;margin-top:20px}
}
@media (max-width:900px){.brave-pair .symbolism-h{order:-1;margin:0}}
.giveaway-ph{display:grid;place-items:center;text-align:center;min-height:110px;margin-top:6px;border:2px dashed var(--turquoise-mid);border-radius:var(--r-sm);color:var(--ink-soft);font-size:.8125rem}
/* 1 Oct 2026 (Anna): the selected day's list sits left, under the day pills, as in the Figma
Stage Schedule frame (was centred per round 1). */
.stage-centre .day{width:auto;max-width:100%;margin-inline:0}
.stage-centre .slot{grid-template-columns:120px minmax(0,1fr)}
/* Workshops: vendor logos only; a labelled box until BTL supplies a logo. */
.wlogo-ph{display:grid;place-items:center;text-align:center;width:74%;height:118px;border:2px dashed var(--turquoise-mid);border-radius:var(--r-sm);font-weight:700;color:var(--navy)}
.wlogo-ph small{font-weight:400;color:var(--ink-soft)}
/* Food Market: two columns, centred on the page, left-aligned text. */
.food-intro{text-align:center;max-width:760px;margin-inline:auto}
.tablewrap.food-wrap{max-width:760px;margin-inline:auto !important}
.food-2col thead th:nth-child(1){width:55%}
.food-2col thead th:nth-child(2){width:auto}
.food-2col th[scope=row]{color:var(--ink);font-weight:600}
.legend strong{white-space:normal} /* "Uncle Ringo Carnival Rides" overflowed at 1024px */
.food .tag{white-space:nowrap}
@media (max-width:620px){.food-2col th,.food-2col td{padding:10px 8px}.food-2col thead th:nth-child(1){width:48%}}
/* Feedback round 1, part 2 (28 Sep 2026). Collective lead row, after Kris's logo screen:
the BTL lockup, then "An initiative of" NCSS, "Led by" TOUCH, "Supported by" the Collective. */
.logo-lead{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px 44px;padding-bottom:36px;margin-bottom:38px;border-bottom:1px solid rgba(31,37,85,.12)}
.logo-lead figure{margin:0;display:flex;flex-direction:column;gap:10px}
.logo-lead figcaption{font-size:.8125rem;color:var(--ink)}
.logo-lead img{width:var(--w,auto);max-width:100%;height:auto}
@media (max-width:620px){.logo-lead{gap:20px 28px}.logo-lead img{width:calc(var(--w,150px)*.75)}}
/* Workshops: Yamaha shows two logos (Yamaha and Yamaha Music School) side by side. */
.wimg-multi{gap:8%}
.wimg-multi img.wlogo{max-width:40%}
/* Workshop CTA per the Figma (node 44:41): 256x44, #00B7C3, 5px radius, Museo 700 18px, text + arrow centred. */
.wbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;box-sizing:border-box}
.wbtn .cta-arrow{flex:none}
/* Fest info cards: Figma "BTL Festival" frame 11:1430, 1 Oct 2026 (Rectangle 15-18, Group 91,
Background 77:1282, Group 144, Layer_2 77:4636 / 77:5631, Group 145). Each card 289x238,
white at 80%, 10px radius; Open Sans 16/22 navy #232452 (titles Bold, day names SemiBold
with an extra 8px above Sat/Sun as drawn); text 17px down, inset per card as drawn
(20 / 18 / 35 / 33px). Grass strip 37px along the bottom with the art standing on it,
anchored to the card's bottom-right at the Figma's offsets. Art is exported from those
nodes (public/assets/festival/cards), decorative, aria-hidden. The MiniBlock in Redeem
follows Anna's 1 Oct screenshot (the Figma frame has no image there). */
.facts.fact-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fact-cards .fact{position:relative;overflow:hidden;isolation:isolate;min-height:238px;box-sizing:border-box;
background:rgba(255,255,255,.8);border-radius:10px;padding:17px 16px 38px var(--tx,20px);color:#232452}
.fact-cards .fact dt{font-family:"Open Sans",var(--font);font-size:16px;line-height:22px;font-weight:700;color:#232452;margin:0 0 13px}
.fact-cards .fact dd{position:relative;z-index:1;margin:0;max-width:none;font-size:16px;line-height:22px;color:#232452}
.fact-cards .fact-venue{--tx:18px}.fact-cards .fact-admission{--tx:35px}.fact-cards .fact-giveaway{--tx:33px}
.fact-cards .fact-date dd{max-width:214px}.fact-cards .fact-venue dd{max-width:250px}.fact-cards .fact-giveaway dd{max-width:223px}
.fact-cards .fact .hours{display:block}
.fact-cards .fact .hours b{display:block;font-weight:600}
.fact-cards .fact .hours+.hours{margin-top:8px}
/* The address keeps the Google Maps link BTL asked for in round 1, drawn as the Figma's
plain text with a faint underline so it still reads as a link. */
.fact-cards .fact-venue dd a{color:inherit;text-decoration-color:rgba(35,36,82,.35)}
.fact-cards .fact-venue dd a:hover{text-decoration-color:currentColor}
.fact-art{position:absolute;display:block;pointer-events:none;z-index:0}
.fact-art img{display:block;width:100%;height:auto}
.fact-art.fa-grass{left:0;right:0;bottom:0;height:37px;background:url(/assets/festival/cards/grass-tile.webp) -12px bottom/265px 37px repeat-x}
/* The export (grass.webp) has the card's rounded corners baked in; grass-tile is its middle
265px, so wider cards (2-up, phones) repeat it without a notch and the card clips the ends. */
.fact-art.fa-flowers{right:9px;bottom:12px;width:107px}
.fact-art.fa-brave{right:14px;bottom:-7px;width:125px}
.fact-art.fa-can{right:43px;bottom:11px;width:102px}
.fact-art.fa-butterfly{right:171px;bottom:65px;width:16px}
.fact-art.fa-miniblock{right:23px;bottom:10px;width:156px}
/* Four across only from 1260px, where a card reaches the Figma's 289px so the art never meets
the text; two across below that, one on phones. */
@media (max-width:1259px){.facts.fact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.fact-art.fa-flowers{width:88px}}
@media (max-width:620px){.facts.fact-cards{grid-template-columns:1fr}}
/* Feedback round 2 (1 Oct 2026): performer photo cards under the stage schedule. */
.performers{margin-top:48px}
.performers .slots-h{text-align:center}
.pcards{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.pcard{width:min(300px,calc((100% - 48px) / 3));background:#fff;border:3px solid #DEF3F5;border-radius:17px;overflow:hidden;text-align:center}
.pcard img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pname{margin:14px 16px 2px;font-weight:700;font-size:1.125rem;color:var(--navy)}
.pmeta{margin:0 16px 16px;font-size:.875rem;color:var(--ink-soft)}
@media (max-width:620px){
/* Phones: one swipe row instead of three tall stacked cards; the next card peeks in. */
.pcards{flex-wrap:nowrap;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
margin-inline:calc(-1 * var(--gutter,20px));padding:4px var(--gutter,20px) 12px;scroll-padding-inline:var(--gutter,20px);
-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pcard{flex:0 0 72vw;max-width:300px;scroll-snap-align:start}
.pname{font-size:1rem;margin-top:10px}
.pmeta{font-size:.8125rem;margin-bottom:12px}
.performers{margin-top:36px}
}
.pcards:focus-visible{outline:3px solid var(--turquoise);outline-offset:4px;border-radius:8px}
/* Food Market logos (1 Oct 2026): a 48px rounded tile beside each brand name. The tiles are
pre-squared (logo on white, or the brand's own background edge to edge). */
.brand{display:flex;align-items:center;gap:14px}
.brand picture{flex:none;display:block}
.brand-logo{display:block;width:48px;height:48px;border-radius:10px;border:1px solid rgba(31,37,85,.12);background:#fff;object-fit:cover}
@media (max-width:620px){.brand{gap:10px}.brand-logo{width:40px;height:40px;border-radius:8px}}
/* Phones: logo + name on one line, dietary tags beneath the name, so names no longer wrap
into a half-width column. ARIA roles in the markup keep the table semantics that
display:grid would otherwise drop in Safari. */
@media (max-width:620px){
.food-2col thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.food-2col tbody tr{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
.food-2col tbody th,.food-2col tbody td{display:block;border:0;padding:0}
.food-2col tbody th{padding:12px 4px 4px}
.food-2col tbody td{padding:0 4px 12px 54px}
.food-2col tbody td:empty{display:none}
.food-2col tbody tr:has(td:empty) th{padding-bottom:12px}
.food-2col .tag{margin:2px 4px 2px 0}
}
/* Contest terms (/contest-terms, 9 Oct 2026). No Figma frame: the About layout (Anna's
instruction) with a white reading panel for the legal copy. Measure capped at ~75ch so
long clauses stay readable; neutrals from --line / --ink-soft only. */
.terms-eyebrow{font-family:var(--font-head);font-weight:700;color:var(--turquoise);margin:0 0 .2em}
.about-lede.terms-eyebrow{font-size:clamp(1rem,1.3vw,1.125rem)}
.terms-sub-h{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,2vw,1.6875rem)}
.terms-version{margin:.6em 0 0}
.terms-panel{margin-top:56px}
.terms-panel h2{font-size:clamp(1.25rem,1.8vw,1.5rem);margin:0 0 .6em}
.terms-n{color:var(--turquoise)}
.terms-sec{max-width:75ch;scroll-margin-top:96px}
.terms-sec+.terms-sec{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.terms-panel p,.terms-panel li{font-size:1rem;line-height:1.6}
.terms-panel ul{margin:0 0 1em;padding-left:1.25em}
.terms-panel li+li{margin-top:.4em}
.terms-panel a{overflow-wrap:anywhere}
.terms-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.terms-annex{margin-bottom:28px}
#round-schedule{scroll-margin-top:96px}
.terms-panel.round{margin-top:0}
.terms-panel.round h3{margin-bottom:1em}
.round-dl{margin:0;border-top:1px solid var(--line)}
.round-dl>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.round-dl dt{font-family:var(--font-head);font-weight:700}
.round-dl dd{margin:0;max-width:75ch}
.round-dl dd p:last-child,.round-dl dd ul:last-child{margin-bottom:0}
.terms-sub{font-weight:700;margin-bottom:.3em}
@media (max-width:620px){
.round-dl>div{grid-template-columns:minmax(0,1fr);gap:6px}
}