/* Alma Spirit Inspired — the design system, second edition (editorial).
   Every colour is from the Alma Brand Board, exactly:
   Sand #EDE8D8 · Gray #CCC5BC · Clay #AB8E69 · Dirt #77624C
   Brick #B24A3B · Mustard #F8B935 · Cactus Green #778B55 · Blue #406E8B
   Alma Black #242121. Paper #F6EFE9 is the guidelines' lightest tone.
   No true white anywhere — Heidi's standing rule.

   The idea: a printed art catalogue, not a brochure. Photographs are set at
   different sizes and stagger instead of sitting in a column. Copy is short
   and set large. One dark "cellar" band per page. Nothing overlaps anything
   that has to be read. Photo slots that are still empty draw themselves as
   labelled frames so the page holds its shape before the shoot. */

:root {
  color-scheme: light;
  --sand: #ede8d8;
  --paper: #f6efe9;
  --gray: #ccc5bc;
  --clay: #ab8e69;
  --dirt: #77624c;
  --brick: #b24a3b;
  --brick-deep: #8d382c;
  --mustard: #f8b935;
  --cactus: #778b55;
  --blue: #406e8b;
  --alma-black: #242121;

  --bg: var(--sand);
  --bg-raise: var(--paper);
  --bg-sink: var(--gray);
  --fg: var(--alma-black);
  --fg-soft: #3b3330;
  --muted: var(--dirt);
  --line: rgba(36, 33, 33, 0.16);
  --line-strong: rgba(36, 33, 33, 0.34);
  --red: var(--brick);
  --red-deep: var(--brick-deep);
  --ember: #a8724a;
  --glow: rgba(178, 74, 59, 0.12);

  /* The cellar band: Alma Black ground, Sand type. */
  --cellar-bg: var(--alma-black);
  --cellar-fg: var(--sand);
  --cellar-muted: var(--gray);
  --cellar-line: rgba(237, 232, 216, 0.18);

  --header: "Cousine", ui-monospace, "Courier New", Courier, monospace;
  --body: "Courier Prime", "Cousine", ui-monospace, "Courier New", Courier, monospace;
  --serif: var(--header);
  --sans: var(--body);

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;
  --gutter: clamp(var(--s5), 5vw, var(--s9));
  --rhythm: clamp(56px, 8vw, 128px);
  --rhythm-tight: clamp(32px, 4vw, 64px);
  --col-gap: clamp(var(--s5), 4vw, var(--s8));
  --radius: 2px;
  --maxw: 84rem;
  --measure: 58ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

#siteScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

::selection {
  background: var(--red);
  color: var(--sand);
}

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

a {
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--header);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--s4);
}

p,
li,
h1,
h2,
h3,
h4,
dt,
dd,
figcaption {
  overflow-wrap: break-word;
}

.skip-link {
  position: absolute;
  left: -999rem;
  top: var(--s4);
}

.skip-link:focus {
  left: var(--s4);
  z-index: 40;
  background: var(--bg-raise);
  color: var(--fg);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
}

/* ---- Announcement bar + header. The whole menu is always visible; on a
   phone it wraps beneath the mark instead of hiding behind a button. ---- */

/* The announcement bar: Alma Black under a woven, fibre-like grain (two
   directions of fine noise, like linen), so it reads as cloth, not a hard
   black stripe. */
.announce {
  background-color: var(--cellar-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.85 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23w)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.02' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.67 0 0 0 0 0.56 0 0 0 0 0.41 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23v)'/></svg>");
  background-repeat: repeat;
  color: var(--cellar-fg);
  font-family: var(--header);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s2) var(--gutter);
  line-height: 1.5;
}

.announce a {
  color: var(--mustard);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  padding: var(--s4) var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: padding 0.35s var(--ease);
}

.site-header[data-condensed] {
  padding-block: var(--s2);
}

.brand {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius);
}

.brand-mark {
  height: 3.2rem;
  width: auto;
  transition: height 0.35s var(--ease);
}

.site-header[data-condensed] .brand-mark {
  height: 2.3rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s1) clamp(var(--s4), 2vw, var(--s6));
}

