/* ==========================================================================
   La Baleine Beach House Collection — web design system
   Tokens: Brand Book v2 (Cream/Shell/Dune/Driftwood/Kelp, Marcellus +
   Cormorant italic + Inter). Module grammar: WEB-INSPIRATION.md (The Newt) —
   every module is a silent looping video. Motion: WEB-MOTION.md.
   ========================================================================== */

:root {
  /* Palette — derived from LABA LOGOS.pdf. No pure black anywhere. */
  --cream:      #F7F4EF;
  --shell:      #E4E2DD;
  --dune:       #C4BFB5;
  --driftwood:  #898377;
  --kelp:       #453E35;
  --duck-egg:   #A5C3C0;

  --ink:        var(--kelp);
  --ink-soft:   #6B6357;
  --hairline:   var(--dune);

  /* Type */
  --display: "Marcellus", "Times New Roman", serif;
  --accent:  "Cormorant Garamond", Georgia, serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale — 8px base */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 96px;  --s8: 128px;  --s9: 160px;

  --max: 1440px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-long: cubic-bezier(0.14, 0.4, 0.09, 1);   /* the 2.2s image settle */
  --t-micro: 400ms;
  --t-mid:   800ms;
  --t-slow:  1200ms;

  /* The single permitted shadow — soft, diffuse, warm */
  --lift: 0 12px 40px -12px rgba(62, 58, 52, 0.18);
}

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

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

body {
  margin: 0;
  /* reveal transforms and the off-canvas nav must never widen the page */
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

/* Big display tightens, small display opens (The Newt's rule). */
h1 {
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0.012em;
}
h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
}

p { margin: 0 0 var(--s3); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

/* prose lists (legal / long-form copy) */
.wrap--narrow ul:not(.moods):not(.unit__facts) {
  max-width: 62ch;
  margin: 0 0 var(--s3);
  padding-left: 1.1em;
  list-style: none;
}
.wrap--narrow ul:not(.moods):not(.unit__facts) li { position: relative; margin-bottom: 10px; }
.wrap--narrow ul:not(.moods):not(.unit__facts) li::before {
  content: "";
  position: absolute;
  left: -1.1em; top: 0.72em;
  width: 12px; height: 1px;
  background: var(--hairline);
}

/* Cormorant italic — the emotional voice. Never tracked, never uppercase. */
.accent {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* The small tracked-caps device. */
.eyebrow {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--driftwood);
  margin: 0 0 var(--s2);
}

.lede { font-size: 1.0625rem; color: var(--ink-soft); }

/* Unit-name grammar, mirroring the signage: tracked caps + serif-italic tier */
.unit-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.1;
}
/* the names are not labels — each carries its meaning, per the naming concept */
.unit-meaning {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--driftwood);
  margin: 6px 0 0;
}
.card .unit-meaning { margin-bottom: var(--s2); }

.unit-tier {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--driftwood);
  letter-spacing: 0;
  margin-left: 0.15em;
}

/* --------------------------------------------------------------------- links */

a { color: inherit; }

/* The real CTA: underlined tracked caps, not a pill. */
.cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.cta:hover, .cta:focus-visible { border-color: var(--ink); color: var(--ink); }

.cta--light { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }
.cta--light:hover, .cta--light:focus-visible { color: #fff; border-bottom-color: #fff; }

/* Exactly one solid button on the site: Book. */
.btn-book {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  background: var(--kelp);
  color: var(--cream);
  border: 1px solid var(--kelp);
  border-radius: 0;
  transition: background var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.btn-book:hover, .btn-book:focus-visible { background: transparent; color: var(--kelp); }

/* Header booking link — never a box. Same tracked caps as the nav, but the
   hairline underline is always on, so it reads as the primary action without
   punching a rectangle into the hero. (The solid button stays for in-page CTAs.)
   Selector is `.nav a.nav-book` so it outranks `.nav a`, which sets a
   transparent bottom border. */
.nav a.nav-book {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--t-micro) var(--ease);
}
.nav a.nav-book:hover, .nav a.nav-book:focus-visible { opacity: 0.7; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kelp); color: var(--cream); padding: var(--s2); z-index: 200;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- layout */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 900px; }

.band { padding: clamp(var(--s6), 9vw, var(--s9)) 0; }
.band--tint { background: var(--shell); }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* -------------------------------------------------------------------- header */

