/* ==========================================================================
   POLISH TRIBUTE - Wall of Remembrance, Kraków

   Design language: a printed memorial book, not a museum sign.
     Ground     warm ivory   #FBF7EE   (laid paper)
     Ink        warm brown   #241D16
     Sanctuary  bottle green #14322A   (the Order, the poster)
     Gilding    old gold     #B08A44   (rules, ornament, initials)
     Heraldic   Maltese red  #8B1E24   (the cross alone, never a surface)

   Three rules hold the whole thing together:
     1. Everything sits on a centre axis. Symmetry is the classical default.
     2. Pictures are arches. Text containers are rectangles. No other shapes.
     3. Gold is the only accent. Red appears only inside the cross.

   Light only, on purpose. A theme switch is a software control and this
   should not feel like software.

   WordPress additions (admin bar, cookie banner, register controls, form states,
   ordinary pages, core classes) are in section 21 at the end.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --paper:      #FBF7EE;
  --paper-deep: #F3ECDC;
  --paper-pure: #FFFDF8;

  --ink:        #241D16;
  --ink-soft:   #5B5043;

  --green:      #14322A;
  --green-deep: #0D231D;

  --gold:       #B08A44;   /* rules, ornament, frames */
  --gold-ink:   #7E5F28;   /* gold that is safe as text on paper (5.5:1) */
  --gold-lift:  #DFC084;   /* gold that is safe as text on green (7.9:1) */
  --malta-red:  #8B1E24;

  --rule:       #DFD5BF;

  --display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --text:    'Lora', Georgia, 'Times New Roman', serif;

  --shell: 1280px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-h: 76px;
  --section-y: clamp(3rem, 5.5vw, 5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 768px)  { body { font-size: 18px; } }
@media (min-width: 1200px) { body { font-size: 19px; } }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.closing :focus-visible { outline-color: var(--gold-lift); }

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--green);
  color: var(--paper);
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* Laid-paper tooth. Fixed and inert, never on a scrolling container. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
.h2, .h3, .hero__title, .closing__title,
.band__value, .tribute-entry__sum, .tribute-entry__name,
.roll__name, .statement p, .quote p,
.site-footer__name, .brand__name, .input--line {
  font-family: var(--display);
}

.hero__title {
  font-size: clamp(2.2rem, 4.9vw, 4.1rem);
  font-weight: 400;
  line-height: 1.18;
}

.h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 500;
  line-height: 1.2;
}

.h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.25;
}

p { max-width: 62ch; }

.lead { font-size: 1.08em; }

/* ---- section head: title, gilt ornament, optional line of italic ---- */
.head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.head--centred { text-align: center; }
.head--centred .h2 { margin-inline: auto; max-width: 26ch; text-wrap: balance; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  width: min(260px, 70%);
  margin: 1.1rem auto 0;
}
.ornament__rule { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.ornament__rule:last-child { background: linear-gradient(to left, transparent, var(--gold)); }
.ornament__mark { width: 15px; height: 15px; fill: var(--gold); flex: 0 0 auto; }

.head__note {
  max-width: 44ch;
  text-wrap: balance;
  margin: 1.1rem auto 0;
  font-style: italic;
  color: var(--ink-soft);
}
.head__crest { width: 30px; height: 30px; margin: 0 auto 1.5rem; fill: var(--gold-lift); }

/* ---- prose ---- */
.prose { max-width: 62ch; }
/* The block is centred on the page, the words are not. Centring four lines of
   running text makes the eye hunt for the start of every line. Headings,
   ornaments and short display lines stay centred; paragraphs do not. */
.prose--centred { max-width: 56ch; margin-inline: auto; }
.prose p + p { margin-top: 1.5rem; }

/* Opening capital, as in a printed book. */
.prose--dropcap { margin-inline: auto; }
@media (min-width: 900px) {
  .prose--dropcap {
    max-width: 92ch;
    columns: 2;
    column-gap: clamp(2.5rem, 5vw, 4rem);
    column-rule: 1px solid var(--rule);
  }
  .prose--dropcap p { break-inside: avoid; }
  .prose--dropcap p + p { margin-top: 1.2rem; }
}
.prose--dropcap > p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3.6em;
  line-height: .84;
  margin: .04em .1em 0 0;
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.9rem;
  border: 1px solid transparent;
  font-family: var(--text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.btn--solid:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
}
.btn--gold:hover { background: var(--gold-lift); border-color: var(--gold-lift); }

/* A quiet second option: a rule under a word, not a second button. */
.btn--quiet {
  padding: .85rem .25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-weight: 400;
  color: inherit;
  opacity: .82;
}
.btn--quiet:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: var(--header-h);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-solid,
html:not(.js) .site-header {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule);
}
/* Without JavaScript the bar never learns it has left the hero, so it stays
   solid rather than painting ivory text onto ivory paper. */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: 21px; height: 21px; fill: var(--gold); flex: 0 0 auto; }
.brand__name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: contents; }

.nav__list { display: flex; align-items: center; }
.nav__list a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  transition: opacity .25s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.nav__list a:hover { opacity: 1; }
.nav__list a:hover::after { transform: scaleX(1); }

.header-controls { display: flex; align-items: center; gap: .85rem; flex: 0 0 auto; }

