/* ==========================================================================
   Eastern Memorials / "Vigil"
   One hand-written stylesheet. No framework, no build step.

   CONTRAST LEDGER
   ---------------
   Relative luminance of each surface and ink, and the ratio measured against
   the surface the ink actually sits on (not against the page background).

     SURFACES        L
     --linen  #F7F1E8   0.885
     --sand   #ECE2D2   0.769
     --bark   #241C15   0.0126
     --clay   #C0714A   0.235
     --rust   #8A3E2C   0.0903

     ON LIGHT (--linen / --sand)
     --bark          14.9 / 13.1   body, headings                    AA
     --ink-soft      5.87 / 5.14   secondary text, eyebrows, credits AA
     --rust          6.66 / 5.83   error text                        AA
     --sage-deep     6.61 / 5.79   confirmation text                 AA
     --clay          3.28 / 2.87   LARGE TEXT AND GRAPHICS ONLY. Never
                                   body copy on a light surface.
     --gold          2.00          NEVER text on light. Dark only.

     ON DARK (--bark)
     --linen         14.9          body, headings                    AA
     --cream-dim     8.99          secondary text, credits           AA
     --gold          7.46          step numerals                     AA
     --clay          4.55          asides, links, focus ring         AA
     --rust          2.24          NEVER text on bark. Fill only.

     FILLS
     --bark on --clay      4.55   primary button, resting            AA
     --linen on --rust     6.66   primary button, hover              AA
     --sage-deep on #E5EADE 6.07  confirmation panel                 AA

   Text never sits on raw photograph. Where type crosses an image it sits on
   either a solid --linen plate (hero) or a scrim that has reached full --bark
   at the type's position (services page header, image credits).
   ========================================================================== */

:root {
  /* Brief palette, unchanged */
  --linen: #F7F1E8;
  --bark:  #241C15;
  --clay:  #C0714A;
  --rust:  #8A3E2C;
  --sage:  #6F8368;
  --gold:  #D9A441;
  --sand:  #ECE2D2;

  /* Derived only where AA required a step. Same hues, no new colors. */
  --ink-soft:   #6B5A4B;  /* secondary text on light */
  --cream-dim:  #C9BCAA;  /* secondary text on dark */
  --sage-deep:  #4A5A41;  /* confirmation text */
  --sage-wash:  #E5EADE;  /* confirmation panel */
  --bark-deep:  #17110C;  /* the far end of a scrim, never a text color */

  /* Incised rule. A dark hairline over a light one reads as a V cut groove
     catching light on its lower edge. This is the site's one ornament. */
  --cut-dark:  rgba(36, 28, 21, 0.17);
  --cut-light: rgba(255, 255, 255, 0.72);
  --cut-dark-on-dark:  rgba(0, 0, 0, 0.55);
  --cut-light-on-dark: rgba(247, 241, 232, 0.13);

  --line: rgba(36, 28, 21, 0.16);
  --line-dark: rgba(247, 241, 232, 0.18);

  /* Warm, low, diffuse shadows drawn from --bark */
  --shadow-soft: 0 2px 6px rgba(36, 28, 21, 0.05), 0 14px 34px -22px rgba(36, 28, 21, 0.45);
  --shadow-lift: 0 4px 10px rgba(36, 28, 21, 0.07), 0 26px 50px -26px rgba(36, 28, 21, 0.55);

  /* Matting: a hair of light inside the edge, then a thin dark line, the way
     a print sits inside a mat board. */
  --mat: inset 0 0 0 1px rgba(247, 241, 232, 0.55), inset 0 0 0 2px rgba(36, 28, 21, 0.11);

  --radius: 12px;
  --radius-sm: 8px;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --sec-pad: clamp(4.5rem, 10vw, 9rem);
  --wrap: 78rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Fluid type */
  --fs-hero:  clamp(2.9rem, 7.4vw, 5.75rem);
  --fs-h2:    clamp(2.1rem, 5vw, 3.9rem);
  --fs-h3:    clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-lead:  clamp(1.075rem, 1.02rem + 0.42vw, 1.3rem);
  --fs-body:  clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
  --fs-small: 0.925rem;
  --fs-micro: 0.735rem;
}

/* ============================================================ RESET / BASE */

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

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

body {
  margin: 0;
  background: var(--linen);
  color: var(--bark);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, p, dd, dt, li, label, summary) { text-wrap: pretty; }

[id] { scroll-margin-top: 6.5rem; }

