/* Additions for the live site on top of site.css (the prototype's design tokens and components). */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* Photo slots: a soft brand texture until a real photo is added to /assets/photos/.
   Add ?placeholders to the URL to see which photo goes where. */
.ph small, .ph span, .ph svg { display: none; }
.show-ph .ph small, .show-ph .ph span, .show-ph .ph svg { display: block; }
.ph { background: radial-gradient(circle at 30% 30%, var(--ph1), var(--ph2)); border-style: solid; border-color: var(--line); }
.show-ph .ph { background: repeating-linear-gradient(-45deg, var(--ph1) 0 10px, var(--ph2) 10px 11px); border-style: dashed; }
img.photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); max-width: 100%; }
.hero-photos img.photo:first-child { aspect-ratio: 16/10; }
.about-hero img.photo, .where-block img.photo { aspect-ratio: 4/3; }
.founder img.photo { aspect-ratio: 4/5; }
.ev-img { aspect-ratio: 4/5; width: 100%; object-fit: cover; border-radius: var(--r); align-self: start; }
@media (max-width: 640px) { .ev-img { grid-column: 1/-1; grid-row: 1; aspect-ratio: 16/9; } }

.site-foot { display: flex; flex-direction: column; gap: 8px; padding-block: 24px 36px; color: var(--muted); font-size: 14px; }
.site-foot a, .site-foot .link { color: var(--ink); }
#notice { padding-top: 16px; }
.skeleton { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; color: var(--muted); }
.pay-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.pay-note .brandmark { margin-left: 0; }
.spinner { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; vertical-align: -3px; animation: spin .8s linear infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spinner { width: 14px; height: 14px; border-width: 2px; }

/* Simple content pages: thanks, manage, terms, privacy */
.page { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.page h1 { font-size: clamp(28px, 4vw, 40px); }
.page h2 { font-size: 22px; margin-top: 12px; }
.page p, .page li { max-width: 68ch; }
.page ul, .page ol { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ticket { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ticket::before { content: ""; position: absolute; inset: 5px; border: 1px dashed var(--line); border-radius: 3px; pointer-events: none; }
.ticket > * { position: relative; }
.ticket .qr { width: 132px; height: 132px; border-radius: 6px; background: #fff; padding: 6px; }
.ticket .code { font-family: var(--f-mono); font-size: 22px; }
.updated { color: var(--muted); font-size: 14px; }

/* Organizer console */
.login { max-width: 420px; margin: 48px auto; padding: 0 16px; }
.login .panel { gap: 14px; }
.ohead-row { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.scanner { width: 100%; max-width: 420px; border-radius: var(--r); overflow: hidden; background: #000; }
.scanner video { width: 100% !important; display: block; }
.sessions-editor { display: flex; flex-direction: column; gap: 8px; }
.sess-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto auto; gap: 6px; align-items: end; }
@media (max-width: 700px) { .sess-row { grid-template-columns: 1fr 1fr; } }
.hosts-editor { display: flex; flex-direction: column; gap: 10px; }
.host-row { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.toolbar-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; justify-content: space-between; }
tr.past td { opacity: .6; }
.big-result { font-size: 18px; font-weight: 700; padding: 14px 16px; }
.page a:not(.btn), .notice a, .ticket a:not(.btn) { color: var(--burgundy); font-weight: 700; }
.calbtns a { color: var(--ink); font-weight: 700; }

/* Event photos and gallery */
.ev-photo { padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; align-self: start; border-radius: var(--r); display: block; }
.ev-photo .ev-img { display: block; }
.ev-photo-count { position: absolute; right: 8px; bottom: 8px; background: rgba(24,53,47,.85); color: #F5F0E6; font: 700 12px var(--f-body); padding: 3px 9px; border-radius: 999px; }
.ev-photo:hover .ev-img, .ev-photo:focus-visible .ev-img { filter: brightness(1.05); }
@media (max-width: 640px) { .ev-photo { grid-column: 1/-1; grid-row: 1; } .ev-photo .ev-img { aspect-ratio: 16/9; object-position: center 25%; } }
.ev-img { object-position: center 30%; }
.modal.wide { max-width: 920px; }
.gallery { margin: 0; background: var(--sunk); border-radius: var(--r); display: flex; justify-content: center; }
.gallery img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r); display: block; }
.gallery-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs { display: flex; gap: 6px; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.gallery-thumbs button[aria-current] { border-color: var(--burgundy); }
.gallery-thumbs img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: block; }

/* Early-bird pricing */
.price-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy); border: 1.5px solid var(--burgundy); border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; }
.price .was { font-family: var(--f-body); font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.price-note { font-size: 13px; color: var(--muted); }

/* Address on each event card */
.ev-where { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; color: var(--ink); margin: 2px 0 0; }
.ev-where svg { width: 18px; height: 18px; flex: none; stroke: var(--burgundy); fill: none; stroke-width: 1.8; margin-top: 2px; }
.ev-where a { color: var(--burgundy); font-weight: 700; }

/* About page heading (longer statement) */
.about-hero h1 { font-size: clamp(19px, 2vw, 24px); max-width: 34ch; line-height: 1.25; margin-top: 0; }
.about-hero h1 em { display: inline-block; margin-top: 8px; }

/* Our Story + founders */
.about-grid.story-block { grid-template-columns: 1fr; gap: 24px; }
.story-block .about-story { max-width: 68ch; }
.story-block .founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.story-block .founder { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px; }
.story-block .founderph, .story-block .founder img.photo { aspect-ratio: 4/5; width: 100%; height: auto; }
.founder-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.founder-text h3 { font-size: 21px; }
.founder-role { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy); }
.founder-text p { color: var(--muted); font-size: 15px; margin-top: 4px; }
@media (max-width: 860px) { .story-block .founders { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .story-block .founder { grid-template-columns: 96px minmax(0, 1fr); } }

/* About: What we do / Who it's for / What we host */
.offer { display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.offer .section-h { margin-bottom: 6px; }
.offer-lead { font-family: var(--f-display); font-size: 22px; color: var(--burgundy); margin-bottom: 14px; }
.offer-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.way { background: var(--surface); border: 1.5px solid var(--line); border-top: 4px solid var(--cat); border-radius: var(--r); padding: 16px; }
.way p { color: var(--muted); }
.way b { color: var(--ink); font-weight: 700; }
.offer-who { background: var(--band); color: var(--band-ink); border-radius: var(--r); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.offer-who::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(245,240,230,.35); border-radius: 3px; pointer-events: none; }
.offer-who > * { position: relative; max-width: 72ch; }
.offer-who h2 { font-size: 26px; color: var(--band-ink); }
.offer-who p { color: var(--band-muted); }
.offer-who .offer-who-close { font-family: var(--f-display); font-size: 21px; color: var(--band-ink); }
.offer-host { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.c-collab { --cat: var(--muted); }
.host-type { background: var(--surface); border: 1.5px solid var(--line); border-left: 4px solid var(--cat); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.host-type h3 { font-size: 22px; color: var(--ink); }
.host-type p { color: var(--muted); }
.offer-cta { border: 1.5px dashed var(--burgundy); border-radius: var(--r); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); }
.offer-cta p { max-width: 60ch; }
.offer-cta .btn { white-space: normal; }
@media (max-width: 860px) { .offer-ways, .offer-host { grid-template-columns: 1fr; } }
a.btn { text-decoration: none; }

/* "What we do" as its own box */
.offer-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.offer-box::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--line); border-radius: 3px; pointer-events: none; }
.offer-box > * { position: relative; }
.offer-box h2 { font-size: 26px; }
.offer-box .way { background: var(--bg); }
.offer { padding-top: 28px; border-top: 2px dashed var(--line); }

/* ───────── About page: three text sizes only ─────────
   Large  = page and section headings
   Medium = card titles, names and lead lines
   Small  = everything else (body text, labels, details, buttons) */
#page-about { --fs-l: 24px; --fs-m: 19px; --fs-s: 16px; font-size: var(--fs-s); }
#page-about h1, #page-about h2, #page-about .section-h, #page-about .offer-box h2, #page-about .offer-who h2,
#page-about .about-story h2, #page-about .details h2, #page-about .about-hero h1.about-h1 { font-size: var(--fs-l) !important; }
#page-about h3, #page-about .host-type h3, #page-about .founder-text h3,
#page-about .lede, #page-about .offer-lead { font-size: var(--fs-m) !important; }
#page-about p, #page-about li, #page-about dt, #page-about dd, #page-about .btn, #page-about .eyebrow,
#page-about .founder-role, #page-about .founder-text p, #page-about .way p, #page-about .host-type p,
#page-about .offer-who p, #page-about .offer-cta p { font-size: var(--fs-s) !important; }
#page-about :where(span, a, b, em, strong, small) { font-size: inherit; }
#page-about .founder-role { letter-spacing: .04em; }

/* "Bring your curiosity…": regular size, italic */
#page-about .offer-who .offer-who-close { font-family: var(--f-body); font-style: italic; font-weight: 400; color: var(--band-ink); }

/* Our Story flows over two columns on wide screens */
.story-block .about-story { max-width: none; display: block; column-count: 2; column-gap: 40px; }
.story-block .about-story h2 { column-span: all; margin-bottom: 12px; }
.story-block .about-story p { break-inside: avoid; margin: 0 0 12px; }
@media (max-width: 860px) { .story-block .about-story { column-count: 1; } }
#page-about .about-hero h1 { max-width: none; }
#page-about .offer-who > * { max-width: none; }
/* "Bring your curiosity…": identical to the paragraph above */
#page-about .offer-who p.offer-who-close { font-family: var(--f-body) !important; font-size: var(--fs-s) !important; font-weight: 400 !important; line-height: 1.55; color: var(--band-muted) !important; font-style: normal !important; }

/* Calendar dots: one colour (no category labels on the site) */
.day .dots i { background: var(--btn); }
.day.sel .dots i { background: var(--surface); }

/* Events hero: same text formatting as the About page hero */
#page-events .hero h1 { font-size: 24px; max-width: none; line-height: 1.25; margin-top: 0; }
#page-events .hero h1 em { display: inline-block; margin-top: 8px; }
#page-events .hero p.lede { font-size: 19px; margin-top: 12px; max-width: 52ch; }