/*
 * COPY-BLOCKS -- the copy-writer's component sheet, one rule-set per fragment
 * under tools/copy_writer/components/. Tokens only for colour, space, type and
 * transition; raw values are reserved to geometry (widths, columns, ratios,
 * breakpoints). Served from /design/css/ on every parcel host; the parcel's
 * own tokens.css sets the look.
 */

/* --- Page resets (base.css sets bold capitals; the brand is a mixed-case serif) --- */
.cw-page h1, .cw-page h2, .cw-page h3, .cw-page h4, .cw-page h5, .cw-page h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.cw-page li { padding-left: 0; }
.cw-page li::before { content: none; }
.cw-page a { border-bottom: none; }
.cw-page a:visited { color: inherit; }
.cw-page a:hover { color: var(--text-accent); }
.cw-page {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* --- Primitives --------------------------------------------------------- */
.shell { width: 87vw; max-width: var(--max-width); margin: 0 auto; }
.pages { display: contents; }

/* Scotch rule: 3 on top, 1 + 1 offset below (Crème Soda masthead). */
.scotch {
  position: relative;
  border-top: calc(var(--border-width) * 3) solid var(--text-primary);
  border-bottom: var(--border-width) solid var(--text-primary);
}
.scotch::after, .scotch-up::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--border-width);
  background: var(--text-primary);
}
.scotch::after { bottom: calc(-1 * var(--space-sm)); }
.scotch-up {
  position: relative;
  border-top: var(--border-width) solid var(--text-primary);
  border-bottom: calc(var(--border-width) * 3) solid var(--text-primary);
}
.scotch-up::before { top: calc(-1 * var(--space-sm)); }

/* Vertical rule in ink: structure, never grey. */
.rail { position: relative; }
.rail::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: var(--border-width);
  background: var(--text-primary);
  pointer-events: none;
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.numeral {
  font-family: var(--font-serif);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.em { font-style: italic; letter-spacing: var(--tracking-wide); }
.amp { font-style: italic; letter-spacing: var(--tracking-normal); }
.prose strong { font-weight: var(--weight-bold); }

.link-quiet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  transition: color var(--transition-base);
}
.link-quiet::after { content: '\00a0\203a'; }
.link-quiet:hover { color: var(--text-accent); }

.link-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-overlay);
  border: none;
  cursor: pointer;
  padding: var(--space-sm-md) var(--space-xl);
  transition: box-shadow var(--transition-slow);
}
.link-cta:hover { box-shadow: 0 var(--space-xs) var(--space-xs) var(--overlay-bg); }

.stack-md { margin-top: var(--space-md); }
.stack-lg { margin-top: var(--space-lg); }
.stack-xl { margin-top: var(--space-xl); }
.stack-2xl { margin-top: var(--space-2xl); }
.center { text-align: center; }

.band { padding-block: var(--space-2xl); }
.band-top { padding-block: var(--space-xl) var(--space-2xl); }
.band-white { background: var(--bg-surface); }
.band-greige { background: var(--bg-overlay); }

.statement {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
}
.statement-wide { max-width: 34ch; }
.prose p + p { margin-top: var(--space-md); }
.prose p { color: var(--text-primary); max-width: 40ch; }
.prose-sm p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* Two editorial columns split by the parent .rail. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.split > * { min-width: 0; }
.split > :first-child { padding-right: 9%; }
.split > :last-child { padding-left: 9%; }
.split-center > :last-child { align-self: center; }
.split-offset > :last-child { padding-top: var(--space-2xl); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-width) solid var(--text-primary);
  margin-bottom: var(--space-xl);
}
.section-head h2 { font-size: var(--text-xl); }

