/* Royal Pet Pages: front end.
   Layout: one narrow column for phones (opened from a QR scan): jewel-tone hero, then paper sections. */

body.rpp {
	--bg1: #3b0f1f;
	--bg2: #5c1a30;
	--metal: #c9a24a;
	--metal-soft: #ead59e;
	--metal-dark: #8a6a24;
	--paper: #f5eddc;
	--card: #fffaf0;
	--ink: #2b1c15;
	--muted: #6e5a4c;
	--hi: #fff4d6;
	--wax: #8e1b2c;
	--font-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--font-body: "Cormorant Garamond", Garamond, Georgia, serif;
	--font-script: "Pinyon Script", "Snell Roundhand", cursive;
	color-scheme: light;
}
body.rpp-theme-emerald  { --bg1:#0f2e24; --bg2:#1d4a3a; --metal:#c9a24a; --metal-soft:#e8d7a0; --metal-dark:#7d6322; --paper:#f1efe4; --card:#fbfaf3; --ink:#1c2620; --muted:#5b6a60; --hi:#fbf3d9; --wax:#16523d; }
body.rpp-theme-sapphire { --bg1:#0e1833; --bg2:#1f2f5c; --metal:#b9c3d6; --metal-soft:#e3e8f1; --metal-dark:#6f7a90; --paper:#eff1f6; --card:#fafbfd; --ink:#161c2b; --muted:#5a6378; --hi:#f4f6fb; --wax:#1d2b57; }
body.rpp-theme-rose     { --bg1:#4a2330; --bg2:#74384a; --metal:#d9a38f; --metal-soft:#f3d6ca; --metal-dark:#9c6553; --paper:#fbf1ee; --card:#fffaf8; --ink:#3a2329; --muted:#7d5d63; --hi:#fff1ea; --wax:#a24a5e; }
body.rpp.rpp-memorial   { --bg1:#232a38; --bg2:#38415a; --metal:#c8b78f; --metal-soft:#e6dcc4; --metal-dark:#8a7c5c; --paper:#eef0f3; --card:#fbfcfd; --ink:#1f2430; --muted:#5d6577; --hi:#f6f2e8; --wax:#4a536b; }

.rpp *, .rpp *::before, .rpp *::after { box-sizing: border-box; }
html, body.rpp { margin: 0; padding: 0; }
body.rpp { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 20px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.rpp-locked { overflow: hidden; }
.rpp img { max-width: 100%; height: auto; display: block; }
.rpp h1, .rpp h2, .rpp h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; margin: 0; }
.rpp a { color: inherit; }
.rpp :focus-visible { outline: 3px solid var(--metal); outline-offset: 3px; }
.rpp-num { font-variant-numeric: tabular-nums; }
.rpp-center { text-align: center; }
.rpp-muted { color: var(--muted); font-size: .95rem; }

/* ---------- Wax seal opening ---------- */
.rpp-seal-screen {
	all: unset; position: fixed; inset: 0; z-index: 50; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
	background: radial-gradient(ellipse at 50% 40%, var(--bg2), var(--bg1) 70%);
	color: var(--metal-soft); text-align: center;
	transition: opacity .8s ease, visibility .8s;
}
.rpp-seal-screen.is-open { opacity: 0; visibility: hidden; }
.rpp-seal-screen.is-open .rpp-wax { transform: scale(1.4) rotate(-8deg); }
.rpp-seal-screen:focus-visible { outline: 3px solid var(--metal); outline-offset: -8px; }
.rpp-seal-honorific { font-family: var(--font-display); letter-spacing: .25em; text-transform: uppercase; font-size: .75rem; color: var(--metal); }
.rpp-seal-name { font-family: var(--font-script); font-size: clamp(2.6rem, 11vw, 4rem); color: var(--hi); line-height: 1.1; }
.rpp-wax { width: 150px; margin: 18px 0 10px; transition: transform .8s ease; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); animation: rpp-pulse 2.6s ease-in-out infinite; }
.rpp-wax-blob { fill: var(--wax); }
.rpp-wax-ring { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 3; }
.rpp-wax-crown { fill: rgba(255,255,255,.32); }
.rpp-wax-letter { font-family: var(--font-display); font-size: 22px; fill: rgba(255,255,255,.4); font-weight: 700; }
.rpp-seal-hint { font-size: 1rem; font-style: italic; }
@keyframes rpp-pulse { 50% { transform: scale(1.04); } }

/* ---------- Music button ---------- */
.rpp-music {
	position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid var(--metal); background: var(--bg1); color: var(--metal-soft); font-size: 1.3rem; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.rpp-music.is-playing span { display: inline-block; animation: rpp-spin 3s linear infinite; }
@keyframes rpp-spin { to { transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.rpp-hero {
	background: radial-gradient(ellipse at 50% 0%, var(--bg2), var(--bg1) 70%);
	color: var(--metal-soft); text-align: center; padding: 48px 16px 56px; position: relative; overflow: hidden;
}
.rpp-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, transparent, var(--metal), transparent); }
.rpp-crown { width: 72px; margin: 0 auto 8px; color: var(--metal); animation: rpp-float 4s ease-in-out infinite; display: block; }
@keyframes rpp-float { 50% { transform: translateY(-6px); } }
.rpp-honorific { font-family: var(--font-display); letter-spacing: .25em; text-transform: uppercase; font-size: .75rem; color: var(--metal); }
.rpp-frame {
	width: min(290px, 78vw); aspect-ratio: 4 / 5; margin: 20px auto 24px; border-radius: 50%; padding: 10px;
	background: conic-gradient(var(--metal-dark), var(--metal), var(--metal-soft), var(--metal), var(--metal-dark), var(--metal), var(--metal-soft), var(--metal), var(--metal-dark));
	box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.rpp-frame img, .rpp-frame-empty { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--bg1); }
.rpp-frame-empty { display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--bg2); }
.rpp-hero h1 { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.8rem, 12vw, 4.2rem); color: var(--hi); line-height: 1.05; }
.rpp-subtitle { font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; margin-top: 8px; }
.rpp-dates { margin-top: 10px; font-size: 1rem; color: var(--metal); font-style: italic; }
.rpp-reign { display: inline-flex; flex-direction: column; align-items: center; margin-top: 22px; padding: 12px 24px; border: 1px solid var(--metal); border-radius: 999px; }
.rpp-reign strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--hi); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rpp-reign span { font-size: .9rem; }

/* ---------- Sections ---------- */
.rpp-main { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; display: grid; gap: 56px; }
.rpp-main section > h2 { font-size: 1.35rem; color: var(--bg1); text-align: center; letter-spacing: .06em; }
.rpp-rule { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 10px 0 22px; color: var(--metal); }
.rpp-rule::before, .rpp-rule::after { content: ""; height: 1px; width: 60px; background: var(--metal); }

.rpp-prose p { margin: 0 0 14px; max-width: 65ch; }
.rpp-prose p:first-child::first-letter { font-family: var(--font-display); float: left; font-size: 3.2rem; line-height: .9; padding: 4px 8px 0 0; color: var(--bg1); }

.rpp-decree { background: var(--card); border: 1px solid var(--metal); border-radius: 6px; padding: 26px 22px; box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px var(--metal-soft); }
.rpp-lead { text-align: center; font-style: italic; margin: 0 0 16px; color: var(--muted); }
.rpp-decree dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.rpp-decree dt { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; color: var(--bg1); padding-top: 5px; text-transform: uppercase; }
.rpp-decree dd { margin: 0; }
@media (max-width: 440px) { .rpp-decree dl { grid-template-columns: 1fr; gap: 2px; } .rpp-decree dd { margin-bottom: 10px; } }

.rpp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rpp-gallery button { all: unset; cursor: pointer; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--metal-soft); }
.rpp-gallery button:focus-visible { outline: 3px solid var(--metal); outline-offset: 2px; }
.rpp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.rpp-gallery button:hover img { transform: scale(1.05); }
.rpp-video { margin-top: 14px; }
.rpp-video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }

.rpp-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--metal); display: grid; gap: 22px; }
.rpp-timeline li { position: relative; }
.rpp-timeline li::before { content: ""; position: absolute; left: -30px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg1); border: 2px solid var(--metal); }
.rpp-timeline time { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.rpp-timeline h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; color: var(--bg1); }
.rpp-timeline p { margin: 2px 0 0; }

.rpp-letter { border-left: 4px solid var(--metal); padding: 6px 0 6px 20px; font-style: italic; font-size: 1.2rem; }
.rpp-letter p { margin: 0; }
.rpp-sig { font-family: var(--font-script); font-style: normal; font-size: 1.8rem; margin-top: 10px; color: var(--bg1); }

/* ---------- Buttons ---------- */
.rpp-btn, .rpp .form-submit input[type="submit"] {
	display: inline-block; font-family: var(--font-display); font-size: .9rem; letter-spacing: .06em;
	padding: 12px 24px; border-radius: 999px; border: 1px solid var(--metal); background: transparent; color: var(--bg1);
	cursor: pointer; text-decoration: none; transition: background .2s, color .2s;
}
.rpp-btn:hover, .rpp .form-submit input[type="submit"]:hover { background: var(--bg1); color: var(--metal-soft); }
.rpp-btn[disabled] { opacity: .6; cursor: default; }
.rpp-btn-solid { background: var(--metal); color: var(--bg1); border-color: var(--metal); }