.lang { display: inline-flex; align-items: center; gap: .6rem; }
.lang__btn {
  padding: .2rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.lang__btn:hover { opacity: 1; }
.lang__btn.is-active { opacity: 1; border-bottom-color: var(--gold); }
.lang__sep { width: 1px; height: 13px; background: currentColor; opacity: .3; }

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 1px solid currentColor;
  cursor: pointer;
  opacity: .7;
}
.menu-btn:hover { opacity: 1; }
.menu-btn svg { width: 18px; height: 18px; fill: currentColor; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }

/* Under about 520px the wordmark, the language pair and the menu button stop
   fitting side by side, so everything in the bar steps down a size. */
@media (max-width: 519px) {
  .site-header__inner { gap: .75rem; }
  .brand { gap: .5rem; }
  .brand__mark { width: 18px; height: 18px; }
  .brand__name { font-size: .88rem; letter-spacing: .12em; }
  .header-controls { gap: .6rem; }
  .lang { gap: .45rem; }
  .lang__btn { font-size: .82rem; }
  .menu-btn { width: 38px; height: 38px; }
}

@media (max-width: 1279px) {
  .menu-btn { display: inline-flex; }

  .nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 1.25rem var(--gutter) 2.25rem;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: .9rem 0;
    font-family: var(--display);
    font-size: 1.3rem;
    border-bottom: 1px solid var(--rule);
    opacity: 1;
  }
  .nav__list a::after { display: none; }
  .nav__cta { margin-top: 1.5rem; width: 100%; }
}

/* The whole menu on one line from 1280px up. Seven items, the language pair
   and the button share a 1184px bar, so the spacing is measured to leave
   about 40px to spare at every width. The list may not shrink: if edited
   labels ever outgrow the bar, that shows up as overflow, which the script
   answers with .is-crowded below. */
@media (min-width: 1280px) {
  .brand           { order: 0; }
  .nav__list       { order: 1; flex-shrink: 0; gap: clamp(.875rem, 1.1vw, 1.1rem); margin-left: clamp(1.25rem, 2vw, 2rem); margin-right: auto; }
  .header-controls { order: 2; gap: .7rem; }
  .site-header .header-cta { padding: .65rem 1.1rem; }
  .nav__cta        { display: none; }   /* the bar button below covers it */
}
/* If edited menu labels are longer than the bar allows, the script marks the
   header as crowded and the bar button gives way; the same action stays in
   the hero and under "Contact". */
.site-header.is-crowded .header-cta { display: none; }

/* The primary action stays in the bar from small tablets up. Under that the
   bar has no room, so the drawer carries it instead. */
.header-cta { display: none; padding: .7rem 1.35rem; }
@media (min-width: 560px) { .header-cta { display: inline-flex; } }

/* Over the photograph a filled button goes muddy, so it reads as an outline
   until the bar turns solid. */
.js .site-header:not(.is-solid) .header-cta {
  background: transparent;
  border-color: rgba(251, 247, 238, .5);
  color: var(--paper);
}
.js .site-header:not(.is-solid) .header-cta:hover {
  background: rgba(251, 247, 238, .12);
  border-color: var(--paper);
}

/* Where you are on a long page. */
.nav__list a.is-current { opacity: 1; }
.nav__list a.is-current::after { transform: scaleX(1); }
@media (max-width: 1279px) {
  .nav__list a.is-current { color: var(--gold-ink); }
}

/* --------------------------------------------------------------------------
   6. HERO  -  a title page inside a gilt frame
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(100dvh, 760px);
  padding: calc(var(--header-h) + 2rem) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
  background: var(--green-deep);
  color: var(--paper);
  text-align: center;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  z-index: 0;
  filter: sepia(.30) saturate(.66) brightness(.64) contrast(1.02);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(118% 84% at 50% 44%, rgba(13,35,29,.24) 0%, rgba(13,35,29,.74) 62%, rgba(13,35,29,.92) 100%),
    linear-gradient(to bottom, rgba(13,35,29,.72) 0%, rgba(13,35,29,0) 26%);
}
/* The frame encloses the title page, not the masthead: its top edge starts
   below the header so the two never cross. */
.hero__frame {
  position: absolute;
  inset: calc(var(--header-h) + clamp(6px, 1.4vw, 18px)) clamp(14px, 2.2vw, 30px) clamp(14px, 2.2vw, 30px);
  z-index: 2;
  border: 1px solid rgba(223, 192, 132, .40);
  pointer-events: none;
}
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(223, 192, 132, .17);
}
.hero__inner { position: relative; z-index: 3; }

.hero__crest { width: 28px; height: 28px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); fill: var(--gold-lift); }
/* No ch cap: the line break in the markup already sets the two lines, and a
   narrower box would fold each of them again. */