/* --- nav ---------------------------------------------------------------- */
.masthead { padding-top: var(--space-xl); }
.masthead-inner { position: relative; display: flex; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-md); }
.masthead-inner.plain { border-bottom: var(--border-width) solid var(--border-strong); }
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.wordmark .amp { font-style: italic; letter-spacing: var(--tracking-normal); }
.wordmark img { display: block; height: var(--text-2xl); width: auto; }
.masthead nav, .topnav nav { display: flex; align-items: baseline; gap: var(--space-lg); }
.masthead nav { margin-left: auto; }
.masthead nav a, .topnav nav a {
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border-width) solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.masthead nav a:hover, .topnav nav a:hover { color: var(--text-primary); }
.masthead nav a[aria-current='page'], .topnav nav a[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.lang { display: flex; gap: var(--space-xs); padding-left: var(--space-lg); border-left: var(--border-width) solid var(--text-primary); }
.lang > * { font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wide); }
.lang [aria-current='true'] { color: var(--text-primary); border-bottom: var(--border-width) solid var(--text-primary); }
.lang a { color: var(--text-muted); }
.topnav .lang { padding-left: 0; border-left: none; }

.top-row { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--space-md); }
.logo-block { text-align: center; padding: var(--space-lg) var(--space-xl); }
.logo-block .wordmark { font-size: var(--text-2xl); }

/* --- header image: a band's worth of air above and below, like the site's hero --- */
.cw-header { padding-block: var(--space-2xl); }
.header-bleed .ph-banner { border-inline: none; }

/* --- photo boxes: the wireframe cross says "image here" without a word ---- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bg-overlay);
  border: var(--border-width) solid var(--border-default);
  color: var(--text-muted);
  overflow: hidden;
  background-image:
    linear-gradient(to top right, transparent calc(50% - var(--border-width) / 2), var(--border-default) 50%, transparent calc(50% + var(--border-width) / 2)),
    linear-gradient(to bottom right, transparent calc(50% - var(--border-width) / 2), var(--border-default) 50%, transparent calc(50% + var(--border-width) / 2));
}
.ph-note { position: relative; z-index: 1; background: var(--bg-overlay); padding: var(--space-sm) var(--space-md); text-align: center; }
.ph-banner { aspect-ratio: 3 / 2; }
.ph-portrait { aspect-ratio: 4 / 5; }
.ph-square { aspect-ratio: 1 / 1; }
/* A dropped photo fills the box; the cross and the note go under it. */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph.filled { background-image: none; }
.ph.filled .ph-note { display: none; }
/* Caption bar laid ON the image: rule, title left, link right. */
.ph-cap {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) 0 var(--space-lg);
  border-top: var(--border-width) solid var(--text-primary);
  background: var(--bg-overlay);
}
.ph-cap .cap-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-primary); }
.ph-cap .link-quiet { white-space: nowrap; }
.ph:has(.banner-text) .ph-note, .ph:has(.ph-cap) .ph-note {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: transparent;
  padding: 0;
}

/* --- statement/banner: standalone on cream, or nested into the header band --- */
.statement-banner { padding-block: var(--space-2xl); }
.banner-text { display: grid; place-content: center; text-align: center; padding: var(--space-lg); }
.ph .banner-text { position: absolute; inset: 0; z-index: 2; }
.banner-text .kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
.banner-text .statement { margin: var(--space-sm) auto 0; max-width: 26ch; }

/* --- statement/mixed: sans capitals, the em words in low italic serif ------ */
.statement-mixed .mixed {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  max-width: 24ch;
  margin: var(--space-md) auto 0;
}
.statement-mixed .mixed .em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-2xl);
}

