/* ==========================================================================
   Memorial — Hermann Vogt.

   Paper, ink and four greys, and one covered blue-grey that rules and
   underlines and never fills anything. The only colour this page is allowed
   is whatever is in the photographs, because a memorial page is a page of
   pictures of somebody and every other decision here is about getting out of
   their way.

   Two things are set in the serif and nothing else is: the name, and the
   words people wrote. A message from a stranger about somebody's father is
   the most important text on this page, so it is set the way a book sets one
   — large, in a serif, at reading measure — rather than as a card in a grid.

   No shadows anywhere. Every edge on this page is a line.

   Self-contained; only this site loads this file.
   ========================================================================== */

:root {
  --bg:        #f5f4f2;
  --bg-alt:    #eae8e5;
  --surface:   #ffffff;

  --ink:       #131416;
  --ink-2:     #3a3d42;
  --muted:     #6b6f75;
  --muted-2:   #94989e;

  --accent:     #5a6572;
  --accent-600: #454e58;
  --accent-050: #edeff1;

  --line:      #e3e1dd;
  --line-2:    #cdcac5;

  --radius:    2px;
  --radius-sm: 2px;

  --wrap:      1180px;
  --pad:       clamp(20px, 5vw, 46px);

  --font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
           "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--font); color: var(--ink-2); background: var(--bg);
  line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; color: var(--ink); font-weight: 500; }
h1, h2 { font-family: var(--serif); letter-spacing: -.012em; }
/* The name is the largest thing on the site and the one string the design cannot choose. A surname
   is one unbreakable word, and the ones this will meet are German — so `break-word` is the net
   under a name too long for the narrowest phone. It should never fire; when it does, a broken name
   still beats one that runs off the side of the page. */