.hero__title { max-width: none; }
.hero__lead {
  max-width: 46ch;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  color: rgba(251, 247, 238, .9);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem 2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* The wall today and finished. The headline stands beside an arch in which
   the finished Wall lies underneath and the wall "today" is clipped from the
   right, up to the line at --pos. At --pos: 0 only the finished Wall shows,
   which is how the page opens and all a visitor without JavaScript sees. */
.hero--compare {
  place-items: stretch;
  min-height: 0;
  padding: calc(var(--header-h) + clamp(2.25rem, 5vw, 3.5rem)) 0 clamp(3.25rem, 6vw, 4.5rem);
  background:
    radial-gradient(60% 70% at 74% 55%, rgba(223, 192, 132, .09) 0%, rgba(223, 192, 132, 0) 70%),
    var(--green-deep);
}
.hero--compare .hero__inner { display: grid; gap: clamp(2.25rem, 5vw, 3rem); align-items: center; }
.hero--compare .hero__title { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }
@media (min-width: 960px) {
  .hero--compare .hero__inner {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
  .hero--compare .hero__text { text-align: left; container-type: inline-size; }
  /* Sized to its column, so the two lines of the headline stay two in
     either language ("Jedno nazwisko w marmurze." is the longest). */
  .hero--compare .hero__title { font-size: clamp(2.3rem, 8.3cqi, 3.6rem); }
  .hero--compare .hero__crest { margin-left: 0; }
  .hero--compare .hero__lead { margin-left: 0; }
  .hero--compare .hero__actions { justify-content: flex-start; }
}

.compare { width: min(100%, 440px); margin: 0 auto; }
@media (max-width: 959px) { .compare { width: min(82vw, 380px); } }
.compare__arch {
  padding: 8px;
  border: 1px solid rgba(223, 192, 132, .55);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.compare__stage {
  --pos: 0%;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: var(--green);
  /* Up and down still scroll the page on a phone; sideways moves the line. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.compare__img,
.compare__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.compare__img { object-fit: cover; pointer-events: none; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag {
  position: absolute;
  bottom: clamp(10px, 4%, 18px);
  padding: .3rem .7rem;
  background: rgba(13, 35, 29, .78);
  color: var(--paper);
  font-size: .78rem;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
.compare__tag--before { left: clamp(10px, 4%, 18px); }
.compare__tag--after { right: clamp(10px, 4%, 18px); }
/* Each label shows once its picture has room for it (--p is the line's
   position as a plain number, set by the script). */
.compare__tag--before { opacity: clamp(0, calc((var(--p, 0) - 24) / 8), 1); }
.compare__tag--after { opacity: clamp(0, calc((76 - var(--p, 0)) / 8), 1); }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--gold-lift);
  box-shadow: 0 0 0 1px rgba(13, 35, 29, .25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.compare.is-ready .compare__handle { opacity: 1; }
.compare__knob {
  position: absolute;
  top: 58%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--gold-lift);
  color: var(--green-deep);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
}
.compare__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compare.is-ready .compare__stage { cursor: ew-resize; }
.compare.is-dragging .compare__knob { transform: scale(1.06); }
/* The range input is for the keyboard and screen readers; the pointer
   drags the stage itself. Its focus shows on the knob. */
.compare__range {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.compare__stage:has(.compare__range:focus-visible) .compare__knob { outline: 2px solid var(--paper); outline-offset: 3px; }
.compare__caption {
  max-width: 44ch;
  margin: 1rem auto 0;
  text-align: center;
  font-size: .86rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(251, 247, 238, .72);
}
@media (prefers-reduced-motion: reduce) {
  .compare__handle { transition: none; }
}

/* --------------------------------------------------------------------------
   7. INSCRIPTION BAND
   -------------------------------------------------------------------------- */
.band {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.band__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding-block: clamp(2.5rem, 5vw, 3.25rem);
  text-align: center;
}
.band__item { max-width: none; }
.band__value { display: block; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; }
.band__label { display: block; margin-top: .25rem; font-size: .92rem; color: var(--ink-soft); }
.band__sep { display: none; }

@media (min-width: 820px) {
  .band__grid { flex-direction: row; justify-content: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .band__sep { display: block; width: 1px; align-self: stretch; background: var(--rule); }
}

/* --------------------------------------------------------------------------
   8. SECTION SHELL
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tint { background: var(--paper-deep); }

/* --------------------------------------------------------------------------
   9. ARCHES  -  every photograph on this page is a chapel niche
   -------------------------------------------------------------------------- */
.arch {
  padding: 9px;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: var(--paper);
}
.arch img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.section--tint .arch { background: var(--paper-deep); }

.wall__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .wall__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
  .wall__grid .prose { max-width: 46ch; }
}

.diptych {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 300px;
  margin-inline: auto;
}
.diptych figcaption {
  grid-column: 1 / -1;
  margin-top: 1.1rem;
  text-align: center;
  font-size: .88rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: balance;
}
@media (min-width: 380px) {
  .diptych { grid-template-columns: 1fr 1fr; max-width: 560px; }
}
@media (min-width: 900px) { .diptych { max-width: none; } }

/* --------------------------------------------------------------------------
   10. FORMS OF TRIBUTE  -  two entries on a ruled page
   -------------------------------------------------------------------------- */
.tributes { max-width: 640px; margin-inline: auto; }
.tribute-entry { padding-block: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.tribute-entry + .tribute-entry { border-top: 1px solid var(--rule); }

/* Side by side, divided by a single rule, the way a tariff is set. */
@media (min-width: 820px) {
  .tributes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }
  .tribute-entry { padding-block: 0; }
  .tribute-entry + .tribute-entry {
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding-left: clamp(2.5rem, 5vw, 4rem);
  }
}
.tribute-entry__sum {
  display: block;
  font-size: clamp(2.4rem, 5.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-ink);
}
.tribute-entry__name { display: block; margin-top: .55rem; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.tribute-entry dd { max-width: 42ch; margin: 1rem auto 0; color: var(--ink-soft); text-wrap: balance; }

.tribute__foot {
  max-width: 48ch;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  text-align: center;
  font-size: .95rem;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* The section should not dead-end: it ends on the action it argues for. */
.section-cta { max-width: none; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }

/* A framed plate, as on a printed certificate. */
.plate {
  position: relative;
  max-width: 620px;
  margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--gold);
  text-align: center;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.plate p { max-width: 46ch; margin: 1rem auto 0; color: var(--ink-soft); text-wrap: balance; }

/* --------------------------------------------------------------------------
   11. BENEFICIARY
   -------------------------------------------------------------------------- */
.beneficiary__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .beneficiary__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 5rem);
  }
  .beneficiary__grid .prose { max-width: 44ch; }
  .beneficiary__grid .statement { margin-top: 0; text-align: left; }
  .beneficiary__grid .statement p { margin-inline: 0; }
}

.statement { margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.statement p {
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.38;
  color: var(--green);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   12. THE ROLL  -  patronage and partners, read aloud
   -------------------------------------------------------------------------- */
.roll { max-width: 560px; margin-inline: auto; text-align: center; }
.roll__item + .roll__item {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}

/* Names read across the page like a plaque, not down it like a list.
   --cols is set on the list from the number of items (1, 2, 3; four as two
   pairs). Every item carries a left rule and the list is shifted one pixel,
   so the rule of each row's first item is clipped away: the dividers stay
   correct however many rows there are. */
@media (min-width: 820px) {
  .roll {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    max-width: calc(var(--cols, 3) * 330px);
    row-gap: clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    align-items: stretch;   /* so the rules between them match in length */
  }
  .roll__item,
  .roll__item + .roll__item {
    margin: 0 0 0 -1px;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}
.roll__name {
  max-width: none;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.28;
  text-wrap: balance;
}
.roll__role {
  max-width: none;
  margin-top: .35rem;
  font-size: .98rem;
  color: var(--ink-soft);
}
.roll--marks .roll__name { font-size: clamp(1.15rem, 1.9vw, 1.42rem); }

/* Patrons' logos: a row of one height, so the names beneath line up. The
   box limits both sides, so a wide logo (the city) and a tall one (the
   voivode's eagle) carry about the same weight. */
.roll__emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: 1rem;
}
.roll__emblem img {
  width: auto;
  height: auto;
  max-width: min(100%, 210px);
  max-height: 92px;
  object-fit: contain;
}
.roll--emblems .roll__name { font-size: clamp(1.2rem, 1.9vw, 1.45rem); }

/* --------------------------------------------------------------------------
   13. THE REGISTER
   -------------------------------------------------------------------------- */
.registry__tools { max-width: 420px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.registry__label { display: block; margin-bottom: .6rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
/* A real field with a real box. A bare underline looks handsome and leaves
   people unsure whether they may type in it. */
.input--line {
  width: 100%;
  padding: .7rem 1rem;
  background: var(--paper-pure);
  border: 1px solid var(--gold);
  border-radius: 0;
  font-family: var(--text);
  font-size: 1rem;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.input--line::placeholder { color: var(--ink-soft); opacity: .8; }
.input--line:hover { border-color: var(--gold-ink); }
.input--line:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.registry__count { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); }

/* The stones, section by section. A section opens with a centred heading
   between two gilt rules; the next one follows at an ordinary section gap,
   not a page break. Within a section, the stones of a family touch, and
   families stand a little apart. */
.registry .head__note { max-width: 58ch; }
.wallnames { --stone-gap: clamp(.9rem, 1.8vw, 1.35rem); max-width: 1120px; margin-inline: auto; }
.wallnames__part + .wallnames__part { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.wallnames__part[hidden] { display: none; }
.wallnames__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: none;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.5rem);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
.wallnames__title::before,
.wallnames__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(176, 138, 68, 0), var(--gold));
}
.wallnames__title::after { background: linear-gradient(to left, rgba(176, 138, 68, 0), var(--gold)); }

.stones { margin: 0; padding: 0; list-style: none; }
.stones__group { display: grid; gap: 4px; }
.stones__group[hidden] { display: none; }

/* Families with several stones flow down the columns, as on Vanessa's list. */
.stones--columns { columns: 3; column-gap: var(--stone-gap); }
.stones--columns .stones__group { break-inside: avoid; margin-bottom: var(--stone-gap); }
/* Single stones, or only a few families, sit in centred rows. */
.stones--rows { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--stone-gap); }
.stones--rows .stones__group { flex: 0 0 calc((100% - 2 * var(--stone-gap)) / 3); }

@media (max-width: 959px) {
  .stones--columns { columns: 2; }
  .stones--rows .stones__group { flex-basis: calc((100% - var(--stone-gap)) / 2); }
}
@media (max-width: 599px) {
  .wallnames { max-width: 380px; }
  .stones--columns { columns: 1; }
  .stones--rows .stones__group { flex-basis: 100%; }
}

/* One stone: three lines in a slab of marble, cut in capitals. A line holds
   one centred part, or a part at either end. With two lines, the first sits
   in the middle of the space above the second, as on the stones of single
   people. */
.stone {
  container-type: inline-size;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  aspect-ratio: 5 / 2;
  padding: 3.5% 5.5%;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(140deg, #ECE3D2 0%, #E3D8C3 48%, #D8CAAF 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 86, 52, .14), 0 1px 2px rgba(60, 45, 25, .08);
  color: #3A2F24;
  font-family: var(--display);
  font-size: 17px;
  font-size: clamp(11px, 5.5cqi, 19px);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  /* Cut into the stone: a light edge under each letter. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.stone--4 { grid-template-rows: repeat(4, minmax(0, 1fr)); aspect-ratio: 2 / 1; }
.stone--1 .stone__row { grid-row: 1 / -1; }
.stone--2 .stone__row:first-child { grid-row: 1 / 3; }
.stone--2 .stone__row:last-child { grid-row: 3; }
.stone__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  min-width: 0;
  white-space: nowrap;
}
.stone__row--split { justify-content: space-between; }
.stone__row--left { justify-content: flex-start; }
.stone__row--right { justify-content: flex-end; }

.registry__empty { max-width: none; padding: 2.5rem 0; text-align: center; color: var(--ink-soft); }
.registry__note {
  max-width: 40ch;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  text-align: center;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   14. THE VOICE OF THE PROJECT
   -------------------------------------------------------------------------- */
.voice__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); text-align: center; }
.voice .arch--portrait { width: 168px; margin-inline: auto; }
@media (min-width: 820px) {
  .voice__grid {
    grid-template-columns: 210px minmax(0, 1fr);
    max-width: 880px;
    margin-inline: auto;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    text-align: left;
  }
  .voice .arch--portrait { width: 210px; margin-inline: 0; }
  .voice__grid .quote p,
  .voice__grid .voice__note { margin-inline: 0; }
}

.quote { margin-top: 0; }
.quote p {
  position: relative;
  max-width: 34ch;
  margin-inline: auto;
  max-width: 46ch;
  font-size: clamp(1.22rem, 2.1vw, 1.58rem);
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
}
.quote p::before {
  content: "\201C";
  display: block;
  margin-bottom: -.3em;
  font-size: 2.6em;
  font-style: normal;
  line-height: 1;
  color: var(--gold);
}
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; }
.quote__who { display: block; font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.quote__what { display: block; margin-top: .2rem; font-size: .94rem; color: var(--ink-soft); }

.voice__note {
  max-width: 46ch;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  font-size: .96rem;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   14a. THE FILM  -  a screening room: the film in a gilt frame on green
   The poster is a link; the player replaces it when play is pressed.
   -------------------------------------------------------------------------- */
.film { background: var(--green-deep); color: var(--paper); }
.film .head__note { color: rgba(251, 247, 238, .8); }
.film :focus-visible { outline-color: var(--gold-lift); }

.film__figure { max-width: 1040px; margin: 0 auto; }
.film__frame {
  position: relative;
  padding: clamp(7px, 1.2vw, 12px);
  border: 1px solid rgba(223, 192, 132, .45);
}
.film__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(223, 192, 132, .18);
  pointer-events: none;
}
.film__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #081611; }
.film__play,
.film__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__play { display: block; color: var(--paper); text-decoration: none; }
.film__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.film__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 22, 17, .55) 0%, rgba(8, 22, 17, 0) 38%),
    radial-gradient(ellipse at center, rgba(13, 35, 29, 0) 45%, rgba(13, 35, 29, .35) 100%);
}
/* In the lower left corner, so it never covers the speaker's face. */
.film__button {
  position: absolute;
  left: clamp(12px, 3.2%, 34px);
  bottom: clamp(12px, 5.5%, 40px);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.55rem .85rem 1.2rem;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .7);
  transition: background-color .25s var(--ease);
}
.film__icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.film__play:hover .film__poster { transform: scale(1.025); }
.film__play:hover .film__button { background: var(--gold-lift); }
.film__play:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: -6px; }