/* --- intro ---------------------------------------------------------------- */
.quote-big {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.quote-big::before, .quote-big::after {
  position: absolute;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.quote-big::before { content: '\201c'; top: calc(-1 * var(--space-md)); left: calc(-1 * var(--space-md)); }
.quote-big::after { content: '\201d'; bottom: calc(-1 * var(--space-xl)); right: calc(-1 * var(--space-md)); }
.intro-first .intro .statement { font-size: var(--text-3xl); }
.intro-first .intro-lede {
  margin-top: var(--space-md);
  max-width: 42ch;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --- slab/straddle: a greige slab over the cream -> white seam ------------ */
.straddle { position: relative; background: var(--bg-surface); }
.straddle::before { content: ''; position: absolute; inset: 0 0 50% 0; background: var(--bg-base); }
.straddle-inner { position: relative; z-index: 1; background: var(--bg-overlay); padding: var(--space-2xl) var(--space-lg); text-align: center; }
.straddle-inner .statement { margin-inline: auto; max-width: 30ch; }

/* --- services, approach: numbered cards ----------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.service { padding-top: var(--space-md); border-top: var(--border-width) solid var(--text-primary); }
.service h3 { font-size: var(--text-lg); margin-top: var(--space-sm); }
.service p { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--text-secondary); }
.service ul, .acc-body ul { margin-top: var(--space-md); }
.service li, .acc-body li {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

/* --- services/accordion: rules and a plus ---------------------------------- */
.acc { border-top: var(--border-width) solid var(--text-primary); }
.acc details { border-bottom: var(--border-width) solid var(--text-primary); }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .numeral { flex: 0 0 4ch; }
.acc summary::after { content: '+'; margin-left: auto; font-family: var(--font-sans); color: var(--text-muted); }
.acc details[open] summary::after { content: '\2013'; }
.acc-body { padding: 0 0 var(--space-lg) calc(4ch + var(--space-md)); max-width: 60ch; }
.acc-body p { font-size: var(--text-sm); color: var(--text-secondary); }

/* --- detail/long: one full-width entry per pillar --------------------------- */
.service-long {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
  border-top: var(--border-width) solid var(--text-primary);
}
.service-long h3 { font-size: var(--text-xl); margin-top: var(--space-sm); }
.service-long li {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

/* --- showcase/trio ---------------------------------------------------------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.trio .n { display: block; font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-md); }
.trio .t { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.trio .place { display: block; margin-top: var(--space-xs); }

/* --- duo: two level images either side of the rail --------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; padding-block: var(--space-2xl); }
.duo > figure:first-child { margin-right: 17.6%; }
.duo > figure:last-child { margin-left: 17.6%; }

/* --- cta -------------------------------------------------------------------- */
.cta-statement { margin: var(--space-md) auto var(--space-lg); }

/* --- page-head: title and signature, no wordmark repeat ---------------------- */
.page-head { padding-block: var(--space-2xl) var(--space-xl); text-align: center; }
.page-head h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
.page-head .signature { margin-top: var(--space-md); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm-md); }

/* --- contact/lines ------------------------------------------------------------ */
.contact-lines { display: grid; max-width: 40ch; }
.contact-lines > * {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--border-width) solid var(--text-primary);
}

/* --- timeline/ledger: a column of hours, a column of acts ---------------------- */
.ledger { border-top: calc(var(--border-width) * 3) solid var(--text-primary); }
.ledger .row {
  display: grid;
  grid-template-columns: 12ch 1fr 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-bottom: var(--border-width) solid var(--text-primary);
  align-items: baseline;
}
.timeline-ledger .when { font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.timeline-ledger .what { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.timeline-ledger .pillar { margin-top: var(--space-sm); }
.timeline-ledger .how { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 44ch; }
.ledger .row:nth-child(even) .what { padding-left: var(--space-2xl); }

/* --- timeline/clock: a sticky dial whose hand sweeps with the scroll ------------ */
.clock-wrap { display: grid; grid-template-columns: 1fr 1fr; }
.clock-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.clock { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; border: var(--border-width) solid var(--text-primary); }
.clock .pin { position: absolute; left: 50%; top: 50%; width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--text-primary); translate: -50% -50%; }
.clock .hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--border-width) * 3);
  height: 44%;
  background: var(--text-primary);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  rotate: 0deg;
  animation: cw-sweep linear both;
  animation-timeline: scroll(root);
}
@keyframes cw-sweep { from { rotate: 0deg; } to { rotate: 288deg; } }
.clock .tick { position: absolute; inset: 0; }
.clock .tick::before { content: ''; position: absolute; left: 50%; top: 0; width: var(--border-width); height: var(--space-md); background: var(--text-primary); }
.clock .tick span { position: absolute; left: 50%; top: calc(-1 * var(--space-xl)); translate: -50% 0; font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wider); color: var(--text-muted); white-space: nowrap; }
.clock .t1 { rotate: 0deg; } .clock .t2 { rotate: 72deg; } .clock .t3 { rotate: 144deg; } .clock .t4 { rotate: 216deg; } .clock .t5 { rotate: 288deg; }
.clock .t1 span { rotate: 0deg; } .clock .t2 span { rotate: -72deg; } .clock .t3 span { rotate: -144deg; } .clock .t4 span { rotate: -216deg; } .clock .t5 span { rotate: -288deg; }
.clock .face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 18%; }
.clock .face .wordmark { font-size: var(--text-xl); }
.clock .face .meta { margin-top: var(--space-sm); }
.moments { border-left: var(--border-width) solid var(--text-primary); }
.moment { min-height: 100vh; display: grid; align-content: center; padding: var(--space-2xl) 0 var(--space-2xl) var(--space-2xl); border-bottom: var(--border-width) solid var(--text-primary); }
.timeline-clock .when { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.timeline-clock .what { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); max-width: 18ch; }
.timeline-clock .how { margin-top: var(--space-lg); max-width: 40ch; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.timeline-clock .pillar { margin-top: var(--space-lg); }
/* No scroll timeline: a still dial, the hand gone, each moment its own band. */
@supports not (animation-timeline: scroll()) {
  .clock .hand { display: none; }
  .clock-sticky { position: static; height: auto; padding-block: var(--space-xl); }
  .moment { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .clock .hand { display: none; }
  .clock-sticky { position: static; height: auto; padding-block: var(--space-xl); }
  .moment { min-height: auto; }
}

/* --- invitation/card: the flap opens as the reader scrolls ----------------------- */
.invitation-card .stage-room { position: relative; height: 190vh; }
.invitation-card .stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; perspective: 120vw; }
.invitation-card .card {
  position: relative;
  height: 84vh;
  aspect-ratio: 5 / 7;
  max-width: 87vw;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--text-primary);
  transform-style: preserve-3d;
  animation: cw-shift linear both;
  animation-timeline: scroll(root);
  animation-range: 0 90vh;
}
@keyframes cw-shift { from { translate: 0 0; } to { translate: 50% 0; } }
.invitation-card .inside {
  position: absolute;
  inset: var(--space-md);
  border: var(--border-width) solid var(--text-primary);
  outline: var(--border-width) solid var(--text-primary);
  outline-offset: var(--space-2xs);
  padding: var(--space-xl);
  display: grid;
  align-content: center;
  text-align: center;
}
.invitation-card .inside .meta { display: block; }
.invitation-card .inside h2 { font-size: var(--text-2xl); margin-top: var(--space-sm); }
.invitation-card .programme { margin-top: var(--space-xl); display: grid; gap: 0; text-align: left; }
.invitation-card .programme > div { display: grid; grid-template-columns: 6ch 1fr; gap: var(--space-md); padding-block: var(--space-sm-md); border-top: var(--border-width) solid var(--text-primary); }
.invitation-card .programme .h { font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wider); color: var(--text-muted); padding-top: var(--space-2xs); }
.invitation-card .programme .t { font-family: var(--font-display); font-size: var(--text-lg); }
.invitation-card .programme .t .em { font-size: var(--text-sm); }
.invitation-card .rsvp { margin-top: var(--space-xl); }
.invitation-card .flap {
  position: absolute;
  inset: calc(-1 * var(--border-width));
  transform-origin: left;
  transform-style: preserve-3d;
  animation: cw-open linear both;
  animation-timeline: scroll(root);
  animation-range: 0 90vh;
}
@keyframes cw-open { from { rotate: y 0deg; } to { rotate: y -178deg; } }
.invitation-card .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--bg-overlay);
  border: var(--border-width) solid var(--text-primary);
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--space-xl);
}
.invitation-card .face-back { transform: rotateY(180deg); }
.invitation-card .face-back .amp { font-family: var(--font-display); font-style: italic; font-size: var(--text-4xl); color: var(--accent-2); }
.invitation-card .flap .wordmark { font-size: var(--text-xl); }
.invitation-card .line { font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-md); max-width: 22ch; }
.invitation-card .seal {
  margin: var(--space-xl) auto 0;
  width: var(--space-3xl);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-5);
  color: var(--text-reverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
}
.invitation-card .hint { margin-top: var(--space-xl); }
@supports not (animation-timeline: scroll()) {
  .invitation-card .stage-room { height: auto; }
  .invitation-card .stage { position: static; height: auto; padding-block: var(--space-2xl); }
  .invitation-card .flap { display: none; }
  .invitation-card .card { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-card .stage-room { height: auto; }
  .invitation-card .stage { position: static; height: auto; padding-block: var(--space-2xl); }
  .invitation-card .flap { display: none; }
  .invitation-card .card { animation: none; }
}

/* --- footer ---------------------------------------------------------------------- */
.footer { padding-top: var(--space-2xl); }
.footer-top { padding-block: var(--space-xl); text-align: center; }
.footer-top .cursive { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); letter-spacing: var(--tracking-wide); }
.social { display: flex; justify-content: center; gap: var(--space-xl); margin-top: var(--space-md); }
.social a { font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl); margin-top: var(--space-xl); counter-reset: menu; }
.footer-menu a { counter-increment: menu; font-family: var(--font-serif); font-size: var(--text-sm); }
.footer-menu a::before {
  content: 'N\00ba\00a0' counter(menu);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-right: var(--space-sm);
  vertical-align: top;
}
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.footer-bottom { padding-block: var(--space-xl); text-align: center; }

