/* @ The Riverside — base stylesheet (skeleton; full design phase later) */

:root {
  --maxw: 1120px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--color-ink, #12222b);
  background: var(--color-cream, #f4f1ea);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading, Georgia, serif);
  line-height: 1.15;
  color: var(--color-river, #0e2a3b);
  margin: 0 0 0.5em;
}

a { color: var(--color-deep, #1b4d5e); }

img { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-river); color: #fff; padding: 0.6rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; }

.preview-banner {
  background: var(--color-brass, #c9a15a); color: var(--color-ink);
  text-align: center; padding: 0.5rem; font-weight: 600; font-size: 0.9rem;
}

/* ── Header / nav ─────────────────────────────────────────────── */
.site-header {
  background: var(--color-river, #0e2a3b);
  color: #fff;
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.site-header__brand {
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  color: #fff; text-decoration: none; letter-spacing: 0.01em;
}
.site-nav { margin-left: auto; }
.site-nav__toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.4);
  color: #fff; padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer;
}
.site-nav__list {
  list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0;
}
.site-nav__list a {
  color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; font-size: 0.98rem;
}
.site-nav__list a:hover { color: var(--color-brass, #c9a15a); }
.site-header__cta {
  color: #fff; text-decoration: none; font-weight: 600;
  border: 1px solid var(--color-brass, #c9a15a); border-radius: 100px;
  padding: 0.5rem 1.1rem; white-space: nowrap;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative; color: #fff; text-align: center;
  padding: clamp(4rem, 12vw, 8rem) var(--gutter);
  background: linear-gradient(160deg, var(--color-river), var(--color-deep));
}
.hero[style*="--hero-image"] {
  background-image: linear-gradient(rgba(14,42,59,0.55), rgba(14,42,59,0.55)), var(--hero-image);
  background-size: cover; background-position: center;
}
.hero__inner { max-width: 760px; margin: 0 auto; }
.hero__title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); }
.hero__subtitle { font-size: clamp(1.05rem, 2.5vw, 1.35rem); opacity: 0.95; }
.hero__actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 0.75rem 1.6rem; border-radius: 100px;
  text-decoration: none; font-weight: 600; transition: transform .1s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-brass, #c9a15a); color: var(--color-ink); }
.btn--primary:hover { background: #d9b877; }
.btn--ghost { border: 1px solid rgba(255,255,255,0.7); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ── Sections / prose ─────────────────────────────────────────── */
.section { padding: clamp(2.5rem, 7vw, 5rem) var(--gutter); }
.section--center { text-align: center; }
.prose { max-width: 720px; margin: 0 auto; font-size: 1.06rem; }
.prose--center { text-align: center; }
.prose h2 { margin-top: 1.6em; }
.prose img { border-radius: 10px; margin: 1.5rem 0; }

.page-header {
  background: linear-gradient(160deg, var(--color-river), var(--color-deep));
  color: #fff; padding: clamp(3rem, 9vw, 5rem) var(--gutter);
}
.page-header[style*="--hero-image"] {
  background-image: linear-gradient(rgba(14,42,59,0.55), rgba(14,42,59,0.55)), var(--hero-image);
  background-size: cover; background-position: center;
}
.page-header__inner { max-width: var(--maxw); margin: 0 auto; }
.page-header h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.page-header__subtitle { font-size: 1.15rem; opacity: 0.95; margin: 0; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-ink, #12222b); color: rgba(255,255,255,0.85);
  padding: 3rem var(--gutter) 1.5rem;
}
.site-footer__inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; gap: 3rem; flex-wrap: wrap;
}
.site-footer__brand { font-family: var(--font-heading); font-size: 1.15rem; color: #fff; margin: 0 0 0.5rem; }
.site-footer a { color: var(--color-brass, #c9a15a); text-decoration: none; }
.site-footer address { font-style: normal; }
.site-footer__legal {
  max-width: var(--maxw); margin: 2rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; opacity: 0.7;
}

/* ── What's On listing ────────────────────────────────────────── */
.whatson{max-width:820px; margin:0 auto;}
.whatson__month{
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-brass); border-bottom:1px solid var(--line,#dfd9cd);
  padding-bottom:.4rem; margin:2rem 0 1rem;
}
.event-list{list-style:none; margin:0; padding:0; display:grid; gap:1rem;}
.event-card{background:#fff; border:1px solid #e7e1d5; border-radius:12px; overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;}
.event-card:hover{box-shadow:0 8px 24px rgba(14,42,59,.12); transform:translateY(-2px);}
.event-card__link{display:flex; gap:1.1rem; padding:1rem 1.2rem; text-decoration:none; color:inherit; align-items:center;}
.event-card__date{
  flex:0 0 auto; width:64px; text-align:center; border-radius:10px; padding:.5rem 0;
  background:linear-gradient(160deg,var(--color-river),var(--color-deep)); color:#fff;
}
.event-card__day{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85;}
.event-card__num{display:block; font-family:var(--font-heading); font-size:1.7rem; line-height:1.1;}
.event-card__mon{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85;}
.event-card__title{margin:0 0 .2rem; font-size:1.15rem;}
.event-card__meta{margin:0 0 .3rem; color:var(--color-deep); font-size:.85rem; font-weight:600;}
.event-card__summary{margin:0; color:#5c5648; font-size:.92rem;}

/* ── Event detail ─────────────────────────────────────────────── */
.event-detail{display:grid; grid-template-columns:1fr 300px; gap:2.5rem; max-width:var(--maxw); margin:0 auto; align-items:start;}
.event-detail__eyebrow a{color:rgba(255,255,255,.85); text-decoration:none; font-weight:600;}
.card-dates{background:#fff; border:1px solid #e7e1d5; border-radius:12px; padding:1.25rem;}
.card-dates h2{margin-top:0; font-size:1.1rem;}
.date-list{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.75rem;}
.date-list li{padding-bottom:.6rem; border-bottom:1px solid var(--line,#eee);}
.date-list li:last-child{border-bottom:none;}
.event-detail__price{font-weight:700; color:var(--color-river); font-size:1.1rem; margin:.5rem 0;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}
@media(max-width:760px){.event-detail{grid-template-columns:1fr;}}

/* ── Responsive nav ───────────────────────────────────────────── */
@media (max-width: 780px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav__toggle { display: inline-block; }
  .site-nav__list {
    flex-direction: column; gap: 0.75rem; width: 100%;
    margin-top: 1rem; display: none;
  }
  .site-nav__list.is-open { display: flex; }
  .site-header__cta { margin-left: auto; }
}