/* ==========================================================================
   HOMOLUMINOUS — style.css
   --------------------------------------------------------------------------
   Contents
   1.  Design tokens (colours, fonts, spacing)  ← EDIT HERE to restyle
   2.  Base / reset
   3.  Typography & helpers
   4.  Buttons
   5.  Header & navigation
   6.  Home hero
   7.  Sections, previews (features), quote, CTA
   8.  Inner page hero (8b: 404 page)
   9.  About: split layout, timeline, banner
   10. Embeds (Hipsy / Elfsight) + consent placeholder
   11. Cards (events)
   12. Contact form & details
   13. Privacy text (prose)
   14. Footer
   15. Cookie banner
   16. Animations
   Mobile first: base styles are for phones, @media (min-width) for bigger.
   ========================================================================== */


/* 1. DESIGN TOKENS ======================================================= */
/* EDIT HERE: change a value once and it updates everywhere. */
:root {
  /* Colours */
  --color-linen: #FFF4DD;        /* main page background (warm white, yellow-orange tint) */
  --color-sand: #FDE6C2;         /* alternate section background (soft orange-yellow) */
  --color-cream: #FFFAF0;        /* cards, form fields */
  --color-ink: #764d0e;          /* main text */
  --color-muted: #5E5848;        /* secondary text */
  --color-moss: #764d0e;         /* italic subtitles */
  --color-clay: #944D31;         /* buttons & links */
  --color-clay-dark: #7E4129;    /* button hover */
  --color-gold: #C69C5D;         /* the "light": glows, logo, accents */
  --color-gold-soft: #F0DCB0;    /* soft gold (hover fills) */
  --color-on-dark: #F3ECE0;      /* text on dark fills (e.g. hovered outline buttons) */
  --color-on-dark-muted: #E8DCC4;  /* softer text on dark fills */
  --hero-bg: #FFF4DD;            /* the hero look: linen background used by hero, CTA band, footer, cards */
  --hero-glow: radial-gradient(circle closest-side,
    rgba(214, 172, 104, 0.40) 0%,
    rgba(214, 172, 104, 0.26) 30%,
    rgba(214, 172, 104, 0.12) 60%,
    rgba(214, 172, 104, 0) 100%);   /* the hero's soft golden glow */
  --color-error: #8F2D22;
  --color-line: rgba(46, 43, 36, 0.14);
  --glow: rgba(214, 172, 104, 0.5);

  /* Fonts (loaded in the <head> of every page) */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Futura", "Century Gothic", "Helvetica Neue", sans-serif;

  /* Font sizes (clamp = grows smoothly from phone to desktop) */
  --text-xs: 0.78rem;
  --text-sm: 0.92rem;
  --text-base: 1.0625rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
  --text-2xl: clamp(1.95rem, 1.4rem + 2.4vw, 3.2rem);
  --text-3xl: clamp(2.5rem, 1.5rem + 5vw, 5.6rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(4rem, 2.8rem + 6vw, 8.5rem);

  /* Layout */
  --container: 72rem;
  --container-narrow: 46rem;
  --header-h: 4.75rem;
  --radius: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 22px 50px -26px rgba(118, 77, 14, 0.4);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 2. BASE / RESET ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Explicit root background: Safari 26 on iPhone uses it for the area behind the Dynamic Island,
     the translucent address bar and the rubber-band overscroll, so nothing white/odd shows there. */
  background-color: var(--color-linen);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;         /* the header no longer follows you, so no extra room is needed for it */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;               /* iPhone: follows the visible area as the address bar moves */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-ink);
  background-color: var(--color-linen);
  overflow-x: clip;                 /* no horizontal scrolling on mobile */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
main:focus { outline: none; }

a {
  color: var(--color-clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease);
}
a:hover { color: var(--color-clay-dark); }

/* Clear keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible { outline-color: var(--color-gold); }

.container {
  width: min(100% - 2.5rem, var(--container));
  /* iPhone held sideways: keep the text clear of the Dynamic Island. The side margin is at least
     1.25rem, or the notch size if that is bigger (env() is 0 on laptops and in portrait). */
  width: min(100% - 2 * max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  left: calc(1rem + env(safe-area-inset-left, 0px));
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
  top: calc(1rem + env(safe-area-inset-top, 0px));   /* iPhone: stay clear of the Dynamic Island */
}

.noscript-msg { margin: 0; padding: 1rem; text-align: center; background: var(--color-clay); color: #fff; }


/* 3. TYPOGRAPHY & HELPERS ================================================ */
h1, h2, h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--color-ink);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-5); }
p:last-child { margin-bottom: 0; }