.film__caption {
  max-width: 60ch;
  margin: 1.15rem auto 0;
  text-align: center;
  font-style: italic;
  color: rgba(251, 247, 238, .86);
}
.film__privacy {
  max-width: 60ch;
  margin: .45rem auto 0;
  text-align: center;
  font-size: .82rem;
  color: rgba(251, 247, 238, .62);
}
@media (max-width: 519px) {
  .film__button { gap: .55rem; padding: .55rem 1rem .55rem .8rem; font-size: .88rem; }
  .film__icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .film__poster, .film__button { transition: none; }
  .film__play:hover .film__poster { transform: none; }
}

/* --------------------------------------------------------------------------
   15. CLOSING CALL AND FORM
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  background: var(--green);
  color: var(--paper);
}
.closing__grid { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); text-align: center; }
@media (min-width: 900px) {
  .closing__grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
    text-align: left;
  }
  .closing__grid .head { text-align: left; margin-bottom: 0; }
  .closing__grid .head__crest { margin-inline: 0; }
  .closing__grid .closing__title,
  .closing__grid .closing__deadline { margin-inline: 0; }
  .closing__grid .form { margin-inline: 0; }
}
.closing__title {
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.26;
}
.closing__deadline {
  max-width: 42ch;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  color: var(--gold-lift);
}

.form { max-width: 620px; margin-inline: auto; text-align: left; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form > * + * { margin-top: 1.4rem; }

.field { display: grid; gap: .5rem; }
.field__label { font-size: .95rem; font-weight: 600; }

.input {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--paper-pure);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input::placeholder { color: var(--ink-soft); opacity: 1; }
.input:hover { border-color: var(--gold-lift); }
.input:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 2px; border-color: var(--green); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23241D16'%3E%3Cpath d='M12 15.5 5.5 9h13z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
textarea.input { resize: vertical; min-height: 92px; }

.field__help { max-width: none; font-size: .88rem; color: rgba(251, 247, 238, .78); }
.field__error {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: none;
  font-size: .88rem;
  color: #F2BCA8;                      /* 7.2:1 on the green field */
}
.field__error[hidden] { display: none; }
.field__error svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.input.is-invalid { border-color: #C9604A; box-shadow: inset 0 0 0 1px #C9604A; }

.form__submit { margin-top: 1.9rem; }

.form__status {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  max-width: none;
  font-size: .95rem;
  color: var(--gold-lift);
}
.form__status[hidden] { display: none; }
.form__status svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; margin-top: .3rem; }


