/* ==========================================================================
   TARAMA ENT — stylesheet
   Minimal festival palette: warm sand ground, one terracotta accent, a
   quiet teal for line accents, charcoal ink. One dark photographic panel
   (the current event) carries all the drama; everywhere else stays calm.
   ========================================================================== */

/* ------------------------------------------------------------- fonts --- */
/* Self-hosted — both are licensed commercial faces, not Google Fonts.
   PolySans requires its own paid web-embedding licence from Displaay;
   confirm that's in place before reusing these files on another project. */
@font-face {
  font-family: "Relaxe";
  src: url("../fonts/Relaxe.woff2") format("woff2"),
       url("../fonts/Relaxe.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url("../fonts/PolySans-Slim.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url("../fonts/PolySans-Neutral.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url("../fonts/PolySans-Median.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PolySans";
  src: url("../fonts/PolySans-Bulky.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground */
  --cream:      #F7F0DF;
  --paper:      #EFE4C9;
  --line:       #DED0AC;

  /* Ink */
  --ink:        #241A13;
  --ink-soft:   #5A473A;
  --muted:      #8A7A67;

  /* Accents — used sparingly, one job each */
  --terracotta: #C4552B;
  --terracotta-dk: #9C3F1F;
  --ochre:      #D9A441;
  --teal:       #1F6F58;

  /* The current-event panel is the one dark, photographic surface */
  --night:      #1A130E;
  --night-soft: #2B2018;

  /* Type */
  --display: "Relaxe", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body: "PolySans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1160px;
  --radius: 14px;
  --radius-sm: 8px;

  --ring: 0 0 0 3px rgba(196, 85, 43, 0.4);
  --shadow-md: 0 20px 44px -22px rgba(26, 19, 14, 0.45);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

::selection { background: var(--terracotta); color: var(--cream); }

/* ---------------------------------------------------------- typography --- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 7px;
  flex: none;
  background: var(--terracotta);
  -webkit-mask: url("../img/triangle-mark.svg") center / contain no-repeat;
          mask: url("../img/triangle-mark.svg") center / contain no-repeat;
}
.eyebrow--on-dark { color: var(--ochre); }
.eyebrow--on-dark::before { background: var(--ochre); }

.section-title { font-size: clamp(2.1rem, 5.5vw, 3.5rem); }
.lede { color: var(--ink-soft); max-width: 58ch; }

/* ------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

section { padding-block: clamp(3.5rem, 9vw, 6.5rem); position: relative; }

.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head .eyebrow { margin-bottom: 0.85rem; }
.section-head .lede { margin-top: 1rem; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--terracotta); color: var(--cream);
  padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.65rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--terracotta);
  color: var(--cream);
}
.btn--primary:hover { background: var(--terracotta-dk); }

.btn--ghost {
  border: 1.5px solid rgba(36, 26, 19, 0.28);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* Ghost button on the dark current-event panel needs light ink. */
.btn--ghost-light {
  border: 1.5px solid rgba(247, 240, 223, 0.35);
  color: var(--cream);
}
.btn--ghost-light:hover { border-color: var(--ochre); color: var(--ochre); }

.btn--block { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------- nav --- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(247, 240, 223, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(26, 19, 14, 0.5);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.5rem;
}

.logo { display: inline-flex; align-items: center; }
.logo__img { height: 42px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: 1.85rem; }
.nav__links a {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding-block: 0.35rem;
  transition: color 0.2s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--terracotta);
  transition: width 0.25s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav__cta { display: inline-flex; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle span::before { transform: translateY(-7px); }
.nav__toggle span::after  { transform: translateY(5px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px); }

/* --------------------------------------------------------------- hero --- */
/* The brand pitch, not an event. A live photograph carries it, knocked back
   by a flat scrim so the type stays readable over a busy stage shot. */
.hero {
  position: relative;
  background: var(--night);
  color: var(--cream);
  overflow: hidden;
  padding-block: clamp(8rem, 16vw, 11rem) clamp(4.5rem, 9vw, 7rem);
}
.hero__art {
  position: absolute; inset: 0; z-index: 0;
  /* Scaled and blurred from JS on scroll. Warning the compositor keeps the
     photo on its own layer so the ramp does not repaint the whole hero.
     Slightly oversized so the push-in never exposes an edge. */
  transform-origin: center 45%;
  will-change: transform, filter;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Flat, no gradient. Light enough that the photograph still reads, with
     the type leaning on its own shadow rather than on a darker plate. */
  background: rgba(18, 12, 8, 0.52);
}
.hero__inner {
  position: relative; z-index: 2;
  will-change: transform, opacity;
  /* The photo is busy, so the type carries its own contrast instead of
     dimming the whole frame to get it. */
  text-shadow: 0 1px 18px rgba(12, 8, 5, 0.75);
}
/* This element is also a .wrap, which centres itself and caps at --maxw.
   Narrowing the wrap itself would centre the short column in the viewport,
   so the width limit goes on the children instead: the container stays the
   full centred grid and the text stacks down its left edge. */
.hero__inner > * { max-width: 34rem; }

/* Once there is room for the two to sit side by side, bias the crop so the
   singer lands to the right of the text column instead of behind it. A
   lower object-position keeps more of the image's left edge, which pushes
   the subject rightward on screen. */
@media (min-width: 900px) {
  .hero__art img { object-position: 20% 42%; }
}

/* Staggered entrance. Only armed when JS is running, so a script failure
   can never leave the hero blank: without the .js class the text is simply
   visible from the start. */
.js .hero__inner > * {
  opacity: 0;
  transform: translateY(20px);
}
.js .hero.is-ready .hero__inner > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js .hero.is-ready .hero__inner > *:nth-child(1) { transition-delay: 0.06s; }
.js .hero.is-ready .hero__inner > *:nth-child(2) { transition-delay: 0.14s; }
.js .hero.is-ready .hero__inner > *:nth-child(3) { transition-delay: 0.22s; }
.js .hero.is-ready .hero__inner > *:nth-child(4) { transition-delay: 0.30s; }
.js .hero.is-ready .hero__inner > *:nth-child(5) { transition-delay: 0.38s; }

.hero__headline {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  margin-block: 1rem 1.25rem;
  color: var(--cream);
}
.hero__text {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  line-height: 1.65;
  color: rgba(247, 240, 223, 0.85);
  max-width: 46ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* Credentials, not decoration: each one is a checkable fact. */
.hero__proof {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(247, 240, 223, 0.2);
}
.hero__proof li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.88rem; line-height: 1.5;
  color: rgba(247, 240, 223, 0.78);
  max-width: 22ch;
}
.hero__proof li::before {
  content: "";
  flex: none;
  width: 9px; height: 7px;
  margin-top: 0.45em;
  background: var(--ochre);
  -webkit-mask: url("../img/triangle-mark.svg") center / contain no-repeat;
          mask: url("../img/triangle-mark.svg") center / contain no-repeat;
}

/* Thin wavy rule used between sections — the one decorative repeat motif. */
.divider { display: block; width: 100%; height: 22px; color: var(--line); }
.divider--dark { color: rgba(247, 240, 223, 0.25); }

/* Visible to screen readers and search engines, not to the eye. Used where
   the same words are already on screen as artwork. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ----------------------------------------------------- featured event --- */
/* The one dark, photographic surface on the site — original artwork only,
   never a photo we don't hold the rights to. */
.featured { background: var(--cream); padding-block: 0; }
.featured__panel {
  position: relative;
  background: var(--night);
  color: var(--cream);
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6rem);
}
/* This section now opens the page, so its content needs to clear the fixed
   nav bar rather than the smaller gap a mid-page section needs. */
.featured--hero .featured__panel {
  padding-top: clamp(6rem, 11vw, 7.5rem);
}
.featured__art { position: absolute; inset: 0; z-index: 0; }
.featured__art svg, .featured__art img { width: 100%; height: 100%; object-fit: cover; }
.featured__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(26, 19, 14, 0.62);
}
.featured__content {
  position: relative; z-index: 2;
  max-width: 44rem; margin-inline: auto; text-align: center;
}

/* ---- layered stage ----
   Composed the way the printed flyer is: the title lockup sits underneath,
   and the artist cutout is pulled up over it with a negative margin so the
   figure reads as standing in front of the lettering. Everything stays
   centred, and the crowd photo behind is knocked back by the flat scrim. */
.featured__stage {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.featured__titleart {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
}
.featured__cutout {
  position: relative;
  z-index: 2;
  width: auto;
  height: clamp(25rem, 52vw, 38rem);
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Lifts the figure so the head crosses the lower part of the lockup.
     A percentage resolves against the stage width, so the overlap stays
     proportional to the lockup at every screen size instead of swallowing
     the lettering on small screens. */
  margin-top: -12%;
}
/* With the title carried by artwork, the stage is the headline, so the rest
   of the copy sits closer under it. */
.featured__panel--layered .featured__line:first-of-type { margin-top: 1.25rem; }

.featured__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: 1.1rem;
}
.featured__badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ochre);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }

.featured__subtitle {
  font-size: 0.95rem; color: rgba(247,240,223,0.7); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.featured__title {
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  margin-block: 0.5rem 1.1rem;
  color: var(--cream);
}

.featured__line {
  display: block;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: rgba(247,240,223,0.88);
}
.featured__line strong { color: var(--ochre); font-weight: 700; }
.featured__line + .featured__line { margin-top: 0.35rem; }

.countdown { margin-top: 2.25rem; }
.countdown__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem;
  max-width: 380px; margin-inline: auto;
}
.count {
  border: 1px solid rgba(247, 240, 223, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.3rem; text-align: center;
}
.count__num {
  font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.count__unit { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,240,223,0.6); margin-top: 0.35rem; }
.countdown__live {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: 1.4rem; color: var(--ochre);
}

.featured__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.85rem; margin-top: 2.25rem; }
.featured__note { font-size: 0.82rem; color: var(--ochre); }

/* ------------------------------------------------------- event cards --- */
#events, #past { background: var(--cream); }
.events__list { display: grid; gap: 0.85rem; }

.ecard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ecard:hover { border-color: var(--terracotta); transform: translateY(-2px); }

.ecard__date {
  display: grid; place-items: center; align-content: center;
  width: 72px; height: 72px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--cream);
  border: 1px solid var(--line);
}
.ecard__day { font-family: var(--display); font-size: 1.65rem; line-height: 1; color: var(--terracotta); }
.ecard__mon { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.2rem; }
.ecard__yr  { font-size: 0.56rem; color: var(--muted); }

.ecard__title { font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
.ecard__sub { color: var(--terracotta); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ecard__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.88rem; }
.ecard__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ecard__meta svg { width: 14px; height: 14px; color: var(--terracotta); flex: none; }
.ecard__side { text-align: right; display: grid; gap: 0.55rem; justify-items: end; }
.ecard__price { font-weight: 700; color: var(--ink); }

.ecard--past { opacity: 0.65; }
.ecard--past .ecard__day { color: var(--ink-soft); }
.ecard--past:hover { transform: none; border-color: var(--line); }

.past__toggle { margin-top: 1.25rem; }

/* ----------------------------------------------------------- services --- */
.services { background: var(--paper); }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.service {
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.service:hover { transform: translateY(-3px); border-color: var(--terracotta); }
.service__num { font-family: var(--display); font-size: 0.9rem; color: var(--teal); letter-spacing: 0.1em; }
.service h3 { font-size: 1.3rem; margin-block: 0.7rem 0.55rem; }
.service p { color: var(--ink-soft); font-size: 0.94rem; }

/* -------------------------------------------------------------- about --- */
.about { background: var(--cream); }
.about p + p { margin-top: 1rem; }
.about__intro { max-width: 60ch; }

.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.founder { margin: 0; text-align: center; }
.founder__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  max-width: 200px;
  margin: 0 auto 1rem;
}
.founder__photo { width: 100%; height: 100%; object-fit: cover; }
/* Stand-in until a real headshot is supplied. */
.founder__monogram {
  font-family: var(--display);
  font-size: clamp(2.25rem, 6vw, 3rem);
  color: var(--terracotta);
  letter-spacing: 0.04em;
  line-height: 1;
}
.founder__name {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  text-transform: uppercase;
  line-height: 1.15;
}
.founder__role {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.4rem;
}

/* ------------------------------------------------------------ contact --- */
.contact { background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__lines { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.contact__line { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact__line svg { width: 20px; height: 20px; color: var(--terracotta); flex: none; margin-top: 0.15rem; }
.contact__line a:hover { color: var(--terracotta); }
.meta__label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.meta__value { font-weight: 600; color: var(--ink); }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--terracotta); }
.field textarea { resize: vertical; min-height: 110px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__note { font-size: 0.8rem; color: var(--muted); }

/* ------------------------------------------------------------- footer --- */
.footer { background: var(--night); color: var(--cream); padding-block: clamp(2.75rem, 6vw, 4rem) 1.75rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.footer h4 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre); margin-bottom: 0.9rem; font-family: var(--body); font-weight: 700; }
.footer__links { display: grid; gap: 0.6rem; }
.footer__links a { color: rgba(247,240,223,0.75); font-size: 0.94rem; transition: color 0.2s ease; }
.footer__links a:hover { color: var(--ochre); }
.footer__blurb { color: rgba(247,240,223,0.55); font-size: 0.94rem; margin-top: 0.9rem; max-width: 38ch; }

.socials { display: flex; gap: 0.55rem; margin-top: 1.4rem; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(247, 240, 223, 0.22); border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.socials a:hover { background: var(--ochre); border-color: var(--ochre); color: var(--night); }
.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(247, 240, 223, 0.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  color: rgba(247,240,223,0.5); font-size: 0.82rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal a:hover { color: var(--ochre); }

/* ---------------------------------------------------------- legal page --- */
.legal { padding-top: 8.5rem; background: var(--cream); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); margin-bottom: 1.75rem; }
.legal h2 { font-size: 1.4rem; margin-block: 2.25rem 0.8rem; color: var(--terracotta); }
.legal h3 { font-size: 1.05rem; margin-block: 1.6rem 0.5rem; font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p { margin-top: 0.85rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.5rem; margin-top: 0.85rem; }
.legal a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.legal .todo {
  border-left: 3px solid var(--terracotta);
  background: var(--paper);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 1.25rem; font-size: 0.9rem;
}

/* ------------------------------------------------------------- reveal --- */
/* Content is visible by default. The scroll animation is opt-in and only
   applies once the inline <head> script confirms JavaScript is running, so a
   JS failure can never leave the page blank. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

.empty {
  padding: 2.25rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* --------------------------------------------------------- responsive --- */
@media (max-width: 760px) {
  .nav__links {
    position: fixed; inset: 4.5rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    padding: 0.5rem var(--pad) 1.5rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform 0.3s ease, opacity 0.25s ease;
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding-block: 0.9rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__links a::after { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }

  .ecard { grid-template-columns: auto minmax(0, 1fr); }
  .ecard__side { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .ecard__side .btn { width: 100%; }

  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .countdown__grid { gap: 0.4rem; }
  .ecard__date { width: 62px; height: 62px; }
  .ecard__day { font-size: 1.4rem; }
}

@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; }
  /* The hero entrance is skipped entirely rather than merely sped up, and
     JS leaves the scroll blur off, so the hero stays a still image. */
  .js .hero__inner > * { opacity: 1; transform: none; }
  .hero__art { will-change: auto; }
}

@media print {
  .nav, .featured__art, .socials, .form { display: none; }
  body { background: #fff; color: #000; }
}