.section-title {
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.section-title--sm { font-size: var(--text-xl); }

.subtitle {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--color-moss);
}

.lead { font-size: var(--text-lg); line-height: 1.85; }

/* Small capital label above headings, with a fine line before it */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.eyebrow::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--light { color: var(--color-ink); }
.eyebrow--plain::before { display: none; }   /* label without the fine line before it */

/* Little decorative "halo" ornament above centred headings */
.ornament {
  display: block;
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--color-gold) 0 18%, transparent 19%),
    radial-gradient(circle, transparent 0 44%, rgba(198, 156, 93, 0.55) 45% 47%, transparent 48%),
    radial-gradient(circle, transparent 0 68%, rgba(198, 156, 93, 0.3) 69% 71%, transparent 72%);
}


/* 4. BUTTONS ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 3.1rem;
  padding: 0.85em 2em;
  border: 1px solid var(--color-clay);
  border-radius: var(--radius-pill);
  background: var(--color-clay);
  color: #fff;
  font: 500 var(--text-xs)/1.3 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:hover { background: var(--color-clay-dark); border-color: var(--color-clay-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

.btn--outline { background: transparent; color: var(--color-clay); }
.btn--outline:hover { background: var(--color-clay); color: #fff; }

/* Hero-style buttons (dark outline on the light hero look) — same as the buttons in the hero */
.btn--light,
.btn--ghost-light { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--light:hover,
.btn--ghost-light:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn-row--center { justify-content: center; }

.link-btn {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 0.22em;
  cursor: pointer;
}


/* 5. HEADER & NAVIGATION ================================================= */
/* The header sits at the very top of the page and scrolls away with the content (it does NOT follow
   you down the page). That keeps it clear of Safari's address bar and the Dynamic Island on iPhone. */
.site-header {
  position: relative;
  z-index: 50;
  min-height: var(--header-h);
  /* iPhone: the page runs up behind the status bar / Dynamic Island (viewport-fit=cover in each
     page's <head>). This padding makes the header background fill that area too, so the logo and
     buttons start below the Dynamic Island. env() is 0 on laptops and phones without a notch. */
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-linen);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
  color: var(--color-ink);
  text-decoration: none;
}
.brand:hover { color: var(--color-ink); }
.brand__mark { display: none; width: 2.1rem; height: 2.1rem; color: var(--color-gold); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand__sub {
  margin-top: 0.22rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* Language switcher NL | EN | ES */
.lang { display: flex; align-items: center; order: 1; font-size: var(--text-xs); letter-spacing: 0.14em; }
.lang__btn {
  min-width: 2.2rem; min-height: 2.4rem;
  padding: 0.3rem;
  border: 0; border-radius: 6px;
  background: none;
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.14em;
  color: var(--color-muted);
  cursor: pointer;
}
.lang__btn:hover { color: var(--color-clay); }
.lang__btn[aria-pressed="true"] { color: var(--color-clay); text-decoration: underline; text-underline-offset: 0.45em; }
.lang__sep { color: var(--color-muted); opacity: 0.45; }

/* Hamburger button (mobile) */
.nav-toggle {
  order: 2;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.1rem; height: 1.5px;
  background: var(--color-ink);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu: hidden on mobile until the hamburger is pressed */
.nav { display: none; order: 3; flex-basis: 100%; padding-bottom: var(--space-5); }
.site-header.is-open .nav { display: block; animation: rise 0.4s var(--ease) both; }
.nav__list { margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ink);
  text-decoration: none;
}
.nav__link[aria-current="page"] { color: var(--color-clay); }

@media (min-width: 420px) {
  .brand__mark { display: block; }
  .brand__name { font-size: 1.15rem; letter-spacing: 0.18em; }
}

@media (min-width: 960px) {
  .site-header__inner { flex-wrap: nowrap; gap: var(--space-6); }
  .nav { display: block; order: 1; flex-basis: auto; padding: 0; }
  .site-header.is-open .nav { animation: none; }
  .nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
  .nav__link {
    position: relative;
    padding: 0.5rem 0;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .nav__link::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0.15rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .lang { order: 2; padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
  .nav-toggle { display: none; }
}


/* 6. HOME HERO =========================================================== */
/* EDIT HERE: change --hero-bg to change the colour of the whole hero.
   Gold theme: deep warm espresso brown so the gold logo stands out and the cream text stays easy to read. */
.hero {
  /* --hero-bg (background colour) and --hero-glow are defined in the design tokens at the top */
  --logo-size: 75%;                 /* EDIT HERE: logo size as a share of the hero height — phone */
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(92vh, 58rem);
  min-height: min(92svh, 58rem);    /* iPhone: height with the address bar showing, so the buttons aren't hidden behind it */
  padding-block: var(--section-pad);
  overflow: hidden;                 /* this is what cuts the logo off at the edge */
  text-align: center;
  color: var(--color-ink);           /* EDIT HERE: hero text colour (small line above the title) */
  background-color: var(--hero-bg);
}

/* Logo: slightly above vertical centre, exactly half outside the left edge of the hero.
   The size follows the HEIGHT of the hero: 75% on phones, 100% on laptops (see --logo-size).
   EDIT HERE: change the two `--logo-size` values (in `.hero` above and in the laptop rule below)
   for a bigger/smaller logo; use `right: 0` and `translate: 50% -50%` to put it on the right side instead. */
.hero__logo {
  position: absolute;
  z-index: -1;                      /* behind the text */
  top: 44%; left: 0;                 /* EDIT HERE: 50% = vertically centred; smaller = higher, larger = lower */
  height: var(--logo-size);
  width: auto;
  max-width: none;                  /* the global img rule would squash it to the hero width */
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0.55;                    /* EDIT HERE: 0.10 = 10% visible — phone (laptop: see the rule below) */
  pointer-events: none;
  user-select: none;
}
@media (min-width: 860px) {
  .hero { --logo-size: 100%; }      /* laptop */
  .hero__logo { opacity: 1; }       /* laptop: the text sits beside the logo, so it can be full strength gold */
}

.hero__content { position: relative; }
.hero__title {
  max-width: 15ch;
  margin-inline: auto;
  font-size: var(--text-3xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);           /* EDIT HERE: hero title colour (dark) */
}
.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-moss);          /* EDIT HERE: hero tagline colour ("De Profetie van de Pachacuti") */
}
.hero__intro { max-width: 38rem; margin-inline: auto; margin-bottom: var(--space-7); color: var(--color-ink); }  /* EDIT HERE: hero paragraph colour */
.hero .btn-row { justify-content: center; }

/* Hero buttons: the hero background is light, so both buttons use the same dark outline style.
   EDIT HERE: change the colours below to restyle both hero buttons at once. */
.hero .btn--ghost-light { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.hero .btn--ghost-light:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }

/* Phones: hero buttons always stacked, one under the other, in every language */
@media (max-width: 559px) {
  .hero .btn-row { flex-direction: column; align-items: center; }
}

/* Staggered entrance on page load */
.js .hero__content > * { animation: rise 1.1s var(--ease) both; }
.js .hero__content > :nth-child(2) { animation-delay: 0.12s; }
.js .hero__content > :nth-child(3) { animation-delay: 0.28s; }
.js .hero__content > :nth-child(4) { animation-delay: 0.42s; }
.js .hero__content > :nth-child(5) { animation-delay: 0.56s; }


/* 7. SECTIONS, PREVIEWS, QUOTE, CTA ====================================== */
/* overflow-x: clip → the glows/outlines around the photos can't make the page wider than the
   screen on phones (that caused sideways wobble on iPhone). `clip` (unlike `hidden`) keeps sticky working. */
.section { position: relative; padding-block: var(--section-pad); overflow-x: clip; }
.section--sand { background: var(--color-sand); }
/* Use when a section directly follows another section with the same background,
   so the two padding blocks don't add up to a huge gap. */
.section--no-top-pad { padding-top: 0; }
/* Hero look: linen background + the hero's soft breathing golden glow + brown ink text */
.section--glow {
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--color-ink);
}
.section--glow h2 { color: var(--color-ink); }
.section--glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  height: 130%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--hero-glow);
  opacity: 0.85;
  pointer-events: none;
  animation: breathe-glow 8s ease-in-out infinite;
}

