/*
 * De Glazenkast — Verwerijstraat 28, Middelburg
 *
 * Two grounds only: paper (warm off-white) and bark (deep brown). Everything
 * else is type, hairlines and photography. Radius stays at 4px throughout —
 * anything rounder reads as a template.
 *
 * Breakpoints, used in this order throughout: 640px, 768px, 1024px.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  --paper: oklch(0.9771 0.0074 80.72);  /* #FAF7F2 */
  --shell: oklch(0.945 0.0148 80.71);   /* #F2ECE2 */
  --stone: oklch(0.9011 0.0201 77.31);  /* #E6DDD0 */
  --ink:   oklch(0.302 0.0308 51.66);   /* #3B2A20 */
  --body:  oklch(0.4456 0.05 49.76);    /* #6B4C3B */
  --bark:  oklch(0.4012 0.0538 47.97);  /* #603F2E */
  --brass: oklch(0.5646 0.0873 63.26);  /* #9A6A3C */

  --font-display: "Baskervville", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 86rem;
  --gutter: 1.5rem;
}

@media (min-width: 768px) {
  :root { --gutter: 2.5rem; }
}

/* ── Reset ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Scroll is locked while the intro curtain plays, and while the mobile menu
   or the lightbox is open. */
html.curtain-active,
html.is-locked { overflow: hidden; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
table { border-collapse: collapse; }

::selection { background-color: var(--bark); color: var(--paper); }

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

/* ── Small utilities ─────────────────────────────────────────────────── */

/* Prices, areas and years line up in columns. */
.tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 6rem; }
@media (min-width: 768px) { .section { padding-block: 9rem; } }

/* Leaves room for the fixed bar when jumping to an anchor. */
.anchor { scroll-margin-top: 5rem; }

.hairline {
  height: 1px;
  width: 100%;
  background-color: color-mix(in oklch, var(--ink) 15%, transparent);
}
.hairline--light { background-color: color-mix(in oklch, var(--paper) 20%, transparent); }

.caption {
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--body) 65%, transparent);
}

/* ── Motion ──────────────────────────────────────────────────────────── */

/* Scroll reveal: the element rises into place once, on first intersection. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal[data-shown="true"] { opacity: 1; transform: none; }

/* Photography wipes open from the bottom instead of fading. */
.reveal-image {
  clip-path: inset(14% 0 0 0);
  opacity: 0;
  transition:
    clip-path 1200ms var(--ease),
    opacity 800ms ease-out;
  will-change: clip-path, opacity;
}
.reveal-image[data-shown="true"] { clip-path: inset(0 0 0 0); opacity: 1; }

/* Display headings set in lines that stagger up behind a mask. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--ease);
}
[data-shown="true"] > .line-mask > span { transform: none; }

/* A rule that draws itself across the section. */
.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease);
}
.rule-draw[data-shown="true"] { transform: scaleX(1); }

/* Understated link underline that grows from the left. */
.link-rule { position: relative; }
.link-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 500ms var(--ease);
}
.link-rule:hover::after,
.link-rule:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Drifts a full-bleed image against the scroll. The inner element is pulled
   past the frame by script.js so no edge is ever exposed; with no JS it simply
   sits flush. */
.parallax { position: relative; overflow: hidden; }
.parallax__inner { position: absolute; inset: 0; will-change: transform; }
.parallax__inner img { height: 100%; width: 100%; object-fit: cover; }

/* ── Intro curtain ───────────────────────────────────────────────────── */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  animation: curtain-lift 900ms cubic-bezier(0.76, 0, 0.24, 1) 1275ms forwards;
}
.no-curtain .curtain { display: none; }

.curtain p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.75rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.curtain span {
  display: inline-block;
  opacity: 0;
  animation: curtain-letter 620ms var(--ease) calc(var(--i) * 55ms) forwards;
}

@keyframes curtain-letter {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: none; }
}

@keyframes curtain-lift {
  to { transform: translateY(-101%); }
}

