/* ==========================================================================
   Ajda Vrzdenec — design tokens and components
   Every value below derives from design-plan.md. No ad-hoc hex in components.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Color — role names, never hue names.
     Light only, by explicit instruction: no dark mode, no theme switcher. */
  --bg:          #FFFFFF;
  --surface:     #F6F5EC;
  --ink:         #1E2A12;
  --ink-muted:   #5A6650;
  --accent:      #526F22;   /* logo green darkened to 5.74:1 — passes both ways on white */
  --accent-tint: #80A040;   /* logo green — graphic fills only, never text */
  --gold:        #D8AC31;   /* wheat gold, sampled from the logo. 2.4:1 on white, so
                               GRAPHIC ONLY: fills and rules, never text. */
  --gold-wash:   #F7EFD8;
  --line:        #E3E1D3;

  /* Derived, still from the same hue */
  --accent-wash: #E9EDDE;   /* sampled from the generated icon paper so the tile
                               and the icon artwork share one exact value */
  --on-accent:   #FFFFFF;
  --header-bg:   #FFFFFF;
  --scrim:       rgb(20 30 12 / 0.86);
  --scrim-mid:   rgb(20 30 12 / 0.66);
  --scrim-out:   rgb(20 30 12 / 0.15);
  --quote-bg:    #FFFFFF;
  --band-ink:    #FFFFFF;   /* text on the accent band */
  --band-ink-2:  #DDEBBE;   /* secondary text on the accent band */
  --footer-bg:   #1E2A12;   /* footer is dark in BOTH themes — not a flip of --ink */
  --footer-ink:  rgb(255 255 255 / 0.78);
  --footer-line: rgb(255 255 255 / 0.16);

  /* Type */
  --font-display: "Caveat", "Segoe Script", cursive;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.11rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.58vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.93vw, 2.30rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.44vw, 2.94rem);
  --step-5:  clamp(2.49rem, 2.05rem + 2.19vw, 3.75rem);

  /* Spacing — one 8px rhythm, three tiers */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-component: 1rem;
  --sp-section: 2rem;
  --sp-page: clamp(3.5rem, 2rem + 6vw, 6rem);

  --measure: 62ch;
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Elevation — one scale */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 2px 8px -2px rgb(30 42 18 / 0.10);
  --shadow-2: 0 18px 40px -20px rgb(30 42 18 / 0.28);

  /* Motion */
  --dur-fast: 160ms;
  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

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

ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.2em; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--sp-2); top: -4rem; z-index: 100;
  padding: var(--sp-1) var(--sp-2);
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-2); color: var(--bg); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--sp-page); }
.section--wash { background: var(--surface); }
.section--tight { padding-block: calc(var(--sp-page) * 0.6); }

/* The one script voice — eyebrows and the hero line. Never body copy. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 var(--sp-1);
}

.section-head { margin-bottom: var(--sp-4); max-width: var(--measure); }
.section-head p { color: var(--ink-muted); }

.lede { font-size: var(--step-1); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  /* <button> carries a grey UA background that <a> does not. Variants which only
     set a border (--ghost, --on-dark) would otherwise render text on that grey. */
  background: transparent;
  /* 44px is the floor, not a preference: it is the touch-target minimum, so the
     button can shrink to it but no further. */
  min-height: 44px;
  padding: 0.55em 1.3em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit; font-size: 0.94rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--ink); color: var(--on-accent); transform: translateY(-2px); }

.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateY(-2px); }

.btn--on-dark { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }

/* On the accent band: inverted fill, so the label keeps 5.7:1 either way. */
.btn--on-band { background: var(--on-accent); color: var(--accent); }
.btn--on-band:hover { background: var(--ink); color: var(--on-accent); transform: translateY(-2px); }

.btn:active { transform: none; }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  border-bottom: none;
}

