/* jebeljais.club layout on top of the design system (tokens.css, jjc.css). Logical properties only, so RTL mirrors. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.h1 { font-size: 32px; line-height: 38px; }
@media (min-width: 720px) { .h1 { font-size: 40px; line-height: 46px; } }
[dir="rtl"] .label, [dir="rtl"] .jjc-event-kind { letter-spacing: 0; text-transform: none; }

/* Dark-only art also follows the system theme (jjc.css only handles data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jjc-dark-only { display: block !important; }
  :root:not([data-theme="light"]) .jjc-light-only { display: none !important; }
}

.jjc-skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--on-brand); }
.jjc-skip:focus { inset-inline-start: var(--space-3); top: var(--space-3); }

.site-wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-4); }
.site-narrow { max-width: 720px; }
.site-section { padding-block: var(--space-7); }
@media (min-width: 720px) { .site-section { padding-block: var(--space-8); } }
.site-band { background: var(--surface-sunken); }
.site-muted { color: var(--ink-muted); }
.site-lede { max-width: 60ch; }
.site-road { margin-block: 0; }
.site-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; }
.site-logo img { height: 40px; width: auto; display: block; }
.site-nav { display: none; gap: var(--space-5); font: 600 15px/1 var(--font-sans); }
.site-nav a { color: var(--ink); text-decoration: none; padding-block: var(--space-2); border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--brand); }
.site-header-end { display: flex; align-items: center; gap: var(--space-3); }
.site-header-cta { display: none; }
@media (min-width: 960px) { .site-nav { display: flex; } .site-menu-btn, .site-nav-more, .site-nav-cta { display: none; } }
/* Below 960px: a menu button opens the nav as a panel under the header. */
.site-menu-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; order: 2; }
.site-menu-btn[aria-expanded="true"] { background: var(--surface-sunken); }
@media (max-width: 959px) {
  .site-header { flex-wrap: wrap; }
  .site-header-end { order: 3; }
  .site-nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-3); }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: var(--tap-target); display: flex; align-items: center; padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--line); font-size: 17px; }
  .site-nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--line); }
  .site-nav .site-nav-cta { margin-top: var(--space-3); border-bottom: 0; justify-content: center; }
}
.site-menu-close { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-icon { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-close { display: inline-block; }
@media (max-width: 599px) {
  .site-menu-label { display: none; }
  .site-menu-btn { padding: 0 var(--space-2); }
  /* Keep the logo, menu, theme and language controls on one row on phones. */
  .site-header { gap: var(--space-2); }
  .site-header .site-logo img { height: 34px; }
  .site-header-end { gap: var(--space-2); }
  .site-header .site-theme-btn { width: 40px; height: 40px; }
  .site-header .jjc-lang a { min-width: 44px; height: 34px; padding: 0 var(--space-2); }
}
@media (max-width: 399px) { .site-header .site-logo img { height: 30px; } }
.site-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; }
.site-theme-btn:hover { background: var(--surface-sunken); }
@media (min-width: 600px) { .site-header-cta { display: inline-flex; } }
.jjc-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--ink-muted); font: 600 14px/1 var(--font-sans); text-decoration: none; }
.jjc-lang a[aria-current="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }

/* Tap targets (A23): checkbox and radio rows, in-page links, file inputs */
.jjc-check { min-height: var(--tap-target); padding-block: var(--space-2); }
.site-toc a { display: inline-block; padding: 10px 0; }
input[type="file"] { font-size: 16px; }
/* Pass reference stays on one line (A24) */
.site-qr .figure { white-space: nowrap; font-size: 26px; line-height: 32px; }

/* Footer */
.site-footer { margin-top: auto; }
.site-footer-inner { max-width: var(--content-max); margin-inline: auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer nav { margin-bottom: var(--space-3); }
.site-footer nav a, .site-link-button { min-height: var(--tap-target); display: inline-flex; align-items: center; }
.site-link-button { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-copyright { margin-top: var(--space-2); text-align: start; }
.site-ph { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); color: var(--ink-muted); text-decoration: none; }
.site-ph:hover { color: var(--ink); }
/* The operator's wordmark as a mask, so it takes the footer ink in light and dark. */
.site-ph-logo { display: inline-block; width: 114px; height: 30px; flex: none; background: currentColor; -webkit-mask: url(/img/logos/project-hospitality.png) center / contain no-repeat; mask: url(/img/logos/project-hospitality.png) center / contain no-repeat; }
[dir="rtl"] .site-copyright { direction: ltr; text-align: end; }

/* Consent bar */
.site-consent { position: fixed; inset-inline: var(--space-3); bottom: var(--space-3); z-index: 50; max-width: 560px; margin-inline: auto; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.site-consent p { margin-bottom: var(--space-3); font-size: 15px; }
.site-consent a { display: inline-block; padding: 10px 0; }
body:has(.site-consent:not([hidden])) .site-footer { padding-bottom: 190px; }

/* Hero */
.site-hero .jjc-row { margin-top: var(--space-2); }
.site-hero-ghost { color: var(--art-rust-deep); }
@media (prefers-reduced-motion: reduce) { .jjc-hero-layer { transform: none !important; } }

/* Page heads and messages */
.site-page-head { padding-block: var(--space-7) var(--space-6); background: var(--surface); }
.site-page-head .jjc-btn { margin-top: var(--space-2); }
.site-message { text-align: center; }
.site-message .site-wrap { display: flex; flex-direction: column; align-items: center; }
.site-message-icon { width: 48px; height: 48px; color: var(--success); margin-bottom: var(--space-3); }

/* Cards and grids */
.site-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-event { width: auto; }
.site-card-text { margin: 0; color: var(--ink); }
.site-two { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-two { grid-template-columns: 1fr 1fr; } }
.site-split { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .site-split { grid-template-columns: 1.1fr 1fr; } }
.site-split-art { border-radius: var(--radius-lg); width: 100%; }
.site-list { margin: 0; padding-inline-start: var(--space-5); }
.site-list li { margin-block: 4px; }
.site-steps { padding-inline-start: var(--space-5); }
.site-steps li { margin-block: var(--space-2); }

/* Logo wall */
.site-logo-wall { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.site-logo-wall li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-lg); text-align: center; font: 600 14px/20px var(--font-sans); }
.site-logo-wall img { width: 96px; height: 96px; object-fit: contain; }
.site-logo-fallback { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--brand); font: 800 36px/1 var(--font-sans); }

/* Amenities */
.site-amenities-art { display: block; width: 100%; max-height: 260px; object-fit: cover; background: var(--art-dawn); }

/* Join strip */
.site-join-strip { background: var(--art-rust-deep); color: var(--art-cream); }
.site-join-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-join-strip h2 { margin: 0; color: var(--art-cream); }
.site-join-strip .jjc-btn-primary { background: var(--art-cream); color: var(--art-rust-deep); }

/* Event page */
.site-session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-session-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-session-row h3 { margin: 0; }
.site-session-row p { margin: 0; }
.site-days { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 860px) { .site-days { grid-template-columns: 1fr 1fr; } }
.site-schedule { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
.site-schedule dt { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.site-schedule dd { margin: 0; }
.site-pace { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-pace li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); }
.site-faq details { border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
.site-faq summary { cursor: pointer; font-weight: 600; min-height: var(--tap-target); display: flex; align-items: center; }
.site-faq details > div { padding-block: var(--space-2); color: var(--ink); }
.site-prose { max-width: 70ch; }
.site-prose h2 { margin-top: var(--space-6); }
.site-prose ol, .site-prose ul { padding-inline-start: var(--space-5); }
.site-prose li { margin-block: var(--space-2); }
.site-toc { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-cover { border-radius: var(--radius-lg); margin-block: var(--space-4); width: 100%; }

/* Forms */
.site-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--form-max); }
.site-form-wide { max-width: 760px; }
.site-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.site-fieldset > legend { margin-bottom: var(--space-3); padding: 0; }
.site-step { border: 0; margin: 0; padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.site-step > legend { float: inline-start; width: 100%; padding: 0; margin-bottom: var(--space-2); font: 700 20px/28px var(--font-sans); }
.site-step > legend + * { clear: both; }
.site-step-num { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-end: var(--space-2); border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 700 14px/1 var(--font-sans); }
.site-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.site-checks-inline { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.site-person { border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.site-person > legend { padding: 0 var(--space-2); font: 700 16px/24px var(--font-sans); }
.site-person-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.site-session-detail { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.site-session-detail h4 { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.site-grid-2 { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.site-session-pick { display: flex; flex-direction: column; gap: var(--space-3); }
.site-session-pick .jjc-check { padding: var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); align-items: center; }
.site-session-pick .jjc-check:has(input:checked) { border-color: var(--brand); background: var(--surface-sunken); }
.site-session-pick .jjc-check:has(input:disabled) { opacity: .7; cursor: not-allowed; }
.site-session-pick .jjc-status { margin-inline-start: auto; }
.site-session-pick-text { display: flex; flex-direction: column; }
.site-session-pick-text b { font-weight: 700; }
.site-waiver { max-height: 320px; overflow: auto; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 14px; line-height: 22px; }
.site-waiver ol { padding-inline-start: var(--space-5); }
.site-prose .site-waiver { max-height: none; }
.site-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); outline: none; }
.site-alert ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.site-alert-ok { background: var(--success-bg); color: var(--ink); border: 1.5px solid var(--success); }
.site-alert-ok > .jjc-icon { color: var(--success); }
.site-alert-bad { background: var(--danger-bg); color: var(--ink); border: 1.5px solid var(--danger); }
.site-alert-bad > .jjc-icon { color: var(--danger); }
.site-alert-info { background: var(--status-open-bg); color: var(--status-open-fg); }
textarea { width: 100%; min-height: 140px; padding: var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.jjc-field textarea { max-width: 100%; }
input[type="file"] { font: 400 15px/1.4 var(--font-sans); color: var(--ink); }
.jjc-field input[type="file"] { height: auto; padding: var(--space-3); }

/* Passport */
.site-pass { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .site-pass { grid-template-columns: 360px 1fr; } }
.jjc-passport { width: 100%; }
.jjc-stamp[data-done] { --stamp: url(/img/logos/stamp.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jjc-stamp[data-done] { --stamp: url(/img/logos/stamp-reverse.svg); } }
[data-theme="dark"] .jjc-stamp[data-done] { --stamp: url(/img/logos/stamp-reverse.svg); }
.site-badge { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.site-badge span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); font: 600 14px/1 var(--font-sans); }
.site-badge span[data-done] { background: var(--success-bg); color: var(--success); }
.site-qr { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: #fff; color: #351a0c; }
.site-qr img { width: 160px; height: 160px; image-rendering: pixelated; }
.site-rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-rewards li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); border: 1.5px solid var(--line); }
.site-rewards li[data-unlocked] { border-color: var(--accent); }
.site-stamp-result { text-align: center; padding: var(--space-6) var(--space-4); }
.site-stamp-mark { width: 140px; height: 140px; margin: 0 auto var(--space-4); background: url(/img/logos/stamp.svg) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .site-stamp-mark { animation: site-stamp .5s ease-out both; } }
@keyframes site-stamp { from { transform: scale(1.6) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
.site-activity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.site-activity label { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; min-height: 88px; justify-content: center; }
.site-activity input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-activity label:has(input:checked) { border-color: var(--brand); background: var(--surface-sunken); color: var(--brand); }
.site-activity label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Vote */
.site-finalists { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.site-finalist img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--surface-sunken); }

/* Tables */
.site-table-wrap { overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.site-table th { text-align: start; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); padding: var(--space-2); border-bottom: 1.5px solid var(--line-strong); white-space: nowrap; }
.site-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.site-table td.num, .site-table th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* Errors */
.site-error-code { font: 800 64px/1 var(--font-sans); color: var(--brand); }

/* Hero on phones: keep the sun clear of the headline, and the ghost link readable over the ranges. */
@media (max-width: 719px) {
  .jjc-hero { min-height: 660px; }
  .jjc-hero-layer:not([data-depth="0.05"]) { height: 32%; }
  .jjc-hero-sun { width: 76px; height: 76px; top: auto; bottom: 30%; inset-inline-end: 12%; }
  .jjc-hero-copy h1 { font-size: 38px; line-height: 42px; }
}
.site-hero-ghost { background: rgba(255, 243, 224, .88); color: var(--art-rust-deep); }
.site-hero-ghost:hover { background: var(--art-cream); }

/* Hero on wider screens: a taller sky and lower ranges, so the copy and buttons sit clear of the mountains. */
@media (min-width: 720px) {
  .jjc-hero { min-height: 680px; }
  .jjc-hero-layer:not([data-depth="0.05"]) { height: 44%; }
  .jjc-hero-copy { max-width: 640px; box-sizing: content-box; }
}
@media (min-width: 1280px) {
  .jjc-hero { min-height: 760px; }
  .jjc-hero-copy { padding-top: var(--space-8); padding-inline-start: max(var(--space-6), calc((100vw - var(--content-max)) / 2)); }
}

/* At The Hub: show the whole station scene, never a mid-crop. */
.site-amenities-art { max-height: none; aspect-ratio: 1200 / 480; height: auto; object-fit: cover; }
@media (min-width: 720px) {
  .jjc-hero-copy h1 { max-width: 580px; }
}
/* Mid widths: the sun rises from behind the ridge instead of sitting beside the headline. */
@media (min-width: 720px) and (max-width: 1099px) {
  .jjc-hero-sun { top: auto; bottom: calc(44% - 40px); width: 100px; height: 100px; inset-inline-end: 8%; }
}

/* Places at The Hub and partners */
.site-places { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-place p { margin: 0; }
.site-place-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.site-place-head h3 { margin: 0 0 2px; }
.site-place-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--brand); }
.site-place-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.site-place-note strong { display: block; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); margin-bottom: 2px; }
.site-place-offer { background: var(--status-few-bg); color: var(--status-few-fg); }
.site-place-offer strong { color: inherit; }
@media (min-width: 960px) and (max-width: 1099px) { .site-nav { gap: var(--space-4); } }

/* Event schedule ("The day"): one card per day, time and activity rows, wave colours, key moments. */
.site-days { align-items: start; }
.site-sched { overflow: hidden; }
.site-sched-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); color: var(--art-cream); background: var(--art-rust-deep); }
.site-sched-drive .site-sched-head { background: var(--art-slate); }
.site-sched-head h3 { margin: 0; font: 700 20px/26px var(--font-sans); color: var(--art-cream); }
.site-sched-head p { margin: 2px 0 0; font: 400 14px/20px var(--font-sans); opacity: .92; }
.site-sched-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: rgba(255, 243, 224, .16); }
.site-sched-table { width: 100%; border-collapse: collapse; }
.site-sched-table th, .site-sched-table td { padding: var(--space-3) var(--space-4); vertical-align: top; text-align: start; border-bottom: 1px solid var(--line); }
.site-sched-table tr:last-child th, .site-sched-table tr:last-child td { border-bottom: 0; }
.site-sched-table th { width: 1%; white-space: nowrap; padding-inline-end: 0; }
.site-sched-time { display: inline-block; min-width: 64px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); font: 700 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
.site-sched-time-word { min-width: 0; max-width: 110px; white-space: normal; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--ink-muted); background: transparent; padding-inline: 0; text-align: start; }
.site-sched-what { display: flex; align-items: baseline; gap: var(--space-2); font: 600 16px/24px var(--font-sans); color: var(--ink); }
.site-sched-detail { display: block; margin-top: 2px; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
.site-sched-band { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--b); outline: 1.5px solid var(--line-strong); transform: translateY(1px); }
.site-sched-key td, .site-sched-key th { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.site-sched-key .site-sched-time { background: var(--brand); color: var(--on-brand); }
.site-sched-key .site-sched-time-word { background: transparent; color: var(--brand); }
.site-sched-key .site-sched-what { color: var(--ink); }
.site-sched-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); font-size: 14px; }
.site-sched-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.site-sched-keydot { display: inline-block; width: 22px; height: 12px; border-radius: 6px; background: var(--brand); }
@media (max-width: 479px) {
  .site-sched-table th, .site-sched-table td { padding: var(--space-3); }
  .site-sched-time { min-width: 56px; font-size: 14px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Getting there: info and drive times beside a click-to-load map */
.site-getting { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .site-getting { grid-template-columns: 1fr 1fr; } }
.site-getting-info > * + * { margin-top: var(--space-4); }
.site-getting-info p { margin-bottom: 0; }
.site-getting-info h3 { margin: var(--space-5) 0 0; }
.site-drive { width: 100%; max-width: 480px; border-collapse: collapse; }
.site-drive th, .site-drive td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); text-align: start; font: 400 16px/24px var(--font-sans); }
.site-drive th { font-weight: 600; padding-inline-end: var(--space-4); }
.site-drive td { color: var(--ink-muted); text-align: end; }
.site-map { position: relative; min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-card); }
.site-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-5); text-align: center; background: var(--art-dawn) url(/img/patterns/pattern-topo.svg) center / 360px repeat; color: var(--art-ink); }
.site-map-placeholder p { margin: 0; }
.site-map-placeholder .site-muted, .site-map-placeholder .jjc-hint { color: var(--art-ink); opacity: .8; }
.site-map-placeholder .jjc-btn-secondary { color: var(--art-ink); border-color: var(--art-ink); background: rgba(255, 243, 224, .7); }
.site-map-pin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--art-rust); color: var(--art-cream); box-shadow: var(--shadow-card); }