.site-head {
  position: relative;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.site-head--over {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(122px, 13vw, 168px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(var(--s3), 2.6vw, var(--s5)); }
.nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: currentColor; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }

.site-head--over .nav a, .site-head--over .brand { color: #fff; }

.nav-toggle {
  display: none;
  position: relative; z-index: 160;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: 500 0.6875rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.site-head--over .nav-toggle { color: #fff; }
.nav.is-open ~ .nav-toggle, .site-head--over .nav-toggle[aria-expanded="true"] { color: var(--ink); }

/* ---------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; background: var(--kelp); }
.hero--full { min-height: min(92svh, 900px); }
.hero--short { min-height: min(62svh, 620px); }

.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* slow drift: 1.06 -> 1 over ~14s, then holds */
  animation: drift 14s var(--ease) both;
}
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 25, 21, 0.34) 0%,
    rgba(28, 25, 21, 0.10) 38%,
    rgba(28, 25, 21, 0.44) 100%);
}

.hero__body {
  position: relative;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(var(--s7), 16vh, 200px) var(--gutter) clamp(var(--s5), 8vh, var(--s7));
  max-width: var(--max);
  margin: 0 auto;
  color: #fff;
}
.hero--full .hero__body { min-height: min(92svh, 900px); }
.hero--short .hero__body { min-height: min(62svh, 620px); }

.hero__body h1, .hero__body .eyebrow { color: #fff; }
.hero__body .eyebrow { color: rgba(255,255,255,.82); }
.hero__body h1 { max-width: 20ch; }
.hero__tag {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  margin: var(--s2) 0 0;
  color: rgba(255, 255, 255, 0.92);
}
/* align-items:center — the row mixes the solid button with hairline text links,
   which would otherwise stretch and sit on different baselines. */
.hero__ctas {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s4); margin-top: var(--s5);
}

/* ------------------------------------------------------------- utility strip */

.utility {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.75rem;
}
.utility__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.utility__status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  min-width: 0; color: var(--ink-soft);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--driftwood); flex: 0 0 auto;
}
.utility__links { display: flex; flex-wrap: wrap; gap: 8px var(--s3); min-width: 0; }
.utility__links a {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color var(--t-micro) var(--ease);
}
.utility__links a:hover { border-bottom-color: var(--ink); }
.utility__weather { display: flex; gap: var(--s2); color: var(--ink-soft); }
.utility__weather span { white-space: nowrap; }
.utility__weather b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------- module (Newt block) */

.module { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.module + .module { border-top: 1px solid var(--hairline); }
.module--tint { background: var(--shell); }

.module__media { position: relative; overflow: hidden; min-height: 708px; }
.module__media video, .module__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2.2s var(--ease-long);
}
.module__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(var(--s5), 6vw, var(--s7)) clamp(var(--s4), 5vw, var(--s7));
  min-height: 708px;
}
.module__copy > * { max-width: 46ch; }
/* Direct child only — a .cta nested inside a .hero__ctas row must not pick up
   this top margin / flex-start, or it drops below the button beside it. */
.module__copy > .cta { margin-top: var(--s4); align-self: flex-start; }
.module__copy h2 + p { margin-top: var(--s3); }

/* alternate sides */
.module--flip .module__media { order: 2; }

/* the 2.2s decelerated settle */
.module:hover .module__media video,
.module:hover .module__media img { transform: scale(1.045); }

/* -------------------------------------------------------------- editorial bits */

.definition {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s5) 0;
  text-align: center;
}
.definition__term {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.06em;
}
.definition__pos { font-family: var(--accent); font-style: italic; color: var(--driftwood); }
.definition__gloss { margin: var(--s2) auto 0; max-width: 48ch; color: var(--ink-soft); }

.moods {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(var(--s3), 4vw, var(--s6));
  list-style: none; margin: 0; padding: 0;
}
.moods li {
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  color: var(--driftwood);
}

.quote { text-align: center; max-width: 44ch; margin: 0 auto; }
.quote blockquote {
  margin: 0;
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.4;
}
.quote cite {
  display: block; margin-top: var(--s3);
  font-family: var(--text); font-style: normal;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--driftwood);
}

.section-head { margin-bottom: clamp(var(--s5), 6vw, var(--s7)); }
.section-head p { color: var(--ink-soft); }

/* --------------------------------------------------------------- unit gallery */

.unit { padding: clamp(var(--s6), 8vw, var(--s8)) 0; }
.unit + .unit { border-top: 1px solid var(--hairline); }
.unit--tint { background: var(--shell); }