.section-head { max-width: var(--container-narrow); margin: 0 auto var(--space-8); text-align: center; }
.section-head:only-child { margin-bottom: 0; }
.section-head .btn { margin-top: var(--space-3); }

/* Page previews (image + text, alternating sides) */
.features { display: grid; gap: clamp(4.5rem, 9vw, 8rem); }
.feature { display: grid; gap: var(--space-7); align-items: center; }
.feature__body { max-width: 34rem; }
.feature__title { font-size: var(--text-2xl); text-transform: uppercase; letter-spacing: 0.06em; }
.feature__num {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-clay);
  opacity: 0.5;
}
.feature__num--light { -webkit-text-stroke-color: var(--color-gold); }

@media (min-width: 860px) {
  .feature { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); }
  .feature--reverse { grid-template-columns: 6fr 5fr; }
  .feature--reverse .frame { order: 2; }
  .feature--reverse .feature__body { justify-self: end; }
  .feature--text-only { grid-template-columns: 1fr; }
}
@media (min-width: 860px) {
  .feature--text-only .feature__body { justify-self: center; text-align: center; }
}

/* Arch-shaped image frame with glow + thin offset outline */
.frame { position: relative; isolation: isolate; width: 100%; max-width: 27rem; margin-inline: auto; }
.frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14%; right: -18%;
  width: 75%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  animation: breathe 10s ease-in-out infinite;
}
.frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.1rem -1.1rem 1.25rem;
  border: 1px solid rgba(148, 77, 49, 0.35);
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius) var(--radius);
}
.frame--reverse::before { right: auto; left: -18%; }
.frame--reverse::after { inset: 1.25rem 1.25rem -1.1rem -1.1rem; }