/* Torn deckle edge where the header meets the page, echoing the Agrios header.
   Hand-authored SVG because a raster strip cannot tile seamlessly at any width;
   the brief asked for this element specifically.

   The fill is the literal header colour, NOT currentColor: a data-URI SVG is a
   separate document, so currentColor resolves to its own default (black) rather
   than inheriting from this rule. Keep %23FFFFFF in sync with --header-bg. */
.site-header::after {
  content: "";
  position: absolute; top: 100%; left: 0; right: 0;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='16' viewBox='0 0 900 16' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 0H900 V10 L7.4 9.9 L21.8 12.5 L35.6 11.3 L48.5 10.3 L61.5 9.1 L67.8 11.5 L75.7 12.2 L89.9 14.9 L97.1 15.2 L105.6 13.1 L121.2 15.1 L136.8 12.8 L150.1 11.2 L159.7 14.0 L168.3 13.2 L180.5 14.7 L189.6 15.2 L201.4 14.7 L211.3 15.2 L222.7 15.2 L235.0 15.2 L241.1 11.2 L248.1 13.1 L259.0 15.2 L265.4 15.2 L279.3 13.9 L290.6 14.3 L300.9 15.2 L316.2 15.2 L327.3 15.2 L340.4 12.7 L350.8 15.2 L359.1 12.8 L374.7 12.3 L383.9 15.2 L392.7 15.2 L402.0 12.6 L408.7 12.7 L422.5 15.0 L432.6 15.2 L443.8 14.8 L456.0 15.2 L463.9 15.2 L473.4 15.2 L486.7 13.2 L494.0 12.8 L507.0 14.5 L516.1 15.2 L527.8 14.8 L535.1 14.8 L548.7 14.1 L556.6 15.2 L564.2 13.9 L575.7 15.1 L582.8 15.0 L592.3 14.2 L604.0 13.4 L618.4 15.0 L633.2 9.9 L640.7 10.2 L656.4 10.4 L672.3 12.7 L682.7 14.8 L693.0 13.8 L702.0 12.2 L712.0 11.4 L726.3 15.2 L738.4 15.0 L746.1 12.2 L752.2 11.1 L766.9 8.5 L775.9 8.6 L789.5 9.6 L797.5 9.0 L809.4 10.7 L824.7 10.7 L840.7 12.9 L848.7 13.2 L859.0 12.3 L871.6 11.5 L878.6 12.1 L890.4 9.7 L897.1 8.5 L900 10.0 L0 10 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 900px 16px;
  pointer-events: none;
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 80px;
}

/* The society's supplied logo is a full lockup (roundel + wordmark), so the
   header shows it alone rather than pairing a mark with type. */
.brand {
  display: flex; align-items: center;
  min-height: 44px; padding-block: 0.35rem;
  text-decoration: none; flex: 0 0 auto;
}
.brand__logo { height: 54px; width: auto; }

@media (max-width: 900px)  { .brand__logo { height: 46px; } }
@media (max-width: 420px)  { .brand__logo { height: 40px; } }

.nav { margin-left: auto; }
.cart-btn { margin-left: 0; }
.nav__list {
  display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.4rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.5em 0.2em;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: var(--step--1);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent-tint); }