h1 { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.02; overflow-wrap: break-word; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.08rem; font-weight: 620; letter-spacing: -.008em; }
p  { margin: 0 0 1rem; overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.center { text-align: center; }
.accent { color: var(--accent); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---- eyebrow + lead ------------------------------------------------------ */
.eyebrow {
  display: block; margin: 0 0 1rem; color: var(--muted-2);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.lead { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 60ch; }

/* ---- buttons -------------------------------------------------------------
   Square, hairline, and only one of them is filled. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 15px 24px; border: 1px solid var(--ink); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.btn i, .btn svg { width: 16px; height: 16px; }
.btn-lg { padding: 18px 30px; font-size: .95rem; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-on-ink { background: #fff; border-color: #fff; color: var(--ink); }
.btn-on-ink:hover { background: transparent; color: #fff; }

/* ---- nav ----------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { flex: none; color: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.brand-sub { font-size: .7rem; color: var(--muted-2); letter-spacing: .08em; }

.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links > li { display: flex; }
.nav-links a {
  padding: 9px 13px; color: var(--muted); font-size: .88rem; font-weight: 500;
  transition: color .14s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta {
  border: 1px solid var(--line-2); color: var(--ink) !important; margin-left: 10px;
}
.nav-cta:hover { border-color: var(--ink); }

.nav-burger {
  display: none; margin-left: auto; width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  border: 1px solid var(--line-2); background: transparent;
}
.nav-burger span { width: 18px; height: 1.5px; background: var(--ink); }

@media (max-width: 1020px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; inset: 74px 0 auto 0; margin: 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px var(--pad) 26px; background: var(--bg);
    border-bottom: 1px solid var(--line); transform: translateY(-150%);
    transition: transform .26s ease; max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav-links { transform: translateY(0); }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 16px 0 0; justify-content: center; padding: 15px !important; }
}

/* ---- sections ------------------------------------------------------------ */
.section { position: relative; padding: clamp(56px, 7vw, 108px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: #b9bcc1; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lead { color: #9ea2a8; }
.section-head { max-width: 60ch; margin-bottom: clamp(32px, 4.2vw, 56px); }
.section-head .lead { margin-top: .8rem; }

/* ---- hero ----------------------------------------------------------------
   The name at the size of a headstone, the portrait beside it, and the
   arrangements underneath the portrait where somebody looking for them will
   already be looking. */
.hero { padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
}
.hero-copy { min-width: 0; padding-top: clamp(0px, 1.5vw, 18px); }
.hero-dates {
  margin: 0 0 1.1rem; color: var(--muted); font-size: .88rem; letter-spacing: .16em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.hero h1 { margin-bottom: .35em; }
.hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--ink-2); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
@media (max-width: 460px) { .hero-cta .btn { width: 100%; } }
.hero-badges {
  display: flex; flex-direction: column; gap: 6px; margin: 30px 0 0; padding: 22px 0 0;
  list-style: none; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted);
}

.hero-side { display: grid; gap: clamp(20px, 2.4vw, 28px); min-width: 0; }

/* The mount, drawn whether or not there is a photograph in it yet. */
/* Square, filled or empty. The image is requested as a square crop around the editor's focal point,
   so the frame asks for exactly the shape it is given and CSS has nothing left to cut off — and the
   empty frame is then the same shape as the picture that will replace it, which is what stops the
   page moving under the family the day they add one. */
.portrait {
  margin: 0; aspect-ratio: 1 / 1; background: var(--surface);
  border: 1px solid var(--line-2); padding: clamp(10px, 1.2vw, 16px); overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait.is-empty { position: relative; background: var(--bg-alt); }
.portrait.is-empty::after {
  content: ""; position: absolute; inset: clamp(10px, 1.2vw, 16px);
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(90, 101, 114, .10) 18px 19px);
}

.arrangements { border-top: 2px solid var(--ink); padding-top: 18px; }
.arrangements-title {
  margin: 0 0 14px; font-family: var(--font); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.arrangements ul { list-style: none; margin: 0; padding: 0; display: grid; }
.arrangements li {
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-2);
}
.arrangements li:last-child { border-bottom: 0; }
.arrangements-note { margin: 14px 0 0; font-size: .85rem; font-style: italic; color: var(--muted); }

/* On one column the photograph comes first — above the name, the way it sits on an order of
   service. The arrangements stay under the copy, so the order reads portrait, who, then what to do
   about it. `display: contents` is what lets the side column's two children be placed
   independently; ordering the column itself would push the name below the funeral details.
   It has to come after the rules it overrides — a media query adds no specificity, and
   `.hero-side { display: grid }` above would otherwise simply win by being later. */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { display: contents; }
  .portrait { order: -1; margin-bottom: clamp(20px, 4vw, 28px); }
  .hero-copy { order: 0; }
  .arrangements { order: 1; margin-top: clamp(20px, 4vw, 28px); }
}

/* ---- a life in four lines ------------------------------------------------ */
.lines { background: var(--bg-alt); border-block: 1px solid var(--line); }
.lines-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(22px, 3vw, 44px); padding-block: clamp(30px, 3.6vw, 46px);
}
.line { min-width: 0; }
.line i { width: 19px; height: 19px; color: var(--accent); margin-bottom: 11px; }
.line h3 { font-size: .98rem; margin-bottom: 4px; }
.line p { margin: 0; font-size: .87rem; color: var(--muted); }

/* ---- the life ------------------------------------------------------------ */
.life-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4.5vw, 70px); align-items: start; }
.life-grid.is-flipped { direction: rtl; }
.life-grid.is-flipped > * { direction: ltr; }
@media (max-width: 900px) { .life-grid, .life-grid.is-flipped { grid-template-columns: 1fr; direction: ltr; } }
.life-body { min-width: 0; }
.life-figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line-2); }
.life-figure img { width: 100%; height: 100%; object-fit: cover; }
.life-figure.is-empty { position: relative; }
.life-figure.is-empty::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 20px, rgba(90, 101, 114, .09) 20px 21px);
}
.life-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 140px), 1fr));
  gap: 22px 30px; margin: clamp(34px, 4.4vw, 58px) 0 0; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.life-stats > div { display: flex; flex-direction: column-reverse; }
.life-stats dd {
  margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.life-stats dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-top: 9px; }

/* ---- the chapters -------------------------------------------------------- */
.chapters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: clamp(22px, 2.4vw, 32px);
}
.chapter { min-width: 0; padding-top: 22px; border-top: 2px solid var(--ink); }
.chapter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chapter-head i { width: 18px; height: 18px; color: var(--accent); flex: none; }
.chapter-head h3 { margin: 0; }
.chapter-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
.chapter p { color: var(--muted); font-size: .94rem; margin: 0 0 14px; }
.chapter-notes { list-style: none; margin: 0; padding: 0; }
.chapter-notes li {
  padding: 7px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-2);
}

