@font-face { font-family: "IM Fell English"; src: url("../fonts/tapestry/fell-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../fonts/tapestry/cinzeldeco-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* TAPESTRY (theme key "tapestry", round 46): an illuminated page, after the Renaissance / Art Nouveau turn in the 2027
   trend lists. Our own painted border and initial square (V14-V15, gouache and gold leaf on vellum) and a photographed
   parchment scroll (V16). Intro: a ribboned scroll; tap and the parchment unrolls with your names. Cover: the illuminated
   border around the page, the first letter of the first name in the gilded square, the text in an old book face.
   Sections sit on parchment between gilded double rules. Burgundy (original), Forest, Royal Blue (the dark "table"
   behind the page and the accents change; the painted border keeps its colours).
   Type: IM Fell English (text, names, headings), Cinzel Decorative (the illuminated initial). */
:root {
  --bg: #f4debc; --paper: #f7e6c8; --ink: #46261c; --muted: #84654f; --line: rgba(120, 84, 40, .3);
  --accent: #7c1f2b; --accent-ink: #fbeed4; --name: #5a1a22; --table: #3c0f17; --gold: #b48a35;
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif; --text: "IM Fell English", Georgia, serif; --script: "Cinzel Decorative", Georgia, serif;
  --radius: 0px; --maxw: 520px;
}
html { background: var(--table); }
body { font-family: var(--text); font-size: 1.08rem; line-height: 1.7; color: var(--ink); background: var(--bg); }
.tp-init { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: url(../img/real/tp-initial.webp) center / cover no-repeat; -webkit-mask: radial-gradient(closest-side, #000 82%, transparent); mask: radial-gradient(closest-side, #000 82%, transparent); }
.tp-init b { font: 700 2.2rem/1 var(--script); color: #f3d68a; text-shadow: 0 1px 0 #7a5a1c, 0 2px 3px rgba(0, 0, 0, .45); white-space: nowrap; }
.tp-init b i { margin: 0 .08em; font-size: .55em; font-style: normal; }
/* opening */
.tp-intro { background: radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--table) 78%, #fff), var(--table)); }
.tp-start { color: #f3e3c4; } .tp-intro .tp-tap { color: #e2cda6; }
.tp-stage { --w: min(78vw, 320px); position: relative; display: block; width: var(--w); aspect-ratio: 841 / 1051; }
.tp-sheet { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 14% 16%; text-align: center; color: var(--ink); background: url(../img/real/tp-sheet.webp) center / 100% 100% no-repeat;
  transform: scaleY(.05); transform-origin: 50% 0; opacity: 0; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .45)); transition: transform 1.3s cubic-bezier(.3, .8, .2, 1) .35s, opacity .2s ease .35s; }
.tp-sheet small { font: 400 .8rem/1.4 var(--display); color: var(--muted); }
.tp-sheet b { font: 400 clamp(1.5rem, 7.6vw, 2rem)/1.2 var(--display); color: var(--name); } .tp-sheet b i { font-style: normal; color: var(--gold); }
.tp-roll { position: absolute; left: -9%; right: -9%; top: 30%; aspect-ratio: 950 / 325; background: url(../img/real/tp-scroll.webp) center / contain no-repeat; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .5)); transition: transform .9s cubic-bezier(.5, 0, .7, .4) .1s, opacity .45s ease .35s; }
.is-opening .tp-roll { transform: translateY(-46vh) rotate(-8deg); opacity: 0; }
.is-opening .tp-sheet { transform: scaleY(1); opacity: 1; }
/* cover: the illuminated page */
.t-tapestry .tp-hero { padding: 26px 8px 56px; background: var(--table); }
.tp-page { --pw: min(calc(100vw - 16px), 460px); width: var(--pw); min-height: calc(var(--pw) * 1.5); padding: calc(var(--pw) * .21) calc(var(--pw) * .17) calc(var(--pw) * .2);   /* own width, not the section's: % padding broke on desktop */ background: url(../img/real/tp-border.webp) center / 100% 100% no-repeat; box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .7); }
.tp-page .tp-init { width: 96px; margin: 0 auto 14px; }
.t-tapestry .hero-k { font-size: .9rem; }
.t-tapestry .hero-t { margin: 12px 0 0; font: 400 clamp(1.7rem, min(9.4vw, calc(78vw / var(--nl, 6))), 2.5rem)/1.15 var(--display); color: var(--name); }
.t-tapestry .hero-t span { display: block; }
.t-tapestry .hero-t i { display: block; font: 400 1.1rem/1.3 var(--display); font-style: normal; color: var(--gold); }
.tp-hero .hero-line { font-size: .9rem; max-width: 15em; }
.tp-date { margin: 14px 0 0; font: 400 .86rem/1.5 var(--display); color: var(--muted); } .tp-date b { font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.tp-where { margin: 6px 0 0; font: 400 .92rem/1.35 var(--display); }
.tp-print { width: min(60vw, 240px); margin-top: 26px; padding: 8px; background: linear-gradient(135deg, #e7c873, var(--gold) 45%, #8a651f); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .7); }
.tp-ph { aspect-ratio: 4 / 5; background: #e6cfa6; }
.t-tapestry .tp-hero .hero-cta { background: var(--gold); color: #2a1206; }
/* sections: parchment between gilded double rules */
.t-tapestry .s:not(.s-hero):not(.s-closing) { border-top: 3px double var(--gold); }
.t-tapestry .sh::after { content: "❧"; display: block; margin: 8px auto 0; font: 400 1.1rem/1 var(--display); color: var(--gold); }
.t-tapestry .vn-c, .t-tapestry .dr-roles > div, .t-tapestry .rs, .t-tapestry .rs-done, .t-tapestry .gl-c, .t-tapestry .gl-it { border: 1px solid var(--gold); outline: 1px solid var(--line); outline-offset: 3px; }
.t-tapestry .gal-i { padding: 5px; background: linear-gradient(135deg, #e7c873, var(--gold) 45%, #8a651f); }
.t-tapestry .gal-i figcaption { color: #2a1206; margin: 4px 0 0; }
.t-tapestry .s-closing { background: var(--table); color: #f3e3c4; }
.t-tapestry .s-closing .cl-line { color: #f6e7c6; } .t-tapestry .s-closing .cl-sign { color: #e2cda6; } .t-tapestry .s-closing .cl-tag { color: #e7c873; }
.t-tapestry .s-closing .btn-line { color: #f3e3c4; border-color: rgba(243, 227, 196, .4); }
.tp-init.is-end { width: 120px; margin: 0 auto 16px; } .tp-init.is-end b { font-size: 1.5rem; }

/* ---------- opening: shared mechanics ---------- */
.tp-intro { --intro-ms: 2900; overflow: hidden; transition: opacity .6s ease 2.2s, visibility 0s linear 2.8000000000000003s; }
.tp-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; }
.tp-for { font: 400 .95rem/1.5 var(--display); font-size: 1.15rem; } .tp-for b { font-weight: 400; }
.tp-tap { font: 400 .95rem/1.5 var(--display); color: var(--muted); animation: tp-pulse 3s ease-in-out infinite; }
@keyframes tp-pulse { 50% { opacity: .5; } }
.is-opening .tp-tap, .is-opening .tp-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .tp-tap { animation: none; } .tp-intro * { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; } }

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