/* Image box. If the photo is missing, a soft placeholder with the file name shows. */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #efe4d1 0%, #dccaa9 55%, #c9b088 100%);
}
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.feature:hover .media img { transform: scale(1.04); }
.media--arch { border-radius: var(--radius-pill) var(--radius-pill) var(--radius) var(--radius); }
.media--wide { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.media--landscape { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (min-width: 700px) { .media--wide { aspect-ratio: 21 / 9; } }

.media--empty img { visibility: hidden; }
.media--empty::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 230, 0.95), rgba(198, 156, 93, 0.3) 55%, transparent 72%);
}
.media--empty::after {
  content: attr(data-label);
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(251, 247, 240, 0.8);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-muted);
}

/* Quote */
.quote { max-width: 52rem; margin: 0 auto; text-align: center; }
.quote::before {
  content: "\201C";
  display: block;
  height: 3.5rem;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--color-gold);
}
.quote blockquote { margin: 0; }
.quote__text {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.7rem);
  line-height: 1.32;
  color: var(--color-ink);
  text-wrap: balance;
}
.quote__author { font-size: var(--text-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-clay); }

/* Call-to-action band */
.cta-band { text-align: center; }
.cta-band .lead { margin-inline: auto; margin-bottom: var(--space-6); max-width: 36rem; }
.cta-band .feature__num { margin-bottom: 0; }


/* 8. INNER PAGE HERO ===================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) clamp(4.5rem, 3rem + 5vw, 7rem);
  background: var(--color-sand);
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%; left: 50%;
  width: min(48rem, 140vw); aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 172, 104, 0.45), transparent 65%);
  animation: breathe 10s ease-in-out infinite;
}
/* soft curved bottom edge */
.page-hero::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -1px;
  height: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-linen);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.page-hero__title { font-size: var(--text-3xl); letter-spacing: 0.06em; text-transform: uppercase; }
.page-hero__title--sm { font-size: clamp(2.1rem, 1.4rem + 3.5vw, 4rem); }
.page-hero__intro {
  max-width: 36rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--color-moss);
}


/* 8b. 404 PAGE ========================================================== */
/* Same warm look as the home hero: linen background + a slowly breathing golden glow.
   EDIT HERE: the size of the big "404" is the font-size of .notfound__code. */
.notfound {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(78vh, 52rem);
  min-height: min(78svh, 52rem);
  padding-block: var(--section-pad);
  overflow: hidden;
  text-align: center;
  background-color: var(--hero-bg);
}
.notfound::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 38%; left: 50%;
  width: min(60rem, 150vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--hero-glow);
  pointer-events: none;
  animation: breathe-glow 8s ease-in-out infinite;
}
.notfound__content { position: relative; }

/* The big outlined "4 ◯ 4" (outlined like the numbers on the home page) */
.notfound__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(6rem, 3rem + 17vw, 14rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-clay);
  user-select: none;
}
/* The zero: the logo's halo (golden centre + fine rings), breathing */
.notfound__orb {
  position: relative;
  flex: none;
  width: 0.7em; height: 0.7em;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--color-gold) 0 13%, transparent 14%),
    radial-gradient(circle, transparent 0 40%, rgba(198, 156, 93, 0.75) 41% 42.5%, transparent 43.5%),
    radial-gradient(circle, transparent 0 66%, rgba(198, 156, 93, 0.5) 67% 68%, transparent 69%),
    radial-gradient(circle, transparent 0 92%, rgba(198, 156, 93, 0.3) 93% 94%, transparent 95%);
  animation: breathe 6s ease-in-out infinite;
}
.notfound__orb::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 172, 104, 0.55), transparent 65%);
}

