/* Live editorial copy from Bosque Memorial.pdf. Media and framing stay in scene.js.
   The flattened brochure has no embedded fonts: these self-hosted serif/sans
   faces reproduce its roles. The wordmark is live type; the four icon
   illustrations remain original PDF extracts. */
@font-face {
  font-family: "Memorial Editorial";
  src: url("fonts/memorial-editorial-serif-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Memorial Editorial";
  src: url("fonts/memorial-editorial-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Memorial Editorial Sans";
  src: url("fonts/memorial-editorial-sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Memorial Handwriting";
  src: url("fonts/memorial-editorial-script.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
#scene-copy {
  --copy-cream: #f4efd9;
  --copy-green: #283e2d;
  --copy-gold: #c8bb83;
  --copy-olive: #72754b;
  --copy-heading: clamp(2rem, 3.6vw, 4rem);
  --copy-body: clamp(1rem, 1.35vw, 1.3rem);
  --copy-label: clamp(.75rem, .95vw, .875rem);
  --copy-inset: clamp(24px, 5vw, 96px);
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-family: "Memorial Editorial", "Times New Roman", serif;
  color: var(--copy-cream);
}
.scene-copy { position: absolute; inset: 0; }
.intro-frame { position: absolute; inset: 0; margin: 0; background: var(--forest); }
.intro-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
html[data-memorial-a="true"] .intro-frame { display: none; }
html[data-memorial-a="true"] .copy-cover { --cover-image: none; }
#scene-dimmer { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* A narrow letter edge keeps copy readable across moving foliage and sunlight;
   this affects glyphs only, never the scene or a rectangular background. */
.copy-girl, .copy-bench, .copy-ceremony, .copy-overlook {
  -webkit-text-stroke: .65px rgba(27,43,29,.8);
  paint-order: stroke fill;
}
.scene-copy p, .scene-copy h1, .scene-copy h2, .scene-copy ul, .scene-copy dl, .scene-copy dd { margin: 0; }
.scene-copy h1, .scene-copy h2 { font-weight: 400; line-height: 1.04; text-wrap: balance; }
.scene-copy h2 { font-size: var(--copy-heading); }
.scene-copy em { color: var(--copy-gold); font-weight: 400; }
.editorial-label, .editorial-tagline, .girl-benefits, .ceremony-spaces dt {
  font-family: "Memorial Editorial Sans", Arial, sans-serif;
  font-size: var(--copy-label);
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.editorial-body { font-family: "Memorial Editorial Sans", Arial, sans-serif; font-size: var(--copy-body); line-height: 1.55; text-wrap: pretty; }
.editorial-quote { font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.2; font-style: italic; text-wrap: pretty; }
.editorial-rule { display: block; width: clamp(80px, 8vw, 150px); height: 1px; background: var(--copy-gold); }
.copy-cover {
  /* The still preview supplies its photo; the enabled film supplies its own. */
  background: linear-gradient(90deg, rgba(18,44,28,.98) 0%, rgba(23,48,30,.93) 26%, rgba(30,52,32,.7) 43%, rgba(29,48,30,.23) 59%, transparent 76%),
    var(--cover-image, url("https://stmemorialemulint1992.blob.core.windows.net/media/images/frame1A.jpeg")) center / cover no-repeat;
}
.cover-content {
  position: absolute;
  left: var(--copy-inset);
  top: max(calc(var(--vh) * 6), env(safe-area-inset-top));
  bottom: max(calc(var(--vh) * 5), env(safe-area-inset-bottom));
  width: 42%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cover-logo { width: min(100%, 390px); display: flex; align-items: center; gap: 5%; }
.cover-brand { flex: 0 0 57%; text-transform: uppercase; font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: .9; letter-spacing: .045em; white-space: nowrap; }
.cover-brand-description { border-left: 1px solid var(--copy-gold); padding: 6px 0 6px 5%; font-family: "Memorial Editorial Sans", Arial, sans-serif; font-size: clamp(.65rem, 1.05vw, .85rem); line-height: 1.65; letter-spacing: .16em; text-transform: uppercase; }
.cover-brand-description > span { display: block; margin-top: 6px; font-family: "Memorial Editorial", "Times New Roman", serif; letter-spacing: .25em; }
.copy-cover h1 { font-size: clamp(2.8rem, min(6.7vw, calc(var(--vh) * 10.3)), 6rem); }
.copy-cover h1 em { font-size: 1.05em; }
.cover-description { font-size: clamp(1rem, 1.8vw, 1.625rem); line-height: 1.3; }
.cover-values { display: flex; width: 100%; align-items: center; list-style: none; padding: 0; }
.cover-values li { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 0; padding: 0 10px; gap: 8px; }
.cover-values li:first-child { padding-left: 0; }
.cover-values li:last-child { padding-right: 0; }
.cover-values li + li { border-left: 1px solid rgba(200,187,131,.5); }
.cover-icon { --icon-height: clamp(36px, calc(var(--vh) * 6), 64px); display: flex; justify-content: center; width: 100%; height: var(--icon-height); overflow: hidden; }
.cover-values img { display: block; height: calc(var(--icon-height) * 1.48); width: auto; max-width: none; flex: none; }
.cover-values li > span:last-child { font-family: "Memorial Editorial Sans", Arial, sans-serif; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--copy-gold); }
/* Copy stays opaque above the single neutral screen layer. */
.girl-message { position: absolute; top: 9%; right: 5%; width: 42%; max-width: 700px; color: var(--copy-cream); text-shadow: 0 2px 3px #203221; }
.girl-values { display: flex; justify-content: space-between; gap: 24px; margin-bottom: calc(var(--vh) * 5) !important; }
.copy-girl h2 em { color: var(--copy-gold); }
.copy-girl h2 { -webkit-text-stroke-width: 1px; }
.girl-benefits { list-style: none; padding: 0; margin-top: calc(var(--vh) * 4) !important; display: grid; gap: calc(var(--vh) * 2); }
.girl-message .editorial-tagline { margin-top: calc(var(--vh) * 4); }
.girl-message .editorial-quote { margin-top: calc(var(--vh) * 2); font-family: "Memorial Handwriting", "Segoe Script", cursive; font-style: normal; font-size: clamp(1.15rem, 1.65vw, 1.7rem); }
.bench-message { position: absolute; right: 4%; top: 8%; width: 27%; max-width: 470px; color: var(--copy-cream); text-shadow: 0 2px 5px rgba(18,35,24,.9); }
.bench-message .editorial-label { color: var(--copy-cream); margin-bottom: 12px; }
.bench-message h2 { margin-bottom: 20px; }
.bench-message .editorial-quote { margin-top: calc(var(--vh) * 3); }
.bench-message .editorial-tagline { margin-top: calc(var(--vh) * 3); }
.ceremony-message { position: absolute; left: 4%; top: 7%; width: 32%; max-width: 550px; text-shadow: 0 2px 5px rgba(18,35,24,.95); }
.ceremony-message h2, .ceremony-message .editorial-subtitle { color: var(--copy-green); -webkit-text-stroke: .5px rgba(244,239,217,.7); text-shadow: 0 1px 2px rgba(244,239,217,.6); }
.ceremony-message .editorial-subtitle em { color: #515635; }
.editorial-subtitle { font-size: clamp(1.375rem, 2.2vw, 2.3rem); line-height: 1.2; margin-top: 12px !important; }
.ceremony-message .editorial-body { margin-top: 20px; }
.ceremony-spaces { display: grid; gap: 16px; margin-top: 24px !important; }
.ceremony-spaces dt { color: var(--copy-gold); margin-bottom: 4px; }
.ceremony-spaces dd { font-family: "Memorial Editorial Sans", Arial, sans-serif; font-size: var(--copy-body); line-height: 1.4; }
.ceremony-message .editorial-tagline { margin-top: 24px; }
.ceremony-values { position: absolute; right: 4%; top: 9%; line-height: 1.8; text-align: right; text-shadow: 0 2px 4px #203221; }
.ceremony-footer { position: absolute; left: 4%; right: 4%; bottom: 4%; display: flex; justify-content: space-between; gap: 20px; text-shadow: 0 2px 4px #203221; }
.overlook-message { position: absolute; top: 9%; left: 5%; width: 38%; max-width: 650px; text-shadow: 0 2px 5px #203221; }
.overlook-message > .editorial-label { margin-bottom: calc(var(--vh) * 3); }
.overlook-message h2 span { font-size: 1.2em; }
.overlook-message .editorial-body { margin-top: calc(var(--vh) * 4); }
.overlook-message .editorial-quote { margin-top: calc(var(--vh) * 4); }
.overlook-message .editorial-tagline { margin-top: calc(var(--vh) * 4); }
.overlook-side-note { position: absolute; top: 14%; right: 6%; text-shadow: 0 2px 5px #203221; }
.overlook-values { position: absolute; bottom: 8%; right: 6%; text-shadow: 0 2px 5px #203221; line-height: 1.8; }
.closing-message { position: absolute; left: 5%; top: 11%; width: 32%; color: var(--copy-green); text-shadow: 0 1px 4px rgba(255,249,226,.8); }
.closing-message h2 em { font-style: normal; color: var(--copy-olive); }
.closing-message .editorial-rule { margin: calc(var(--vh) * 4) 0; }
.closing-message .editorial-body { font-size: clamp(1.2rem, 2vw, 1.875rem); }
.closing-message .editorial-quote { position: fixed; bottom: 8%; left: 5%; color: var(--copy-cream); text-shadow: 0 2px 4px #203221; }
.closing-side-note { position: absolute; right: 5%; top: 11%; color: var(--copy-green); text-align: right; text-shadow: 0 1px 4px rgba(255,249,226,.8); }
@media (max-width: 700px) and (orientation: portrait) {
  #scene-copy { --copy-heading: clamp(1.875rem, 7.7vw, 3rem); --copy-body: 1rem; --copy-label: .75rem; }
  .cover-content { width: 86%; left: 7%; top: max(calc(var(--vh) * 5), env(safe-area-inset-top)); bottom: max(calc(var(--vh) * 6), env(safe-area-inset-bottom)); }
  .copy-cover { background: linear-gradient(90deg, rgba(18,44,28,.97), rgba(23,48,30,.8) 55%, rgba(29,48,30,.3)), var(--cover-image, url("https://stmemorialemulint1992.blob.core.windows.net/media/images/frame1A.jpeg")) center / cover no-repeat; }
  .cover-logo { width: min(100%, 320px); }
  .cover-brand { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .cover-brand-description { font-size: clamp(.6rem, 2.8vw, .75rem); }
  .copy-cover h1 { font-size: clamp(2.8rem, min(14vw, calc(var(--vh) * 9)), 5rem); }
  .cover-description { font-size: 1.25rem; }
  .cover-values li { padding: 0 5px; }
  .cover-values .cover-icon { --icon-height: 36px; }
  .cover-values li > span:last-child { font-size: .6875rem; letter-spacing: 0; }
  .girl-message { top: 3%; right: 6%; width: 88%; }
  .girl-values { margin-bottom: 12px !important; }
  .girl-benefits { margin-top: 18px !important; gap: 8px; }
  .girl-message .editorial-tagline { margin-top: 14px; }
  .girl-message .editorial-quote { margin-top: 8px; }
  .bench-message { top: 4%; right: 6%; width: 88%; max-width: none; color: var(--copy-green); text-shadow: 0 1px 2px rgba(244,239,217,.7); -webkit-text-stroke: .5px rgba(244,239,217,.6); }
  .bench-message .editorial-label { color: #515635; }
  .bench-message h2 { margin-bottom: 12px; }
  .bench-message .editorial-body { max-width: 34ch; }
  .bench-message .editorial-quote { margin-top: calc(var(--vh) * 2); max-width: 30ch; font-size: 1.2rem; }
  .bench-message .editorial-tagline { margin-top: calc(var(--vh) * 2); }
  .ceremony-message { top: 4%; left: 6%; width: 88%; max-width: none; }
  .ceremony-message .editorial-body { margin-top: 12px; }
  .editorial-subtitle { margin-top: 8px !important; }
  .ceremony-spaces { gap: 12px; margin-top: 20px !important; }
  .ceremony-message .editorial-tagline { margin-top: 20px; }
  .ceremony-values { top: auto; bottom: 12%; right: 6%; }
  .ceremony-footer { left: 6%; right: 6%; bottom: 4%; flex-direction: column; gap: 8px; max-width: 75%; }
  .overlook-message { top: 5%; left: 6%; width: 88%; max-width: none; }
  .overlook-message h2 { font-size: clamp(1.875rem, 8vw, 2.7rem); }
  .overlook-message .editorial-body { max-width: 34ch; margin-top: calc(var(--vh) * 3); }
  .overlook-message .editorial-quote, .overlook-message .editorial-tagline { margin-top: calc(var(--vh) * 3); }
  .overlook-side-note { top: auto; bottom: 10%; left: 6%; right: auto; font-size: 1.2rem; }
  .overlook-values { bottom: 10%; right: 6%; }
  /* The final frame is already contained. Use its existing top/bottom margins. */
  .closing-message { top: max(calc(var(--vh) * 5), env(safe-area-inset-top)); left: 6%; width: 88%; color: var(--copy-cream); text-shadow: none; }
  .closing-message h2 em { color: var(--copy-gold); }
  .closing-message .editorial-rule { margin: calc(var(--vh) * 2) 0; }
  .closing-message .editorial-body { font-size: 1.2rem; }
  .closing-message .editorial-quote { position: fixed; bottom: calc(var(--vh) * 16); left: 6%; margin: 0; text-shadow: none; }
  .closing-side-note { top: auto; bottom: calc(var(--vh) * 6); right: 6%; color: var(--copy-cream); font-size: 1.2rem; text-shadow: none; }
}
@media (max-height: 580px) and (orientation: landscape) {
  #scene-copy { --copy-heading: clamp(1.5rem, 3.4vw, 2.25rem); --copy-body: .875rem; --copy-label: .6875rem; }
  .cover-content { gap: 8px; }
  .cover-logo { width: min(80%, 230px); }
  .cover-brand { font-size: 1.65rem; }
  .cover-brand-description { font-size: .55rem; }
  .cover-description { font-size: 1rem; }
  .cover-values .cover-icon { --icon-height: 26px; }
  .cover-values li > span:last-child { font-size: .6875rem; }
  .bench-message { top: 5%; width: 30%; }
  .bench-message h2 { margin-bottom: 10px; }
  .editorial-quote { font-size: 1.1rem; }
  .ceremony-message { top: 5%; width: 48%; }
  .ceremony-message .editorial-body { margin-top: 8px; }
  .ceremony-spaces { gap: 8px; margin-top: 12px !important; grid-template-columns: repeat(3, 1fr); }
  .ceremony-message .editorial-tagline { margin-top: 12px; }
  .editorial-subtitle { font-size: 1.1rem; margin-top: 6px !important; }
  .overlook-message { top: 6%; width: 44%; }
}
/* Keep the source's cream/gold palette legible over the new neutral veil.
   Glyph edges are no longer needed with the darker, uniform backdrop. */
.copy-girl, .copy-bench, .copy-ceremony, .copy-overlook,
.copy-girl h2, .bench-message, .ceremony-message h2, .ceremony-message .editorial-subtitle {
  -webkit-text-stroke: 0;
}
.bench-message, .ceremony-message h2, .ceremony-message .editorial-subtitle,
.closing-message, .closing-side-note { color: var(--copy-cream); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bench-message .editorial-label { color: var(--copy-cream); }
.ceremony-message .editorial-subtitle em, .closing-message h2 em { color: var(--copy-gold); }

/* Compact editorial flow keeps every brochure line without overlapping the
   values or footer. Tablet portrait shares the phone reading arrangement. */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .cover-content { width: 72%; }
  .girl-message, .bench-message, .ceremony-message, .overlook-message { left: 6%; right: 6%; width: 88%; max-width: 700px; }
  .bench-message .editorial-body, .overlook-message .editorial-body { max-width: 40ch; }
  .closing-message { width: 70%; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .copy-ceremony { padding: max(24px, env(safe-area-inset-top)) 6% max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
  .ceremony-message { position: static; width: 100%; }
  .ceremony-values { position: static; text-align: left; line-height: 1.5; }
  .ceremony-values br { display: none; }
  .ceremony-values { display: flex; flex-wrap: wrap; gap: 16px; }
  .ceremony-footer { position: static; max-width: none; margin-top: auto; flex-direction: column; gap: 6px; }
}
@media (max-height: 650px) and (orientation: portrait) {
  .copy-ceremony { padding-top: 16px; gap: 10px; }
  .ceremony-message .editorial-body, .ceremony-spaces dd { font-size: .875rem; line-height: 1.45; }
  .ceremony-message .editorial-body { margin-top: 10px; }
  .ceremony-spaces { gap: 8px; margin-top: 12px !important; }
  .ceremony-message .editorial-tagline { margin-top: 12px; }
  .cover-description { font-size: 1.125rem; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .cover-content { top: max(16px, env(safe-area-inset-top)); bottom: max(16px, env(safe-area-inset-bottom)); gap: 6px; width: 50%; }
  .copy-cover h1 { font-size: clamp(1.5rem, 8vh, 2.75rem); }
  .cover-description { font-size: .875rem; }
  .cover-logo { width: min(100%, 260px); }
  .cover-brand { font-size: 1.5rem; }
  .cover-values li { padding: 0 4px; }
  .girl-values { margin-bottom: 10px !important; }
  .girl-benefits { margin-top: 12px !important; gap: 6px; }
  .girl-message .editorial-tagline, .girl-message .editorial-quote { margin-top: 12px; }
  .bench-message { width: 38%; }
  .bench-message h2 { font-size: 1.75rem; }
  .closing-message { top: 6%; width: 40%; }
}
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .overlook-side-note { top: auto; bottom: 10%; left: 6%; right: auto; }
  .closing-side-note { top: auto; bottom: 6%; }
}
@media (max-width: 700px) and (max-height: 420px) and (orientation: landscape) {
  .cover-content { width: 56%; }
  .copy-ceremony { padding: max(12px, env(safe-area-inset-top)) 4% max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
  .ceremony-message { position: static; width: 100%; max-width: none; }
  .ceremony-message h2 { font-size: 1.5rem; }
  .ceremony-spaces { margin-top: 8px !important; }
  .ceremony-message .editorial-tagline { margin-top: 8px; }
  .ceremony-values { position: static; display: flex; gap: 16px; justify-content: flex-end; line-height: 1.5; }
  .ceremony-values br { display: none; }
  .ceremony-footer { position: static; margin-top: auto; gap: 8px; }
  .overlook-message { top: 4%; width: 54%; }
  .overlook-message > .editorial-label { margin-bottom: 6px; }
  .overlook-message .editorial-body, .overlook-message .editorial-quote, .overlook-message .editorial-tagline { margin-top: 8px; }
}