/* The donation button under the closing words, gold on the green like the
   hero's. */
.closing__cta { max-width: none; margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; }
@media (min-width: 900px) { .closing__grid .closing__cta { text-align: left; } }

/* ---- Ways to connect: the email address (and phone or post if set) ---- */
.connect { margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.connect .ornament { margin: 0 auto 1.5rem; }
.connect__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  font-weight: 400;
  line-height: 1.25;
}
.connect__list { display: grid; gap: 1.15rem; margin: 1.15rem 0 0; }
.connect__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.connect__value {
  margin: .3rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.connect__value a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(223, 192, 132, .55);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .25s var(--ease);
}
.connect__value a:hover { text-decoration-color: var(--gold-lift); }
@media (min-width: 900px) {
  .closing:not(.closing--connect) .connect .ornament { margin-left: 0; }
}

/* Without the form the closing section is one centred column. */
.closing--connect .closing__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; text-align: center; }
.closing--connect .closing__grid .head { text-align: center; margin-bottom: 0; }
.closing--connect .closing__grid .head__crest,
.closing--connect .closing__grid .closing__title,
.closing--connect .closing__grid .closing__deadline { margin-inline: auto; }
.closing--connect .closing__grid .closing__cta { text-align: center; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep);
  color: rgba(251, 247, 238, .76);
  padding-block: clamp(3.25rem, 6vw, 4.5rem) 2.75rem;
  font-size: .95rem;
  text-align: center;
}
.site-footer a { text-underline-offset: 3px; text-decoration-color: rgba(251, 247, 238, .35); }
.site-footer a:hover { color: var(--paper); text-decoration-color: var(--gold); }