/* ---------- Memorial candles ---------- */
.rpp-candles { text-align: center; background: var(--card); border: 1px solid var(--metal-soft); border-radius: 8px; padding: 28px 20px; }
.rpp-candles h2 { font-size: 1.2rem; color: var(--bg1); margin-top: 10px; }
.rpp-candles p { margin: 6px 0 16px; }
.rpp-candle { width: 30px; margin: 0 auto; display: block; }
.rpp-flame { fill: #f6c453; transform-origin: 50% 100%; animation: rpp-flicker 1.6s ease-in-out infinite alternate; }
.rpp-wax-stick { fill: #efe6d2; }
@keyframes rpp-flicker { 0% { transform: scale(1,1) rotate(-2deg); } 50% { transform: scale(.92,1.08) rotate(2deg); } 100% { transform: scale(1.05,.95) rotate(-1deg); } }

/* ---------- Certificate ---------- */
.rpp-cert { background: var(--card); padding: 14px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.rpp-cert-inner { border: 2px solid var(--metal); outline: 1px solid var(--metal); outline-offset: -8px; padding: 34px 22px 26px; text-align: center; }
.rpp-cert h2 { font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bg1); }
.rpp-cert-small { font-style: italic; color: var(--muted); margin: 10px 0; }
.rpp-cert-name { font-family: var(--font-script); font-size: clamp(2.4rem, 10vw, 3.4rem); color: var(--bg1); margin: 4px 0; line-height: 1.1; }
.rpp-cert-title { font-family: var(--font-display); letter-spacing: .06em; margin: 4px 0; }
.rpp-cert-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.rpp-cert-sign { text-align: left; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--ink); padding-top: 4px; min-width: 160px; }
.rpp-cert-sign span { display: block; font-family: var(--font-script); font-size: 1.6rem; color: var(--ink); line-height: 1; margin-top: -32px; margin-bottom: 8px; }
.rpp-cert-seal { width: 80px; }
.rpp-cert + .rpp-center { margin-top: 16px; }

/* ---------- Tribute book ---------- */
.rpp-tribute-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.rpp-tribute-list li { background: var(--card); border: 1px solid var(--metal-soft); border-radius: 6px; padding: 16px 18px; }
.rpp-tribute-list p { margin: 0 0 6px; font-style: italic; }
.rpp-tribute-list span { font-family: var(--font-display); font-size: .85rem; color: var(--bg1); }
.rpp-form-title { font-size: 1rem; color: var(--bg1); margin-bottom: 6px; }
.rpp .comment-respond { background: var(--card); border: 1px solid var(--metal-soft); border-radius: 6px; padding: 20px; }
.rpp .comment-respond p { margin: 0 0 14px; }
.rpp .comment-respond label { display: block; font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; color: var(--bg1); margin-bottom: 4px; }
.rpp .comment-respond input[type="text"], .rpp .comment-respond input[type="email"], .rpp .comment-respond textarea {
	width: 100%; font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--metal-soft); border-radius: 4px; background: #fff; color: var(--ink);
}
.rpp .comment-respond .required { color: var(--wax); }
.rpp #cancel-comment-reply-link { display: none; }

/* ---------- Found card ---------- */
.rpp-found { background: var(--bg1); color: var(--metal-soft); border-radius: 8px; padding: 24px 20px; text-align: center; }
.rpp-main .rpp-found h2 { color: var(--hi); }
.rpp-found p { margin: 8px 0 16px; }

/* ---------- Footer ---------- */
.rpp-footer { text-align: center; padding: 28px 16px 40px; font-size: .95rem; color: var(--muted); border-top: 1px solid var(--metal-soft); }
.rpp-footer a { text-decoration: none; }
.rpp-footer strong { font-family: var(--font-display); color: var(--bg1); letter-spacing: .1em; }

/* ---------- Lightbox ---------- */
.rpp-lightbox { position: fixed; inset: 0; background: rgba(10,5,8,.93); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px; z-index: 60; }
.rpp-lightbox[hidden] { display: none; }
.rpp-lightbox img { max-height: 78vh; width: auto; border-radius: 6px; }
.rpp-lightbox p { color: var(--metal-soft); margin: 12px 0 0; text-align: center; font-style: italic; }
.rpp-lb-btn { position: absolute; background: rgba(0,0,0,.3); border: 1px solid var(--metal); color: var(--metal-soft); width: 44px; height: 44px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.rpp-lb-close { top: 16px; right: 16px; } .rpp-lb-prev { left: 12px; top: 50%; } .rpp-lb-next { right: 12px; top: 50%; }

/* ---------- Password gate ---------- */
.rpp-gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
	background: radial-gradient(ellipse at 50% 30%, var(--bg2), var(--bg1) 70%); color: var(--metal-soft); }
.rpp-gate h1 { color: var(--hi); font-size: 1.5rem; }
.rpp-gate form { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rpp-gate form p:first-child { display: none; }
.rpp-gate label { font-family: var(--font-display); font-size: .85rem; }
.rpp-gate input[type="password"] { font: inherit; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--metal); background: rgba(255,255,255,.08); color: var(--hi); text-align: center; margin-top: 6px; }
.rpp-gate input[type="submit"] { font-family: var(--font-display); padding: 10px 24px; border-radius: 999px; border: 0; background: var(--metal); color: var(--bg1); cursor: pointer; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { .rpp *, .rpp *::before, .rpp *::after { animation: none !important; transition: none !important; } }

/* ---------- Print: certificate only ---------- */
@media print {
	body.rpp-print-cert > *:not(.rpp-main) { display: none !important; }
	body.rpp-print-cert .rpp-main > section:not(:has(#rpp-cert)) { display: none !important; }
	body.rpp-print-cert .rpp-main { padding: 0; max-width: none; }
	body.rpp-print-cert #rpp-print-cert { display: none; }
	body.rpp-print-cert .rpp-cert { box-shadow: none; }
	body.rpp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}