.unit__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.unit__facts {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: 0.8125rem; color: var(--ink-soft);
}
.unit__facts li { display: flex; align-items: center; gap: 10px; }
.unit__facts li + li::before {
  content: ""; width: 1px; height: 12px; background: var(--hairline);
  margin-right: 8px; display: inline-block;
}
.unit__actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  gap: var(--s2);
}
.gallery figure { margin: 0; overflow: hidden; position: relative; aspect-ratio: 3 / 2; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2.2s var(--ease-long);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 2; }
.gallery button.gallery__more {
  grid-column: 1 / -1;
  justify-self: start;
  background: none; border: 0; padding: 0; margin-top: var(--s2);
  cursor: pointer; color: inherit;
  font: 500 0.75rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
  transition: border-color var(--t-micro) var(--ease);
}
.gallery button.gallery__more:hover { border-bottom-color: var(--ink); }
.gallery figure[hidden] { display: none; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
}
.card { display: flex; flex-direction: column; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--s3); }
.card__media img, .card__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 2.2s var(--ease-long);
}
.card:hover .card__media img, .card:hover .card__media video { transform: scale(1.05); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.9375rem; color: var(--ink-soft); }
.card .cta { margin-top: var(--s2); align-self: flex-start; }
.card__note {
  font-family: var(--accent); font-style: italic; color: var(--driftwood);
  font-size: 1rem;
}

/* The three accommodation categories on the homepage. They are a set, so they
   share a top rule and their links sit on one baseline — without margin-top:auto
   each link hung directly under its own paragraph and the three landed at three
   different heights, which is what made the block look unresolved. */
.cards--set { gap: var(--s4) var(--s6); margin-top: var(--s7); }
.cards--set .card {
  border-top: 1px solid var(--dune);
  padding-top: var(--s3);
}
.cards--set .card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  letter-spacing: 0.02em;
  margin: 0 0 var(--s2);
}
.cards--set .card p { max-width: 34ch; }
.cards--set .card .cta { margin-top: auto; padding-top: var(--s4); }

/* the lede belongs to the same measure as the cards, held to a readable width */
.lede--set { max-width: 58ch; margin-top: var(--s3); }

/* a quieter secondary note — used for the Elements Wellness pointer, which must
   not carry the same weight as LABALABA itself */
.aside {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.aside a { color: var(--ink); }

/* the two community projects are built but their photography is still to come */
.card__media--placeholder {
  display: grid;
  place-items: center;
  /* shallower than a real card image: an empty frame should hold the place,
     not dominate the section while we wait for the photography */
  aspect-ratio: 16 / 9;
  background: var(--shell);
  border: 1px solid var(--dune);
}
.card__media--placeholder span {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--driftwood);
}

/* Privacy page — Laura, 2026-09-08: font sizes and spacing were inconsistent,
   the hierarchy did not read, and the page needed to be prettier. One scale,
   one vertical rhythm, sections separated by rules rather than by guesswork.
   Scoped to .legal, which is on <main> — an earlier attempt put the class on a
   selector that does not exist on this page, so none of it applied. */
.legal .wrap--narrow { max-width: 720px; }
.legal .eyebrow { color: var(--driftwood); }
.legal h1 {
  font-size: clamp(2.125rem, 4.4vw, 3rem);
  line-height: 1.12;
  margin: var(--s2) 0 0;
}
.legal .lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: var(--s4) 0 var(--s3);
  max-width: 62ch;
}
.legal h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: var(--s7) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline);
}
.legal h3 {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  margin: var(--s4) 0 6px;
}
.legal p {
  font-size: 0.9375rem;
  line-height: 1.85;
  margin: 0 0 var(--s2);
  max-width: 68ch;
}
.legal h2 + p, .legal h3 + p { margin-top: 0; }
.legal ul { margin: 0 0 var(--s3); padding-left: 22px; }
.legal li { font-size: 0.9375rem; line-height: 1.85; margin-bottom: 8px; max-width: 66ch; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--hairline); text-decoration: none; }
.legal a:hover { border-bottom-color: var(--ink); }
.legal strong { font-weight: 500; }

/* MIRA & VEYA renders. Three images, no photography yet — shown as a set above
   the two unit cards, and labelled as renders so nobody mistakes them for rooms
   that have been shot. */
.renders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: var(--s6);
}
.renders figure { margin: 0; overflow: hidden; border: 1px solid var(--dune); }
.renders img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 2.2s var(--ease-long);
}
.renders figure:hover img { transform: scale(1.04); }
.renders__note {
  margin: var(--s2) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--driftwood);
}
@media (max-width: 860px) { .renders { grid-template-columns: 1fr 1fr; }
  .renders figure:first-child { grid-column: span 2; } }

