/* Welcome page (2026-10-12): /welcome/ and /welcome/<id>/. Mockup of record: the spec's artifact; colours sampled from the logo. */

/* Standalone document (no theme header, menu or footer): the theme's stylesheet still loads via wp_head(),
 * so reset what it puts on <body> and let the page fill the viewport. */
body.prb-welcome-standalone { margin: 0 !important; padding: 0 !important; background: #eef4f9 !important; min-height: 100vh; }

.prb-welcome {
	--prb-w-page: #eef4f9; --prb-w-paper: #ffffff; --prb-w-paper2: #f3f8fc;
	--prb-w-ink: #1f2f44; --prb-w-ink-soft: #4a6a84;
	--prb-w-accent: #006098; --prb-w-accent-ink: #ffffff;
	--prb-w-gold: #0088d0; --prb-w-gold-soft: #bfe0f4; --prb-w-line: #d5e3ef;
	--prb-w-shadow: 0 18px 40px rgba(31, 47, 68, 0.12);
	background: var(--prb-w-page); color: var(--prb-w-ink);
	font-family: "EB Garamond", Georgia, serif; font-size: 18px; line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.prb-welcome *, .prb-welcome *::before, .prb-welcome *::after { box-sizing: border-box; }
.prb-welcome__wrap { max-width: 720px; margin: 0 auto; padding: 40px 16px 72px; }
.prb-welcome h1, .prb-welcome h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: 0.005em; color: var(--prb-w-ink); }
.prb-welcome p { margin: 0 0 0.9em; }
.prb-welcome a { color: var(--prb-w-accent); }
.prb-welcome [hidden] { display: none !important; }

.prb-welcome { min-height: 100vh; }
.prb-welcome__brand { display: block; width: 44px; height: 44px; margin: 0 auto 14px; }
.prb-welcome__colophon { text-align: center; color: var(--prb-w-ink-soft); font-size: 13px; letter-spacing: 0.06em; margin: 36px 0 0; opacity: 0.8; }
.prb-welcome__eyebrow { text-align: center; color: var(--prb-w-gold); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; font-weight: 500; margin-bottom: 14px; }
.prb-welcome__rule { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--prb-w-gold); margin: 10px 0 22px; }
.prb-welcome__rule::before, .prb-welcome__rule::after { content: ""; height: 1px; width: 56px; background: var(--prb-w-gold-soft); }
.prb-welcome__rule svg { width: 14px; height: 14px; fill: var(--prb-w-gold); }

.prb-welcome__card { background: var(--prb-w-paper); border: 1px solid var(--prb-w-line); border-radius: 14px; padding: 26px; box-shadow: var(--prb-w-shadow); }
.prb-welcome__card + .prb-welcome__card, .prb-welcome__card + .prb-welcome__next { margin-top: 22px; }

.prb-welcome__hero { display: grid; grid-template-columns: 140px 1fr; gap: 26px; align-items: center; }
.prb-welcome__hero--bare { grid-template-columns: 1fr; text-align: center; }
.prb-welcome__h1 { font-size: 36px; overflow-wrap: anywhere; }
.prb-welcome__h1 em { font-style: italic; font-weight: 500; color: var(--prb-w-accent); }
.prb-welcome__hero p { color: var(--prb-w-ink-soft); margin: 12px 0 0; }
.prb-welcome__cover { width: 140px; height: auto; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); background: var(--prb-w-paper2); display: block; }
.prb-welcome__strip { display: flex; justify-content: center; gap: 14px; margin: 0 0 20px; }
.prb-welcome__strip img { flex: 1 1 0; min-width: 0; width: auto; max-width: 86px; height: auto; aspect-ratio: 5 / 8; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); background: var(--prb-w-paper2); }
.prb-welcome__strip img:nth-child(2) { transform: translateY(-6px); }
.prb-welcome__strip img:nth-child(3) { transform: translateY(-10px); }
.prb-welcome__strip img:nth-child(4) { transform: translateY(-6px); }