/* ── Navigation ──────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 500ms, color 500ms, border-color 500ms;
}
.nav[data-settled="true"] {
  background-color: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  color: var(--ink);
  border-bottom-color: color-mix(in oklch, var(--ink) 10%, transparent);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  transition: opacity 300ms;
}
.nav__brand:hover { opacity: 0.7; }
@media (min-width: 768px) { .nav__brand { font-size: 1.25rem; } }

.nav__logo { height: 1.75rem; width: auto; display: block; }

.nav__links { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 768px) { .nav__links { display: flex; } }
.nav__links a {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  opacity: 0.8;
  transition: opacity 300ms;
}
.nav__links a:hover { opacity: 1; }

.nav__actions { display: flex; align-items: center; gap: 1.25rem; }

.nav__cta {
  display: none;
  border: 1px solid color-mix(in oklch, var(--paper) 45%, transparent);
  border-radius: 4px;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  transition: background-color 400ms, color 400ms, border-color 400ms;
}
@media (min-width: 640px) { .nav__cta { display: inline-block; } }
.nav__cta:hover { border-color: var(--paper); background-color: var(--paper); color: var(--ink); }
.nav[data-settled="true"] .nav__cta { border-color: color-mix(in oklch, var(--ink) 25%, transparent); }
.nav[data-settled="true"] .nav__cta:hover { border-color: var(--ink); background-color: var(--ink); color: var(--paper); }

.nav__toggle { font-size: 0.8125rem; letter-spacing: 0.02em; }
@media (min-width: 768px) { .nav__toggle { display: none; } }

/* Full-screen menu, phones only. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  background-color: var(--paper);
  color: var(--ink);
}
.menu[data-open="true"] { display: flex; }
@media (min-width: 768px) { .menu[data-open="true"] { display: none; } }

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
}
.menu__brand { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-size: 1.125rem; }

.menu__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.5rem 6rem;
}
.menu__nav a {
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  padding-block: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background-color: var(--ink);
}
.hero__image { position: absolute; inset: 0; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    color-mix(in oklch, var(--ink) 80%, transparent),
    color-mix(in oklch, var(--ink) 15%, transparent) 50%,
    color-mix(in oklch, var(--ink) 35%, transparent)
  );
}

.hero__content { position: relative; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .hero__content { padding-bottom: 5rem; } }

.hero__eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}

.hero__title {
  margin-top: 1.5rem;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.6vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.hero__foot {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hero__lede {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: color-mix(in oklch, var(--paper) 80%, transparent);
}

.hero__link { display: none; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--paper); }
@media (min-width: 768px) { .hero__link { display: block; } }

/* ── Chapter marks and headings ──────────────────────────────────────── */

.mark {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: color-mix(in oklch, var(--body) 70%, transparent);
}
.mark__num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: normal;
  color: var(--brass);
}
.mark__rule { height: 1px; width: 2rem; background-color: currentColor; opacity: 0.4; }

.mark--light { color: color-mix(in oklch, var(--paper) 60%, transparent); }
.mark--light .mark__num { color: color-mix(in oklch, var(--paper) 80%, transparent); }

.heading {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.1vw, 2.875rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.heading--lg {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.heading--light { color: var(--paper); }

.prose {
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--body);
}
.prose > p + p { margin-top: 1.75rem; }

/* Two-column body: a heading at 0.42, the text at 0.58. */
.split { display: grid; gap: 3rem; margin-top: 3rem; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 0.42fr 0.58fr; gap: 5rem; }
}
.split--gap-lg { gap: 3rem; }
.split--gap-xl { gap: 3.5rem; }

/* A block of text with something flush right beside it. */
.split-end { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
  .split-end { grid-template-columns: 1fr auto; gap: 5rem; }
}

/* ── The facade ──────────────────────────────────────────────────────── */

.band-tall { height: 62vh; min-height: 24rem; width: 100%; }
@media (min-width: 768px) { .band-tall { height: 86vh; } }

.band-mid { height: 48vh; min-height: 18rem; width: 100%; }
@media (min-width: 768px) { .band-mid { height: 62vh; } }
@media (min-width: 768px) { .band-mid--tall { height: 68vh; } }