/* Two small-print classes were losing the cascade to `.card p` (0,2,0 beats
   0,1,0), so unit meanings rendered at 15px instead of 17px wherever they sat
   inside a card. Raise the specificity rather than change either base rule. */
.card p.unit-meaning { font-size: 1.0625rem; }
.card p.card__note   { font-size: 1rem; }

/* An .aside that follows a three-column card grid inherits the narrow measure
   and reads as a footnote to the FIRST card rather than to the section. */
.aside--wide { max-width: 72ch; margin-top: var(--s6); }

/* --------------------------------------------------------------------- forms */

.form { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field--full > .btn-book { align-self: flex-start; }
.field label {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--driftwood);
}
.field input, .field select, .field textarea {
  font: 300 0.9375rem/1.6 var(--text);
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color var(--t-micro) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-bottom-color: var(--ink);
}
.field textarea { resize: vertical; min-height: 110px; }
.checks { display: flex; gap: var(--s4); flex-wrap: wrap; }
.checks label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.form__note { font-size: 0.8125rem; color: var(--ink-soft); }

.contact-grid {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(var(--s5), 7vw, var(--s8));
  align-items: start;
}
.contact-block + .contact-block { margin-top: var(--s5); }
.contact-block h3 { margin-bottom: var(--s2); }
.contact-block a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.contact-block a:hover { border-bottom-color: var(--ink); }

/* -------------------------------------------------------------------- footer */

.site-foot { background: var(--kelp); color: var(--shell); }
.site-foot a { color: var(--shell); }
/* A twelve-column field the four blocks hang from, all starting on the same
   line under a hairline. Laura, 2026-09-04: the footer read as leftover
   information rather than composition — the 1.2/1/1/1.4 columns were arbitrary
   and nothing shared a baseline. */
.foot-inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(var(--s6), 8vw, var(--s8)) var(--gutter) var(--s6);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s5);
  row-gap: var(--s6);
  align-items: start;
}
/* Laura, 2026-09-08: the home page keeps Location + Contact, every other page
   carries the Newsletter, so the block count varies. Spans are declared per
   count rather than per position — a fixed 4/3/2/3 left a hole on 2-block pages. */
.foot-inner > *:nth-child(1) { grid-column: span 4; }
.foot-inner > *:nth-child(2) { grid-column: span 4; }
.foot-inner > *:nth-child(3) { grid-column: span 4; }
/* two blocks: brand, then the newsletter with room to breathe */
.foot-inner > *:first-child:nth-last-child(2) { grid-column: span 5; }
.foot-inner > *:first-child:nth-last-child(2) ~ * { grid-column: span 5 / -1; }
.foot-inner > * > *:first-child { margin-top: 0; }
.site-foot img.foot-mark { width: 132px; margin-bottom: var(--s3); }
/* the strapline is a line of type, not a paragraph of filler */
.foot-inner > *:nth-child(1) p { max-width: 30ch; }
.site-foot h4 {
  font-family: var(--text); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dune); margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid rgba(228, 226, 221, 0.16);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-foot a:hover { border-bottom-color: var(--shell); }
.site-foot p, .site-foot li { font-size: 0.875rem; color: var(--dune); line-height: 1.75; }
.newsletter { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 180px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(228, 226, 221, 0.35);
  color: var(--cream); padding: 10px 0; font: 300 0.9375rem var(--text);
}
.newsletter input::placeholder { color: rgba(228, 226, 221, 0.55); }
.newsletter input:focus { outline: 0; border-bottom-color: var(--shell); }
.newsletter button {
  background: none; border: 0; cursor: pointer; color: var(--shell);
  font: 500 0.6875rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid rgba(228,226,221,.5);
}
.newsletter button:hover { border-bottom-color: var(--shell); }
.foot-base {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s3) var(--gutter) var(--s5);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  border-top: 1px solid rgba(228, 226, 221, 0.18);
  font-size: 0.75rem; color: var(--dune);
}
.social { display: flex; gap: var(--s3); }

/* ------------------------------------------------------------ scroll reveals */

/* Copy is visible by default — it only starts hidden once JS has confirmed it
   can reveal it again (html.js). No script, no throttled tab, no blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.js .reveal--left  { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal.is-in  { opacity: 1; transform: none; }


/* ------------------------------------------------------------ pull line */
/* One line that stands alone after a run of plain paragraphs — the sentence
   Laura wants remembered ("Five-star service, with the feeling of a home by
   the sea."). Italic accent, a short rule above, no more weight than that. */