/* Hero layers (A44: the sky without birds under 480px, where they sat on the headline) */
.site-hero-sky { background-image: url(/img/patterns/mountains-0-sky.svg); }
.site-hero-far { background-image: url(/img/patterns/mountains-1-far.svg); }
.site-hero-mid { background-image: url(/img/patterns/mountains-2-mid.svg); }
.site-hero-near { background-image: url(/img/patterns/mountains-3-near.svg); }
.site-hero-front { background-image: url(/img/patterns/mountains-4-front.svg); }
@media (max-width: 479px) { .site-hero-sky { background-image: url(/img/patterns/mountains-0-sky-nobirds.svg); } }
.jjc-passport-title { display: block; margin: 0; font: 800 18px/22px var(--font-sans); color: inherit; }

/* Instagram and guides (0.7.0) */
.site-footer-social { margin: 0 0 var(--space-3); }
.site-footer-social a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); font-weight: 600; color: var(--ink); text-decoration: none; }
.site-footer-social a:hover { color: var(--brand); }
.site-nav-more .jjc-icon { margin-inline-end: var(--space-2); }
.site-join-follow { color: var(--art-cream); border-color: rgba(255, 250, 243, 0.5); }
.site-join-follow:hover { background: rgba(255, 250, 243, 0.12); }
.site-about { padding-block: var(--space-6); }
.site-about p { margin: 0; }
.site-follow { background: var(--surface-raised); }
.site-follow-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-follow-inner h2, .site-follow-inner p { margin: 0 0 var(--space-2); }
.site-follow-inner > div { max-width: 60ch; }
.site-follow-compact { padding-block: var(--space-5); }
.site-guides { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-4); }
.site-guide-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); color: var(--ink); text-decoration: none; }
.site-guide-card:hover { border-color: var(--brand); }
.site-guide-card .jjc-icon { color: var(--brand); }
.site-guide-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.site-guide-nav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-weight: 600; }
.site-guide-nav a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.site-guide-section { max-width: 68ch; margin-bottom: var(--space-6); }
.site-guide-section h2 { margin-bottom: var(--space-2); }
.site-guide-events { display: grid; gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.site-guide-events li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); }
.site-guide-events a { font-weight: 600; }