.facts { margin-top: 3rem; display: grid; gap: 3rem; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts dt { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.facts dd { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.8; color: var(--body); }

/* ── The three homes ─────────────────────────────────────────────────── */

.woningen { padding-bottom: 6rem; }
@media (min-width: 768px) { .woningen { padding-bottom: 8rem; } }

.woningen__intro { gap: 2.5rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .woningen__intro { padding-bottom: 6rem; } }
@media (min-width: 1024px) { .woningen__intro { gap: 5rem; } }

.apartments { display: flex; flex-direction: column; gap: 5rem; }
@media (min-width: 768px) { .apartments { gap: 7rem; } }

.apartment {
  border-top: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  padding-top: 3.5rem;
}
@media (min-width: 768px) { .apartment { padding-top: 5rem; } }

.apartment__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .apartment__grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .apartment--reversed .apartment__grid { grid-template-columns: 0.85fr 1.15fr; }
  .apartment--reversed .apartment__figure { order: 2; }
  .apartment--reversed .apartment__caption { order: 1; }
}

.apartment__caption { display: flex; flex-direction: column; justify-content: center; }

.apartment__name {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.apartment__body {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--body);
}

.apartment__figures {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
}
.apartment__stat { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.apartment__sqm { font-size: 0.8125rem; color: color-mix(in oklch, var(--body) 70%, transparent); }

/* Photographs ease closer on hover, never snap. */
.figure {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--stone);
}
.figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease);
}
.figure:hover img,
.figure:focus-visible img { transform: scale(1.045); }

button.figure { padding: 0; text-align: left; }
button.figure:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--brass);
}

/* Horizontal film strip of supporting photographs. */
.strip {
  margin-top: 2.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip__track { display: flex; gap: 1rem; scroll-snap-type: x mandatory; }
.strip__item { flex: 0 0 auto; width: 72vw; scroll-snap-align: start; }
@media (min-width: 640px)  { .strip__item { width: 42vw; } }
@media (min-width: 1024px) { .strip__item { width: 26rem; } }

/* ── Prices ──────────────────────────────────────────────────────────── */

.band-dark { background-color: var(--bark); color: var(--paper); }
.band-shell { background-color: var(--shell); }

.prices__head { margin-top: 3.5rem; align-items: end; gap: 2.5rem; }
@media (min-width: 1024px) { .prices__head { gap: 5rem; } }

.prices__lede {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}

.price-card {
  flex-shrink: 0;
  border-top: 1px solid color-mix(in oklch, var(--paper) 25%, transparent);
  padding-top: 1.5rem;
}
@media (min-width: 1024px) { .price-card { text-align: right; } }
.price-card__meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: color-mix(in oklch, var(--paper) 55%, transparent);
}
.price-card__amount {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.price-card__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--paper) 60%, transparent);
}

/* The price ledger: hairlines and tabular figures, no cards. */
.offers {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  overflow-x: auto;
}

.offer { width: 100%; table-layout: fixed; text-align: left; }

/* The header labels are wider than a quarter of a phone screen at full
   tracking, so below 640px they tighten and the columns rebalance. */
.offer__c1 { width: 42%; }
.offer__c2 { width: 26%; }
.offer__c3 { width: 32%; }
.offer__c4 { width: 0; }
@media (max-width: 639px) {
  .offer thead th { letter-spacing: 0.08em; }
}
@media (min-width: 640px) {
  .offer__c1 { width: 46%; }
  .offer__c2 { width: 16%; }
  .offer__c3 { width: 22%; }
  .offer__c4 { width: 16%; }
}

.offer thead th {
  padding-bottom: 1.25rem;
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: color-mix(in oklch, var(--paper) 45%, transparent);
}

.offer tbody tr {
  border-top: 1px solid color-mix(in oklch, var(--paper) 15%, transparent);
  vertical-align: baseline;
  transition:
    background-color 500ms,
    opacity 900ms var(--ease),
    transform 900ms var(--ease);
}
.offer tbody tr:hover { background-color: color-mix(in oklch, var(--paper) 4%, transparent); }
.offer td { padding-block: 1.5rem; }

.offer th:nth-child(2), .offer td:nth-child(2),
.offer th:nth-child(3), .offer td:nth-child(3),
.offer th:nth-child(4), .offer td:nth-child(4) { text-align: right; }

.offer th:nth-child(2), .offer td:nth-child(2) { padding-right: 0.75rem; }
@media (min-width: 640px) {
  .offer th:nth-child(2), .offer td:nth-child(2),
  .offer th:nth-child(3), .offer td:nth-child(3) { padding-right: 1rem; }
}