.wrap {
  width: min(var(--wrap), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute; left: var(--pad); top: -100%;
  z-index: 100;
  background: var(--bark); color: var(--linen);
  padding: 0.75rem 1.15rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-size: var(--fs-small);
}
.skip-link:focus { top: 0; }

/* ============================================================= FOCUS RING */
/* --clay reaches 3.28:1 on --linen and 4.55:1 on --bark, clearing the 3:1
   floor for a non-text indicator on both. The soft outer ring is redundancy,
   not the whole signal. */

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(192, 113, 74, 0.2);
}
.section--dark :focus-visible,
.footer :focus-visible,
.pagehead :focus-visible {
  box-shadow: 0 0 0 5px rgba(192, 113, 74, 0.28);
}

/* ========================================================== TYPE ELEMENTS */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
/* Any of these on a --bark ground take the dark-surface ink automatically.
   --ink-soft on --bark measures 2.55:1, so this must not depend on a
   modifier class being remembered at each call site. */
.eyebrow--dark,
.section--dark .eyebrow,
.pagehead .eyebrow { color: var(--cream-dim); }

.eyebrow__mark {
  flex: none;
  width: 1.9rem;
  height: 3px;
  border-top: 1px solid var(--clay);
  border-bottom: 1px solid var(--cut-light);
}
.eyebrow--dark .eyebrow__mark,
.section--dark .eyebrow__mark,
.pagehead .eyebrow__mark { border-bottom-color: var(--cut-light-on-dark); }

.section__title {
  font-size: var(--fs-h2);
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.aside {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin-block: 1.35rem;
}
.aside--dark,
.section--dark .aside,
.pagehead .aside { color: var(--clay); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
}
.lead--dark,
.section--dark .lead,
.pagehead .lead { color: var(--cream-dim); }

/* ============================================================ RULES / SPEC */

.spec {
  border-top: 1px solid var(--cut-dark);
  margin-top: 1.5rem;
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) 1fr;
  gap: 0.35rem 1.25rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--cut-light);
  border-bottom: 1px solid var(--cut-dark);
}
.spec__row:last-child { border-bottom: 0; }
.spec dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.22rem;
}
.spec dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.spec--tight .spec__row { padding: 0.5rem 0; }
.spec--tight dd { font-size: 0.875rem; }

.spec--dark { border-top-color: var(--cut-dark-on-dark); }
.spec--dark .spec__row {
  border-top-color: var(--cut-light-on-dark);
  border-bottom-color: var(--cut-dark-on-dark);
}
.spec--dark dt { color: var(--cream-dim); }
.spec--dark dd { color: var(--linen); }

/* =============================================================== CONTROLS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease), transform 240ms var(--ease),
              box-shadow 240ms var(--ease);
}

/* --bark on --clay is 4.55:1. Hover deepens to --rust, where --linen is
   6.66:1. Both states clear AA, which white-on-clay (3.68:1) would not. */
.btn--primary { background: var(--clay); color: var(--bark); }
.btn--primary:hover { background: var(--rust); color: var(--linen); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn--primary:active { transform: none; }

.btn--ghost { border-color: rgba(36, 28, 21, 0.32); color: var(--bark); background: transparent; }
.btn--ghost:hover { background: var(--sand); border-color: var(--bark); }

.btn--ask { border-color: var(--clay); color: var(--bark); background: transparent; margin-top: 1.5rem; }
.btn--ask:hover { background: var(--clay); }

.btn--block { width: 100%; }

/* Underline grows from the left */
.link-quiet {
  color: var(--bark);
  text-decoration: none;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 300ms var(--ease);
}
.link-quiet:hover { background-size: 100% 2px; }
.link-quiet--strong { font-weight: 600; background-size: 100% 2px; }
.link-quiet--strong:hover { background-image: linear-gradient(var(--rust), var(--rust)); }

.link-call {
  color: var(--bark);
  text-decoration: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.link-call:hover { color: var(--rust); }

/* ============================================================ IMAGE PLATE */
/* Every image region renders the warm --sand ground first, with a low tonal
   grain built from --bark at 3 percent. If images.js never loads, or a slot
   is missing, this is what stays on screen. No broken image icon can appear
   because the <img> element is only created once a usable URL exists. */

.plate { position: relative; margin: 0; }

.plate__frame {
  position: relative;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--sand);
  background-image:
    repeating-linear-gradient(101deg, rgba(36, 28, 21, 0.035) 0 2px, rgba(36, 28, 21, 0) 2px 9px),
    repeating-linear-gradient(7deg, rgba(36, 28, 21, 0.028) 0 1px, rgba(36, 28, 21, 0) 1px 6px);
  box-shadow: var(--mat);
  transition: box-shadow 320ms var(--ease);
}

.plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--sc, 1));
  transition: opacity 700ms var(--ease), transform 600ms var(--ease);
}
.plate img.is-loaded { opacity: 1; }