.foot3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); align-items: start; text-align: left; }
.foot3 .col-nav a { display: block; font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding-block: var(--space-2xs); }
.foot3 .col-nav .meta { display: block; margin-bottom: var(--space-xs); }
.foot3 .col-mid { text-align: center; font-family: var(--font-display); font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-wider); line-height: var(--leading-tight); }
.foot3 .col-co { text-align: right; font-family: var(--font-sans); font-size: var(--text-2xs); line-height: var(--leading-relaxed); display: grid; }
.foot3 .col-co .co-name { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); }

/* The architect's title block as a footer: ink between the cells. */
.footer-cartouche { padding-block: var(--space-2xl); }
.cartouche {
  margin-left: auto;
  width: 72%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--border-width);
  background: var(--text-primary);
  border: calc(var(--border-width) * 3) solid var(--text-primary);
}
.cartouche > div { background: var(--bg-base); padding: var(--space-sm) var(--space-md); min-width: 0; }
.cartouche .k { display: block; font-family: var(--font-sans); font-size: var(--text-3xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.cartouche .v { display: block; font-family: var(--font-display); font-size: var(--text-sm); margin-top: var(--space-2xs); overflow-wrap: break-word; }
.cartouche .v a { display: block; }
.cartouche .wide { grid-column: span 2; }
.cartouche .wide-3 { grid-column: span 3; }

/* --- Mobile ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .services, .trio, .foot3 { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split, .service-long, .duo { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split > :first-child, .split > :last-child { padding-inline: 0; }
  .split-offset > :last-child { padding-top: 0; }
  .duo > figure { margin: 0; }
  .rail::before { display: none; }
  .quote-big { margin-top: var(--space-xl); }
  .foot3 .col-mid, .foot3 .col-co { text-align: left; }
  .ledger .row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .ledger .row:nth-child(even) .what { padding-left: 0; }
  .clock-wrap { grid-template-columns: 1fr; }
  .clock-sticky { height: auto; padding-block: var(--space-xl); }
  .clock { width: 60%; }
  .moments { border-left: none; }
  .moment { min-height: auto; padding: var(--space-2xl) 0; }
  .cartouche { width: 100%; grid-template-columns: 1fr 1fr; }
  .cartouche > div { padding: var(--space-sm); }
  .cartouche .v { font-size: var(--text-xs); }
  .cartouche .wide, .cartouche .wide-3, .cartouche > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .masthead-inner { flex-wrap: wrap; gap: var(--space-sm-md); }
  .masthead nav { margin-left: 0; width: 100%; gap: var(--space-md); }
  .masthead .lang { position: absolute; right: 0; top: var(--space-md); border-left: none; padding-left: 0; }
  .band { padding-block: var(--space-xl); }
  .statement { max-width: none; }
  .ph-cap { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .ph-banner { aspect-ratio: 4 / 5; }
  .invitation-card .card { height: auto; aspect-ratio: auto; min-height: 80vh; width: 87vw; animation: none; }
  .invitation-card .inside { padding: var(--space-md); }
}