.site-link {
  color: var(--fg-soft);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--header);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s1) 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.site-link:hover {
  color: var(--fg);
  border-bottom-color: var(--line-strong);
}

.site-link[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--red);
}

.menu-button {
  display: none;
}

@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }

  .site-nav {
    justify-content: flex-start;
    gap: var(--s1) var(--s4);
  }

  .site-link {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

/* ---- Layout and rhythm ---- */

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

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

.section {
  padding-block: var(--rhythm);
}

.section-tight {
  padding-block: var(--rhythm-tight);
}

.section-sink {
  background: var(--bg-sink);
  --muted: var(--fg-soft);
  --line: rgba(36, 33, 33, 0.24);
}

.section-raise {
  background: var(--bg-raise);
}

.hero-grid > *,
.row > *,
.menu-layout > *,
.form-layout > *,
.experience > *,
.site-header > *,
.spread > *,
.index > * {
  min-width: 0;
}

/* ---- Type roles ---- */

.eyebrow {
  font-family: var(--header);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--red);
  flex: none;
}

.eyebrow-plain::before {
  display: none;
}

.display {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.title {
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.statement {
  font-family: var(--header);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--fg);
  margin-top: var(--s5);
  max-width: 44ch;
}

.sub {
  font-family: var(--header);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--fg);
  margin-top: var(--s4);
}

.gift-sub {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--red);
  margin-top: var(--s4);
  margin-bottom: var(--s5);
}

.motto {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ember);
  margin-top: var(--s5);
}

.prose {
  max-width: var(--measure);
}

.prose + .prose,
.prose + .actions,
.prose + .rows,
.prose + .note {
  margin-top: var(--s5);
}

.prose-lg p {
  font-family: var(--header);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  color: var(--fg);
}

.prose-lg p + p {
  margin-top: var(--s5);
}

.prose-center {
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.note {
  color: var(--muted);
  font-size: 0.95rem;
  border-left: 2px solid var(--red);
  padding-left: var(--s4);
  max-width: var(--measure);
}

.deadline {
  font-family: var(--header);
  font-size: 1.15rem;
  color: var(--red);
  margin-top: var(--s5);
}

.caption {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: var(--s2);
}

/* ---- Controls ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font: 400 0.8rem var(--header);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.button:hover {
  background: var(--fg);
  color: var(--sand);
}

.button-primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--sand);
}

.button-primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--sand);
}

.text-link {
  color: var(--red);
  text-decoration: none;
  font-family: var(--header);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.text-link:hover {
  color: var(--fg);
}

/* ---- Photographs and the slots waiting for them ----
   .photo is the frame. With an image it shows the image at the ratio the
   slot asks for. Without one it draws a labelled placeholder: a dashed
   frame in Clay, the slot's name, and a small hand-drawn sun. Fill the slot
   in content.json and the placeholder disappears. */

.photo {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 4 / 5);
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-sink);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center center);
}

.photo-empty {
  border: 1px dashed var(--clay);
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(171, 142, 105, 0.22) 46% 54%, transparent 54%),
    var(--bg-sink);
}

.cellar .photo-empty {
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(237, 232, 216, 0.12) 46% 54%, transparent 54%),
    rgba(237, 232, 216, 0.06);
  border-color: var(--cellar-muted);
}

.photo-label {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  right: var(--s4);
  font-family: var(--header);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.5;
}

.cellar .photo-label {
  color: var(--cellar-muted);
}

.photo-label small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: none;
}

.photo-sun {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 1.6rem;
  aspect-ratio: 1;
  background: var(--mustard);
  border-radius: 56% 44% 49% 51% / 47% 53% 47% 53%;
  opacity: 0.85;
}

.photo figcaption {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
  background: rgba(36, 33, 33, 0.6);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
}

/* ---- The hero: full-bleed photograph, the mark and one sentence ---- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-bleed {
  display: grid;
}

.hero-bleed > * {
  grid-area: 1 / 1;
}

/* The photograph is a full-width band on its own, seen whole; the words sit
   beneath it on Sand. Nothing is laid over the picture. */
.hero-bleed .photo {
  aspect-ratio: auto;
  height: min(62vh, 38rem);
  min-height: 16rem;
  border-radius: 0;
}

