/* Market Day: the established slate board and plaster wall, with self-hosted type. */
@font-face{font-family:"Big Shoulders Display";src:url('/fonts/big-shoulders-display-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url('/fonts/atkinson-hyperlegible-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--slate:#22302d;--chalk:#ede7da;--chalk-muted:#c9c2b4;--plaster:#e9e5d9;--paper:#f3f0e7;--ink:#1a2321;--ink-muted:#3f4945;--yellow:#f2c94c;--enamel:#9c3a28;--enamel-deep:#7e2d1c;--gutter:32px;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--slate);color:var(--chalk);font:18px/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus,var(--yellow));outline-offset:4px}
input{caret-color:var(--enamel)}
.skip{position:absolute;left:24px;top:-100px;padding:12px 16px;background:var(--yellow);color:var(--ink);z-index:20}.skip:focus{top:12px}
.sr-only,.bot-field{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),1200px);margin-inline:auto}
.slate{--text:var(--chalk);--muted:var(--chalk-muted);--rule:#59635b;--focus:var(--yellow);background:var(--slate);color:var(--text)}
.plaster{--text:var(--ink);--muted:var(--ink-muted);--rule:#aaa796;--focus:var(--ink);background:var(--plaster);color:var(--text);color-scheme:light}
section{padding-block:88px}
h1,h2,h3{font-family:"Big Shoulders Display",sans-serif;text-transform:uppercase;text-wrap:balance;margin:0;font-weight:800;letter-spacing:-.02em;line-height:.98}
h1{font-size:clamp(3.25rem,6vw,5.5rem)}
h2{font-size:clamp(2.5rem,4.5vw,3.5rem);font-weight:700}
h3{font-size:1.7rem;font-weight:700}
.hl{display:block;color:var(--yellow)}
p{margin:0;max-width:70ch}
.lead{color:var(--muted);font-size:1.15rem;line-height:1.55}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 20px;border:0;border-radius:2px;font:inherit;font-size:1rem;line-height:1.3;cursor:pointer;transition:background-color .18s ease-out}
.btn-primary{color:#fff;background:var(--enamel)}
.btn-primary:hover{background:var(--enamel-deep)}
.btn:disabled{opacity:.75;cursor:wait}
.site-header{border-bottom:1px solid #59635b;background:var(--slate)}
.site-header .wrap{min-height:80px;display:flex;align-items:center;gap:28px}
.brand{font:800 34px/1 "Big Shoulders Display",sans-serif;text-transform:uppercase;text-decoration:none;letter-spacing:-.01em;padding-block:10px;margin-right:auto}
.brand span{color:var(--yellow)}
.site-header nav{display:flex;gap:28px}
.site-header nav a{font-size:16px;display:flex;align-items:center;min-height:44px;text-decoration:none}
.site-header nav a:hover{text-decoration:underline}
.language select{min-height:44px;min-width:64px;padding:8px;background:var(--slate);color:var(--chalk);border:1px solid #9e9b90;border-radius:2px;font:inherit;font-size:15px;cursor:pointer}
.hero{padding-block:64px 80px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:56px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lead{margin-bottom:28px;max-width:50ch}
figure{margin:0}
.hero-visual{position:relative;padding-top:64px;min-width:0}
.hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.phone{position:relative;width:46%;margin:-53% 6% 0 auto;border:7px solid #101715;border-radius:22px;overflow:hidden;background:#101715;box-shadow:0 14px 28px rgb(0 0 0 / .3)}
form label{display:block;font-size:16px;margin-bottom:8px}
.signup-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.signup-row input{flex:1 1 220px;min-width:0;width:100%;min-height:54px;padding:12px 14px;border:1px solid #8e958a;border-radius:2px;background:var(--paper);color:var(--ink);font:inherit;font-size:17px;color-scheme:light}
input::placeholder{color:#4c5651;opacity:1}
input[aria-invalid=true]{border:2px solid #ee8fa0}
.signup-row button{flex:1 1 100%;width:100%}
.status{font-size:16px;line-height:1.5;margin-top:12px}.status:empty{display:none}
.status[data-tone=ok]{color:#9fd8a8}.status[data-tone=error]{color:#ee8fa0}
.section-head{max-width:740px;display:grid;gap:20px;margin-bottom:40px}
/* Each audience section opens on its film, full width. The film is the slate board seen from
   above, so it keeps its own dark ground and chalk lettering on either theme. */
.cinema-section{padding:0}
.film{position:relative;margin:0;background:#101715;color:var(--chalk);overflow:hidden}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:82vh;object-fit:cover;background:#101715}
/* The headline sits under the film, so the film stays unobstructed; only its timed line and the pause control are on it. */
.film .film-toggle{position:absolute;left:max(var(--gutter),calc((100% - 1200px)/2));bottom:clamp(14px,2.4vw,28px);margin:0}
.cinema-after{padding-block:48px 88px}
.cinema-after h2{max-width:22ch}
.cinema-after .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:28px}
#organizers .cinema-after .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The film's timed line: page text over the video; a red dot for the problem, a green one for the win. */
.film-cap{position:absolute;top:clamp(16px,3vw,40px);left:max(var(--gutter),calc((100% - 1200px)/2));max-width:min(70%,640px);display:flex;align-items:center;gap:14px;margin:0;padding:12px 22px 12px 16px;border-radius:2px;background:rgb(16 23 21 / .86);color:var(--chalk);font:800 clamp(1.25rem,2.6vw,2.1rem)/1.1 "Big Shoulders Display",sans-serif;text-transform:uppercase;letter-spacing:.01em;opacity:0;transform:translateY(-8px);transition:opacity .35s ease-out,transform .35s ease-out}
.film-cap.on{opacity:1;transform:none}
.film-cap i{flex:none;width:14px;height:14px;border-radius:50%;background:#d97e62}
.film-cap[data-kind=win] i{background:#9fd8a8}
.film-toggle{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid #b2ab9d;border-radius:2px;background:#101715;color:var(--chalk);cursor:pointer;--focus:var(--yellow)}
.film-toggle:hover{background:var(--slate)}
.film-toggle:disabled{display:none}
.film-toggle svg{fill:currentColor}
.film[data-state=playing] .icon-play,.film:not([data-state=playing]) .icon-pause{display:none}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{counter-increment:step;padding-top:18px;border-top:1px solid var(--rule)}
.steps li h3::before{content:counter(step) ". ";font-variant-numeric:tabular-nums}
.steps li p{color:var(--muted);margin-top:12px;font-size:17px}
.audience-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.audience h2{margin-bottom:20px}
.audience dl{margin:28px 0 0}
.audience dl div{padding-block:16px;border-top:1px solid var(--rule)}
.audience dt{font-size:19px}
.audience dd{margin:4px 0 0;font-size:16px;color:var(--muted);line-height:1.55}
.audience figure img{width:100%;height:auto;border:1px solid var(--rule)}
.closing{background:#1a2523}
.closing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
footer{padding-block:28px}
footer .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
footer p{font-size:14px;color:var(--chalk-muted)}
@media(min-width:1400px){.hero-grid{gap:72px}}
@media(max-width:1000px){.hero-grid{gap:36px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.audience-grid{gap:36px}.closing-grid{gap:40px}}
@media(max-width:760px){:root{--gutter:24px}.site-header .wrap{min-height:72px;gap:14px}.site-header nav{gap:14px}.site-header nav a{font-size:14px}.brand{font-size:28px}.hero{padding-block:40px 48px}.hero-grid,.audience-grid,.closing-grid{grid-template-columns:1fr;gap:32px}.hero-visual{max-width:480px;width:100%;padding-top:0;margin-inline:auto}.phone{width:35%;margin-top:-42%;margin-right:10%}.hero-photo{aspect-ratio:16/9}section{padding-block:56px}.steps{grid-template-columns:1fr;gap:24px}.section-head{margin-bottom:28px}.cinema-section{padding:0}.film video{max-height:none}.cinema-after{padding-block:32px 56px}.cinema-after .cards,#organizers .cinema-after .cards{grid-template-columns:1fr}.film-cap{top:10px;max-width:calc(100% - 2*var(--gutter));gap:10px;padding:6px 14px 6px 10px;font-size:1rem}.film-cap i{width:10px;height:10px}.film-toggle{width:44px;height:44px}footer .brand{width:100%}}
@media(max-width:380px){:root{--gutter:18px}.site-header nav{gap:10px}.site-header nav a{font-size:13px}.language select{min-width:54px}h1{font-size:3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.film-cap{transition:none}}

/* The public reader owns the ground; the default follows the device preference. */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:10px;border:1px solid #b2ab9d;border-radius:2px;color:var(--chalk);background:transparent;cursor:pointer}
.theme-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-toggle:hover{background:#1a2523}
body[data-theme=light]{background:var(--plaster);color:var(--ink);color-scheme:light;--focus:var(--ink)}
body[data-theme=light] .slate{--text:var(--ink);--muted:var(--ink-muted);--rule:#aaa796;--focus:var(--ink);background:var(--plaster);color:var(--text)}
body[data-theme=light] .plaster{background:#ded9c9}
body[data-theme=light] .closing{background:var(--paper)}
body[data-theme=light] .hl,body[data-theme=light] .brand span{color:#6e5104}
body[data-theme=light] .site-header{background:var(--plaster);border-color:#aaa796}
body[data-theme=light] .theme-toggle,body[data-theme=light] .language select{color:var(--ink);background:transparent;border-color:#4c5651}
body[data-theme=light] .theme-toggle:hover{background:#ded9c9}
body[data-theme=light] .btn-primary{background:#8e3323}
body[data-theme=light] .btn-primary:hover{background:var(--enamel-deep)}
body[data-theme=light] .status[data-tone=ok]{color:#1f6636}
body[data-theme=light] .status[data-tone=error]{color:#9e2f49}
body[data-theme=light] footer p{color:var(--ink-muted)}
@media(max-width:560px){.site-header nav{display:none}.site-header .wrap{gap:12px}}

/* Pilot invitation and the connected booking-to-pickup story. */
.pilot-note{font-size:16px;line-height:1.5;color:var(--muted);max-width:56ch;margin-bottom:24px}
.form-note{font-size:14px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:65ch}
.audience + .audience{border-top:1px solid var(--rule,#59635b)}
.costs-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.costs-grid > div{border-top:1px solid var(--rule);padding-top:24px}
.costs-grid p{color:var(--muted);margin-top:16px;max-width:48ch}
.costs-action{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-top:36px}
.costs-action p{font-size:16px;color:var(--muted)}
a.btn{text-decoration:none}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq details{border-top:1px solid var(--rule);padding-block:8px}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;min-height:44px;padding-block:14px;font-size:19px;line-height:1.4}
.faq summary::marker{color:var(--muted)}
.faq details p{padding-block:4px 20px;color:var(--muted);font-size:17px}
.closing .lead{margin-top:24px}
@media(max-width:760px){.costs-grid,.faq-grid{grid-template-columns:1fr;gap:32px}.costs-action{align-items:flex-start;flex-direction:column}.pilot-note{font-size:15px}h1{font-size:clamp(2.75rem,7vw,3.8rem)}}
/* Keep the host invitation available on phones, even with longer translations. */
@media(max-width:560px){.site-header .wrap{flex-wrap:wrap;padding-block:10px;row-gap:0}.site-header nav{display:flex;order:4;flex:1 0 100%;gap:24px}.site-header nav a{font-size:14px}.site-header .brand{margin-right:auto}.hero{padding-top:32px}}