.notfound__title {
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notfound__text {
  max-width: 34rem;
  margin: 0 auto var(--space-7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--color-moss);
}

/* Phones: buttons stacked, like in the home hero */
@media (max-width: 559px) {
  .notfound .btn-row { flex-direction: column; align-items: center; }
}

/* Staggered entrance on page load */
.js .notfound__content > * { animation: rise 1.1s var(--ease) both; }
.js .notfound__content > :nth-child(2) { animation-delay: 0.12s; }
.js .notfound__content > :nth-child(3) { animation-delay: 0.24s; }
.js .notfound__content > :nth-child(4) { animation-delay: 0.38s; }
.js .notfound__content > :nth-child(5) { animation-delay: 0.52s; }


/* Frequencies page: centred text block */
.freq-text { text-align: center; }
.freq-text .lead { margin-bottom: var(--space-6); }
.freq-text__closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-moss);
}


/* 9. ABOUT: SPLIT, TIMELINE, BANNER ====================================== */
.split { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 7vw, 7rem); }
  .split__media { position: sticky; top: 2rem; }   /* the photo (not the header) stays in view next to the long text on big screens */
  .split--contact { grid-template-columns: 1.15fr 1fr; }
}

.timeline { position: relative; max-width: 52rem; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0.6rem; bottom: 2rem; left: 0.55rem;
  width: 1px;
  background: linear-gradient(var(--color-gold), var(--color-clay) 70%, transparent);
}
.timeline__item { position: relative; padding: 0 0 var(--space-7) 2.75rem; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.3rem; left: 0;
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--color-clay);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-gold) 0 32%, var(--color-linen) 36%);
  box-shadow: 0 0 0 6px rgba(198, 156, 93, 0.12);
}
.timeline__year {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.timeline__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }

@media (min-width: 700px) {
  .timeline::before { left: 9rem; }
  .timeline__item { display: grid; grid-template-columns: 7.25rem 1fr; gap: 3.5rem; padding-left: 0; }
  .timeline__item::before { left: calc(9rem - 0.575rem); }
  .timeline__year { padding-top: 0.15rem; text-align: right; }
}

.banner { margin-bottom: var(--section-pad); }


/* 10. EMBEDS (Hipsy / Elfsight) ========================================== */
.embed { position: relative; width: 100%; max-width: 100%; min-width: 0; }

.embed__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 22rem;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed rgba(148, 77, 49, 0.45);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  text-align: center;
}
.embed__placeholder p { max-width: 32rem; margin: 0; }
.embed__placeholder .btn { margin-top: var(--space-3); }
.embed__icon {
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  margin-bottom: var(--space-3);
  border: 1px solid rgba(198, 156, 93, 0.6);
  border-radius: 50%;
  color: var(--color-clay);
  box-shadow: 0 0 0 10px rgba(198, 156, 93, 0.1);
}
.embed__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.embed__small { font-size: var(--text-sm); }

/* The widget itself: always full width, never wider than the screen */
.embed__target { width: 100%; max-width: 100%; overflow-x: clip; }
.embed__target > * { max-width: 100%; }
.embed__target iframe { display: block; width: 100%; min-height: 44rem; border: 0; }
.embed__target hipsy-event-widget { display: block; width: 100%; }
.embed[data-embed="hipsy"].is-loaded .embed__target { min-height: min(80vh, 46rem); }

.embed__fallback { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.embed__fallback a { margin-left: 0.35em; }


/* 11. CARDS ============================================================== */
.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.card {
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: rgba(198, 156, 93, 0.18);
  color: var(--color-clay);
}
.card__title { font-size: 1.45rem; }


/* 12. CONTACT ============================================================ */
.form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(46, 43, 36, 0.25);
  border-radius: var(--radius);
  background: var(--color-cream);
  font: inherit;
  color: var(--color-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input::placeholder, .field textarea::placeholder { color: #766E5A; }
.field input:focus, .field textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--color-clay);
  box-shadow: 0 0 0 3px rgba(148, 77, 49, 0.22);
}
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error { margin: 0.4rem 0 0; font-size: var(--text-sm); color: var(--color-error); }
.field__error:empty { display: none; }

.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius); font-size: var(--text-sm); }
.form-status:empty { display: none; }
.form-status.is-success { background: rgba(198, 156, 93, 0.22); color: var(--color-ink); }
.form-status.is-error { background: rgba(143, 45, 34, 0.1); color: var(--color-error); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius);
  background: rgba(198, 156, 93, 0.14);
  font-size: var(--text-sm);
}
.notice p { margin-bottom: var(--space-2); }
.notice__title { font-weight: 500; color: var(--color-ink); }