/* Parallax plates drive transform from rAF, so they must not also animate it. */
.plate[data-parallax] img { transition: opacity 700ms var(--ease); --sc: 1.14; }

.plate:not([data-parallax]):hover .plate__frame img,
:where(.card, .type, .mat, .dmat):hover .plate:not([data-parallax]) img { --sc: 1.035; }
:where(.card, .type, .mat, .dmat):hover .plate__frame { box-shadow: var(--mat), var(--shadow-lift); }

.plate__credit {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.plate__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.plate__credit a:hover { color: var(--rust); }
.plate__credit--dark { color: var(--cream-dim); }
.plate__credit--dark a:hover { color: var(--gold); }

/* Full bleed images carry the credit as a chip on a near solid --bark ground.
   At 92 percent over the worst case white pixel the chip still measures
   above 9:1 for its text. */
.plate--bleed .plate__credit,
.plate--band .plate__credit,
.plate--overlap .plate__credit {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(36, 28, 21, 0.92);
  color: #E7DFD2;
  z-index: 3;
}
.plate--bleed .plate__credit a,
.plate--band .plate__credit a,
.plate--overlap .plate__credit a { color: #E7DFD2; }
.plate--bleed .plate__credit a:hover,
.plate--band .plate__credit a:hover,
.plate--overlap .plate__credit a:hover { color: var(--gold); }

.pagehead__band .plate__credit { top: 0.9rem; bottom: auto; }

.plate--dark .plate__frame {
  background-color: #3A3028;
  background-image:
    repeating-linear-gradient(101deg, rgba(0, 0, 0, 0.16) 0 2px, rgba(0, 0, 0, 0) 2px 9px),
    repeating-linear-gradient(7deg, rgba(247, 241, 232, 0.03) 0 1px, rgba(247, 241, 232, 0) 1px 6px);
  box-shadow: inset 0 0 0 1px rgba(247, 241, 232, 0.14);
}

/* =============================================================== MASTHEAD */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.masthead.is-stuck {
  background: var(--linen);
  box-shadow: 0 1px 0 var(--cut-dark), 0 12px 30px -22px rgba(36, 28, 21, 0.65);
}
@supports (backdrop-filter: blur(8px)) {
  .masthead.is-stuck { background: rgba(247, 241, 232, 0.93); backdrop-filter: blur(10px) saturate(1.1); }
}

.masthead__inner {
  position: relative;
  width: min(var(--wrap), 100% - (var(--pad) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.brand { text-decoration: none; color: var(--bark); display: block; }
.brand__name {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.brand__place {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.22rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }
.nav__list a {
  color: var(--bark);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 280ms var(--ease);
}
.nav__list a:hover { background-size: 100% 2px; }
.nav__list a[aria-current="page"] { background-size: 100% 2px; }

.nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.nav__actions .btn { padding: 0.66rem 1.2rem; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid rgba(36, 28, 21, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-toggle__bars { display: grid; gap: 4px; width: 16px; }
.menu-toggle__bars span { display: block; height: 1.5px; background: var(--bark); }
.menu-toggle[aria-expanded="true"] { background: var(--sand); border-color: var(--bark); }

/* =================================================================== HERO */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.hero__media { position: relative; }
.hero__panel { padding: clamp(2.25rem, 6vw, 3rem) var(--pad) 0; }

.hero__title {
  font-size: var(--fs-hero);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.028em;
  margin-bottom: 0.4rem;
}

.hero .lead { max-width: 34ch; }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cut-dark);
  box-shadow: inset 0 1px 0 var(--cut-light);
}
.meta__item { display: block; }
.meta dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.meta dd { margin: 0.15rem 0 0; font-size: var(--fs-small); }

/* =============================================================== SECTIONS */

.section { padding-block: var(--sec-pad); }
.section--dark { background: var(--bark); color: var(--linen); }
.section--contact { background: var(--sand); }
.section--shop { padding-bottom: clamp(3rem, 7vw, 6rem); }

.section__head { max-width: 44rem; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section__head--wide { max-width: 54rem; }
.section__intro { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 40ch; }

.section--dark .section__title { color: var(--linen); }

.section__more { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ===================================================== SERVICES / OFFSET */
/* One tall card on the left, two stacked and stepped down on the right.
   Not three equal cards in a row. */

.offset-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }

.card__body { margin-top: 1.5rem; }
.card__title {
  font-size: var(--fs-h3);
  font-variation-settings: "opsz" 60;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.65rem;
}
.card p { color: var(--ink-soft); max-width: 44ch; }
.card .link-quiet { display: inline-block; margin-top: 1.35rem; font-size: var(--fs-small); font-weight: 500; }

/* ================================================================ PROCESS */

.steps { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }

.step { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--cut-dark-on-dark); }
.step::before {
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 1px;
  background: var(--cut-light-on-dark);
}
.step__num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: 1.2rem;
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  color: var(--linen);
  margin-bottom: 0.5rem;
}
.step p { color: var(--cream-dim); font-size: var(--fs-small); line-height: 1.6; }

/* ============================================================== MATERIALS */

.mat-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.mat__title {
  font-size: var(--fs-h3);
  font-variation-settings: "opsz" 60;
  line-height: 1.15;
  margin: 1.4rem 0 0.6rem;
  letter-spacing: -0.015em;
}
.mat__note { color: var(--ink-soft); font-size: var(--fs-small); max-width: 46ch; }

/* =================================================================== SHOP */

.shop { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.shop__text p { color: var(--ink-soft); max-width: 46ch; }
.shop__text p + p { margin-top: 1.1rem; }
.shop__text .aside { color: var(--bark); }
.shop__text .section__title { color: var(--bark); }

/* ========================================================== CLOSING BAND */

.closing-band { position: relative; }
.closing-band .plate__frame { border-radius: 0; box-shadow: none; }

/* =========================================================== PAGE HEADER */
/* The title overlaps the photograph, and it can, because the scrim has
   reached solid --bark everywhere the type sits. */

.pagehead {
  position: relative;
  background: var(--bark);
  color: var(--linen);
  /* The band is tall so the photograph has room, and the title rises exactly
     --band-overlap into it. The scrim below is solid --bark across a deeper
     share of the band than that overlap, so the type is always on --bark
     while the picture stays visible above it. */
  --band-h: clamp(16rem, 34vw, 32rem);
  --band-overlap: clamp(2.5rem, 6vw, 6rem);
}
.pagehead__band { position: absolute; inset: 0 0 auto 0; height: var(--band-h); overflow: hidden; }
.pagehead__band .plate,
.pagehead__band .plate__frame { height: 100%; }
.pagehead__band .plate__frame { aspect-ratio: auto; border-radius: 0; box-shadow: none; }

.pagehead__scrim {
  position: absolute;
  inset: 0;
  height: var(--band-h);
  bottom: auto;
  /* Solid --bark across the bottom third. The title rises at most
     --band-overlap into the band, which stays well inside that third, so the
     type is measured against --bark and never against pixels. */
  background:
    linear-gradient(to top,
      var(--bark) 0%,
      var(--bark) 26%,
      rgba(36, 28, 21, 0.76) 44%,
      rgba(36, 28, 21, 0.42) 70%,
      rgba(36, 28, 21, 0.2) 100%),
    linear-gradient(to right, rgba(23, 17, 12, 0.42), rgba(23, 17, 12, 0) 68%);
  z-index: 2;
}

.pagehead__inner {
  position: relative;
  z-index: 4;
  padding-top: calc(var(--band-h) - var(--band-overlap));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.pagehead__title {
  font-size: var(--fs-hero);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.028em;
  color: var(--linen);
  margin-bottom: 1.75rem;
  max-width: 16ch;
}
.pagehead__cols { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.pagehead__price {
  padding-top: 1.25rem;
  border-top: 1px solid var(--cut-dark-on-dark);
  position: relative;
  max-width: 38ch;
}
.pagehead__price::before {
  content: "";
  position: absolute; top: 1px; left: 0; right: 0; height: 1px;
  background: var(--cut-light-on-dark);
}
.pagehead__price-head {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.pagehead__price p:not(.pagehead__price-head) { color: var(--cream-dim); font-size: var(--fs-small); }

/* ================================================================== TYPES */

.type-grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.type__body { margin-top: 1.5rem; }
.type__title {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  font-variation-settings: "opsz" 90;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.type__desc { color: var(--ink-soft); max-width: 52ch; }

/* ========================================================= DARK MATERIALS */

.dark-mats { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.dmat__title {
  font-size: var(--fs-h3);
  font-variation-settings: "opsz" 60;
  color: var(--linen);
  margin: 1.35rem 0 0.6rem;
}
.dmat p { color: var(--cream-dim); font-size: var(--fs-small); }

.disclose {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--cut-dark-on-dark);
  position: relative;
}
.disclose::before {
  content: "";
  position: absolute; top: 1px; left: 0; right: 0; height: 1px;
  background: var(--cut-light-on-dark);
}
.disclose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--linen);
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose__label {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
}
.disclose__sign {
  flex: none;
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
}
.disclose__sign::before,
.disclose__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--clay);
  transition: transform 260ms var(--ease);
}
.disclose__sign::after { transform: rotate(90deg); }
.disclose[open] .disclose__sign::after { transform: rotate(0deg); }
.disclose__body { padding-bottom: 1.75rem; max-width: 62ch; }
.disclose__body p { color: var(--cream-dim); font-size: var(--fs-small); }
.disclose__body p + p { margin-top: 1rem; }

/* =============================================================== TIMELINE */

.timeline-wrap { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }
.timeline-intro .plate { margin-top: clamp(2rem, 4vw, 2.75rem); }

.track { display: grid; }
.track__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cut-dark);
  position: relative;
}
.track__item::before {
  content: "";
  position: absolute; top: 1px; left: 0; right: 0; height: 1px;
  background: var(--cut-light);
}
.track__item:last-child { border-bottom: 1px solid var(--cut-dark); }
.track__num {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 90;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}
.track__title { font-size: 1.2rem; font-variation-settings: "opsz" 40; font-weight: 600; margin-bottom: 0.2rem; }
.track__meta {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.track__body p:not(.track__meta) { color: var(--ink-soft); font-size: var(--fs-small); max-width: 52ch; }

/* ================================================================ CONTACT */

.contact { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }

.contact__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--cut-dark);
  box-shadow: 0 1px 0 var(--cut-light) inset;
}
.contact__fact--wide { grid-column: 1 / -1; }
.contact__facts dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.contact__facts dd { margin: 0; font-size: var(--fs-small); line-height: 1.55; }

.form {
  background: var(--linen);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(36, 28, 21, 0.07);
}
.form__title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cut-dark);
  box-shadow: 0 1px 0 var(--cut-light);
}

.field { margin-bottom: 1.15rem; }
.field-row { display: grid; gap: 0 1rem; }
.field label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.field__opt { text-transform: none; letter-spacing: 0.02em; font-weight: 400; opacity: 0.85; }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--bark);
  background: #FFFFFF;
  border: 1px solid rgba(36, 28, 21, 0.24);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.85rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.field input:hover,
.field textarea:hover { border-color: rgba(36, 28, 21, 0.42); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--rust); border-width: 1.5px; }