.pull {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 30ch;
}

/* ---------------------------------------------------------- pinned reveal */
/* A band that is a window onto a picture pinned to the viewport. The page
   scrolls, the picture stays, so what shows through the window changes as
   you move — Laura, 2026-09-15, from designwellwithsarah.com: "I like that
   the image moves as you scroll down". clip-path on the band clips its fixed
   child, which is what makes this work on iOS, where background-attachment:
   fixed does not. Nothing ABOVE a .pin may carry a transform or filter, or
   the layer stops being fixed and the effect silently dies. */
.pin {
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
  min-height: 70vh;
  background: var(--shell);
}
.pin + .pin { border-top: 1px solid rgba(69, 62, 53, 0.18); }
.pin__layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pin__layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* a soft cream wash on the side the words sit, so ink stays comfortable on a
   bright sky without flattening the picture */
.pin__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 244, 239, 0.62) 0%, rgba(247, 244, 239, 0.30) 42%, rgba(247, 244, 239, 0) 68%);
}
.pin--center .pin__wash {
  background: radial-gradient(ellipse 52% 70% at 50% 55%, rgba(247, 244, 239, 0.62), rgba(247, 244, 239, 0) 100%);
}
.pin__copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 70vh;
  padding-top: clamp(var(--s6), 9vw, var(--s8));
  padding-bottom: clamp(var(--s6), 9vw, var(--s8));
}
.pin__copy > * { max-width: 46ch; }
.pin__copy h2 + p { margin-top: var(--s3); }
.pin--center .pin__copy { align-items: center; text-align: center; }
.pin--center .pin__copy > * { max-width: 52ch; }
.pin--center .hero__ctas { justify-content: center; }
@supports not (clip-path: inset(0)) { .pin__layer { position: absolute; } }

/* ----------------------------------------------------- the names, with emblems */
/* Linus, 16 Sep: the welcome-card drawings on the names block, revealed on
   hover. By default each emblem is a faint pencil underdrawing, so the row
   stays composed; under the cursor it is inked in — a sweep from left to
   right — and settles back to the underdrawing when you leave. The hover
   also darkens the meaning and draws a hairline under the card. */
.card--named { position: relative; padding-bottom: var(--s3); }
.card--named .emblem {
  position: relative;
  height: clamp(64px, 6vw, 88px);
  margin-bottom: var(--s3);
}
.card--named .emblem img {
  position: absolute; left: 0; bottom: 0;
  height: 100%; width: auto; max-width: 132px; object-fit: contain;
}
.card--named .emblem__ghost { opacity: 0.13; transition: opacity 0.9s var(--ease); }
.card--named .emblem__ink {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 60%);
          mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 0.7s var(--ease), mask-position 0.7s var(--ease), transform 0.9s var(--ease);
}
.card--named:hover .emblem__ink, .card--named:focus-within .emblem__ink {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transform: translateY(-3px);
  transition: -webkit-mask-position 1.3s var(--ease-long), mask-position 1.3s var(--ease-long), transform 1.3s var(--ease-long);
}
.card--named:hover .emblem__ghost { opacity: 0; }
.card--named .unit-meaning { transition: color 0.9s var(--ease); }
.card--named::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--dune);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.card--named:hover .unit-meaning { color: var(--ink); }
.card--named:hover::after { transform: scaleX(1); transition: transform 1.1s var(--ease-long); }
@media (hover: none) {
  /* no cursor: the drawing is simply there, at a quieter weight */
  .card--named .emblem__ghost { opacity: 0.7; }
  .card--named .emblem__ink { display: none; }
}
@supports not (mask-position: 0 0) { .card--named .emblem__ghost { opacity: 0.7; } .card--named .emblem__ink { display: none; } }

/* the definition + moods sit centred on the page, not in the left column */
.wrap--center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------- house pair (NOMA / BURI) */
/* Laura, 15 Sep 22:05: "one Buri and one Noma house ... follow that style, and
   rather than Sarah's crescent thing we use our awesome little drawings of the
   meaning of each room". Two cream panels, the room emblem where the crescent
   was, name, meaning, one plain line; the photograph arrives under the cursor.
   Lives on /collection under the wellness heading, below the listing. */