/* The lit card (2026-10-13, David): a breathing halo behind the Sunday card and twelve light motes that rise
 * from BEHIND it and from its sides. Pure CSS, transform + opacity only (cheap to animate). The wrapper, not
 * the card, is the stacking context: halo and motes sit at z-index -1, behind the card's paper and above the
 * page, so a mote that starts under the card is seen only once it clears the top edge (the card's own
 * stacking context keeps it above them), and the hero card above (z-index 2) swallows it again. Six motes
 * start just outside the card's left and right edges (--x beyond 0..100%) and rise along its sides; six
 * start under it, high up (--y), so they emerge from the top edge soon after they set off. Reduced motion:
 * the halo stays, still; the motes are hidden. */
.prb-welcome__lit { position: relative; z-index: 0; isolation: isolate; }
.prb-welcome__lit > .prb-welcome__card { position: relative; z-index: 1; }
.prb-welcome__lit::before { content: ""; position: absolute; z-index: -1; inset: 24px -56px -48px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(0, 136, 208, 0.6), rgba(0, 136, 208, 0.28) 48%, rgba(0, 136, 208, 0) 74%); filter: blur(24px); pointer-events: none; animation: prb-welcome-breathe 5.5s ease-in-out infinite; }
.prb-welcome__hero { position: relative; z-index: 2; }
.prb-welcome__motes { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: visible; }
.prb-welcome__motes i { position: absolute; bottom: var(--y, 40%); left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(124, 198, 242, 1) 38%, rgba(0, 136, 208, 0) 72%); box-shadow: 0 0 10px 3px rgba(0, 136, 208, 0.55); opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); animation: prb-welcome-mote var(--t) linear infinite; animation-delay: var(--d); }
/* Side motes: just outside the card's edges, rising from low down. */
.prb-welcome__motes i:nth-child(1)  { --x: -3%;  --y: 12%; --s: 7px;  --t: 7.5s; --d: -0.4s; }
.prb-welcome__motes i:nth-child(2)  { --x: -1%;  --y: 36%; --s: 5px;  --t: 9s;   --d: -3.1s; }
.prb-welcome__motes i:nth-child(3)  { --x: -4%;  --y: 24%; --s: 9px;  --t: 8s;   --d: -5.6s; }
.prb-welcome__motes i:nth-child(4)  { --x: 101%; --y: 18%; --s: 4px;  --t: 10s;  --d: -1.9s; }
.prb-welcome__motes i:nth-child(5)  { --x: 103%; --y: 40%; --s: 6px;  --t: 7s;   --d: -4.4s; }
.prb-welcome__motes i:nth-child(6)  { --x: 100%; --y: 8%;  --s: 10px; --t: 9.5s; --d: -7.2s; }
/* Top motes: under the card, high up, so they clear its top edge early and float on up past the rule. */
.prb-welcome__motes i:nth-child(7)  { --x: 12%; --y: 82%; --s: 5px;  --t: 8.5s; --d: -2.7s; }
.prb-welcome__motes i:nth-child(8)  { --x: 28%; --y: 90%; --s: 7px;  --t: 7.8s; --d: -6.3s; }
.prb-welcome__motes i:nth-child(9)  { --x: 45%; --y: 78%; --s: 4px;  --t: 10.5s; --d: -0.9s; }
.prb-welcome__motes i:nth-child(10) { --x: 60%; --y: 92%; --s: 8px;  --t: 8.2s; --d: -4.9s; }
.prb-welcome__motes i:nth-child(11) { --x: 76%; --y: 84%; --s: 6px;  --t: 9.2s; --d: -8.1s; }
.prb-welcome__motes i:nth-child(12) { --x: 90%; --y: 88%; --s: 5px;  --t: 7.3s; --d: -3.6s; }
.prb-welcome__motes i:nth-child(even) { --drift: -18px; }
@keyframes prb-welcome-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes prb-welcome-mote {
	0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
	10%  { opacity: 0.85; }
	70%  { opacity: 0.6; }
	100% { opacity: 0; transform: translate3d(var(--drift, 14px), -420px, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.prb-welcome__lit::before { animation: none; }
	.prb-welcome__motes { display: none; }
}

.prb-welcome__h2 { font-size: 26px; margin-bottom: 6px; }
.prb-welcome__every { font-style: italic; font-weight: 500; color: var(--prb-w-gold); white-space: nowrap; }
.prb-welcome__lead { color: var(--prb-w-ink-soft); margin-bottom: 18px; }
.prb-welcome__field { display: grid; gap: 6px; margin-bottom: 14px; }
.prb-welcome__field label { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--prb-w-ink-soft); }
.prb-welcome__field input { font: inherit; color: var(--prb-w-ink); background: var(--prb-w-paper2); border: 1px solid var(--prb-w-line); border-radius: 8px; padding: 12px 14px; width: 100%; }
.prb-welcome__field input:focus { outline: 2px solid var(--prb-w-gold); outline-offset: 2px; border-color: var(--prb-w-gold); }
.prb-welcome__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prb-welcome__error { color: #a4262c; font-size: 16px; margin: 0 0 12px; }
/* Button reset: Essence Pro uppercases and restyles <button> (see css/themes/genrebrowser.css, .prb-cat-head). */
.prb-welcome__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--prb-w-accent); color: var(--prb-w-accent-ink) !important; border: 0; border-radius: 999px; padding: 13px 26px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: 0.03em; text-decoration: none; cursor: pointer; text-transform: none; line-height: 1.2; margin: 0; width: auto; box-shadow: none; -webkit-appearance: none; appearance: none; }
.prb-welcome__btn:hover, .prb-welcome__btn:focus { background: #00659e; }
.prb-welcome__btn:focus-visible { outline: 3px solid var(--prb-w-gold); outline-offset: 3px; }
.prb-welcome__btn:disabled { opacity: 0.6; cursor: wait; }
.prb-welcome__consent { font-size: 15px; color: var(--prb-w-ink-soft); margin: 14px 0 0; }
/* Subscribers: the quiet skip link under the consent line (spec §4). */
.prb-welcome__skip { text-align: center; font-size: 15px; color: var(--prb-w-ink-soft); margin: 14px 0 0; }
.prb-welcome__skip a { color: var(--prb-w-ink-soft); text-decoration: underline; }
.prb-welcome__skip a:hover, .prb-welcome__skip a:focus { color: var(--prb-w-accent); }

/* The review card: a ghost button in blue outline, so the Amazon button stays the one buy button. */
.prb-welcome__review-eyebrow { font-family: "EB Garamond", Georgia, serif; font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--prb-w-gold); line-height: 1.4; margin: 0 0 8px; }
.prb-welcome__review p { color: var(--prb-w-ink); margin: 0 0 16px; }
.prb-welcome__review em { font-style: italic; color: var(--prb-w-accent); }
.prb-welcome__btn--ghost { background: transparent; color: var(--prb-w-accent) !important; border: 1.5px solid var(--prb-w-accent); padding: 11px 24px; }
.prb-welcome__btn--ghost:hover, .prb-welcome__btn--ghost:focus { background: var(--prb-w-paper2); }

