/* Tactile letterpress paper, raised foil and live type. No baked-in names or UI. */
.cinematic-invitation {
  --material-metal:#c99a43;
  --material-metal-light:#fff0bf;
  --material-metal-dark:#94631f;
  --material-metal-ink:#ae7d2c;
  --material-light:color-mix(in srgb,var(--story-paper) 18%,white);
  --material-shadow:color-mix(in srgb,var(--story-ink) 34%,var(--story-wash));
}
.story-dark,.cinematic-invitation:has(.story-dark) {
  --material-light:color-mix(in srgb,var(--story-paper) 78%,white);
  --material-shadow:#05040a;
  --material-metal-ink:#f3dca3;
  --material-metal-dark:#b38234;
  --material-metal-light:#fff1c9;
}
.card.material-story {
  background-image:radial-gradient(ellipse at 32% 16%,color-mix(in srgb,var(--story-paper) 20%,white) 0,transparent 68%),linear-gradient(125deg,var(--story-paper),color-mix(in srgb,var(--story-paper) 88%,var(--story-wash)) 65%,var(--story-paper));
}
.card.material-story.story-dark {
  background-image:radial-gradient(ellipse at 32% 16%,color-mix(in srgb,var(--story-wash) 24%,transparent),transparent 68%),linear-gradient(125deg,var(--story-paper),color-mix(in srgb,var(--story-paper) 88%,var(--story-wash)) 65%,var(--story-paper));
}
.material-story:before {
  background:url('/materials/letterpress-cotton.webp') repeat;
  background-size:420px 420px;
  opacity:.23;
  mix-blend-mode:multiply;
}
.story-dark.material-story:before { opacity:.2; mix-blend-mode:soft-light; }
.material-paper-grain { background:none; }
.material-story>.hero .story-reading-veil,.material-story>.rb-hero .story-reading-veil { background:none!important; }
.material-story>.hero-names-only .story-bouquet,.material-story>.rb-hero .story-bouquet {
  width:75%; height:auto!important; aspect-ratio:2/3;
}
.material-story>.hero-names-only .story-bouquet-a,.material-story>.rb-hero .story-bouquet-a { left:-12%; bottom:-8%; }
.material-story>.hero-names-only .story-bouquet-b,.material-story>.rb-hero .story-bouquet-b { right:-10%; top:-8%; }
.material-embossed-botany { opacity:.28; }
.material-chapter .material-embossed-botany { opacity:.24; }
.story-dark .material-embossed-botany { opacity:.12; }
.material-family-trellis .material-embossed-botany { opacity:.34; }
.material-story .material-silk { opacity:1; }
.material-story .material-fold-shadow { opacity:.23; }
.material-story .material-filigree { opacity:.95; }
.material-story .material-bevel { stroke-width:18px; }
.material-story .material-chapter .material-frame { opacity:.58; }

/* A broad, sculpted paper medallion with engraved foil rather than a wax stamp. */
.material-story .hero-initials {
  width:140px; height:140px; margin:0 auto 34px; padding:0 0 13px;
  border:0; border-radius:50%; gap:7px;
  background:radial-gradient(circle at 36% 29%,var(--material-light),var(--story-paper) 60%,var(--story-wash));
  box-shadow:inset 0 2px 4px #ffffff94,inset 0 -4px 5px #0000000b,0 12px 18px #00000021,0 3px 5px #00000016;
  color:var(--story-ink); font:500 46px/1 "Cormorant Garamond",Georgia,serif;
  text-shadow:0 1px 0 var(--material-light),0 2px 2px #00000012;
}
.material-story .hero-initials:before,.material-story .hero-initials:after { display:none; }
.material-story .hero-initials .hero-seal-rim {
  position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px);
  display:block; z-index:0; pointer-events:none;
}
.material-story .hero-initials .hero-seal-decoration { position:absolute; inset:0; z-index:0; pointer-events:none; }
.material-story .hero-initials>span:not(.hero-seal-decoration),.material-story .hero-initials>i { z-index:1; }
.material-story .hero-initials i { font:italic 29px/1 "Cormorant Garamond",Georgia,serif; color:var(--material-metal-ink); }

/* Frame artwork: the box is the whole frame, with the plate and initials centred on the frame's empty circle.
   The plate stays one size, so thin rings and broad ones hold the same initials. */