.pair {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: var(--s6);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--cream);
}
.pair__panel {
  position: relative; overflow: hidden;
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s7) var(--s5);
  color: var(--ink); text-decoration: none;
}
.pair__panel + .pair__panel { border-left: 1px solid var(--hairline); }
.pair__img {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1.1s var(--ease), transform 2.4s var(--ease-long);
}
.pair__img img { width: 100%; height: 100%; object-fit: cover; }
.pair__img::after { content: ""; position: absolute; inset: 0; background: rgba(69, 62, 53, 0.38); }
.pair__body { position: relative; z-index: 1; max-width: 36ch; transition: color 0.9s var(--ease); }
.pair__emblem {
  display: block; margin: 0 auto;
  width: clamp(88px, 9vw, 124px); height: auto;
  transition: filter 0.9s var(--ease);
}
.pair__name {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  letter-spacing: 0.16em; margin: var(--s4) 0 6px;
}
.pair__meaning {
  font: 400 0.6875rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--driftwood); margin: 0 0 var(--s3);
  transition: color 0.9s var(--ease);
}
.pair__line {
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5;
  color: var(--ink-soft); margin: 0;
  transition: color 0.9s var(--ease);
}
.pair__go {
  display: inline-block; margin-top: var(--s4); padding-bottom: 6px;
  font: 500 0.6875rem/1 var(--text); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--dune);
  transition: color 0.9s var(--ease), border-color 0.9s var(--ease);
}
.pair__panel:hover .pair__img, .pair__panel:focus-visible .pair__img { opacity: 1; transform: none; }
.pair__panel:hover .pair__body, .pair__panel:hover .pair__meaning, .pair__panel:hover .pair__line, .pair__panel:hover .pair__go,
.pair__panel:focus-visible .pair__body, .pair__panel:focus-visible .pair__meaning, .pair__panel:focus-visible .pair__line, .pair__panel:focus-visible .pair__go { color: #fff; border-color: rgba(255,255,255,0.6); }
.pair__panel:hover .pair__emblem, .pair__panel:focus-visible .pair__emblem { filter: brightness(0) invert(1); }
@media (hover: none) {
  /* no cursor: the photograph is simply there, the emblem white on it */
  .pair__img { opacity: 1; transform: none; }
  .pair__body, .pair__meaning, .pair__line, .pair__go { color: #fff; border-color: rgba(255,255,255,0.6); }
  .pair__emblem { filter: brightness(0) invert(1); }
}

/* ------------------------------------------------------------------ band */
/* One of Laura's texture clips, pinned to the viewport behind a single line
   of the house's own words — the site's design line, the welcome cards'
   closing line. Laura, 15 Sep 22:13: only the calmer light and shelter clips,
   in separate sections, reinterpreted as our own idea. The window moves over
   the clip as you scroll; the clip is encoded forward-then-back so it breathes. */
.band-tex {
  position: relative; overflow: hidden; clip-path: inset(0);
  min-height: clamp(300px, 42vh, 460px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--shell);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.band-tex__layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.band-tex__layer video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.band-tex__copy { position: relative; z-index: 1; padding: var(--s6) var(--gutter); max-width: 30ch; }
.band-tex__copy .eyebrow { color: var(--driftwood); }
.band-tex__line {
  margin: var(--s2) 0 0;
  font-family: var(--accent); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.2;
  color: var(--ink);
  text-shadow: 0 0 28px rgba(247, 244, 239, 0.95), 0 0 8px rgba(247, 244, 239, 0.85);
}
@supports not (clip-path: inset(0)) { .band-tex__layer { position: absolute; } }
.band-tex__line--light { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); }
.band-tex__line--light + .eyebrow, .band-tex__copy:has(.band-tex__line--light) .eyebrow { color: rgba(255,255,255,0.85); }

/* ------------------------------------------------------------- lightbox */
/* Laura, 19 Sep: on every listing page the images can be clicked for a closer
   look and paged through at full size. A native <dialog>, arrows, keyboard. */
.gallery__open { display: block; height: 100%; cursor: zoom-in; }
.lightbox { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; background: rgba(38, 33, 28, 0.94); color: #fff; }
.lightbox::backdrop { background: transparent; }
.lightbox__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(48px, 7vh, 72px) clamp(56px, 8vw, 96px); }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.45); opacity: 0; transform: scale(0.985); transition: opacity 0.5s var(--ease), transform 0.9s var(--ease-long); }
.lightbox__stage img.is-in { opacity: 1; transform: none; }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 300 0.8125rem/1.5 var(--text); color: rgba(255,255,255,0.78); letter-spacing: 0.04em; }
.lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); appearance: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 24px 16px; font-size: 1.75rem; line-height: 1; opacity: 0.75; transition: opacity var(--t-micro) var(--ease); }
.lightbox__btn:hover, .lightbox__btn:focus-visible { opacity: 1; outline: none; }
.lightbox__btn--prev { left: 8px; } .lightbox__btn--next { right: 8px; }
.lightbox__close { position: absolute; top: 14px; right: 18px; appearance: none; background: none; border: 0; color: #fff; cursor: pointer; font: 500 0.6875rem/1 var(--text); letter-spacing: 0.18em; text-transform: uppercase; padding: 12px; opacity: 0.8; }
.lightbox__close:hover { opacity: 1; }
@media (max-width: 560px) { .lightbox__stage { padding: 56px 12px 48px; } .lightbox__btn { padding: 24px 8px; } }

/* the two project cards on /paternoster carry the charities' own marks until
   there is photography — Laura, 15 Sep: "same as on the compendium, just the
   logos for now" */
.card__media--logo {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  background: #fff; border: 1px solid var(--dune);
  padding: var(--s4);
}
.card__media--logo img { position: static; width: auto; height: auto; max-width: min(260px, 80%); max-height: 84px; object-fit: contain; transition: none; }
.card:hover .card__media--logo img { transform: none; }

/* ---------------------------------------------------------- landing gate */
/* A cover before the first page — Laura, 15 Sep: "before getting to the
   actual website having a little landing page". Composed like our own hero
   (bottom-left, eyebrow, hairline) with the site's own definition device and
   the live seasonal note, so it is the book's cover and not somebody else's.
   Once per six hours per browser; opened synchronously from <head>
   (html.gate-open) so it never flashes. Click, scroll or a key goes through. */
.gate { display: none; }
html.gate-open { overflow: hidden; }
html.gate-open .gate {
  display: flex; align-items: flex-end;
  position: fixed; inset: 0; z-index: 400;
  background: var(--kelp); color: #fff;
  transition: opacity 1.2s var(--ease), visibility 0s linear 1.2s;
}
/* Leaving — option A, chosen 16 Sep: one continuous shot. The copy fades as
   one; the cover dissolves over 1.9 s while its picture keeps easing in, and
   the hero beneath settles from a touch larger. Nothing slides. */
html.gate-open .gate { transition: opacity 1.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.9s; }
html.gate-open .gate.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.is-leaving .gate__media video, .gate.is-leaving .gate__media img { transform: scale(1.07); transition: transform 2.6s var(--ease-long); }
.gate__foot, .gate__def, .gate__mark { transition: opacity 0.7s var(--ease), transform 1.2s var(--ease-long); }
.gate.is-leaving .gate__foot, .gate.is-leaving .gate__def, .gate.is-leaving .gate__mark { opacity: 0; transform: translateY(-6px); }
.gate.is-leaving .gate__rule { transform: scaleX(0); transform-origin: right; transition: transform 0.9s var(--ease-long); animation: none; }
/* the page beneath arrives: the hero settles again and its copy rises in */
.hero.is-arriving .hero__media video, .hero.is-arriving .hero__media img { animation: drift 3s var(--ease) both; }
.hero.is-arriving .hero__body > * { animation: rise 1.4s var(--ease) both; }
.hero.is-arriving .hero__body > *:nth-child(2) { animation-delay: 0.08s; }
.hero.is-arriving .hero__body > *:nth-child(3) { animation-delay: 0.16s; }
.hero.is-arriving .hero__body > *:nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.gate__media { position: absolute; inset: 0; }
.gate__media video, .gate__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: drift 16s var(--ease) both;
}
.gate__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 33, 28, 0.10) 0%, rgba(38, 33, 28, 0.30) 55%, rgba(38, 33, 28, 0.62) 100%);
}
.gate__body {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter) clamp(var(--s6), 8vh, var(--s8));
}
.gate__mark { width: clamp(150px, 16vw, 210px); height: auto; }
.gate__mark--lockup { width: clamp(200px, 20vw, 280px); }
/* the About hero line must sit on one line at desktop widths (Laura, 18 Sep) */
.hero__body h1.h1--long { font-size: clamp(1.75rem, 3.1vw, 2.75rem); max-width: none; }
.gate__def {
  margin: var(--s5) 0 0;
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.375rem); line-height: 1.25;
  color: rgba(255, 255, 255, 0.94);
}
.gate__def .pos {
  font-family: var(--text); font-style: normal; font-weight: 400;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); margin: 0 var(--s2);
}
.gate__rule {
  border: 0; height: 1px; margin: var(--s4) 0 var(--s3);
  background: rgba(255, 255, 255, 0.55);
  transform-origin: left; animation: draw 1.6s var(--ease) 0.4s both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gate__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.gate__note {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82);
}
.gate__note .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.8); flex: 0 0 auto; }
.gate__btn {
  appearance: none; background: none; border: 0; padding: 0 0 8px; cursor: pointer;
  font: 500 0.75rem/1 var(--text); letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transition: border-color var(--t-micro) var(--ease);
}
.gate__btn:hover, .gate__btn:focus-visible { border-bottom-color: #fff; outline: none; }
.gate__btn .arrow { display: inline-block; margin-left: 10px; transition: transform 0.6s var(--ease); }
.gate__btn:hover .arrow { transform: translateX(5px); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .module__media, .module__copy { min-height: 560px; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .foot-inner > * { grid-column: auto; }
  .foot-inner > *:nth-child(1) { grid-column: span 2; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* stacked layout — sideways reveals become vertical */
  .js .reveal--left, .js .reveal--right { transform: translateY(24px); }

  .nav {
    position: fixed; inset: 0;
    width: 100%; max-width: 100vw;
    padding: 0 var(--gutter);
    background: var(--cream); color: var(--ink);
    flex-direction: column; justify-content: center;
    gap: var(--s4);
    transform: translateY(-100%);
    transition: transform var(--t-mid) var(--ease);
    z-index: 150;
  }
  .nav.is-open { transform: none; }
  .site-head--over .nav a { color: var(--ink); }
  .nav a { font-size: 0.875rem; }
  .nav-book { font-size: 0.875rem; }

  .module { grid-template-columns: 1fr; }
  .module--flip .module__media { order: 0; }
  /* The panel's only children are absolutely positioned, so it has no in-flow
     content. Chromium stretches it to the column and derives the height from
     aspect-ratio; WebKit does not — it resolved to 0x0, so every module image
     and video was invisible on iPhone across the whole site (2026-09-04).
     Putting the media back in flow here gives the panel real height. */
  .module__media { min-height: 0; aspect-ratio: auto; }
  .module__media > img,
  .module__media > video {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .module__copy { min-height: 0; padding: var(--s5) var(--gutter) var(--s6); }
  .pin, .pin__copy { min-height: 62vh; }
  .pin__wash { background: linear-gradient(180deg, rgba(247,244,239,0.55), rgba(247,244,239,0.35)); }
  .pair { grid-template-columns: 1fr; }
  .pair__panel { min-height: 46vh; padding: var(--s6) var(--gutter); }
  .pair__panel + .pair__panel { border-left: 0; border-top: 1px solid var(--hairline); }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:nth-child(1) { grid-column: span 2; grid-row: auto; }
  .form { grid-template-columns: 1fr; }
  .hero__body { justify-content: flex-end; }
}

@media (max-width: 560px) {
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot-inner > * { grid-column: auto !important; }
  .utility__weather { display: none; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .pin__layer, .band-tex__layer { position: absolute; }
  .card--named .emblem__ghost { opacity: 0.7; }
  .card--named .emblem__ink { display: none; }
  .pair__img { opacity: 1; transform: none; }
  .pair__body, .pair__meaning, .pair__line, .pair__go { color: #fff; }
  .pair__emblem { filter: brightness(0) invert(1); }
  .gate__rule { animation: none; }
}

/* Round 5: retain a stable crop on first playback; no first-load-only zoom. */
.hero--steady .hero__media video { animation:none; transform:none; }
.hero__poster-hold {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .45s ease;}
.hero__poster-hold.is-playing {opacity:0;}

/* Center and link the existing room emblems. */
[aria-labelledby="m-names"] .cards {text-align:center;}
[aria-labelledby="m-names"] .emblem {margin-left:auto;margin-right:auto;}
a.card--named {text-decoration:none;color:inherit;}
a.card--named:focus-visible {outline:1px solid var(--kelp);outline-offset:10px;}

main[tabindex="-1"]:focus { outline:none; }

/* Center the paragraph boxes as well as their text in centered components. */
[aria-labelledby="m-names"] .card--named > p { margin-inline:auto; }
.thanks-copy > p { margin-inline:auto; }
/* Long activity choices must not widen the enquiry grid on narrow Safari. */
.contact-grid > *, .form > * { min-width:0; }
.field input,.field select,.field textarea { min-width:0; width:100%; }