.hero-bleed .photo-empty {
  border-width: 0 0 1px;
  border-style: solid;
}

.hero-bleed .photo-label {
  bottom: auto;
  top: var(--s4);
  right: auto;
}

.hero-bleed .photo-sun {
  top: auto;
  bottom: var(--s5);
}

.hero-veil {
  display: none;
}

/* The carousel: the photographs stacked in one frame, one showing at a time,
   crossfading slowly. Each slide keeps its own focal point (--pos). */
.hero-slides {
  position: relative;
  height: min(62vh, 38rem);
  min-height: 16rem;
  overflow: hidden;
  background: var(--bg-sink);
}

.hero-bleed .hero-slide {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.hero-bleed .hero-slide.is-on {
  opacity: 1;
}

/* Every photograph is shown whole, at full height; the same picture, blurred
   and dimmed, fills whatever the frame has left over at the sides. */
.hero-bleed .hero-slide .hero-slide-bg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: var(--pos, center center);
  filter: blur(26px) saturate(0.85) brightness(0.72);
}

/* The photograph itself is sized to fit and centred, and its four edges are
   feathered into the blurred ground so the two read as one picture. */
.hero-bleed .hero-slide {
  display: flex;
  align-items: center;
  justify-content: var(--align, center);
}

@media (max-width: 760px) {
  .hero-bleed .hero-slide {
    justify-content: center;
  }
}

/* A slide marked "fit: cover" is widened to fill the whole frame instead. */
.hero-bleed .hero-slide-wide .hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--pos, center center) !important;
}

.hero-bleed .hero-slide .hero-slide-img {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 760px) {
  .hero-slides {
    height: min(52vh, 24rem);
  }

  .hero-bleed .hero-slides .hero-slide {
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
}

.hero-copy {
  grid-area: 2 / 1;
  position: relative;
  width: 100%;
  padding: var(--rhythm-tight) var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.hero-copy .display {
  color: var(--fg);
  max-width: 14ch;
}

/* The real mark: al ma on its yellow sun, from the brand kit. On wide screens
   it sits in the soft left band of the carousel, clear of the photograph;
   on phones it heads the copy instead. */
.hero-logo {
  width: clamp(8.5rem, 15vw, 12.5rem);
  height: auto;
}

.hero-logo-over {
  position: absolute;
  left: calc(var(--gutter) * 0.55);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(10rem, 19vw, 17.5rem);
  filter: drop-shadow(0 6px 18px rgba(36, 33, 33, 0.35));
}

.hero-logo-inline {
  display: none;
  margin-bottom: var(--s5);
}

.hero-copy .eyebrow {
  font-size: 1.44rem;
  letter-spacing: 0.14em;
}

.hero-copy .display {
  font-size: clamp(3rem, 8vw, 7rem);
}

.hero-copy .lede {
  margin-top: var(--s2);
}

@media (max-width: 760px) {
  .hero-logo-over {
    display: none;
  }

  .hero-logo-inline {
    display: block;
  }

  .hero-copy .eyebrow {
    font-size: 1.05rem;
  }
}

@media (max-width: 760px) {
  .hero-bleed .photo {
    height: auto;
    min-height: 16rem;
    max-height: 52vh;
    aspect-ratio: 4 / 3;
  }
}

/* The hero on inner pages: a statement set large, a photograph offset below
   and to the right so it crosses into the next band. */

.hero-inner {
  padding-top: var(--rhythm-tight);
}

.hero-inner .title {
  max-width: 16ch;
}

.hero-inner .lede {
  max-width: 50ch;
}

.hero-offset {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: end;
}

.hero-offset .photo {
  --ratio: 4 / 5;
  margin-bottom: calc(var(--rhythm) * -0.75);
  position: relative;
  z-index: 2;
}

.hero-offset + .section {
  padding-top: calc(var(--rhythm) * 0.75 + var(--rhythm-tight));
}

@media (max-width: 760px) {
  .hero-offset {
    grid-template-columns: 1fr;
  }

  .hero-offset .photo {
    --ratio: 16 / 10;
    margin-bottom: calc(var(--rhythm-tight) * -1);
    width: 88%;
    margin-left: auto;
  }

  .hero-offset + .section {
    padding-top: calc(var(--rhythm-tight) * 2);
  }
}

/* ---- The mark with its sun ---- */

.brand-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--s6);
}