/* The last column is a nicety, not a necessity — it goes first on phones. */
.offer th:nth-child(4), .offer td:nth-child(4) { display: none; }
@media (min-width: 640px) {
  .offer th:nth-child(4), .offer td:nth-child(4) { display: table-cell; }
}

.offer__units, .offer__price { font-family: var(--font-display); font-size: 1.125rem; color: var(--paper); }
@media (min-width: 640px) { .offer__units, .offer__price { font-size: 1.25rem; } }
@media (min-width: 768px) { .offer__units, .offer__price { font-size: 1.5rem; } }

.offer__area { font-size: 0.8125rem; color: color-mix(in oklch, var(--paper) 60%, transparent); }
@media (min-width: 640px) { .offer__area { font-size: 0.9375rem; } }
@media (min-width: 768px) { .offer__area { font-size: 1rem; } }

.offer__note { font-size: 0.8125rem; color: color-mix(in oklch, var(--paper) 55%, transparent); }

.prices__note {
  margin-top: 3rem;
  max-width: 44rem;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: color-mix(in oklch, var(--paper) 50%, transparent);
}

/* ── Wonen en werken ─────────────────────────────────────────────────── */

.uses-wrap { max-width: 38rem; }

.uses {
  margin-top: 2.5rem;
  border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
.uses li {
  display: grid;
  gap: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  padding-block: 1.5rem;
}
@media (min-width: 640px) { .uses li { grid-template-columns: 13rem 1fr; gap: 2rem; } }
.uses__title { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink); }
.uses__text { font-size: 0.9375rem; line-height: 1.8; color: var(--body); }

/* ── History ─────────────────────────────────────────────────────────── */

.history__lede {
  margin-top: 2rem;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--body);
}
.history__map { margin-top: 3rem; }

.timeline { border-top: 1px solid color-mix(in oklch, var(--ink) 15%, transparent); }
.timeline li {
  display: grid;
  gap: 0.5rem;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 15%, transparent);
  padding-block: 1.75rem;
}
@media (min-width: 640px) { .timeline li { grid-template-columns: 8.5rem 1fr; gap: 2rem; } }
.timeline__year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--brass);
}
.timeline__text { font-size: 0.9375rem; line-height: 1.85; color: var(--body); }

/* ── The city ────────────────────────────────────────────────────────── */

.city__photo { margin-top: 3rem; }

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact { gap: 3.5rem; }
@media (min-width: 1024px) { .contact { gap: 5rem; } }

.contact__lede {
  margin-top: 2rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}

.btn-outline {
  display: inline-block;
  margin-top: 2.5rem;
  border: 1px solid color-mix(in oklch, var(--paper) 40%, transparent);
  border-radius: 4px;
  padding: 0.875rem 1.75rem;
  font-size: 0.8125rem;
  transition: background-color 500ms, color 500ms, border-color 500ms;
}
.btn-outline:hover { border-color: var(--paper); background-color: var(--paper); color: var(--bark); }

.contact__details {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-top: 1px solid color-mix(in oklch, var(--paper) 25%, transparent);
  padding-top: 1.5rem;
}

.contact__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: color-mix(in oklch, var(--paper) 50%, transparent);
}
.contact__value {
  margin-top: 0.5rem;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--paper);
}
@media (min-width: 768px) { .contact__value { font-size: 1.875rem; } }

.colophon__rule { margin-top: 6rem; }

.colophon {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--paper) 50%, transparent);
}
@media (min-width: 768px) {
  .colophon { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ── Lightbox ────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  background-color: color-mix(in oklch, var(--ink) 96%, transparent);
  backdrop-filter: blur(4px);
}
.lightbox[data-open="true"] { display: flex; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}

.lightbox__stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter) 1.5rem;
  min-height: 0;
}
@media (min-width: 768px) { .lightbox__stage { padding-inline: 4rem; } }
.lightbox__stage img {
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--gutter) 2rem;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--paper) 70%, transparent);
}
.lightbox__caption { max-width: 36rem; line-height: 1.625; }
.lightbox__nav { display: flex; flex-shrink: 0; gap: 1.5rem; }
.lightbox button { transition: color 300ms; }
.lightbox button:hover { color: var(--paper); }

/* ── Anyone who asks for less motion gets a static page ──────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal-image,
  .line-mask > span,
  .rule-draw,
  .figure img,
  .offer tbody tr {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .curtain, .curtain span { animation: none !important; }
}