/* Shared styles for the three subpages (sessions, bottle list, paradeiser).
   Each page sets its palette with a theme class on <body>. */

:root {
  --ink: #111111;
  --ink-soft: rgba(17, 17, 17, 0.82);
  --rule: rgba(17, 17, 17, 0.28);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --margin: max(clamp(20px, 7.8vw, 120px), calc((100vw - 1680px) / 2));
}

/* Button colors are darkened from the mockups so white label text meets WCAG AA. */
.theme-sessions {
  --bg: #D2DFF2;
  --band: #DDE6F5;
  --accent: #3F6DCF;
  --accent-text: #2A54AE;
}

.theme-bottle-list {
  --bg: #D0EBDF;
  --band: #DAF0E6;
  --accent: #17844F;
  --accent-text: #106B3F;
}

.theme-legal {
  --bg: #EAF7F5;
  --band: #F2FAF9;
  --accent: #111111;
  --accent-text: #111111;
}

.theme-paradeiser {
  --bg: #FDE0DF;
  --band: #FEEAE8;
  --accent: #D23A33;
  --accent-text: #A92A24;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.wrap { padding-left: var(--margin); padding-right: var(--margin); }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: clamp(20px, 2.4vw, 28px);
}

.logo img {
  width: auto;
  height: clamp(58px, 6.4vw, 76px);
}

.site-nav ul {
  display: flex;
  gap: clamp(20px, 2.9vw, 36px);
  padding-top: 6px;
}

.site-nav a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-nav a:hover { border-bottom-color: currentColor; }

.site-nav a[aria-current="page"] {
  color: var(--accent-text);
  border-bottom-color: currentColor;
}

/* ---------- Shared type ---------- */