/* The sun stands beside the wordmark, never behind it, so every letter reads. */
.brand-sun {
  flex: none;
  width: clamp(3.5rem, 6vw, 5rem);
  aspect-ratio: 1;
  background: var(--mustard);
  border-radius: 56% 44% 49% 51% / 47% 53% 47% 53%;
  opacity: 0.95;
  pointer-events: none;
  position: relative;
}

.brand-sun::after {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 185, 53, 0.4), transparent 72%);
}

/* The wordmark is carried as a luminance mask (white letterforms on black)
   so it takes its colour from the page and stays exact at any size. */
.brand-lockup {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(12rem, 24vw, 19rem);
  aspect-ratio: 560 / 443;
  background-color: var(--red);
  -webkit-mask-source-type: luminance;
  mask-mode: luminance;
  -webkit-mask-image: url("/_next/image?url=https%3A%2F%2Flovable-crab-328.convex.cloud%2Fapi%2Fstorage%2F1bd799a7-9e5a-4385-8660-6741e4469082&w=1920&q=75");
  mask-image: url("/_next/image?url=https%3A%2F%2Flovable-crab-328.convex.cloud%2Fapi%2Fstorage%2F1bd799a7-9e5a-4385-8660-6741e4469082&w=1920&q=75");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

[data-arrived] .brand-sun {
  animation: sunrise 9s ease-in-out infinite alternate;
}

@keyframes sunrise {
  from {
    transform: scale(0.96);
    opacity: 0.82;
  }
  to {
    transform: scale(1.04);
    opacity: 1;
  }
}

.brand-stage-small {
  margin-inline: auto;
  margin-bottom: var(--s7);
}

.brand-stage-small .brand-lockup {
  width: clamp(11rem, 22vw, 15rem);
}

.brand-stage-small .brand-sun {
  width: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---- The welcome statement under the hero: words only, set narrow ---- */

.named {
  padding-top: var(--rhythm-tight);
}

.named .statement {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight: 700;
  max-width: none;
  text-wrap: initial;
}

.named .sub {
  max-width: 52ch;
}

.named .prose {
  max-width: 70ch;
}

#name-heading {
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

/* ---- Our story: the founders, then the pillars ---- */

/* Catherine on the left, Heidi on the right: each a column of photograph,
   name, and story. */
.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rhythm-tight) var(--col-gap);
  align-items: start;
  margin-top: var(--s7);
}

.founder {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.founder > * {
  min-width: 0;
}

.founder-photo {
  --ratio: 4 / 5;
}

.founder-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.founder-role {
  font-family: var(--header);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: var(--s2) 0 var(--s5);
}

.founder-copy .prose {
  max-width: 62ch;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--col-gap);
  margin-top: var(--s7);
}

.pillar h3 {
  font-size: 1.35rem;
  margin-bottom: var(--s3);
}

.pillar p {
  max-width: 52ch;
}

/* Three across on a wide screen, one under another on a phone. */
.pillars-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s5), 3vw, var(--s8));
}

.pillars-three .pillar p {
  max-width: none;
}

/* The mission: each column opens with a small sun. */
.pillars-sun .pillar::before {
  content: "";
  display: block;
  width: 1.6rem;
  aspect-ratio: 1;
  background: var(--mustard);
  border-radius: 56% 44% 49% 51% / 47% 53% 47% 53%;
  margin-bottom: var(--s4);
}

/* The impact: each column opens with a brick rule. */
.pillars-ruled .pillar {
  border-top: 2px solid var(--red);
  padding-top: var(--s4);
}

/* The vision in the cellar band: the statement and its paragraph on the
   left, the two worlds stacked on the right under mustard rules. */
.vision {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: start;
}

.vision > * {
  min-width: 0;
}

.vision-intro {
  margin-top: var(--s5);
  max-width: 56ch;
  font-size: 1.05rem;
}