.prb-welcome__ack { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.prb-welcome__tick { width: 44px; height: 44px; border-radius: 50%; background: var(--prb-w-accent); color: var(--prb-w-accent-ink); display: grid; place-items: center; font-size: 22px; font-weight: 500; }
.prb-welcome__ack p { color: var(--prb-w-ink-soft); margin: 0; }

.prb-welcome__keep { margin-top: 22px; padding: 36px 28px 30px; text-align: center; position: relative; background: radial-gradient(ellipse at 50% 0%, rgba(0, 136, 208, 0.16), transparent 60%), var(--prb-w-paper2); border: 1px solid var(--prb-w-gold-soft); border-radius: 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 34px rgba(60, 44, 51, 0.14); animation: prb-welcome-rise 900ms ease-out both; }
.prb-welcome__keep::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--prb-w-gold-soft); border-radius: 7px; pointer-events: none; opacity: 0.8; }
.prb-welcome__corner { position: absolute; width: 18px; height: 18px; border-color: var(--prb-w-gold); border-style: solid; border-width: 0; }
.prb-welcome__corner--tl { top: 13px; left: 13px; border-top-width: 1.5px; border-left-width: 1.5px; }
.prb-welcome__corner--tr { top: 13px; right: 13px; border-top-width: 1.5px; border-right-width: 1.5px; }
.prb-welcome__corner--bl { bottom: 13px; left: 13px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.prb-welcome__corner--br { bottom: 13px; right: 13px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.prb-welcome__flourish { width: 120px; height: 20px; color: var(--prb-w-gold); display: block; margin: 0 auto 10px; }
.prb-welcome__small { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--prb-w-gold); }
.prb-welcome__big { font-family: "Cormorant Garamond", Georgia, serif; font-size: 46px; font-weight: 500; line-height: 1.05; margin: 12px 0 14px; overflow-wrap: anywhere; animation: prb-welcome-rise 900ms 250ms ease-out both; }
.prb-welcome__big em { font-style: italic; font-weight: 600; color: var(--prb-w-accent); }
.prb-welcome__msg { color: var(--prb-w-ink); font-size: 19px; line-height: 1.5; margin: 0 auto 10px; max-width: 30em; animation: prb-welcome-rise 900ms 500ms ease-out both; }
.prb-welcome__msg--soft { color: var(--prb-w-ink-soft); animation-delay: 650ms; }
.prb-welcome__sub { color: var(--prb-w-ink-soft); font-size: 15px; margin: 8px 0 0; font-style: italic; }
.prb-welcome__date { color: var(--prb-w-ink-soft); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 16px; }
.prb-welcome__mark { display: block; width: 56px; height: auto; margin: 16px auto 0; }
.prb-welcome__sign { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 20px; color: var(--prb-w-accent); margin-top: 8px; }
@keyframes prb-welcome-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .prb-welcome__keep, .prb-welcome__big, .prb-welcome__msg { animation: none; } }