.details-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--space-5);
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgba(198, 156, 93, 0.45);
  border-radius: var(--radius-lg);
  background: var(--hero-bg);
  color: var(--color-ink);
}
.details-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%; right: -30%;
  width: 22rem; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-glow);
  pointer-events: none;
  animation: breathe-glow 8s ease-in-out infinite;
}
.details-card__title { font-size: var(--text-xl); color: var(--color-ink); }
.details-card__note { font-size: var(--text-sm); }
.details-card a { color: var(--color-ink); word-break: break-word; }
.details-card a:hover { color: var(--color-clay-dark); }
.details-list { display: grid; gap: var(--space-5); margin: var(--space-5) 0 var(--space-6); padding: 0; list-style: none; }
.details-list li { display: flex; align-items: flex-start; gap: var(--space-4); }
.details-list__icon {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid rgba(198, 156, 93, 0.5);
  border-radius: 50%;
  color: var(--color-gold);
}
.details-list__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-clay);
}


/* 13. PRIVACY TEXT ======================================================= */
.prose { max-width: var(--container-narrow); margin-inline: auto; }
.prose__updated { font-size: var(--text-sm); color: var(--color-muted); font-style: italic; }
.prose h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xl);
}
.prose h3 { margin-top: var(--space-6); font-size: 1.35rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-clay); }
.prose a { word-break: break-word; }
.settings-box {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-sand);
  text-align: center;
}


/* 14. FOOTER ============================================================= */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--space-9);
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* iPhone: keep clear of the home bar */
  border-top: 1px solid rgba(198, 156, 93, 0.45);
  background: var(--hero-bg);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10rem; right: -14rem;
  width: 38rem; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-glow);
  pointer-events: none;
  animation: breathe-glow 8s ease-in-out infinite;
}
.site-footer a { color: var(--color-ink); text-decoration: none; }
.site-footer a:hover { color: var(--color-clay-dark); text-decoration: underline; }
.site-footer__inner { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }
@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }

.footer__brand .brand { color: var(--color-ink); margin-bottom: var(--space-4); }
.footer__brand .brand__mark { display: block; }
.footer__brand .brand__sub { color: var(--color-moss); }
.footer__brand p { max-width: 22rem; }
.footer__heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.footer__list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

.socials { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.socials a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.socials a:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); text-decoration: none; }
.socials svg { width: 1.2rem; height: 1.2rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(118, 77, 14, 0.2);
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }


/* 15. COOKIE BANNER ====================================================== */
.cookie-banner {
  position: fixed;
  z-index: 90;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  /* iPhone: keep the banner clear of the home bar / address bar and (sideways) the Dynamic Island */
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  max-width: 32rem;
  /* Never taller than the visible screen (e.g. iPhone held sideways): scroll inside the banner instead
     of letting it slide up behind the Dynamic Island / status bar. */
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
  border: 1px solid rgba(198, 156, 93, 0.45);
  border-radius: var(--radius-lg);
  background: var(--hero-bg);
  color: var(--color-ink);
  box-shadow: 0 30px 60px -20px rgba(118, 77, 14, 0.45);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner:focus { outline: none; }
.cookie-banner__title { font-size: var(--text-xl); color: var(--color-ink); }
.cookie-banner a { color: var(--color-ink); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.cookie-banner__actions .btn { flex: 1 1 10rem; }
@media (min-width: 640px) {
  .cookie-banner {
    left: auto; right: 1.5rem; bottom: 1.5rem;
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}


/* 16. ANIMATIONS ========================================================= */
@keyframes breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1; }
}
/* Hero glow: a slow breath. Only transform + opacity change, so it stays smooth (no repainting).
   EDIT HERE: scale() = how much it shrinks/grows, opacity = how much it dims/brightens. */
@keyframes breathe-glow {
  0%, 100% { transform: scale(0.95); opacity: 0.75; }   /* lowest point: still clearly visible */
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Elements with class="reveal" fade in when scrolled into view (main.js) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}