/* ---- ways to take part --------------------------------------------------- */
.ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.way { min-width: 0; background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 30px); }
.way-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 15px;
}
.way-icon i { width: 18px; height: 18px; color: var(--accent); }
.way h3 { font-size: 1.02rem; }
.way p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---- memories ------------------------------------------------------------ */
.memories { display: grid; gap: clamp(28px, 3.6vw, 48px); max-width: 74ch; }
.memory { margin: 0; padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--line-2); }
.memory blockquote {
  margin: 0 0 14px; font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45; color: var(--ink);
}
.memory figcaption, .entry figcaption, .pinned-note figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: .84rem; color: var(--muted);
}
.memory .who, .entry .who, .pinned-note .who { font-weight: 640; color: var(--ink); }
.memory .rel, .entry .rel, .pinned-note .rel { color: var(--muted); }
.entry time, .pinned-note .when { color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* ---- the book ------------------------------------------------------------
   The block this design exists for. Everything here is ruled rather than
   boxed, so that a hundred messages read as one long page of them and not as
   a hundred cards. */
.book-section { background: var(--bg-alt); }

.pinned {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.4vw, 28px); margin-bottom: clamp(30px, 4vw, 48px);
}
.pinned-note {
  margin: 0; background: var(--surface); border: 1px solid var(--line-2);
  padding: clamp(22px, 2.6vw, 30px);
}
.pinned-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.pinned-note blockquote {
  margin: 0 0 14px; font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; color: var(--ink);
}

.book-flash {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(24px, 3vw, 34px);
  padding: 16px 20px; background: var(--surface); border-left: 2px solid var(--ink);
  font-size: .94rem; color: var(--ink);
}
.book-flash i { width: 17px; height: 17px; flex: none; color: var(--accent); }

.book-count {
  margin: 0 0 18px; font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2);
}

/* Multi-column, not a grid: the messages are two lines or twenty and half of
   them carry a photograph, and a grid would rule every row to the height of
   its tallest card. */
.book-entries {
  columns: 3; column-gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(34px, 4.4vw, 56px);
}
@media (max-width: 960px) { .book-entries { columns: 2; } }
@media (max-width: 620px) { .book-entries { columns: 1; } }
.entry {
  break-inside: avoid; margin: 0 0 clamp(18px, 2.4vw, 30px);
  background: var(--surface); border: 1px solid var(--line); padding: clamp(18px, 2vw, 24px);
}
.entry-photo { width: 100%; margin-bottom: 14px; }
.entry blockquote {
  margin: 0 0 12px; font-family: var(--serif); font-size: 1.06rem; line-height: 1.6; color: var(--ink);
}

.book-closed {
  margin: 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line);
  font-size: .95rem; color: var(--muted); max-width: 70ch;
}

/* ---- the form ------------------------------------------------------------ */
.book-form {
  background: var(--surface); border: 1px solid var(--line-2);
  padding: clamp(24px, 3.4vw, 44px); max-width: 780px;
}
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-error {
  margin: 0 0 20px; padding: 13px 16px; border-left: 2px solid #8a4038;
  background: #f6efee; color: #6d322c; font-size: .9rem;
}
.book-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
@media (max-width: 640px) { .book-fields { grid-template-columns: 1fr; } }
.book-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.book-wide { grid-column: 1 / -1; }
.book-field label, .book-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.opt { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted-2); }
.book-field input[type=text], .book-field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 13px 15px;
}
.book-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.book-field input::placeholder { color: var(--muted-2); }
.book-field input:focus-visible, .book-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* The file input, dressed as a button. The native control is kept in the DOM
   and moved off-screen rather than hidden, so it stays in the tab order. */
.book-file {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px dashed var(--line-2); padding: 14px 20px; font-size: .9rem;
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
  align-self: flex-start; transition: border-color .16s;
}
.book-file:hover { border-color: var(--accent); }
.book-file i { width: 18px; height: 18px; color: var(--accent); }
.book-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.book-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-photo { gap: 10px; }
.book-photo-name { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }

.book-consent {
  display: flex; align-items: flex-start; gap: 11px; margin: 22px 0 24px;
  font-size: .89rem; color: var(--muted); max-width: 68ch;
}
.book-consent input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.book-note { margin: 16px 0 0; font-size: .84rem; color: var(--muted-2); }