.site-footer__crest { padding-bottom: clamp(2.25rem, 4vw, 3rem); }
.site-footer__crest svg { width: 26px; height: 26px; margin: 0 auto .9rem; fill: var(--gold); }
.site-footer__name {
  max-width: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--paper);
}
.site-footer__tag { max-width: none; margin-top: .35rem; }

.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid rgba(251, 247, 238, .16);
  border-bottom: 1px solid rgba(251, 247, 238, .16);
  text-align: center;
}
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr) 1.5fr; text-align: left; } }

.site-footer__col p { max-width: none; }
.site-footer__heading {
  margin-bottom: .85rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--gold-lift);
}
.credits { font-size: .85rem; line-height: 1.7; }
.site-footer__church { color: var(--paper); }

.site-footer__base {
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 2.5rem) auto 0;
  font-size: .88rem;
}

/* --------------------------------------------------------------------------
   17. MOTION  (MOTION_INTENSITY 3: things fade in, nothing performs)
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__inner > * { animation: rise 1.1s var(--ease) both; }
  .js .hero__crest   { animation-delay: .10s; }
  .js .hero__title   { animation-delay: .22s; }
  .js .hero__lead    { animation-delay: .38s; }
  .js .hero__actions { animation-delay: .52s; }
  .js .hero__frame   { animation: fade 1.6s var(--ease) .3s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
  .site-header, .nav, .input, .btn, .nav__list a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .grain, .hero__scrim, .hero__frame, .form, .registry__tools { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  .closing, .site-footer, .hero { background: #fff; color: #000; }
}

/* ==========================================================================
   21. WORDPRESS
   ========================================================================== */

/* ---- Admin bar: while an editor is logged in the header sits under it ---- */
.admin-bar .site-header { top: 32px; }
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 32px + 1.5rem); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .nav { inset: calc(var(--header-h) + 46px) 0 auto 0; }
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 46px + 1.5rem); }
}
@media (max-width: 600px) {
  /* WordPress lets the bar scroll away on phones; keep it put so the header
     never slides underneath it. */
  #wpadminbar { position: fixed; }
}
@media (min-width: 783px) and (max-width: 1279px) {
  .admin-bar .nav { inset: calc(var(--header-h) + 32px) 0 auto 0; }
}