.display {
  font-weight: 400;
  font-size: clamp(46px, 6.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.headline {
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
}

.copy {
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.35;
  color: var(--ink-soft);
}

.copy + .copy { margin-top: 0.8em; }

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 16px 28px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.button:hover { filter: brightness(0.9); }

.button svg { flex: none; width: 14px; height: 14px; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding-top: clamp(20px, 2.4vw, 32px);
  padding-bottom: clamp(48px, 5.6vw, 80px);
}

.hero-copy { padding-top: clamp(8px, 2.6vw, 36px); }

.hero .lede { margin-top: clamp(12px, 1.4vw, 18px); }
.hero .copy { margin-top: clamp(18px, 2.2vw, 28px); }
.hero .copy + .copy { margin-top: 0.8em; }
.hero .button { margin-top: clamp(24px, 2.8vw, 36px); }

.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.theme-sessions .hero-media img { aspect-ratio: 5 / 3; }
.theme-bottle-list .hero-media img { object-position: 50% 12%; }

/* ---------- Explainer + steps ---------- */

.explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
  padding-bottom: clamp(28px, 3.2vw, 44px);
}

.steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0 var(--margin);
  padding: 16px 0 clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.step {
  padding: 4px clamp(12px, 2vw, 28px) 8px;
}

.step + .step { border-left: 1px solid var(--rule); }

/* Step numbers use each theme's darker accent (--accent-text), a shade below the button colour, so they pass WCAG AA. */
.step-number { font-size: 15px; letter-spacing: 0.06em; color: var(--accent-text); }

.step h3 {
  margin-top: 4px;
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.step p:last-child {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* ---------- Photo band ---------- */

.theme-sessions .band img { object-position: 50% 45%; }
.theme-paradeiser .band img { object-position: 50% 62%; }

.band img {
  width: 100%;
  height: clamp(200px, 20.5vw, 400px);
  object-fit: cover;
}

.band figcaption {
  padding: 14px var(--margin) 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* "Why Paradeiser?": a centred dictionary-style entry between the photo band and the booking section.
   The italic headword needs Playfair italic, which only the Paradeiser page loads. */
.why {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
}

.why-entry {
  max-width: 34em;
  margin: 0 auto;
  text-align: center;
}

.why-word {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-text);
}

.why-syllables {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.why-syllables::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  background: var(--accent-text);
}

.why .copy {
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(17px, calc(1.6vw - 1px), 20px);
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.why .copy + .copy { margin-top: 1em; }

/* ---------- Details ---------- */

.details {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding-top: clamp(40px, 4.4vw, 60px);
  padding-bottom: clamp(40px, 4.4vw, 60px);
}

.theme-paradeiser .details {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  /* Details and booking form the page's closing CTA section, tinted like .signup on the other pages. */
  background: var(--band);
}

.details > :first-child { padding-right: clamp(28px, 4.5vw, 72px); }

.details > :last-child {
  padding-left: clamp(28px, 4.5vw, 72px);
  border-left: 1px solid var(--rule);
}

.details .headline + .copy,
.details .headline + .facts,
.details .headline + .icon-list { margin-top: clamp(16px, 2vw, 24px); }

.facts li + li::before {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  margin: 14px 0;
  background: var(--ink);
}

.facts p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Paradeiser: icon list */

.icon-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(16px, 2.6vw, 32px);
  align-items: start;
}

.icon-list li + li { margin-top: clamp(18px, 2vw, 24px); }

.icon-list svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-list h3 {
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.icon-list p {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.invite .copy { max-width: 26em; margin-top: clamp(16px, 2vw, 24px); color: var(--ink); }

.invite .button { margin-top: clamp(24px, 2.8vw, 32px); }

/* Button and detail line share one width: the button stretches to the line. */
.cta-block { display: inline-grid; }

.cta-block .meta { margin-top: 16px; }

/* Wrap between items, never inside one. */
.meta span { white-space: nowrap; }

.invite .meta,
.hero .meta {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Sign-up form ---------- */

.signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
  padding-top: clamp(40px, 4.4vw, 60px);
  padding-bottom: clamp(48px, 5vw, 72px);
  background: var(--band);
  scroll-margin-top: 0;
}

.signup-intro { padding-top: clamp(0px, 1.6vw, 24px); }

.signup-intro .copy {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 24em;
  color: var(--ink);
}

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px clamp(16px, 2vw, 24px);
}

.field { display: grid; gap: 7px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field-tall { grid-row: span 2; }

.field > label,
.field > legend {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.req { color: var(--accent-text); }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.3;
}

.form textarea { min-height: 76px; resize: vertical; }

.form ::placeholder { color: rgba(17, 17, 17, 0.45); }

.form input:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}

/* The legend sits outside the fieldset's grid, so the gap is set here to match the text fields. */
.choices { display: grid; gap: 3px; margin-top: 7px; }

.choices label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Custom radio to match the text fields. It sits 1px lower because Playfair's glyphs sit low in the line box. */
.choices input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid rgba(17, 17, 17, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-appearance: none;
  appearance: none;
  transform: translateY(1px);
  cursor: pointer;
}

.choices input:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}

.choices input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.choices label:has(input:checked) { color: var(--ink); }

.form .button { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.form .button:disabled { opacity: 0.6; cursor: progress; }

/* Web3Forms honeypot: hidden from people, filled in by bots. */
.botcheck { display: none; }

.field-hint {
  margin-top: -3px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Sits directly above the submit button. */
.form-note {
  grid-column: 1 / -1;
  margin-bottom: -8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.form-status {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 1.35;
}

.form-status:empty { display: none; }

/* ---------- Legal page ---------- */

.legal {
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.legal-head .label { margin-top: clamp(16px, 2vw, 24px); }

.prose {
  max-width: 40rem;
  margin-top: clamp(32px, 4vw, 56px);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.55;
}

.prose .lede { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.35; }

.prose h2 {
  margin-top: 1.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin-top: 1.6em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.prose h2 + p,
.prose h2 + ul,
.prose h2 + h3 { margin-top: 0.9em; }

.prose h3 + p { margin-top: 0.5em; }

.prose p + p,
.prose p + ul,
.prose ul + p { margin-top: 0.9em; }

.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 500; }

/* Used on the Paradeiser page, which also loads Playfair 600. */
.explainer strong { font-weight: 600; }

.prose a,
.form-note a,
.legal-line a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose .button { margin-top: 8px; text-decoration: none; }

/* ---------- Footer ---------- */

/* A 6px bar at the top of every subpage (it scrolls away with the content), split into thirds in the
   homepage path colours (Sessions, Bottle List, Paradeiser). The body padding keeps it off the header. */
body { padding-top: 6px; }

body::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 6px;
  background: linear-gradient(90deg, #3E6ECA 0 33.333%, #31A669 33.333% 66.667%, #FC6060 66.667% 100%);
}

.site-footer {
  padding-top: clamp(36px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.site-footer .footer-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 16px;
}

.site-footer .footer-contact a {
  display: inline-flex;
  padding: 6px;
}

.site-footer .footer-contact a:hover { opacity: 0.65; }

.site-footer .icon { flex: none; }

.site-footer .legal-line {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.2em;
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
  .hero,
  .explainer,
  .signup {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy { padding-top: 12px; }

  .details,
  .theme-paradeiser .details { grid-template-columns: minmax(0, 1fr); }

  .details > :first-child { padding-right: 0; }

  .details > :last-child {
    margin-top: 36px;
    padding: 36px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  /* Heading-to-text gap, slightly tighter than the stacked .explainer's. */
  .details .invite .headline + .copy { margin-top: clamp(22px, 3.4vw, 40px); }

  /* Let the invite text use more of the width once .details stacks. */
  .invite .copy { max-width: 36em; text-wrap: pretty; }

  .steps.four {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }

  .steps.four .step:nth-child(3) { border-left: 0; }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  /* Step columns are too narrow for the copy's manual line breaks; let the text wrap on its own. */
  .step p br { display: none; }

  /* Put the privacy link on its own line rather than wrapping after a "·". */
  .site-footer .legal-line .sep { display: none; }
  .site-footer .legal-line a { display: table; margin: 2px auto 0; }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding-top: 0;
  }

  .site-nav a { font-size: 11px; letter-spacing: 0.14em; }

  .display { font-size: min(12.4vw, 56px); }

  .steps:not(.four) {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  .steps:not(.four) .step {
    padding: 18px 0;
    border-left: 0;
  }

  .steps:not(.four) .step + .step { border-top: 1px solid var(--rule); }

  .form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Small phones ---------- */

/* Keeps "Apply for a free session" and the Paradeiser detail line on one line on small phones. */
@media (max-width: 400px) {
  .cta-block .meta { letter-spacing: 0.1em; }

  .button {
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 0.16em;
  }
}