.nav__cta { margin-left: var(--sp-2); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { margin-inline: auto; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .cart-btn { margin-left: auto; }
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    margin: 0; padding: var(--sp-2) var(--gutter) var(--sp-3);
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .nav[hidden] { display: none !important; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 0.85em 0; border-bottom: 1px solid var(--line); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); }
  .nav__cta { margin: var(--sp-2) 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Hero — the signature. The one orchestrated moment on the page.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid; align-items: end;
  min-height: clamp(30rem, 76vh, 44rem);
  padding-block: calc(var(--sp-page) * 1.1) calc(var(--sp-page) * 1.6);
  background-color: var(--ink);
  background-image: url("../img/hero-ajda.webp");
  background-size: cover;
  background-position: 62% center;
  color: #fff;
  isolation: isolate;
}

/* The photo already falls into shadow on the left, where the headline sits, so
   the scrim only has to finish the job rather than flatten the whole frame. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    var(--scrim) 0%,
    var(--scrim-mid) 46%,
    var(--scrim-out) 82%
  );
}

/* Portrait viewports crop a landscape frame far too hard, so they get a taller
   4:5 slice of the same photograph and a vertical scrim instead of a raking one. */
@media (max-width: 760px) {
  .hero {
    background-image: url("../img/hero-ajda-mobile.webp");
    background-position: center;
  }
  .hero::after {
    background: linear-gradient(
      180deg,
      var(--scrim) 0%,
      var(--scrim-mid) 55%,
      var(--scrim-mid) 100%
    );
  }
}

.hero__inner { max-width: 40rem; }

.hero .eyebrow { color: #C9DE95; }

.hero h1 { color: #fff; margin-bottom: var(--sp-2); }
.hero h1 .script {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32em;
  line-height: 0.95;
  letter-spacing: 0;
  color: #C9DE95;
}

.hero__lede {
  font-size: var(--step-1);
  color: rgb(255 255 255 / 0.88);
  margin-bottom: var(--sp-3);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   Facts — three cards riding the hero edge
   -------------------------------------------------------------------------- */

.facts {
  position: relative; z-index: 2;
  margin-top: calc(var(--sp-page) * -0.8);
  /* the panel is a sheet of paper laid on the page: it needs air under it, or its
     rounded corners die against whatever section follows */
  margin-bottom: calc(var(--sp-page) * 0.7);
}

/* One sheet of paper laid over the photograph, not three separate cards. The top
   edge is torn, the same motif as the header but flipped: the header tears down
   into the page, this tears up into the hero. Same material logic, so it reads as
   a system rather than a repeated trick. */
.facts__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-2);
}

.facts__panel::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='16' viewBox='0 0 900 16' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 0H900 V10 L7.4 9.9 L21.8 12.5 L35.6 11.3 L48.5 10.3 L61.5 9.1 L67.8 11.5 L75.7 12.2 L89.9 14.9 L97.1 15.2 L105.6 13.1 L121.2 15.1 L136.8 12.8 L150.1 11.2 L159.7 14.0 L168.3 13.2 L180.5 14.7 L189.6 15.2 L201.4 14.7 L211.3 15.2 L222.7 15.2 L235.0 15.2 L241.1 11.2 L248.1 13.1 L259.0 15.2 L265.4 15.2 L279.3 13.9 L290.6 14.3 L300.9 15.2 L316.2 15.2 L327.3 15.2 L340.4 12.7 L350.8 15.2 L359.1 12.8 L374.7 12.3 L383.9 15.2 L392.7 15.2 L402.0 12.6 L408.7 12.7 L422.5 15.0 L432.6 15.2 L443.8 14.8 L456.0 15.2 L463.9 15.2 L473.4 15.2 L486.7 13.2 L494.0 12.8 L507.0 14.5 L516.1 15.2 L527.8 14.8 L535.1 14.8 L548.7 14.1 L556.6 15.2 L564.2 13.9 L575.7 15.1 L582.8 15.0 L592.3 14.2 L604.0 13.4 L618.4 15.0 L633.2 9.9 L640.7 10.2 L656.4 10.4 L672.3 12.7 L682.7 14.8 L693.0 13.8 L702.0 12.2 L712.0 11.4 L726.3 15.2 L738.4 15.0 L746.1 12.2 L752.2 11.1 L766.9 8.5 L775.9 8.6 L789.5 9.6 L797.5 9.0 L809.4 10.7 L824.7 10.7 L840.7 12.9 L848.7 13.2 L859.0 12.3 L871.6 11.5 L878.6 12.1 L890.4 9.7 L897.1 8.5 L900 10.0 L0 10 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 900px 16px;
  transform: scaleY(-1);
  pointer-events: none;
}

@media (min-width: 720px) {
  .facts__panel { grid-template-columns: repeat(2, 1fr); }
  .fact--lead { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .facts__panel { grid-template-columns: 1.5fr 1fr 1fr; }
  .fact--lead { grid-column: auto; }
}

.fact {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

/* Hairlines between, never around: the panel edge is the container, the rules
   only separate. */
.fact + .fact { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .fact + .fact { border-top: none; border-left: 1px solid var(--line); }
  .fact--lead + .fact { border-left: none; }
}
@media (min-width: 1000px) {
  .fact--lead + .fact { border-left: 1px solid var(--line); }
}

/* Top-aligned, not bottom-aligned: the notes differ in length, so pushing content
   to the bottom left the three numbers sitting at different heights. */
.fact__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
}

.fact__value {
  margin-top: var(--sp-2);
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
  font-weight: 800; line-height: 0.95;
  letter-spacing: -0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact__label { margin-top: 0.4rem; font-weight: 700; font-size: var(--step-0); line-height: 1.3; }
.fact__note {
  margin-top: 0.3rem; color: var(--ink-muted);
  font-size: var(--step--1); line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Split — About
   -------------------------------------------------------------------------- */

.split {
  display: grid; gap: clamp(var(--sp-4), 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.95fr 1fr; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  /* keep the crop off the wordmark baked into the top-right of this photo */
  object-position: 22% 62%;
  border-radius: 50%;
}

.linklist { list-style: none; margin: var(--sp-3) 0 var(--sp-3); padding: 0; }
.linklist li + li { margin-top: 0.25rem; }
.linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 0.85em 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 700;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.linklist a:hover { color: var(--accent); padding-left: 0.4em; }
.linklist svg { flex: 0 0 auto; color: var(--accent-tint); }

/* --------------------------------------------------------------------------
   Cards — Biodinamika (4)
   -------------------------------------------------------------------------- */

.cards {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-tint); }

.card__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--surface);
}

.card__body {
  display: flex; flex-direction: column; flex: 1;
  position: relative;
  padding: var(--sp-3);
}

.card h2,
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card p { color: var(--ink-muted); font-size: var(--step--1); flex: 1; }
.card__more {
  margin-top: var(--sp-2); font-weight: 700; font-size: var(--step--1);
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.4em;
}
.card--soon { opacity: 0.62; }
.card__tag {
  align-self: flex-start; margin-bottom: var(--sp-1);
  padding: 0.2em 0.7em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--step--1); font-weight: 700; color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Obvestila — every item carries a date. Non-negotiable.
   -------------------------------------------------------------------------- */

.notices { display: grid; gap: var(--sp-2); }

.notice {
  display: grid; gap: var(--sp-2) var(--sp-3);
  grid-template-columns: 1fr;
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (min-width: 720px) {
  .notice { grid-template-columns: 1fr auto; align-items: center; }
}

.notice__body h2,
.notice__body h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.notice__body h2 a,
.notice__body h3 a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.notice__body h2 a:hover,
.notice__body h3 a:hover { color: var(--accent); text-decoration: underline; }
.notice__body p { color: var(--ink-muted); font-size: var(--step--1); }
.notice__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin-bottom: 0.6rem;
  font-size: var(--step--1); color: var(--ink-muted);
}

/* When and where: the line that actually decides whether someone turns up. */
.notice__when {
  margin: 0.35rem 0 0.5rem;
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.notice__published { font-weight: 700; }

.notice__action { align-self: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: var(--step--1); font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted);
}
.tag--project { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------------------
   Join — the conversion band. Replaces the theme's testimonials slot.
   -------------------------------------------------------------------------- */

.join { background: var(--accent); color: var(--on-accent); }
.join .eyebrow { color: var(--band-ink-2); }
.join h2 { color: var(--band-ink); }
.join__grid {
  display: grid; gap: clamp(var(--sp-3), 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .join__grid { grid-template-columns: 1fr 1fr; } }

.join__lede { color: var(--band-ink); font-size: var(--step-1); margin-bottom: var(--sp-3); }
.join__price { font-weight: 800; }

.quote {
  margin: 0;
  padding: var(--sp-4);
  background: var(--quote-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}
.quote blockquote { margin: 0 0 var(--sp-2); font-size: var(--step-1); line-height: 1.5; }
.quote figcaption { font-weight: 700; }
.quote figcaption span { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Funders
   -------------------------------------------------------------------------- */

.funders { border-top: 1px solid var(--line); }
.funders__note { color: var(--ink-muted); font-size: var(--step--1); margin-bottom: var(--sp-2); }
.funders img { width: 100%; max-width: 46rem; }

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

.site-footer {
  background: var(--footer-bg); color: var(--footer-ink);
  padding-block: var(--sp-page) var(--sp-4);
  /* the whole footer runs a step below the page: it is reference material, not
     reading matter */
  font-size: 0.875rem;
  line-height: 1.6;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--accent-tint); text-decoration: underline; }

.site-footer__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.site-footer h3 { font-size: 0.9375rem; margin-bottom: var(--sp-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 0.3rem;
  font-size: inherit;
}

/* The logo's wordmark is dark green, which vanishes on the dark footer.
   brightness(0) crushes every colour to black, invert(1) flips it to pure white,
   and alpha is untouched, so the shape stays exactly as delivered. */
.site-footer .brand { margin-bottom: var(--sp-3); }
.site-footer .brand__logo {
  height: 72px;
  filter: brightness(0) invert(1);
}

.site-footer address { font-style: normal; }
.site-footer address a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 0.3rem;
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: center; justify-content: space-between;
  /* the nav column ends on a 44px tap target, so the rule needs real air above it
     or it crowds the last link */
  margin-top: calc(var(--sp-page) * 0.7);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--footer-line);
  font-size: 0.8125rem;
}

.site-footer__copy { display: flex; flex-direction: column; gap: 0.15rem; }
.site-footer__note { opacity: 0.62; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 0 var(--sp-3);
  list-style: none; margin: 0; padding: 0;
}
.site-footer__legal a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* --------------------------------------------------------------------------
   Motion — level 2. ONE orchestrated moment: the hero on load.
   No scroll reveals anywhere. Scoped to .js so nothing hides without it.
   -------------------------------------------------------------------------- */

.js .hero__inner > * {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 420ms var(--ease) forwards;
}
.js .hero__inner > :nth-child(1) { animation-delay: 60ms; }
.js .hero__inner > :nth-child(2) { animation-delay: 120ms; }
.js .hero__inner > :nth-child(3) { animation-delay: 180ms; }
.js .hero__inner > :nth-child(4) { animation-delay: 240ms; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__inner > * { opacity: 1; transform: none; animation: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.page-hero {
  background: var(--surface);
  padding-block: calc(var(--sp-page) * 0.75) calc(var(--sp-page) * 0.6);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero__lede {
  font-size: var(--step-1); color: var(--ink-muted);
  max-width: 56ch; margin-top: var(--sp-2);
}

/* Breadcrumb. Every interior page needs a way back. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  list-style: none; margin: 0 0 var(--sp-2); padding: 0;
  font-size: var(--step--1);
}
.crumbs li { display: flex; align-items: center; gap: 0.5em; color: var(--ink-muted); }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.65;
}
.crumbs a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-muted); font-weight: 600;
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Long-form reading column */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-2); }
.prose h2 {
  font-size: var(--step-2); margin-top: var(--sp-page); margin-bottom: 0;
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-4); margin-bottom: 0; }
.prose ul { padding-left: 1.15em; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--accent-tint); }
.prose blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-3);
  background: var(--accent-wash); border-radius: var(--radius);
  font-size: var(--step-1); line-height: 1.5;
}
.prose blockquote p { max-width: none; }
.prose blockquote cite { display: block; margin-top: var(--sp-1); font-size: var(--step--1); font-style: normal; font-weight: 700; }

.prose-figure { margin: var(--sp-4) 0; }
.prose-figure img { width: 100%; border-radius: var(--radius); }
.prose-figure figcaption { margin-top: var(--sp-1); font-size: var(--step--1); color: var(--ink-muted); }

/* Article + aside */
.article-grid {
  display: grid; gap: clamp(var(--sp-4), 5vw, 4rem);
  grid-template-columns: 1fr;
}
/* Grid items default to min-width:auto, which lets a wide child (the .post-when
   columns) push the track past the viewport. min-width:0 is what stops it. */
.article-grid > * { min-width: 0; }
@media (min-width: 960px) { .article-grid { grid-template-columns: minmax(0,1fr) 19rem; } }

.aside-card {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.aside-card h2 { font-size: var(--step-0); margin-bottom: var(--sp-2); }
.aside-card + .aside-card { margin-top: var(--sp-2); }
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li + li { margin-top: 0.15rem; }
.aside-card li a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.55em 0;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--step--1);
}
.aside-card li a:hover { color: var(--accent); }
.aside-card li a[aria-current="page"] { color: var(--accent); }
.aside-card address { font-style: normal; }
.aside-card a { overflow-wrap: anywhere; }
.aside-card address a {
  display: inline-flex; align-items: center; min-height: 44px;
}

