@font-face { font-family: "Cinzel"; src: url("../fonts/crest/cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/crest/garamond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/crest/garamond-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* THE CREST (theme key "crest", round 46): blind emboss, deckle-edged cotton paper and a couple's crest, three of the
   2027 stationery trends in one quiet design. Real photographs (V08-V10): an embossed wreath with an empty centre (your
   initials are set inside it and shaded to look pressed), a deckled sheet, a brass seal. The photos are grey and multiply
   over the paper colour, so the paper can be white cotton (original), blush, sage or dusty blue. Intro: the brass seal
   presses into the sheet and lifts away, leaving the crest. Cover: one deckled card.
   Type: Cinzel (names, headings, engraved capitals), EB Garamond (text, italic details). */
:root {
  --bg: #e9e6df; --paper: #f8f7f3; --ink: #3d3b36; --muted: #7d796f; --line: rgba(61, 59, 54, .16);
  --accent: #8a7648; --accent-ink: #fbfaf6; --name: #3d3b36;
  --display: "Cinzel", "Trajan Pro", Georgia, serif; --text: "EB Garamond", Georgia, serif; --script: "EB Garamond", Georgia, serif;
  --radius: 0px; --maxw: 520px;
}
html { background: var(--bg); }
body { font-family: var(--text); font-size: 1.12rem; line-height: 1.7; color: var(--ink); background: var(--bg); }
.cs-sheet, .cs-card { background: var(--paper) url(../img/real/cr-paper.webp) center / 100% 100% no-repeat; background-blend-mode: multiply; -webkit-mask: url(../img/real/cr-paper.webp) center / 100% 100% no-repeat; mask: url(../img/real/cr-paper.webp) center / 100% 100% no-repeat; }
.cs-crest { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--paper) url(../img/real/cr-emboss.webp) center / 100% 100% no-repeat; background-blend-mode: multiply;
  -webkit-mask: radial-gradient(closest-side, #000 86%, transparent); mask: radial-gradient(closest-side, #000 86%, transparent); }
.cs-crest b { margin-top: -6%; font: 400 2.3rem/1 var(--display); letter-spacing: .06em; white-space: nowrap; color: color-mix(in srgb, var(--paper) 96%, #000); text-shadow: -1px -1px 1px rgba(255, 255, 255, .95), 1px 1px 2px rgba(0, 0, 0, .28); }
.cs-crest b i { margin: 0 .12em; font: italic 400 .6em var(--text); }
/* opening */
.cs-intro { background: var(--bg); }
.cs-sheet { --w: min(76vw, 320px); position: relative; display: grid; place-items: center; width: var(--w); aspect-ratio: 966 / 1382; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .22)); }
.cs-sheet .cs-crest { width: 74%; opacity: 0; transition: opacity .25s ease .62s; }
.cs-face { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%; background: url(../img/real/cr-face.webp) center / contain no-repeat; transform: translateY(-34%) scale(1.12) rotate(-8deg); filter: drop-shadow(0 26px 14px rgba(0, 0, 0, .35));
  transition: transform .55s cubic-bezier(.5, 0, .9, .5) .1s, filter .55s ease .1s, opacity .4s ease 1.5s; }
.is-opening .cs-sheet .cs-crest { opacity: 1; }
.is-opening .cs-face { animation: cs-press 1.9s cubic-bezier(.4, 0, .4, 1) both; }
@keyframes cs-press { 0% { transform: translateY(-34%) scale(1.12) rotate(-8deg); filter: drop-shadow(0 26px 14px rgba(0, 0, 0, .35)); } 30%, 42% { transform: translateY(0) scale(.94) rotate(0deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); opacity: 1; }
  100% { transform: translateY(-120%) scale(1.15) rotate(10deg); filter: drop-shadow(0 30px 16px rgba(0, 0, 0, .3)); opacity: 0; } }
/* cover */
.t-crest .cs-hero { padding: 44px 12px 60px; }
.cs-card { width: min(96vw, 440px); padding: 64px 40px 76px; }
.cs-hero { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .14)); }
.cs-card .cs-crest { width: min(60%, 220px); margin: 0 auto 18px; }
.t-crest .hero-k { font: italic 400 1.02rem/1.5 var(--text); }
.t-crest .hero-t { margin: 16px 0 0; font: 400 clamp(1.5rem, min(8.4vw, calc(74vw / var(--nl, 6))), 2.3rem)/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--name); }
.t-crest .hero-t span { display: block; }
.t-crest .hero-t i { display: block; margin: 2px 0; font: italic 400 1.1rem/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--accent); }
.cs-date { margin: 22px 0 0; font: 400 .78rem/1.9 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .cs-date b { display: block; font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.cs-where { margin: 8px 0 0; font: italic 400 1.05rem/1.4 var(--text); }
.cs-print { width: min(60vw, 240px); margin-top: -34px; padding: 8px; background: #fff; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .4); position: relative; }
.cs-ph { aspect-ratio: 4 / 5; background: #e7e4dc; }
.t-crest .hero-cta, .t-crest .rs-btn, .t-crest .gl-btn, .t-crest .btn-line { letter-spacing: .18em; text-transform: uppercase; }
/* sections: plain paper panels, engraved headings between hairlines */
.t-crest .s:not(.s-hero):not(.s-closing) { width: calc(100% - 24px); max-width: 580px; margin: 18px auto; padding: 46px 20px 50px; background: var(--paper); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .35); }
.t-crest .sh-t { letter-spacing: .12em; text-transform: uppercase; }
.t-crest .sh::after { content: ""; display: block; width: 46px; height: 1px; margin: 16px auto 0; background: var(--accent); }
.cs-crest.is-end { width: 170px; margin: 0 auto 14px; } .cs-crest.is-end b { font-size: 1.5rem; }
.t-crest .s-closing .cs-crest { background-color: var(--bg); } .t-crest .s-closing .cs-crest b { color: color-mix(in srgb, var(--bg) 96%, #000); }
.t-crest .cl-line { font: italic 400 1.5rem/1.3 var(--text); }

/* ---------- opening: shared mechanics ---------- */
.cs-intro { --intro-ms: 2700; overflow: hidden; transition: opacity .6s ease 2.0s, visibility 0s linear 2.6s; }
.cs-start { position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; width: 100%; height: 100%; padding: 24px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.cs-for { font: italic 400 1.02rem/1.5 var(--text); font-size: 1.15rem; } .cs-for b { font-weight: 400; }
.cs-tap { font: italic 400 1.02rem/1.5 var(--text); color: var(--muted); animation: cs-pulse 3s ease-in-out infinite; }
@keyframes cs-pulse { 50% { opacity: .5; } }
.is-opening .cs-tap, .is-opening .cs-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .cs-tap { animation: none; } .cs-intro * { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- sections ---------- */
.t-crest .s-hero { position: relative; display: block; min-height: 100svh; text-align: center; overflow: hidden; }
.t-crest .s-hero > * { margin-left: auto; margin-right: auto; }
.t-crest .hero-guest { margin: 0 0 8px; font: italic 400 1.02rem/1.5 var(--text); font-size: 1.05rem; } .t-crest .hero-guest b { font-weight: 400; }
.t-crest .hero-k, .t-crest .sh-k { margin: 0; font: italic 400 1.02rem/1.5 var(--text); color: var(--muted); text-wrap: balance; }
.t-crest .hero-line { margin: 14px auto 0; max-width: 19em; font-size: .98rem; color: var(--muted); text-wrap: balance; }
.t-crest .hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 26px; padding: 12px 34px; border: 0; border-radius: 0; background: var(--accent); color: var(--accent-ink); font: 400 .82rem var(--display); text-decoration: none; }
.t-crest .sh { margin-bottom: 28px; }
.t-crest .sh-t { font: 400 clamp(1.25rem, 5.8vw, 1.6rem)/1.3 var(--display); color: var(--name); }
.t-crest .sh-n { font: italic 400 1.02rem/1.5 var(--text); color: var(--accent); }
.t-crest .cd-u b { font: 400 clamp(2rem, 9vw, 2.6rem)/1 var(--display); color: var(--name); }
.t-crest .cd-u span { font: italic 400 1.02rem/1.5 var(--text); font-size: .8rem; color: var(--muted); }
.t-crest .vn-c, .t-crest .dr-roles > div, .t-crest .rs, .t-crest .rs-done, .t-crest .gl-c, .t-crest .gl-it { border: 1px solid var(--line); border-radius: 0; background: rgba(255, 255, 255, .5); box-shadow: none; }
.t-crest .vn-l, .t-crest .dr-roles dt, .t-crest .bio-r, .t-crest .tml-d { font: italic 400 1.02rem/1.5 var(--text); font-size: .84rem; color: var(--accent); }
.t-crest .vn-n, .t-crest .pp-h, .t-crest .tml-t { font: 400 1.28rem/1.3 var(--display); color: var(--ink); }
.t-crest .tl-time { color: var(--accent); font: italic 400 1.02rem/1.5 var(--text); font-size: .88rem; }
.t-crest .tl-title { font: 400 1.05rem var(--display); }
.t-crest .f-in, .t-crest .ch span { border-radius: 0; background: rgba(255, 255, 255, .7); border-color: var(--line); }
.t-crest .rs-btn, .t-crest .gl-btn { border-radius: 0; background: var(--accent); color: var(--accent-ink); font: 400 .82rem var(--display); }
.t-crest .btn-line { min-height: 46px; border-radius: 0; border-color: var(--line); color: var(--ink); font: 400 .82rem var(--display); }
.t-crest .btn-line:hover { border-color: var(--ink); }
.t-crest .faq summary { font: 400 1.05rem var(--display); }
.t-crest .gal-i img, .t-crest .gal-ph { border-radius: 0; }
.t-crest .gal-i figcaption { margin-top: 8px; font: italic 400 1.02rem/1.5 var(--text); font-size: .84rem; color: var(--ink); }
.t-crest .s-closing { position: relative; text-align: center; overflow: hidden; }
.t-crest .cl-line { font: 400 clamp(1.25rem, 5.8vw, 1.6rem)/1.3 var(--display); color: var(--name); text-wrap: balance; }
.t-crest .cl-sign { margin-top: 10px; color: var(--ink); }
.t-crest .cl-tag { font: italic 400 1.02rem/1.5 var(--text); color: var(--accent); }

/* round 59: Cinzel at regular weight reads faint on blush paper; a fine stroke and darker body text */
.t-crest :is(.hero-t, .sh-t, .vn-n, .ic-names, .cd-u b) { -webkit-text-stroke: .4px currentColor; }
.t-crest .s p, .t-crest .vn-a, .t-crest .tl-title { color: var(--ink); }