.vision-worlds {
  display: grid;
  gap: var(--s6);
  padding-top: var(--s7);
}

.vision-worlds .pillar {
  border-top: 1px solid var(--mustard);
  padding-top: var(--s4);
}

.vision-worlds .pillar h3 {
  color: var(--mustard);
  font-size: 1.2rem;
}

.vision-worlds .pillar p {
  max-width: none;
}

@media (max-width: 860px) {
  .pillars-three,
  .vision {
    grid-template-columns: 1fr;
  }

  .vision-worlds {
    padding-top: 0;
  }
}

.prose-wide {
  max-width: 72ch;
  margin-top: var(--s5);
  font-size: 1.05rem;
}

.route-story .hero-inner .title {
  max-width: 20ch;
}

@media (max-width: 760px) {
  .founders {
    grid-template-columns: 1fr;
    gap: var(--rhythm);
  }

  .founder-photo {
    max-width: 24rem;
  }
}

/* ---- The story band: a statement beside a stagger of photographs ----
   Three frames at three sizes that step down and across the band without
   ever covering one another. */

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--col-gap);
  align-items: start;
}

.story-copy {
  position: sticky;
  top: var(--s6);
}

.stagger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: var(--s4);
}

.stagger .photo:nth-child(1) {
  grid-column: 1 / 9;
  grid-row: 1 / 3;
  --ratio: 4 / 5;
}

.stagger .photo:nth-child(2) {
  grid-column: 9 / 13;
  grid-row: 2 / 4;
  --ratio: 1 / 1;
  align-self: start;
  margin-top: var(--s7);
}

.stagger .photo:nth-child(3) {
  grid-column: 3 / 8;
  grid-row: 3 / 5;
  --ratio: 5 / 4;
  margin-top: var(--s5);
}

.story-reverse {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.story-reverse .story-copy {
  order: 2;
}

@media (max-width: 860px) {
  .story,
  .story-reverse {
    grid-template-columns: 1fr;
  }

  .story-copy,
  .story-reverse .story-copy {
    position: static;
    order: 0;
  }
}

/* ---- The cellar band: one per page, Alma Black, a quotation set large ---- */

.cellar {
  background: var(--cellar-bg);
  color: var(--cellar-fg);
  --fg: var(--cellar-fg);
  --fg-soft: var(--cellar-fg);
  --muted: var(--cellar-muted);
  --line: var(--cellar-line);
  --line-strong: rgba(237, 232, 216, 0.4);
  --bg: var(--cellar-bg);
  --bg-raise: #2f2a29;
  --bg-sink: #1c1919;
  position: relative;
  overflow: hidden;
}

.cellar::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40%;
  height: 80%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(178, 74, 59, 0.28), transparent 70%);
  pointer-events: none;
}

[data-arrived] .cellar::before {
  animation: candle 7s ease-in-out infinite alternate;
}

@keyframes candle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

.cellar .wrap,
.cellar .wrap-narrow {
  position: relative;
}

.cellar .eyebrow::before {
  background: var(--mustard);
}

.cellar .button {
  border-color: var(--sand);
  color: var(--sand);
}

.cellar .button:hover {
  background: var(--sand);
  color: var(--alma-black);
}

.cellar .text-link {
  color: var(--mustard);
}

.cellar .text-link:hover {
  color: var(--sand);
}

.quote {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  max-width: 36ch;
  color: var(--cellar-fg);
  text-wrap: balance;
}

.quote-mark {
  display: block;
  font-family: var(--header);
  font-style: normal;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--red);
  margin-bottom: var(--s5);
}

.quote-by + .prose {
  margin-top: var(--s6);
}

.quote-by {
  margin-top: var(--s6);
  font-family: var(--header);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cellar-muted);
}

.cellar-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--col-gap);
  align-items: center;
}

.route-home .cellar {
  padding-top: var(--rhythm-tight);
}

.route-home .cellar .prose {
  max-width: 68ch;
}

.quote-by-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--mustard);
  padding-bottom: 2px;
}

.quote-by-link:hover {
  color: var(--mustard);
}

.cellar-grid .photo {
  --ratio: 4 / 5;
  width: 78%;
  margin-left: auto;
}