.hero-initials.hero-initials[data-frame-art] {
  --frame-plate:128px; --frame-largest:220px;
  --frame-size:min(calc(var(--frame-plate) / var(--frame-open)),var(--frame-largest));
  --frame-circle:calc(var(--frame-size) * var(--frame-open));
  width:var(--frame-size); height:var(--frame-size); margin:0 auto 20px; padding:0; gap:6px;
  border:0; border-radius:0; background:none; box-shadow:none;
  font-size:calc(var(--frame-circle) * .32);
}
.material-story .rb-hero .hero-initials.hero-initials[data-frame-art] { margin-top:12px; }
.hero-initials.hero-initials[data-frame-art]:before {
  content:""; display:block; position:absolute; inset:auto;
  left:calc(var(--frame-x) * 100%); top:calc(var(--frame-y) * 100%); width:calc(var(--frame-circle) * 1.02); height:calc(var(--frame-circle) * 1.02);
  transform:translate(-50%,-50%); border:0; border-radius:50%;
  background:radial-gradient(circle at 36% 29%,var(--material-light),var(--story-paper) 60%,var(--story-wash));
  box-shadow:inset 0 2px 4px #ffffff94,inset 0 -4px 5px #0000000b;
}
.hero-initials.hero-initials[data-frame-art]:after,.hero-initials[data-frame-art] .hero-seal-rim { display:none; }
.hero-frame-art { position:absolute; inset:0; z-index:1; width:100%; height:100%; max-width:none; filter:drop-shadow(0 3px 4px #00000030); pointer-events:none; }
.hero-initials[data-frame-art]>span:not(.logo-change-hint),.hero-initials[data-frame-art]>i {
  position:relative; z-index:2;
  transform:translate(calc(var(--frame-size) * (var(--frame-x) - .5)),calc(var(--frame-size) * (var(--frame-y) - .5)));
}
.hero-initials.hero-initials[data-frame-art]>i { font-size:.62em; }
@media(max-width:380px){ .hero-initials.hero-initials[data-frame-art] { --frame-plate:112px; --frame-largest:190px; } }
@media(max-height:620px){ .hero-initials.hero-initials[data-frame-art] { --frame-plate:88px; --frame-largest:150px; margin-bottom:14px; } }

/* The top and bottom share one library. A logo at the top: taller than a frame, with its own plate and initials colour. */
.hero-initials.hero-initials[data-frame-logo] {
  --crest:150px; --logo-ink:linear-gradient(170deg,#f8e6b8,#d6ad66 48%,#f1d596 72%,#b98c47);
  width:var(--crest); height:calc(var(--crest) * 760 / 620); margin:0 auto 20px; padding:0; gap:.05em;
  border:0; border-radius:0; background:none; box-shadow:none;
  font:600 calc(var(--crest) * .22 * var(--logo-scale,1))/1.15 "Cormorant Garamond",Georgia,serif;
}
.hero-initials.hero-initials[data-frame-logo][data-wide] { font-size:calc(var(--crest) * .19 * var(--logo-scale,1)); }
.hero-initials[data-logo-tone=bronze] { --logo-ink:linear-gradient(170deg,#8a6a33,#5f4319 55%,#94733a)!important; }
.hero-initials[data-logo-tone=ink] { --logo-ink:linear-gradient(170deg,#2f5367,#183444 60%,#335a70)!important; }
.hero-initials[data-logo-tone=silver] { --logo-ink:linear-gradient(170deg,#f6f8fa,#b9c1c9 48%,#eef1f4 72%,#98a2ac)!important; }
.hero-initials[data-logo-tone=slate] { --logo-ink:linear-gradient(170deg,#6a747e,#3f4851 60%,#6f7983)!important; }
.hero-initials[data-logo-tone=copper] { --logo-ink:linear-gradient(170deg,#f6c7a1,#d38a5b 48%,#f0b98f 72%,#b56c3f)!important; }
.hero-initials[data-logo-tone=noir] { --logo-ink:linear-gradient(170deg,#3a3a3a,#141414 60%,#333)!important; }
.hero-initials.hero-initials[data-frame-logo]:before,.hero-initials.hero-initials[data-frame-logo]:after,
.hero-initials[data-frame-logo] .hero-seal-rim,.hero-initials[data-frame-logo] .hero-seal-decoration { display:none; }
.hero-initials[data-frame-logo]>span:not(.logo-change-hint):not(.hero-seal-decoration),.hero-initials.hero-initials[data-frame-logo]>i {
  position:relative; z-index:2; padding:0 .04em;
  /* The medallion's own text shadow would paint over letters filled this way, washing them out */
  text-shadow:none; filter:drop-shadow(0 1px 1px #0000002e);
  background:var(--logo-ink); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  transform:translate(calc(var(--crest) * (var(--logo-x) - 50%) / 100%),calc(var(--crest) * 760 / 620 * (var(--logo-y) - 50%) / 100%));
}
.hero-initials.hero-initials[data-frame-logo]>i { font:italic 500 .52em/1.15 "Cormorant Garamond",Georgia,serif; }
@media(max-width:380px){ .hero-initials.hero-initials[data-frame-logo] { --crest:132px; } }
@media(max-height:620px){ .hero-initials.hero-initials[data-frame-logo] { --crest:104px; margin-bottom:14px; } }

/* A top frame at the bottom: square, see-through in the middle, so it gets the medallion's plate and ink. */
.closing-crest[data-crest-frame] { aspect-ratio:1; }
.closing-crest[data-crest-frame]:before {
  content:""; position:absolute; left:var(--logo-x); top:var(--logo-y); width:calc(var(--crest-open) * 102%); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 36% 29%,var(--material-light,#fff),var(--story-paper,#fff) 60%,var(--story-wash,#f3efe8));
  box-shadow:inset 0 2px 4px #ffffff94,inset 0 -4px 5px #0000000b;
}
.closing-crest[data-crest-frame] .closing-initials b,.closing-crest[data-crest-frame] .closing-initials i {
  background:none; color:var(--accent-ink,var(--ink,#3a2d1c)); -webkit-text-fill-color:currentColor;
}

/* A wider live-name area keeps the reference's two-name composition readable. */
.cinematic-invitation .card.material-story>.hero-names-only {
  padding:120px 8.5% 142px;
  justify-content:center;
  min-height:100svh;
}
.material-story .hero-names-only>.eyebrow {
  font:600 15px/1.5 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.28em; margin-bottom:30px!important;
  text-shadow:0 1px 0 var(--material-light);
}
.cinematic-invitation .material-story .hero-names-only .names {
  width:100%; max-width:none; margin:0 auto 28px;
  font-size:clamp(43px,13.1vw,65px); line-height:1.08;
  letter-spacing:-.025em; text-wrap:balance;
}
.cinematic-invitation .material-story.premium-type-editorial .hero-names-only .names {
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
}
.material-story .hero-names-only .hero-name {
  color:var(--story-ink); overflow-wrap:anywhere;
  text-shadow:0 1px 0 var(--material-light),.5px 1.5px 1px color-mix(in srgb,var(--story-ink) 23%,transparent),0 3px 4px color-mix(in srgb,var(--story-ink) 9%,transparent);
}
.material-story .hero-names-only .names .amp {
  margin:12px auto 14px; width:190px; max-width:66%;
  font:italic 43px/1 "Cormorant Garamond",Georgia,serif;
  color:var(--material-metal-ink); text-shadow:0 1px 0 var(--material-light),0 2px 2px #00000014;
}
.material-story .hero-names-only .names .amp:before,.material-story .hero-names-only .names .amp:after { width:37%; opacity:1; }
.material-story .hero-names-only .hero-date {
  font:500 19px/1.5 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.24em; color:var(--story-ink);
}
.material-story .hero-names-only .hero-date:before {
  width:175px; height:17px; margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,var(--material-metal),transparent) center/100% 1px no-repeat;
  clip-path:polygon(0 46%,43% 46%,43% 40%,47% 40%,50% 5%,53% 40%,57% 40%,57% 46%,100% 46%,100% 54%,57% 54%,57% 60%,53% 60%,50% 95%,47% 60%,43% 60%,43% 54%,0 54%);
  background-color:var(--material-metal);
}
.material-story .hero-names-only .hero-venue {
  margin-top:17px; max-width:100%;
  font:500 15px/1.5 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.16em; color:var(--story-ink);
}
.story-dark .hero-names-only .hero-name { text-shadow:0 1px 0 #ffffff25,0 2px 4px #00000060; }

/* The same medallion and clear spacing in the Royal names-only renderer. */
.material-story .rb-hero-copy { padding-inline:8.5%; }
.material-story .rb-hero .hero-initials { margin-top:27px; margin-bottom:34px; }
.material-story .rb-hero .hero-name { text-shadow:0 1px 0 var(--material-light),0 2px 2px #00000016; }
.cinematic-invitation .material-story .rb-hero .names { width:100%; max-width:none; font-size:clamp(39px,12vw,64px)!important; line-height:1.1; }
.material-story .rb-hero .rb-scroll { position:absolute; left:50%; right:auto; bottom:100px; transform:translateX(-50%); font-size:9px; white-space:nowrap; }

/* A physical, double-edged tray, with a fully opaque centre for smooth scrolling. */
body.cinematic-invitation .dock,body.cinematic-invitation.theme-royal .dock {
  width:min(calc(100% - 22px),458px); max-width:458px;
  bottom:max(13px,env(safe-area-inset-bottom));
  padding:8px 5px; min-height:78px; border:2px solid transparent; border-radius:37px;
  background:linear-gradient(135deg,var(--material-light),var(--story-paper) 48%,color-mix(in srgb,var(--story-paper) 78%,var(--story-wash))) padding-box,linear-gradient(135deg,var(--material-metal-light),var(--material-metal-dark) 23%,var(--material-metal-light) 50%,var(--material-metal) 78%,var(--material-metal-light)) border-box;
  box-shadow:inset 0 2px 1px #ffffffeb,inset 0 -2px 2px #0000000a,0 10px 18px #00000025,0 0 0 2px var(--material-light);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.cinematic-invitation .dock button {
  min-width:0; min-height:58px; padding:4px 1px; gap:5px; border-radius:27px;
  font:500 15px/1.15 "Cormorant Garamond",Georgia,serif; color:var(--story-ink);
  text-shadow:0 1px 0 var(--material-light);
}
body.cinematic-invitation .dock button svg { width:25px; height:25px; stroke-width:1.55; }
body.cinematic-invitation .dock button+button:before { top:13%; height:74%; background:linear-gradient(transparent,var(--material-metal),transparent); opacity:.65; }
body.cinematic-invitation .dock button:hover,body.cinematic-invitation .dock button[aria-expanded=true] { background:color-mix(in srgb,var(--material-metal) 10%,var(--story-paper)); }

@media(max-width:380px) {
  .cinematic-invitation .card.material-story>.hero-names-only { padding-inline:8%; padding-top:105px; padding-bottom:130px; }
  .material-story .hero-initials { width:120px; height:120px; font-size:40px; margin-bottom:29px; }
  .material-story .hero-initials i { font-size:25px; }
  .material-story .hero-names-only>.eyebrow { font-size:12px; letter-spacing:.24em; margin-bottom:25px!important; }
  .cinematic-invitation .material-story .hero-names-only .names { font-size:45px; }
  .material-story .hero-names-only .names .amp { font-size:35px; margin-block:10px; }
  .material-story .hero-names-only .hero-date { font-size:17px; }
  .material-story .hero-names-only .hero-venue { font-size:13px; }
  body.cinematic-invitation .dock { width:calc(100% - 18px); border-radius:32px; padding:6px 4px; min-height:72px; }
  body.cinematic-invitation .dock button { font-size:12px; min-height:54px; }
  body.cinematic-invitation .dock button svg { width:23px; height:23px; }
}
@media(max-height:700px) {
  .cinematic-invitation .card.material-story>.hero-names-only { padding-top:88px; padding-bottom:112px; }
  .material-story .hero-initials { width:108px; height:108px; font-size:37px; margin-bottom:25px; }
  .material-story .hero-initials i { font-size:24px; }
  .material-story .hero-names-only>.eyebrow { margin-bottom:22px!important; }
  .cinematic-invitation .material-story .hero-names-only .names { font-size:43px; margin-bottom:21px; }
  .material-story .hero-names-only .names .amp { font-size:32px; margin-block:8px; }
  .material-story .hero-names-only .hero-date { font-size:16px; }
  .material-story .hero-names-only .hero-date:before { margin-bottom:15px; }
  .material-story .hero-names-only .hero-venue { font-size:12px; margin-top:12px; }
}