.prb-welcome__next { margin-top: 22px; background: var(--prb-w-ink); color: var(--prb-w-accent-ink); border-radius: 14px; padding: 26px; box-shadow: var(--prb-w-shadow); display: grid; grid-template-columns: 1fr 120px; gap: 22px; align-items: center; }
.prb-welcome__next .prb-welcome__small { color: var(--prb-w-gold-soft); opacity: 1; letter-spacing: 0.2em; }
.prb-welcome__next .prb-welcome__h2 { font-size: 30px; margin: 6px 0 8px; color: inherit; }
.prb-welcome__next p { opacity: 0.9; }
.prb-welcome__next--note { grid-template-columns: 1fr; }
.prb-welcome__coming { font-style: italic; }
.prb-welcome__btn--amazon { background: linear-gradient(#f7c66b, #f0a830); color: #1f2f44 !important; border: 1px solid #d48a1c; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 6px 16px rgba(240, 168, 48, 0.35); }
/* :focus too: the base .prb-welcome__btn:hover, :focus rule (0,2,0) would otherwise paint it solid blue under navy text. */
.prb-welcome__btn--amazon:hover, .prb-welcome__btn--amazon:focus { background: linear-gradient(#f9ce7c, #f2b03e); }
.prb-welcome__cover--next { width: 120px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }

.prb-welcome__foot { text-align: center; color: var(--prb-w-ink-soft); font-size: 15px; margin-top: 30px; }
.prb-welcome__foot a { color: var(--prb-w-ink-soft); }

@media (max-width: 560px) {
	.prb-welcome { font-size: 17px; }
	.prb-welcome__wrap { padding: 28px 16px 56px; }
	.prb-welcome__card { padding: 20px; }
	.prb-welcome__h1 { font-size: 30px; }
	.prb-welcome__hero { grid-template-columns: 1fr; text-align: center; }
	.prb-welcome__hero .prb-welcome__cover { margin: 0 auto; width: 150px; }
	.prb-welcome__strip { gap: 10px; }
	.prb-welcome__strip img { max-width: 68px; }
	.prb-welcome__ack { grid-template-columns: 1fr; text-align: center; }
	.prb-welcome__tick { margin: 0 auto; }
	.prb-welcome__next { grid-template-columns: 1fr; text-align: center; padding: 22px; }
	.prb-welcome__cover--next { margin: 0 auto; }
	.prb-welcome__big { font-size: 36px; }
	.prb-welcome__keep { padding: 30px 18px 26px; }
}