@media (max-width: 860px) {
  .cellar-grid {
    grid-template-columns: 1fr;
  }

  .cellar-grid .photo {
    width: 70%;
    margin-inline: auto 0;
  }
}

/* ---- The index: the ways in, as one tall photograph and a list ---- */

.index {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--col-gap);
  align-items: start;
}

.index-photo {
  position: sticky;
  top: var(--s6);
  --ratio: 3 / 4;
}

.index-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.index-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s5);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.index-item h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.index-item .index-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: var(--s3);
}

.index-item .text-link {
  display: inline-block;
  margin-top: var(--s4);
}

@media (max-width: 860px) {
  .index {
    grid-template-columns: 1fr;
  }

  .index-photo {
    position: static;
    --ratio: 16 / 9;
  }

  .index-item {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}

/* ---- The spread: two photographs and a short text between them ---- */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--col-gap);
  align-items: center;
}

.spread .photo:first-child {
  --ratio: 3 / 4;
}

.spread .photo:last-child {
  --ratio: 1 / 1;
  margin-top: var(--s8);
}

.spread-copy .prose {
  max-width: 34ch;
}

@media (max-width: 860px) {
  .spread {
    grid-template-columns: 1fr 1fr;
  }

  .spread-copy {
    grid-column: 1 / -1;
    order: -1;
  }

  .spread .photo:last-child {
    margin-top: var(--s6);
  }
}

/* ---- The tagline strip ---- */

.strip {
  border-block: 1px solid var(--line);
  padding-block: var(--s5);
  font-family: var(--header);
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strip span + span::before {
  content: "\2609";
  color: var(--mustard);
  margin-inline: var(--s5);
}

@media (max-width: 760px) {
  .strip {
    white-space: normal;
    line-height: 2;
  }
}

/* ---- The signup band on every page ---- */

.signup {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--col-gap);
  align-items: center;
}

.signup .statement {
  max-width: 18ch;
}

@media (max-width: 860px) {
  .signup {
    grid-template-columns: 1fr;
  }
}

/* ---- Cards (used sparingly now) ---- */

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.section-raise .card {
  background: var(--bg);
}

.card-heading {
  font-size: 1.55rem;
}

.card-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.card .text-link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--s3);
}

/* ---- Rows (hours, facts) ---- */

.rows {
  display: grid;
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}

.row-key {
  font-family: var(--header);
  font-size: 1.1rem;
  color: var(--fg);
}

.row-value {
  color: var(--fg-soft);
}

@media (max-width: 600px) {
  .row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

/* ---- The week (Visit): every day once, set large, one link each ---- */

.week {
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
}

.week-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--col-gap);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.week-item > * {
  min-width: 0;
}

.week-when {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  max-width: 14ch;
}

.week-note {
  font-family: var(--header);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: var(--s3);
}

.week-title {
  font-family: var(--header);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--fg);
}

.week-text {
  max-width: var(--measure);
  margin-top: var(--s3);
}

.week-what .text-link {
  display: inline-block;
  margin-top: var(--s4);
}

.week-actions {
  margin-top: var(--s7);
}

@media (max-width: 760px) {
  .week-item {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}

/* ---- Shop, while the online shop is still to come ---- */

.shop-note {
  max-width: 60ch;
}

.hero-inner .shop-title {
  max-width: none;
}

.shop-note .text-link {
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}

.shop-photo {
  padding-bottom: var(--rhythm);
}

/* The one photograph on the Shop page is shown whole, at its own shape,
   centred and generous — never cropped. */
.photo-wide {
  aspect-ratio: auto;
  width: min(100%, 44rem);
  margin-inline: auto;
}

.photo-wide img {
  height: auto;
  object-fit: contain;
}

/* The footer: one horizontal line of links (the same pages as the header,
   then Open in Maps, Instagram, Pinterest), and the base line beneath it. */
.footer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) clamp(var(--s4), 2vw, var(--s6));
  font-family: var(--header);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-line a {
  white-space: nowrap;
  padding: var(--s1) 0;
  border-bottom: 1px solid transparent;
}