/* ---- Logo from the Customiser ---- */
.brand__logo { display: block; max-height: 44px; width: auto; }

/* ---- Outline button ---- */
.btn--outline {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn--outline:hover { background: var(--green); color: var(--paper); }

/* ---- Tribute levels: any number, two or three across ---- */
@media (min-width: 820px) {
  .tributes {
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    max-width: calc(var(--cols, 2) * 450px);
    column-gap: 0;
    row-gap: clamp(2rem, 4vw, 2.75rem);
    overflow: hidden;
  }
  .tribute-entry,
  .tribute-entry + .tribute-entry {
    margin-left: -1px;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

/* ---- Partners with a logo ---- */
.roll__link { display: block; color: inherit; text-decoration: none; }
.roll__link:hover .roll__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.roll__logo { display: block; max-height: 72px; width: auto; max-width: 100%; margin: 0 auto .6rem; object-fit: contain; }

/* ---- Register: "show all names" ---- */
.registry__more-wrap { max-width: none; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.registry__more[hidden] { display: none; }
.registry__empty--start { padding: .5rem 0 0; }

/* ---- Form ---- */
.form__trap {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__status {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(251, 247, 238, .3);
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.55;
}
.form__status:focus { outline: none; }
.form__status:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; }
.form__status svg { width: 21px; height: 21px; margin-top: .12rem; fill: currentColor; flex: 0 0 auto; }
.form__status-ok,
.form__status-error { display: none; }
.form__status--ok { border-color: var(--gold-lift); background: rgba(223, 192, 132, .1); }
.form__status--ok .form__status-ok { display: block; color: var(--gold-lift); }
.form__status--error { border-color: #F2BCA8; background: rgba(242, 188, 168, .08); }
.form__status--error .form__status-error { display: block; color: #F2BCA8; }
.form__status-text { max-width: none; }

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  align-items: start;
}
.field--check input {
  width: 20px;
  height: 20px;
  margin: .2rem 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.field--check label { font-size: .92rem; line-height: 1.55; color: rgba(251, 247, 238, .9); cursor: pointer; }
.field--check label a { color: var(--gold-lift); text-underline-offset: 3px; }
.field--check .field__error { grid-column: 1 / -1; }

.form__submit[aria-busy="true"] { opacity: .72; cursor: progress; }
.form__recaptcha { max-width: none; margin-top: 1.1rem; font-size: .8rem; line-height: 1.55; color: rgba(251, 247, 238, .72); }
.form__recaptcha a { color: inherit; text-underline-offset: 2px; }
/* Hidden as Google allows: the notice above replaces the badge. */
.grecaptcha-badge { visibility: hidden !important; }

.form--closed { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(223, 192, 132, .45); }
.form__closed { max-width: none; color: var(--paper); font-size: 1.05rem; }

/* ---- Footer: legal links and social profiles ---- */
.site-footer__legal { padding-top: clamp(1.5rem, 3vw, 2rem); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; }
.site-footer__legal a,
.site-footer__button {
  color: rgba(251, 247, 238, .82);
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-color: rgba(251, 247, 238, .3);
  text-underline-offset: 3px;
}
.site-footer__button { padding: 0; background: none; border: 0; font-family: inherit; cursor: pointer; }
.site-footer__button:hover,
.site-footer__legal a:hover { color: var(--paper); text-decoration-color: var(--gold); }
.site-footer__legal .current-menu-item a { color: var(--paper); }

.social { display: flex; justify-content: center; gap: .55rem; margin-top: 1rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(251, 247, 238, .25);
  color: rgba(251, 247, 238, .85);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.social a:hover { border-color: var(--gold); color: var(--paper); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 1040px) { .social { justify-content: flex-start; } }

/* ---- Cookie banner ---- */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: clamp(.6rem, 2vw, 1.25rem);
  pointer-events: none;
}
.cc[hidden] { display: none; }
.cc__inner {
  position: relative;
  display: grid;
  gap: 1.2rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--gold);
  box-shadow: 0 22px 55px -20px rgba(13, 35, 29, .5);
  pointer-events: auto;
}
.cc__inner::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.cc__title { font-family: var(--display); font-size: 1.35rem; font-weight: 500; line-height: 1.25; margin-bottom: .35rem; }
.cc__text p { max-width: 72ch; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.cc__policy { margin-top: .45rem; }
.cc__policy a { color: var(--gold-ink); font-size: .9rem; text-underline-offset: 3px; }
.cc__actions { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; }
.cc__btn { flex: 1 1 150px; }
/* Phones: a compact banner that leaves most of the page visible. "Accept all"
   and "Reject all" sit side by side with equal weight. */
@media (max-width: 599px) {
  .cc { padding: .5rem; }
  .cc__inner { gap: .9rem; padding: 1.05rem 1.1rem 1.1rem; }
  .cc__title { font-size: 1.15rem; margin-bottom: .25rem; }
  .cc__text p { font-size: .84rem; line-height: 1.5; }
  .cc__policy { margin-top: .3rem; }
  .cc__policy a { font-size: .84rem; }
  .cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cc__btn { min-height: 46px; padding: .5rem .6rem; font-size: .88rem; line-height: 1.25; white-space: normal; }
  .cc__btn[data-cc="open"] { grid-column: 1 / -1; min-height: 44px; }
}
@media (min-width: 900px) {
  .cc__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; }
  .cc__actions { flex-direction: column; min-width: 230px; }
  .cc__btn { flex: 0 0 auto; }
}

/* ---- Cookie choices panel ---- */
.cc-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.cc-modal[hidden] { display: none; }
.cc-modal__backdrop { position: absolute; inset: 0; background: rgba(13, 35, 29, .6); }
.cc-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--gold);
}
.cc-modal__panel:focus { outline: none; }
.cc-modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.cc-modal__close svg { width: 20px; height: 20px; fill: currentColor; }
.cc-modal__title { margin: 0 2.75rem 1.25rem 0; font-family: var(--display); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.cc-cats { border-top: 1px solid var(--rule); }
.cc-cat { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-cat__name { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 500; }
label.cc-cat__name { cursor: pointer; }
.cc-cat__always { font-size: .85rem; color: var(--gold-ink); white-space: nowrap; }
.cc-cat__text { margin-top: .35rem; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
/* A switch is the one rounded shape on the site: it is a control, and the
   rounded form is what makes it read as one. */
.cc-switch { position: relative; display: inline-block; flex: 0 0 auto; width: 48px; height: 27px; }
.cc-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-switch__track {
  position: absolute;
  inset: 0;
  background: #CFC4AC;
  border-radius: 999px;
  transition: background-color .2s var(--ease);
}
.cc-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--paper-pure);
  box-shadow: 0 1px 3px rgba(36, 29, 22, .3);
  transition: transform .2s var(--ease);
}
.cc-switch input:checked + .cc-switch__track { background: var(--green); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(21px); }
.cc-switch input:focus-visible + .cc-switch__track { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.cc-modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.cc-modal__id { max-width: none; margin-top: 1.1rem; font-size: .8rem; color: var(--ink-soft); }
.cc-modal__id[hidden] { display: none; }
.cc-modal__id code { padding: .1rem .35rem; background: var(--paper-deep); font-size: .78rem; }
body.cc-locked { overflow: hidden; }

/* ---- Ordinary pages ---- */
.page-main { padding: calc(var(--header-h) + clamp(3rem, 7vw, 5rem)) 0 var(--section-y); }
.page-article { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }
.page-article--centred { text-align: center; }
.page-head { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.page-head__crest { width: 26px; height: 26px; margin: 0 auto 1.25rem; fill: var(--gold); }
.page-head__title { max-width: none; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.16; text-wrap: balance; }
.page-head__meta { margin: .5rem auto 0; font-size: .92rem; color: var(--ink-soft); }
.page-head__code { max-width: none; margin: 0 auto .5rem; font-family: var(--display); font-size: clamp(3.5rem, 9vw, 6rem); line-height: 1; color: var(--gold); }
.page-lede { margin-inline: auto; color: var(--ink-soft); }
.page-actions { max-width: none; margin-top: 2rem; text-align: center; }
.page-empty { margin-inline: auto; text-align: center; color: var(--ink-soft); }

.entry-content > * + * { margin-top: 1.15em; }
.entry-content p,
.entry-content li { max-width: none; }
.entry-content h2 { margin-top: 2em; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.2; }
.entry-content h3 { margin-top: 1.7em; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 500; line-height: 1.25; }
.entry-content h4 { margin-top: 1.5em; font-size: 1.05rem; font-weight: 600; }
.entry-content a { color: var(--gold-ink); text-underline-offset: 3px; }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .4em; }
.entry-content li::marker { color: var(--gold); }
.entry-content blockquote { padding-left: 1.25em; border-left: 2px solid var(--gold); font-style: italic; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th,
.entry-content td { padding: .6em .8em; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.entry-content th { font-weight: 600; }
.entry-content hr { height: 1px; margin: 2.5em 0; background: var(--rule); border: 0; }
.entry-content img { height: auto; }
.entry-content figcaption { margin-top: .5em; font-size: .88rem; color: var(--ink-soft); }
.entry-content code { padding: .1em .35em; background: var(--paper-deep); font-size: .9em; }
.entry-content .wp-block-button__link {
  display: inline-block;
  padding: .85rem 1.9rem;
  background: var(--green);
  border-radius: 0;
  color: var(--paper);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}
.entry-content .wp-block-button__link:hover { background: var(--green-deep); }
.page-links { margin-top: 2rem; }

.post-list { margin-top: 1rem; }
.post-list__item + .post-list__item { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.post-list__title { font-family: var(--display); font-size: 1.6rem; font-weight: 500; line-height: 1.25; }
.post-list__title a { text-decoration: none; }
.post-list__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.post-list__meta { margin-top: .25rem; font-size: .9rem; color: var(--ink-soft); }
.post-list__excerpt { margin-top: .6rem; }
.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.page-numbers { padding: .4rem .8rem; border: 1px solid var(--rule); text-decoration: none; }
.page-numbers.current { background: var(--green); border-color: var(--green); color: var(--paper); }

/* ---- WordPress core classes ---- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  top: 5px;
  left: 5px;
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip: auto !important;
  clip-path: none;
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  text-decoration: none;
}
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption { font-size: .88rem; color: var(--ink-soft); }
.sticky,
.bypostauthor { position: relative; }