/* ---- the arrangements, as questions -------------------------------------- */
.qa { margin: 0; max-width: 82ch; }
.qa-item {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(14px, 3vw, 44px); padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.qa-item:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .qa-item { grid-template-columns: 1fr; gap: 10px; } }
.qa dt { font-family: var(--serif); font-size: clamp(1.06rem, 1.8vw, 1.25rem); color: var(--ink); line-height: 1.35; }
.qa dd { margin: 0; color: var(--muted); font-size: .96rem; }
.qa dd > :last-child { margin-bottom: 0; }
.qa dd strong { color: var(--ink); font-weight: 640; }
.qa dd a { color: var(--ink); border-bottom: 1px solid var(--line-2); }

/* ---- closing ------------------------------------------------------------- */
.closing { position: relative; background: var(--ink); color: #b9bcc1; padding: clamp(56px, 7vw, 104px) 0; }
.closing > .wrap { position: relative; z-index: 2; }
.closing h2 { color: #fff; max-width: 18ch; }
.closing .eyebrow { color: #85898f; }
.closing .lead { color: #a5a9ae; }
.closing-head { max-width: 60ch; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.closing-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 24px 34px; margin: clamp(38px, 4.6vw, 58px) 0 0; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.closing-details dt { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #85898f; margin-bottom: 7px; }
.closing-details dd { margin: 0; font-size: .94rem; color: #fff; white-space: pre-line; }
.closing-details dd a { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.closing-details dd a:hover { border-bottom-color: #fff; }

/* ---- footer -------------------------------------------------------------- */
.footer { background: var(--bg-alt); border-top: 1px solid var(--line); color: var(--muted); padding: clamp(48px, 6vw, 76px) 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 34px; }
@media (max-width: 880px) { .footer-top { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } }
.footer .brand { margin-bottom: 16px; }
.footer-about { font-size: .9rem; max-width: 42ch; }
.footer h4 { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--muted); font-size: .92rem; }
.footer a:hover { color: var(--ink); }
.contact-line { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; }
.contact-line i { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 5px; }
.footer-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  align-items: center; font-size: .82rem;
}
.footer-bottom nav { display: flex; gap: 20px; }

/* ---- mobile bar: one action ---------------------------------------------- */
.call-bar { display: none; }
@media (max-width: 640px) {
  .call-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex;
    border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; padding: 15px 8px; font-size: .9rem; font-weight: 640;
    background: var(--ink); color: #fff;
  }
  .call-bar i { width: 17px; height: 17px; }
  body { padding-bottom: 56px; }
}

/* ---- full-bleed background media (shared MeBgMedia markup) --------------- */
.has-bg-media, .hero-has-media { position: relative; }
.has-bg-media > .wrap, .hero-has-media > .wrap { position: relative; z-index: 2; }
.dd-bg-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dd-bg-el { width: 100%; height: 100%; object-fit: cover; }
.dd-bg-video-poster { position: absolute; inset: 0; display: none; }
.dd-bg-overlay { position: absolute; inset: 0; z-index: 1; }
.dd-bg-overlay.ov-light  { background: linear-gradient(180deg, rgba(245,244,242,.74), rgba(245,244,242,.88)); }
.dd-bg-overlay.ov-medium { background: linear-gradient(180deg, rgba(245,244,242,.90), rgba(245,244,242,.95)); }
.dd-bg-overlay.ov-strong { background: linear-gradient(180deg, rgba(245,244,242,.96), rgba(245,244,242,.985)); }
@media (prefers-reduced-motion: reduce) { .dd-bg-video { display: none; } .dd-bg-video-poster { display: block; } }

/* ---- scroll reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- text sub-pages ------------------------------------------------------- */
.page-header { border-bottom: 1px solid var(--line); padding-block: clamp(52px, 6.4vw, 88px); }
.page-header h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-header .lead { margin-top: 16px; }
.article-header .article-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 1rem;
  font-size: .84rem; color: var(--muted-2);
}
.article-hero { margin: 0 0 clamp(24px, 3vw, 40px); }
.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.prose { max-width: 68ch; font-size: 1.03rem; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.2em 0 .6em; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.prose h3 { margin: 1.9em 0 .5em; font-size: 1.12rem; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1.25em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 640; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-bottom-color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose blockquote {
  margin: 1.6em 0; padding-left: 22px; border-left: 1px solid var(--line-2);
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
}
.prose code { padding: .12em .38em; background: var(--bg-alt); font-size: .92em; }
.prose pre { margin: 0 0 1.4em; padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-alt); color: var(--ink); font-weight: 640; }