.footer-line a:hover {
  border-bottom-color: var(--line-strong);
}

.footer-sep {
  width: 1px;
  height: 1rem;
  background: var(--line-strong);
}

.footer-base {
  margin-top: var(--s4);
  padding-top: var(--s4);
}

@media (max-width: 760px) {
  .footer-sep {
    display: none;
  }
}

/* ---- Menu ---- */

.menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s6), 6vw, var(--s9));
  align-items: start;
}

.menu-side {
  position: sticky;
  top: var(--s6);
}

.menu-side .photo {
  --ratio: 4 / 5;
}

.menu-group + .menu-group {
  margin-top: var(--s7);
}

.menu-heading {
  font-family: var(--header);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s3);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}

.menu-name {
  font-family: var(--header);
  font-size: 1.15rem;
  color: var(--fg);
}

.menu-price {
  font-variant-numeric: tabular-nums;
  color: var(--fg-soft);
  flex: none;
}

@media (max-width: 860px) {
  .menu-layout {
    grid-template-columns: 1fr;
  }

  .menu-side {
    position: static;
  }
}

/* ---- Events ---- */

.events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s5);
}

.event {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.section-raise .event {
  background: var(--bg);
}

.event .photo {
  --ratio: 4 / 5;
}

.event-when {
  font-family: var(--header);
  font-size: 1.05rem;
  color: var(--red);
}

.event .note {
  margin-top: auto;
}

/* ---- Experiences (the rentals): a ledger, with a photograph beside each ---- */

.experience {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(var(--s5), 4vw, var(--s8));
  padding-block: var(--s7);
  border-top: 1px solid var(--line);
  align-items: start;
}

.experience:last-child {
  border-bottom: 1px solid var(--line);
}

.experience-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}

.experience-meta {
  color: var(--red);
  font-family: var(--header);
  font-size: 1rem;
  margin-top: var(--s4);
}

.experience .actions {
  margin-top: var(--s5);
}

.experience .photo {
  --ratio: 4 / 3;
}

.experience:nth-child(even) .photo {
  --ratio: 1 / 1;
  width: 80%;
  margin-left: auto;
}

@media (max-width: 860px) {
  .experience {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .experience:nth-child(even) .photo {
    width: 100%;
  }
}

/* ---- Forms and native embeds ---- */

.form-panel {
  padding: clamp(var(--s5), 3vw, var(--s7));
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.section-raise .form-panel {
  background: var(--bg);
}

.form-panel h2 {
  margin-bottom: var(--s5);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s6), 5vw, var(--s9));
  align-items: start;
}

.form-layout > div:first-child {
  position: sticky;
  top: var(--s6);
}

@media (max-width: 860px) {
  .form-layout {
    grid-template-columns: 1fr;
  }

  .form-layout > div:first-child {
    position: static;
  }
}

.embed {
  min-height: 2rem;
}

.cloud-form {
  display: grid;
  gap: var(--s5);
}

.field {
  display: grid;
  gap: var(--s2);
}

.field-label {
  font-family: var(--header);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-input {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-input::placeholder {
  color: var(--muted);
}

.field-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--glow);
}

textarea.field-input {
  min-height: 8rem;
  resize: vertical;
}

select.field-input {
  appearance: none;
  -webkit-appearance: none;
}

input[type="checkbox"].field-input,
input[type="radio"].field-input {
  width: auto;
  accent-color: var(--red);
}

.field-note {
  color: var(--muted);
  font-size: 0.95rem;
}

.shop-table {
  min-height: 4rem;
}

.shop-empty {
  margin-top: var(--s5);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sink);
  padding-block: var(--s5);
  color: var(--fg-soft);
  --muted: var(--fg-soft);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s5) var(--s6);
  align-items: start;
}

.footer-mark {
  display: inline-block;
  line-height: 0;
}

.footer-mark img {
  height: 4.25rem;
  width: auto;
}

.footer-tagline {
  font-family: var(--header);
  font-size: 1.05rem;
  color: var(--fg-soft);
  margin-top: var(--s4);
}

.footer-heading {
  font-family: var(--header);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--s3);
}

.site-footer a {
  color: var(--fg-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--fg);
}