@media (min-width: 960px) { .aside-sticky { position: sticky; top: 104px; } }

/* Societies: 17 entries, so a card grid rather than a hairline list */
.society-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.society {
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.society--own { border-color: var(--accent-tint); background: var(--accent-wash); }
.society h3 { font-size: var(--step-0); margin-bottom: 0.4rem; }
.society address { font-style: normal; font-size: var(--step--1); color: var(--ink-muted); }
.society__person { margin-top: 0.6rem; font-size: var(--step--1); }
.society__person b { display: block; color: var(--ink); }
.society a { overflow-wrap: anywhere; }
.society__badge {
  display: inline-block; margin-bottom: 0.5rem;
  padding: 0.15em 0.7em; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--step--1); font-weight: 700;
}

/* Single announcement */
.post-head { max-width: 68ch; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--step--1); color: var(--ink-muted);
}
.post-meta .notice__published { font-weight: 700; }

.post-when {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  background: var(--accent-wash);
  border-radius: var(--radius);
}
.post-when dt { font-size: var(--step--1); font-weight: 700; color: var(--ink-muted); }
.post-when dd { margin: 0.15rem 0 0; font-weight: 700; font-size: var(--step-1); }

.post-funders { margin-top: var(--sp-page); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.post-funders p { font-size: var(--step--1); color: var(--ink-muted); margin-bottom: var(--sp-2); }
/* width:100% first, or the 34rem cap beats the global max-width:100% at 375px */
.post-funders img { width: 100%; max-width: 34rem; }

.post-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Contact */
.contact-grid {
  display: grid; gap: clamp(var(--sp-3), 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

.contact-block + .contact-block { margin-top: var(--sp-4); }
.contact-block h2 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.contact-block address { font-style: normal; }
.contact-block a { overflow-wrap: anywhere; }

.directions { counter-reset: none; }
.directions h3 { font-size: var(--step-0); margin-bottom: 0.35rem; }
.directions > * + * { margin-top: var(--sp-3); }

/* Membership */
.price-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-3) 0;
}
.price-line b { font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.price-line span { color: var(--ink-muted); }

.steps { list-style: none; margin: var(--sp-3) 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative; padding-left: 3rem; counter-increment: step;
}
.steps li + li { margin-top: var(--sp-3); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1em;
  display: grid; place-content: center;
  width: 2.1rem; height: 2.1rem;
  background: var(--accent); color: var(--on-accent);
  border-radius: 50%; font-weight: 800; font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; }
.steps p { color: var(--ink-muted); font-size: var(--step--1); margin: 0.2rem 0 0; }

.callout {
  padding: var(--sp-3);
  background: var(--surface);
  border-left: 4px solid var(--accent-tint);
  border-radius: var(--radius-sm);
  margin: var(--sp-3) 0;
}
.callout p { font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .hero__actions, .join, .nav-toggle { display: none; }
  .hero { min-height: auto; background: none; color: var(--ink); }
  .hero::after { display: none; }
  .hero .eyebrow, .hero h1, .hero h1 .script, .hero__lede { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   Cart: nav button, side drawer, product and checkout
   Prototype UI. State is localStorage; no payment is taken.
   -------------------------------------------------------------------------- */

.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cart-btn:hover { border-color: var(--accent-tint); color: var(--accent); }
.cart-btn__count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-content: center;
  background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--bg); border-radius: 999px;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(20 30 12 / 0.5);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.cart-open .cart-scrim { opacity: 1; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(26rem, 100%);
  display: flex; flex-direction: column;
  background: var(--bg);
  box-shadow: var(--shadow-2);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.cart-open .cart { transform: none; }

.cart__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.cart__head h2 { font-size: var(--step-1); margin: 0; }
.cart__close {
  display: grid; place-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); cursor: pointer;
}
.cart__close:hover { border-color: var(--accent-tint); color: var(--accent); }

.cart__body { flex: 1; overflow-y: auto; padding: var(--sp-3); }
.cart__empty p + p { margin-top: var(--sp-2); }
.cart__empty p:nth-child(2) { color: var(--ink-muted); font-size: var(--step--1); }

.cart__list { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: flex; gap: var(--sp-2); justify-content: space-between;
  padding-block: var(--sp-3);
}
.cart-line + .cart-line { border-top: 1px solid var(--line); }
.cart-line h3 { font-size: var(--step-0); margin: 0 0 0.15rem; }
.cart-line h3 a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.cart-line h3 a:hover { color: var(--accent); }
.cart-line__note { color: var(--ink-muted); font-size: var(--step--1); margin: 0 0 var(--sp-2); }
.cart-line__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.cart-line__price { font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.cart-line__remove {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.4em 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-muted); font: inherit; font-size: var(--step--1);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.cart-line__remove:hover { color: var(--accent); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.qty button {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: var(--ink); font: inherit; font-size: var(--step-0); line-height: 1;
  border-radius: 999px;
}
.qty button:hover { color: var(--accent); }
.qty span {
  min-width: 2.25rem; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart__foot { padding: var(--sp-3); border-top: 1px solid var(--line); }
.cart__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--step-1);
}
.cart__sum b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cart__vat { color: var(--ink-muted); font-size: var(--step--1); margin: 0.35rem 0 var(--sp-2); }
.cart__checkout { width: 100%; justify-content: center; }
.cart__clear {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: var(--sp-2);
  padding: 0.5em; border: 0; background: none; cursor: pointer;
  color: var(--ink-muted); font: inherit; font-size: var(--step--1);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.cart__clear:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cart, .cart-scrim { transition: none; }
}

/* Product */
.product { display: grid; gap: clamp(var(--sp-4), 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .product { grid-template-columns: 1fr 1fr; align-items: start; } }
.product__media img { width: 100%; border-radius: var(--radius); }
.product__price {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.product__price b {
  font-size: var(--step-4); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.product__price span { color: var(--ink-muted); }
.product__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.product__buy label { font-weight: 700; font-size: var(--step--1); }
.product__buy input {
  width: 5rem; min-height: 44px; padding: 0.5em 0.75em;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-variant-numeric: tabular-nums;
}
.product__meta { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-muted); }

/* Checkout */
.checkout { display: grid; gap: clamp(var(--sp-4), 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .checkout { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 0.65em 0.85em;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: inherit;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.field__hint { margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.field--error input, .field--error textarea { border-color: #9B2C2C; }
.field__error { margin: 0.35rem 0 0; font-size: var(--step--1); color: #9B2C2C; font-weight: 700; }

.field-row { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.pay { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.pay li + li { margin-top: var(--sp-1); }
.pay label {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.pay label:hover { border-color: var(--accent-tint); }
.pay input { margin-top: 0.25rem; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.pay b { display: block; }
.pay span { display: block; font-size: var(--step--1); color: var(--ink-muted); }

.summary {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.summary h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.summary__list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.summary__list li { display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: 0.4rem; }
.summary__list li + li { border-top: 1px solid var(--line); }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--sp-2); border-top: 2px solid var(--ink);
  font-size: var(--step-1);
}
.summary__total b { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .summary { position: sticky; top: 104px; } }

.note {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--accent-wash);
  border-radius: var(--radius);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Gold: the interface finally acknowledges the colour that is 25% of what the
   eye already sees in the photography and the logo. Dates only, and never text.
   -------------------------------------------------------------------------- */

.post-when { background: var(--gold-wash); }

/* --------------------------------------------------------------------------
   Next event: the most useful line on the page, given its own moment
   -------------------------------------------------------------------------- */

.next {
  background: var(--ink);
  color: #fff;
}
.next__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3);
}
.next__label {
  font-family: var(--font-display);
  font-size: var(--step-2); line-height: 1;
  color: var(--gold);
  margin: 0; flex: 0 0 auto;
}
.next__body { flex: 1 1 22rem; margin: 0; }
.next__body b { display: block; font-size: var(--step-1); }
.next__body span { color: rgb(255 255 255 / 0.78); font-size: var(--step--1); }
.next__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }

/* --------------------------------------------------------------------------
   Pull quote: the one section on the page that is not a grid of equal things
   -------------------------------------------------------------------------- */

/* White, not the cream wash: it sits directly after the cards section, and two
   cream sections in a row read as one undifferentiated block. */
.pull {
  background: var(--bg);
  text-align: center;
}
.pull.section--plain { background: var(--bg); }
.pull blockquote {
  max-width: 26ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: 600; line-height: 1.12;
  color: var(--accent);
}
.pull blockquote p { max-width: none; margin: 0; }
.pull cite {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-body); font-style: normal;
  font-size: var(--step--1); font-weight: 700; color: var(--ink);
}
.pull cite span { display: block; font-weight: 400; color: var(--ink-muted); }
.pull__rule {
  width: 64px; height: 3px; margin: 0 auto var(--sp-4);
  background: var(--gold); border: 0; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Where we meet
   -------------------------------------------------------------------------- */

.places { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 720px) { .places { grid-template-columns: 1fr 1fr; } }
.place {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.place h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.place address { font-style: normal; color: var(--ink-muted); font-size: var(--step--1); }
.place p { margin-top: var(--sp-2); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.subscribe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.subscribe input {
  flex: 1 1 14rem; min-height: 44px; padding: 0.55em 0.85em;
  border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.08); color: #fff; font: inherit; font-size: 0.875rem;
}
.subscribe input::placeholder { color: rgb(255 255 255 / 0.55); }
.subscribe input:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; }
.subscribe .btn { flex: 0 0 auto; }
.subscribe__note { margin-top: 0.6rem; font-size: 0.8125rem; opacity: 0.7; }
.subscribe__ok { margin-top: 0.6rem; font-size: 0.8125rem; font-weight: 700; color: var(--accent-tint); }

/* --------------------------------------------------------------------------
   Cookie banner
   -------------------------------------------------------------------------- */

.consent {
  position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); z-index: 70;
  max-width: 34rem;
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.consent p { font-size: var(--step--1); margin-bottom: var(--sp-2); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent__actions .btn { font-size: 0.875rem; }