.field__error {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--rust);
  font-weight: 500;
}
.field__hint { margin-top: 0.45rem; font-size: 0.85rem; color: var(--ink-soft); }

.form__note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }

.form__ok {
  margin-top: 1.5rem;
  background: var(--sage-wash);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.25rem;
}
.form__ok-title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sage-deep);
  margin-bottom: 0.4rem;
}
.form__ok-body { font-size: var(--fs-small); color: var(--bark); }

.contact.is-flagged .form { box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--clay); }

/* ================================================================= FOOTER */

.footer { background: var(--bark); color: var(--cream-dim); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__inner { display: grid; gap: 2.5rem; }
.footer__name {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--linen);
  margin-bottom: 0.6rem;
}
.footer__line { font-size: var(--fs-small); max-width: 34ch; }
.footer__heading {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen);
  margin-bottom: 0.9rem;
}
.footer__nav li + li { margin-top: 0.4rem; }
.footer a { color: var(--cream-dim); text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.footer__contact p { font-size: var(--fs-small); }
.footer__contact p + p { margin-top: 0.8rem; }

/* ================================================================= MOTION */
/* Applied only under html.motion, which the inline head script sets when JS
   is running and reduced motion is not requested. If either is false, no
   start state is ever written and nothing can stay hidden. */

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================ BREAKPOINTS */

@media (min-width: 34rem) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .dark-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52rem) {
  /* Services: tall on the left, two stepped down on the right */
  .offset-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .card--a { grid-column: 1 / 7; grid-row: 1 / span 2; }
  .card--b { grid-column: 8 / 13; grid-row: 1; margin-top: clamp(2rem, 6vw, 5rem); }
  .card--c { grid-column: 8 / 13; grid-row: 2; margin-top: clamp(2rem, 4vw, 3rem); }

  /* Materials: row two inset by a column */
  .mat-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .mat--1 { grid-column: 1 / 7; grid-row: 1; }
  .mat--2 { grid-column: 8 / 13; grid-row: 1; margin-top: clamp(2rem, 5vw, 4rem); }
  .mat--3 { grid-column: 2 / 8; grid-row: 2; }
  .mat--4 { grid-column: 9 / 13; grid-row: 2; margin-top: clamp(1.5rem, 4vw, 3rem); }

  /* Memorial types: two full width spreads, the rest paired */
  .type-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .type { grid-column: span 6; }
  .type--wide {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .type--wide .type__body { margin-top: 0; }
  .type--flip .plate { order: 2; }
  .type--low { margin-top: clamp(2rem, 5vw, 4rem); }

  .shop { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .section--shop { padding-bottom: 0; }
  /* The plate is lifted above the band that follows it, so the photograph
     reads as a matted print laid across the section edge. */
  .shop__media { position: relative; z-index: 2; }
  .plate--overlap { margin-bottom: clamp(-8rem, -10vw, -3.5rem); }
  .plate--overlap .plate__frame { box-shadow: var(--mat), var(--shadow-lift); }

  .contact { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.25rem); }
  /* Stepped diagonal: each column drops below the one before it */
  .step { margin-top: calc((var(--n, 1) - 1) * clamp(0.85rem, 1.7vw, 1.85rem)); }

  .timeline-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .pagehead__cols { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

@media (min-width: 60rem) and (min-height: 52rem) {
  .timeline-intro { position: sticky; top: 7.5rem; align-self: start; }
}

@media (min-width: 62rem) {
  /* Hero: a cream plate carrying the headline intrudes into a photograph
     that bleeds off the right edge. The type never crosses onto the photo. */
  .hero {
    /* Column one is the page gutter exactly, so the headline starts on the
       same vertical as the wordmark and every section title below it. */
    grid-template-columns:
      max(var(--pad), calc((100% - var(--wrap)) / 2))
      minmax(0, 36rem)
      clamp(3rem, 7vw, 9rem)
      minmax(0, 1fr);
    padding-bottom: 0;
  }
  .hero__media { grid-column: 3 / 5; grid-row: 1; }
  .hero__media .plate,
  .hero__media .plate__frame { height: 100%; }
  .hero__media .plate__frame {
    aspect-ratio: auto;
    min-height: clamp(31rem, 82vh, 48rem);
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .hero__panel {
    position: relative;
    grid-column: 2 / 4;
    grid-row: 1;
    align-self: center;
    z-index: 2;
    background: var(--linen);
    padding: clamp(2.75rem, 4.5vw, 4rem) clamp(2.5rem, 4vw, 4rem) clamp(2.75rem, 4.5vw, 4rem) 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-block: clamp(3.5rem, 8vw, 7rem);
  }
  /* Depth only where the plate actually sits over the photograph. A box
     shadow bled faintly along the top and bottom, over plain --linen. */
  .hero__panel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 3rem;
    background: linear-gradient(to right, rgba(36, 28, 21, 0.3), rgba(36, 28, 21, 0));
    pointer-events: none;
  }
}

@media (max-width: 61.99rem) {
  .menu-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--linen);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-lift), inset 0 1px 0 var(--cut-dark);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .nav__list a { font-size: 1.05rem; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .nav__actions .btn { width: 100%; }
  .link-call { padding-top: 0.5rem; border-top: 1px solid var(--cut-dark); }

  /* Without JavaScript the toggle can never fire, so the nav stays laid out. */
  .no-js .menu-toggle { display: none; }
  .no-js .nav { display: flex; position: static; box-shadow: none; padding: 0; background: none; }
  .no-js .masthead__inner { flex-wrap: wrap; }
}

@media (max-width: 61.99rem) {
  .hero__media .plate__frame { aspect-ratio: 5 / 4; border-radius: 0; }
}

@media (max-width: 33.99rem) {
  .contact__facts { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .track__item { grid-template-columns: 2.5rem 1fr; }
}

/* ========================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .plate img { transform: none !important; }
  .plate[data-parallax] img { --sc: 1; }
}