.site-footer p + p {
  margin-top: var(--s2);
}

.footer-nav {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.footer-name {
  color: var(--muted);
}

.footer-credit {
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-small {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  font-size: 0.8rem;
}

.footer-small button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- The invitation popup: the Join the Party form, once per visitor ---- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(36, 33, 33, 0.62);
}

.popup[data-open] {
  display: flex;
}

.popup-card {
  position: relative;
  width: min(100%, 46rem);
  max-height: calc(100vh - 2 * var(--s4));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(36, 33, 33, 0.35);
  animation: popup-in 0.45s var(--ease) both;
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.popup-art {
  background: var(--cellar-bg);
  color: var(--cellar-fg);
  padding: clamp(var(--s4), 3vw, var(--s6));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s6);
  position: relative;
  overflow: hidden;
}

.popup-art::before {
  content: "";
  position: absolute;
  right: var(--s4);
  top: var(--s4);
  width: 2.75rem;
  aspect-ratio: 1;
  background: var(--mustard);
  border-radius: 56% 44% 49% 51% / 47% 53% 47% 53%;
  opacity: 0.95;
}

.popup-art > * {
  position: relative;
}

.popup-art .eyebrow {
  color: var(--cellar-muted);
  padding-right: 3.5rem;
}

.popup-art .eyebrow::before {
  background: var(--mustard);
}

.popup-art .statement {
  color: var(--cellar-fg);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.popup-art .popup-note {
  color: var(--cellar-muted);
  font-size: 0.9rem;
}

.popup-body {
  padding: clamp(var(--s4), 3vw, var(--s6));
}

.popup-body .cloud-form {
  gap: var(--s4);
}

.popup-body .sub {
  margin-top: 0;
  margin-bottom: var(--s5);
}

.popup-close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  font: 400 0.72rem var(--header);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  cursor: pointer;
}

@media (max-width: 760px) {
  .popup-card {
    grid-template-columns: 1fr;
  }

  .popup-art {
    padding-bottom: var(--s6);
  }
}

/* ---- The cookie notice ---- */

.cookie {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 25;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(36, 33, 33, 0.2);
  font-size: 0.85rem;
  color: var(--fg-soft);
  max-width: 34rem;
  margin-inline: auto;
}

.cookie[data-open] {
  display: flex;
}

.cookie p {
  max-width: 34ch;
}

.cookie .actions {
  margin-top: 0;
}

.cookie .button {
  padding: 0.6rem 1rem;
  font-size: 0.7rem;
}

/* ---- While the first page is on its way: the sun and one line, never an
   empty room between the header and the footer. ---- */

.loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  text-align: center;
  padding: var(--rhythm) var(--gutter);
}

.loading .brand-sun {
  animation: sunrise 1.8s ease-in-out infinite alternate;
}

.loading p {
  font-family: var(--header);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Route entrance and motion ---- */

.route[data-animate] {
  animation: route-in 0.5s var(--ease) both;
}

@keyframes route-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.not-found {
  padding-block: var(--s9);
  text-align: center;
}

/* ---- The September invitation pages ---- */

.gathering-card {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.gathering-when {
  font-family: var(--header);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--red);
  margin-top: var(--s4);
}

.gathering-doors {
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: var(--s2);
}

.gathering-card .lede {
  max-width: none;
  margin-inline: auto;
  margin-top: var(--s6);
}

.gathering-card .prose {
  max-width: 58ch;
  margin-inline: auto;
  margin-top: var(--s5);
}

.gathering-card .actions {
  justify-content: center;
  margin-top: var(--s6);
}

.gathering-sub {
  margin-top: var(--s6);
}

.gathering-card .eyebrow {
  justify-content: center;
}

@media (max-width: 700px) {
  .gathering-card {
    text-align: left;
  }

  .gathering-card .actions {
    justify-content: flex-start;
  }

  .gathering-card .eyebrow {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route[data-animate],
  [data-arrived] .cellar::before,
  [data-arrived] .brand-sun,
  .popup-card {
    animation: none;
  }

  .site-header,
  .brand-mark,
  .button,
  .site-link {
    transition: none;
  }
}