/* =====================================================================================================
   Pulpit to Publishing: the subpages (/about/, /book-a-call/, /contact/, /quiz/), 2026-10-14.
   Local only. Do not deploy without Pablo's approval.
   The look is the homepage's (home.css): same tokens, type, buttons, masthead, menu, arches and footer.
   site.js still drives the menu, the reveals and the three lead forms on these pages, and quiz.js renders
   the quiz; this file only styles the markup they query. Option 1 (/option-1/) keeps site.css and is not
   touched. Every visible box has rounded corners; animated properties are transform and opacity.
   ===================================================================================================== */

/* Tokens copied from home.css; keep in sync. */
:root{
  /* Option 1 tokens, unchanged */
  --ink-950:#131B2F; --ink-900:#1A2440; --ink-800:#26324F;
  --paper-0:#FFFFFF; --paper-50:#FCFAF6; --paper-100:#F7F2E9; --paper-200:#EFE7D8;
  --ember-050:#FBF4E4; --ember-100:#F3E4C2; --ember-200:#EED097; --ember-300:#E6B95E; --ember-400:#DBA231;
  --ember-500:#CC8A1B; --ember-600:#AA6F11; --ember-700:#82550E;
  --ribbon:#7A1F2E; --ribbon-light:#9A2A3C;
  --text-body:#453D32; --text-muted:#6F6455;
  --on-deep:#EDEBE2; --on-deep-strong:#FBF9F2; --on-deep-muted:#B9AE8C;

  /* the same colors as channels, for hairlines, washes and tinted shadows */
  --ink-rgb:19 27 47;        /* ink-950 */
  --paper-rgb:252 250 246;   /* paper-50 */
  --deep-rgb:237 235 226;    /* on-deep */
  --ember-rgb:204 138 27;    /* ember-500 */
  --gold-rgb:230 185 94;     /* ember-300 */
  --ribbon-rgb:122 31 46;    /* ribbon */
  --night-rgb:9 13 23;       /* ink-950 halved toward black: only for shadows that fall on navy */

  /* the sky: the navy's hue (about 220deg) lifted to sky lightness, so paper turns to navy without
     passing through grey or brown. 50-200 carry body text; 300-500 only appear inside the blends. */
  --sky-50:#F2F4F8; --sky-100:#E6EAF1; --sky-200:#D6DCE8; --sky-300:#B9C2D5; --sky-400:#8994AE; --sky-500:#4E5A7A;

  /* roles */
  --bg:var(--paper-50);
  --card:var(--paper-0);
  --heading:var(--ink-950);
  --text:var(--text-body);
  --muted:var(--text-muted);
  --gold:var(--ember-500);           /* frames, rules, ornaments, the amber button */
  --gold-text:var(--ember-700);      /* amber text on light: 6.2:1 on paper-50 */
  --gold-display:var(--ember-600);   /* amber at display sizes only (large text): 4.0:1 on paper-50 */
  --gold-on-deep:var(--ember-300);   /* amber on navy: 9.4:1 on ink-950 */
  --rubric:var(--ribbon);            /* the small burgundy accents on light: 9.7:1 on paper-50 */
  --hair:rgb(var(--ink-rgb) / .13); --hair-2:rgb(var(--ink-rgb) / .07); --hair-deep:rgb(var(--deep-rgb) / .16);
  --focus:var(--ribbon-light); --focus-deep:var(--ember-300);

  /* corners: nothing visible is square */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-pill:999px;
  --hero-r:34px;                              /* matches the radius the hero card closes to (home.js) */
  --foot-r:clamp(28px,4.2vw,60px);            /* the footer's rounded top */
  --arch-foot:clamp(22px,2.4vw,32px);         /* the bottom corners of every arched frame */

  --f-display:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-text:'Literata','Iowan Old Style',Georgia,serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-hero:clamp(2.9rem,1.35rem + 4.3vw,5.4rem);
  --fs-h2:clamp(2.2rem,1.45rem + 2.9vw,3.9rem);
  --fs-h2-xl:clamp(2.55rem,1.3rem + 4.4vw,5.4rem);
  --fs-h3:clamp(1.45rem,1.25rem + .7vw,1.85rem);
  --fs-lead:clamp(1.08rem,1rem + .35vw,1.28rem);
  --fs-body:1.0625rem;

  --container:1240px; --gutter:max(16px,4.4vw); --hdr:78px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --drift:cubic-bezier(.45,.05,.55,.95);
  --sh-1:0 1px 2px rgb(var(--ink-rgb) / .06),0 16px 36px -20px rgb(var(--ink-rgb) / .3);
  --sh-2:0 2px 6px rgb(var(--ink-rgb) / .08),0 34px 70px -30px rgb(var(--ink-rgb) / .42);
}

/* =====================================================================================================
   Homepage components, copied from home.css (base, arches, buttons, masthead, menu, reveal, footer).
   Left out on purpose: the homepage's verse numbers and menu numerals (owner rule: no decorative numbers).
   ===================================================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.7 var(--f-text);font-variant-numeric:lining-nums;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);color:var(--heading);font-weight:600;margin:0;overflow-wrap:break-word;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.012em}
h3{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.004em}
p{margin:0 0 1.1em}
b,strong{font-weight:600}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* focus: zero-specificity so a pill keeps its pill shape; anything without a radius gets a rounded ring */
:where(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:where(a,summary):focus-visible{border-radius:var(--r-xs)}
:where(.tone-dark,.hero,#menu,.colophon,.tier-mid) :where(a,button,summary,input):focus-visible{outline-color:var(--focus-deep)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--ink-950);color:var(--paper-50);padding:.7rem 1rem;border-radius:var(--r-xs);transition:transform .4s var(--ease)}
.skip:focus{transform:translateY(5rem)}

/* paper grain in ink: fixed, never on a scrolling layer (the matrix carries ink-950's channels) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .075 0 0 0 0 .106 0 0 0 0 .184 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:900px}
.center{text-align:center}
.small{font-size:.9rem}
.tone-dark{color:var(--on-deep)}
.tone-dark h2,.tone-dark h3{color:var(--on-deep-strong)}
.prose{max-width:36em}
.lead{font-size:var(--fs-lead);line-height:1.62}
.orn{display:block;width:min(240px,72%);height:24px;margin-inline:auto;color:var(--gold)}
.tone-dark .orn{color:var(--gold-on-deep)}
.dropcap::first-letter{float:left;font-family:var(--f-display);font-weight:600;font-size:3.8em;line-height:.74;padding:.06em .07em 0 0;color:var(--rubric)}
.tone-dark .dropcap::first-letter{color:var(--gold-on-deep)}

/* ---------- church-window arches (gilt frame + inner hairline), rounded at the foot too.
   Photos stay natural: no tint, a soft foot shade only. ---------- */
.arch{position:relative;margin:0;padding:7px;border-radius:999px 999px var(--arch-foot) var(--arch-foot);background:linear-gradient(165deg,var(--ember-300) 0%,var(--ember-500) 44%,var(--ember-700) 100%);box-shadow:var(--sh-2);z-index:0}
.arch-glass{position:relative;height:100%;overflow:hidden;border-radius:999px 999px calc(var(--arch-foot) - 7px) calc(var(--arch-foot) - 7px);isolation:isolate;background:var(--ink-900)}
.arch-glass img{width:100%;height:100%;object-fit:cover}
.arch-glass img:not([data-par]){border-radius:inherit}
.arch-glass img[data-par]{position:absolute;left:0;top:-9%;height:118%;will-change:transform}
.arch-glass::before{content:"";position:absolute;inset:11px;border:1px solid rgb(var(--paper-rgb) / .42);border-radius:999px 999px max(6px,calc(var(--arch-foot) - 18px)) max(6px,calc(var(--arch-foot) - 18px));z-index:2;pointer-events:none}
.arch-glass::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgb(var(--ink-rgb) / .32),rgb(var(--ink-rgb) / 0) 40%)}
.tone-dark .arch{box-shadow:0 40px 80px -36px rgb(var(--night-rgb) / .85)}
.arch-tall{aspect-ratio:4/5}
.arch-wide{border-radius:50% 50% var(--arch-foot) var(--arch-foot)/34% 34% var(--arch-foot) var(--arch-foot);aspect-ratio:2/1}
.arch-wide .arch-glass{border-radius:50% 50% calc(var(--arch-foot) - 7px) calc(var(--arch-foot) - 7px)/33% 33% calc(var(--arch-foot) - 7px) calc(var(--arch-foot) - 7px)}
.arch-wide .arch-glass::before{border-radius:50% 50% max(6px,calc(var(--arch-foot) - 18px)) max(6px,calc(var(--arch-foot) - 18px))/32% 32% max(6px,calc(var(--arch-foot) - 18px)) max(6px,calc(var(--arch-foot) - 18px))}
.arch-lancet{aspect-ratio:5/7;will-change:transform}

/* ---------- buttons: pill + nested icon ---------- */
.btn{--bg:var(--ink-950);--fg:var(--paper-50);--ico-bg:var(--ember-300);--ico-fg:var(--ink-950);
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:48px;padding:.5rem .5rem .5rem 1.35rem;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--bg);color:var(--fg);font:500 1rem/1.2 var(--f-text);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .1),0 16px 30px -18px rgb(var(--ink-rgb) / .6);
  transition:transform .55s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .55s var(--ease)}
.btn .ico{flex:none;width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;background:var(--ico-bg);color:var(--ico-fg);transition:transform .55s var(--ease)}
.btn .ico svg{width:1.05rem;height:1.05rem}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .1),0 22px 38px -20px rgb(var(--ink-rgb) / .7)}
.btn:hover .ico{transform:translate(3px,-1px) scale(1.06)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ink:hover{--bg:var(--ink-800)}
.btn-honey{--bg:var(--ember-500);--fg:var(--ink-950);--ico-bg:var(--ink-950);--ico-fg:var(--ember-300);box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .3),0 18px 34px -18px rgb(var(--night-rgb) / .6)}
.btn-honey:hover{--bg:var(--ember-400)}
.btn-ghost{--bg:transparent;--fg:var(--ink-950);--ico-bg:rgb(var(--ink-rgb) / .08);--ico-fg:var(--ink-950);border-color:rgb(var(--ink-rgb) / .3);box-shadow:none;padding:.5rem 1.45rem}
.btn-ghost:has(.ico){padding-right:.5rem}
.btn-ghost:hover{--bg:rgb(var(--ink-rgb) / .04);border-color:var(--ink-950);box-shadow:none}
.tone-dark .btn-ghost,.hero .btn-ghost,#menu .btn-ghost,.tier-mid .btn-ghost{--fg:var(--on-deep-strong);--ico-bg:rgb(var(--deep-rgb) / .1);--ico-fg:var(--on-deep-strong);border-color:rgb(var(--deep-rgb) / .34)}
.tone-dark .btn-ghost:hover,.hero .btn-ghost:hover{--bg:rgb(var(--deep-rgb) / .07);border-color:var(--on-deep-strong)}
.btn-lg{min-height:56px;font-size:1.05rem;padding-left:1.6rem}
.btn-ghost.btn-lg{padding:.5rem 1.6rem}
.btn-sm{min-height:44px;font-size:.94rem;padding-left:1.1rem}
.btn-sm .ico{width:1.85rem;height:1.85rem}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ctas.center{justify-content:center}

/* ---------- masthead: floating, blurred ---------- */
.masthead{position:fixed;top:10px;left:0;right:0;z-index:100;padding-inline:max(8px,1.2vw);pointer-events:none}
.masthead-bar{pointer-events:auto;max-width:calc(var(--container) + 16px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .45rem .45rem .95rem;border-radius:20px;background:rgb(var(--paper-rgb) / .92);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgb(var(--ink-rgb) / .1);box-shadow:0 14px 34px -24px rgb(var(--ink-rgb) / .5)}
.lockup{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink-950);min-width:0}
.lockup img{width:38px;height:36px;flex:none;border-radius:var(--r-xs)}
.lockup .name{display:block;font:600 1.38rem/1 var(--f-display);letter-spacing:-.005em;white-space:nowrap}
.lockup .name b{font-weight:700;color:var(--rubric)}
.lockup .sub{display:block;font:italic 400 .74rem/1.25 var(--f-text);color:var(--muted);margin-top:.22rem;white-space:nowrap}
.masthead-actions{display:flex;align-items:center;gap:.45rem;flex:none}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1rem;border-radius:var(--r-pill);border:1px solid rgb(var(--ink-rgb) / .22);background:transparent;color:var(--ink-950);font:500 .92rem/1 var(--f-text);cursor:pointer;transition:border-color .3s var(--ease),transform .5s var(--ease)}
.menu-btn:hover{border-color:var(--ink-950)}
.menu-btn:active{transform:scale(.97)}
.bars{position:relative;width:18px;height:10px}
.bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
.menu-btn[aria-expanded="true"] .bars i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- menu: a navy sheet from the right, its exposed left corners rounded ---------- */
#menu{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;transition:visibility 0s .65s}
#menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
#menu .veil{position:absolute;inset:0;background:rgb(var(--ink-rgb) / .58);opacity:0;transition:opacity .55s var(--ease)}
#menu .panel{position:absolute;top:0;right:0;bottom:0;width:min(470px,calc(100% - 14px));display:flex;flex-direction:column;gap:1.5rem;padding:1.1rem clamp(1.1rem,4vw,2rem) 2rem;background:var(--ink-950);color:var(--on-deep);border-radius:var(--r-lg) 0 0 var(--r-lg);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .65s var(--ease);isolation:isolate}
#menu .panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(200deg,rgb(var(--ember-rgb) / .14),rgb(var(--ember-rgb) / 0) 45%),linear-gradient(20deg,rgb(var(--ribbon-rgb) / .24),rgb(var(--ribbon-rgb) / 0) 50%)}
#menu.open .veil{opacity:1}
#menu.open .panel{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;font:600 .72rem/1 var(--f-text);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-on-deep)}
#menu-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-deep);background:transparent;color:var(--on-deep-strong);cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--ease),border-color .3s var(--ease)}
#menu-close svg{width:20px;height:20px}
#menu-close:hover{transform:rotate(90deg);border-color:var(--on-deep-strong)}
#menu-close:active{transform:rotate(90deg) scale(.94)}
#menu nav{display:grid}
#menu nav a{display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;gap:.6rem;padding:1rem 0;border-bottom:1px solid var(--hair-deep);text-decoration:none;font:600 1.75rem/1.1 var(--f-display);color:var(--on-deep-strong);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s var(--ease)}
#menu nav a small{display:block;margin-top:.35rem;font:400 .86rem/1.4 var(--f-text);color:var(--on-deep-muted)}
#menu nav a:hover{color:var(--gold-on-deep)}
#menu.open nav a{opacity:1;transform:none}
#menu.open nav a:nth-child(2){transition-delay:.05s}
#menu.open nav a:nth-child(3){transition-delay:.1s}
#menu.open nav a:nth-child(4){transition-delay:.15s}
#menu.open nav a:nth-child(5){transition-delay:.2s}
#menu.open nav a:nth-child(6){transition-delay:.25s}
.panel-cta{margin-top:auto}
.panel-cta .btn{width:100%}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- colophon: full width, navy, large rounded top corners ---------- */
.colophon{position:relative;z-index:2;margin-top:calc(-1 * var(--foot-r));padding:clamp(3.5rem,6vw,5.5rem) 0 1.6rem;background:var(--ink-950);color:var(--on-deep);border-radius:var(--foot-r) var(--foot-r) 0 0;font-size:.95rem;box-shadow:0 -28px 60px -44px rgb(var(--ink-rgb) / .55)}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.colophon .brand p{margin:1.2rem 0 0;max-width:24em}
.colophon h2{margin-bottom:1rem;font:600 .7rem/1 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-on-deep)}
.colophon ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.colophon a{text-decoration:none;color:var(--on-deep);transition:color .3s var(--ease)}
.colophon a:hover{color:var(--gold-on-deep)}
.colophon .lockup{color:var(--on-deep-strong)}
.colophon .lockup .name b{color:var(--gold-on-deep)}
.colophon .lockup .sub{color:var(--on-deep-muted)}
/* the emblem carries navy ink, so on navy it sits on a small paper tile */
.colophon .lockup img{width:50px;height:48px;padding:6px;background:var(--paper-50);border-radius:var(--r-sm)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hair-deep);font-size:.82rem;color:var(--on-deep-muted)}

/* =====================================================================================================
   SUBPAGES: what the homepage does not have
   ===================================================================================================== */
:root{
  /* the homepage's line arrow (#i-arrow), drawn inside the subpages' .arr chips */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23131B2F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5' fill='none' stroke='%2326324F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lift:clamp(3.5rem,8vw,6.5rem);            /* how far a card rises over the foot of the navy page head */
  --frame:8px;                                /* the gilt frame round the form and quiz cards */
}
[hidden]{display:none!important}
.muted{color:var(--muted)}
/* the menu carries no numerals on the subpages (owner rule: no decorative numbers), so each link is one column */
#menu nav a{grid-template-columns:minmax(0,1fr)}
/* hairline rules drawn as lines, not as box borders, so no square-cornered box shows (same look as the homepage) */
#menu nav a{position:relative;border-bottom:0}
#menu nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair-deep);pointer-events:none}
.colophon .legal{position:relative;border-top:0}
.colophon .legal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair-deep)}
.prose a:not(.btn){color:var(--rubric)}
.prose a:not(.btn):hover{color:var(--ink-950)}

/* ---------- the subpages' text arrow (.arr, also rendered by quiz.js) drawn as the homepage arrow chip.
   The arrow character stays in the markup; only its glyph is replaced by the same line drawing. ---------- */
.btn .arr{position:relative;flex:none;width:2.15rem;height:2.15rem;border-radius:50%;background:var(--ico-bg);color:transparent;font-size:0;line-height:0;overflow:hidden;transition:transform .55s var(--ease)}
.btn .arr::before{content:"";position:absolute;inset:0;margin:auto;width:1.05rem;height:1.05rem;background:var(--ico-fg);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.btn:hover .arr{transform:translate(3px,-1px) scale(1.06)}
.btn-sm .arr{width:1.85rem;height:1.85rem}
.btn-ghost:has(.arr){padding-right:.5rem}
.btn-primary:hover{--bg:var(--ink-800)}
.btn-block{width:100%}
.btn:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
.btn:disabled .arr{transform:none}
/* on navy grounds the primary turns amber and the ghost turns pale, as on the homepage hero and menu */
.page-hero .btn-primary,.tone-dark .btn-primary,.side-note-deep .btn-primary{--bg:var(--ember-500);--fg:var(--ink-950);--ico-bg:var(--ink-950);--ico-fg:var(--ember-300);box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .3),0 18px 34px -18px rgb(var(--night-rgb) / .6)}
.page-hero .btn-primary:hover,.tone-dark .btn-primary:hover,.side-note-deep .btn-primary:hover{--bg:var(--ember-400)}
.page-hero .btn-ghost,.side-note-deep .btn-ghost{--fg:var(--on-deep-strong);--ico-bg:rgb(var(--deep-rgb) / .1);--ico-fg:var(--on-deep-strong);border-color:rgb(var(--deep-rgb) / .34)}
.page-hero .btn-ghost:hover,.side-note-deep .btn-ghost:hover{--bg:rgb(var(--deep-rgb) / .07);border-color:var(--on-deep-strong)}
:where(.page-hero,.side-note-deep,.result-one,.lead-item) :where(a,button,input):focus-visible{outline-color:var(--focus-deep)}

/* =====================================================================================================
   PAGE HEAD: the homepage's navy card, full width and rounded at its foot. Warm washes, no photograph
   behind the type; About and the quiz carry an arched photograph beside it.
   ===================================================================================================== */
.page-hero{position:relative;z-index:1;isolation:isolate;overflow:hidden;background:var(--ink-950);color:var(--on-deep);border-radius:0 0 var(--hero-r) var(--hero-r);padding:calc(var(--hdr) + clamp(2.75rem,7vw,6rem)) 0 clamp(3.5rem,7vw,6rem)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(64% 92% at 96% -12%,rgb(var(--ember-rgb) / .17),rgb(var(--ember-rgb) / 0) 64%),radial-gradient(58% 86% at -6% 114%,rgb(var(--ribbon-rgb) / .36),rgb(var(--ribbon-rgb) / 0) 66%)}
.page-hero h1{font-size:clamp(2.5rem,1.3rem + 3.7vw,4.9rem);line-height:.98;letter-spacing:-.02em;color:var(--on-deep-strong);max-width:13.5em}
.page-hero h1 em{font-style:italic;font-weight:500;color:var(--gold-on-deep)}
.page-hero .lead{margin:1.7rem 0 0;max-width:34em;color:var(--on-deep)}
.page-hero .lead b{color:var(--on-deep-strong)}
.page-hero .small{margin:1.4rem 0 0;color:var(--on-deep-muted)}
.page-hero a:not(.btn){color:var(--gold-on-deep);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s var(--ease)}
.page-hero a:not(.btn):hover{color:var(--on-deep-strong)}
.page-hero .orn{width:190px;margin:0 0 1.9rem;color:var(--gold-on-deep)}
.page-hero .ctas{margin-top:2.1rem}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.page-hero-photo{width:100%;max-width:430px;justify-self:end}
.page-hero.is-centered{text-align:center}
.page-hero.is-centered h1,.page-hero.is-centered .lead{margin-inline:auto}
.page-hero.is-centered h1{max-width:15em}
.page-hero.is-centered .orn{margin-inline:auto}
.page-hero.has-lift{padding-bottom:calc(var(--lift) + clamp(3rem,6vw,5rem))}
/* the quiz: once it starts the photograph steps aside and the head keeps only the question */
.page-hero:has(#quiz-intro[hidden]) .page-hero-photo{display:none}
.page-hero:has(#quiz-intro[hidden]) .page-hero-grid{grid-template-columns:minmax(0,1fr)}
.page-hero.has-lift:has(#quiz-intro:not([hidden])){padding-bottom:clamp(3.5rem,7vw,6rem)}
.quiz-stage:has(#quiz[hidden]){padding-bottom:calc(var(--lift) + clamp(4rem,8vw,6.5rem) + var(--foot-r))}
/* the Unshaken photograph: a lower, segmental arch so the series title on the screen stays inside the frame */
.arch-low{border-radius:50% 50% var(--arch-foot) var(--arch-foot)/30% 30% var(--arch-foot) var(--arch-foot)}
.arch-low .arch-glass{border-radius:50% 50% calc(var(--arch-foot) - 7px) calc(var(--arch-foot) - 7px)/29% 29% calc(var(--arch-foot) - 7px) calc(var(--arch-foot) - 7px)}
.arch-low .arch-glass::before{border-radius:50% 50% max(6px,calc(var(--arch-foot) - 18px)) max(6px,calc(var(--arch-foot) - 18px))/28% 28% max(6px,calc(var(--arch-foot) - 18px)) max(6px,calc(var(--arch-foot) - 18px))}
.photo-unshaken .arch-glass img{object-position:3% 50%}

/* entrance: the type rises, the arch lifts in */
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes arch-in{from{opacity:0;transform:translateY(40px) scale(.965)}to{opacity:1;transform:none}}
.js .hero-in{animation:fade-up 1s var(--ease-expo) .08s both}
.js .hero-in + .hero-in{animation-delay:.2s}
.js .hero-in + .hero-in + .hero-in{animation-delay:.32s}
.js .page-hero-photo.hero-in{animation:arch-in 1.4s var(--ease-expo) .18s both}

/* the section after the head: transparent for the height of the lift, then the paper sky */
.form-stage{position:relative;z-index:2;margin-top:calc(-1 * var(--lift));padding-bottom:calc(clamp(4.5rem,9vw,7.5rem) + var(--foot-r));
  background:linear-gradient(180deg,rgb(var(--paper-rgb) / 0) 0,rgb(var(--paper-rgb) / 0) var(--lift),var(--bg) var(--lift),var(--sky-50) 55%,var(--sky-100) 100%)}

/* =====================================================================================================
   FORMS: one gilt-framed card (the homepage's edition frame), rounded fields, the phone field's flag
   menu restyled to the same tokens. Every class and id site.js and quiz.js query is untouched.
   ===================================================================================================== */
.side-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media (min-width:1024px){ .side-grid > .side-note{position:sticky;top:calc(var(--hdr) + 1.75rem)} }
.form-card,.quiz{position:relative;border:var(--frame) solid transparent;border-radius:calc(var(--r-lg) + var(--frame));
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(165deg,var(--ember-300) 0%,rgb(var(--ember-rgb) / .55) 38%,rgb(var(--ember-rgb) / .16) 100%) border-box;
  box-shadow:inset 0 0 0 1px rgb(var(--ember-rgb) / .14),var(--sh-2)}
.form-card{padding:clamp(1.35rem,3.6vw,2.75rem)}

.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1rem}
.form-group{position:relative;margin:0 0 .45rem;min-width:0}
.form-label{display:block;margin:0 0 .45rem;font:500 .9rem/1.35 var(--f-text);color:var(--ink-950)}
.form-label .req,.req{color:var(--rubric)}
.form-label .opt{font-weight:400;color:var(--muted)}
.form-input{display:block;width:100%;min-height:52px;margin:0;padding:.8rem 1rem;border:1px solid var(--sky-400);border-radius:var(--r-sm);background:var(--paper-0);font:400 1rem/1.4 var(--f-text);color:var(--ink-950);box-shadow:inset 0 1px 2px rgb(var(--ink-rgb) / .05);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.form-input::placeholder{color:#7C7466;opacity:1}
.form-input:hover{border-color:var(--sky-500)}
.form-input:focus{outline:none}
.form-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink-950);box-shadow:0 0 0 4px rgb(var(--ember-rgb) / .14)}
.form-input:disabled{background:var(--sky-50);color:var(--muted);cursor:not-allowed}
textarea.form-input{min-height:9.5rem;resize:vertical}
select.form-input{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background:var(--paper-0) var(--chevron) right .8rem center/1.15rem no-repeat;cursor:pointer}
.form-group:has(.form-error:not(:empty)) .form-input{border-color:var(--ribbon)}
.form-error{display:block;min-height:1.25em;margin:.3rem 0 0;font-size:.84rem;line-height:1.35;color:var(--rubric)}
.form-hint{margin:.4rem 0 0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.fieldset{min-width:0;margin:.5rem 0 1.1rem;padding:0;border:0}
.fieldset > legend.form-label{padding:0;margin-bottom:.7rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.consent-note{margin:1.3rem 0 1.3rem;font-size:.86rem;line-height:1.55;color:var(--muted)}
.consent-note a,.form-message a,.side-note a:not(.btn){color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s var(--ease)}
.consent-note a:hover,.form-message a:hover,.side-note a:not(.btn):hover{color:var(--ink-950)}
.form-message{margin:1rem 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-950)}
.form-message:not(:empty){padding:.85rem 1.1rem;border-radius:var(--r-sm);background:var(--sky-50);border:1px solid var(--hair)}
.form-message.ok{padding:1.1rem 1.25rem;background:var(--ember-050);border-color:rgb(var(--ember-rgb) / .5);font-weight:500}

/* option tiles: the tier picker on the booking form and every quiz choice */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.65rem}
.chip{position:relative;display:flex;align-items:center;gap:.8rem;min-height:3.4rem;padding:.8rem 1.1rem;border:1px solid var(--sky-300);border-radius:var(--r-md);background:var(--paper-0);color:var(--ink-950);font-size:1rem;line-height:1.35;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.chip:hover{border-color:rgb(var(--ink-rgb) / .5);background:var(--sky-50)}
.chip:active{transform:scale(.985)}
.chip input{appearance:none;-webkit-appearance:none;flex:none;width:1.2rem;height:1.2rem;margin:0;border:1.5px solid var(--sky-400);border-radius:50%;background:var(--paper-0);cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.chip input[type="checkbox"]{border-radius:6px}
.chip input:checked{border-color:var(--ember-300)}
.chip input[type="radio"]:checked{background:radial-gradient(circle,var(--ink-950) 0 30%,var(--ember-300) 34%)}
.chip input[type="checkbox"]:checked{background:var(--ember-300) var(--check) center/80% no-repeat}
.chip:has(input:checked){background:var(--ink-950);border-color:var(--ink-950);color:var(--on-deep-strong);box-shadow:0 14px 28px -18px rgb(var(--ink-rgb) / .75)}
.chip:has(input:disabled){opacity:.6;cursor:not-allowed}
@supports selector(:has(*)){
  .chip input:focus-visible{outline:none}
  .chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
}

/* the booking time picker */
.consult-picker > .form-hint:first-of-type{margin:0 0 1rem}
.cp-days,.cp-times{display:flex;flex-wrap:wrap;gap:.55rem}
.cp-times:not(:empty){margin-top:.85rem}
.cp-days button,.cp-times button{min-height:48px;padding:.6rem 1.1rem;border:1px solid var(--sky-300);border-radius:var(--r-pill);background:var(--paper-0);color:var(--ink-950);font:500 .97rem/1.2 var(--f-text);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .45s var(--ease)}
.cp-times button{font-variant-numeric:tabular-nums}
.cp-days button:hover,.cp-times button:hover{border-color:rgb(var(--ink-rgb) / .5);background:var(--sky-50)}
.cp-days button:active,.cp-times button:active{transform:scale(.97)}
.cp-days button[aria-pressed="true"],.cp-times button[aria-pressed="true"]{background:var(--ink-950);border-color:var(--ink-950);color:var(--on-deep-strong);box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb) / .5)}
.cp-days button:disabled,.cp-times button:disabled{opacity:.6;cursor:not-allowed}
.cp-picked{margin:.95rem 0 0;font:600 1.22rem/1.3 var(--f-display);color:var(--ink-950)}
.cp-picked:empty{margin:0}
.consult-picker > .form-hint:last-of-type{margin-top:.8rem}

/* the phone field (intl-tel-input 23): flag button, dial code and the searchable country menu */
.iti{display:block;width:100%;--iti-hover-color:rgb(var(--ink-rgb) / .05);--iti-border-gray:var(--sky-200);--iti-arrow-color:var(--ink-800);--iti-text-gray:var(--text)}
.iti .iti__selected-country{border-radius:calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px);color:var(--ink-950)}
.iti .iti__selected-country:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.iti__selected-country-primary{border-radius:calc(var(--r-sm) - 1px);padding-left:12px}
.iti .iti__selected-dial-code{font-size:1rem;color:var(--ink-950)}
.iti__flag{border-radius:3px;box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .12)}
.iti--inline-dropdown .iti__dropdown-content{margin-top:6px;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper-0);box-shadow:var(--sh-2);overflow:hidden}
.iti__search-input{display:block;width:calc(100% - 1rem);min-height:44px;margin:.5rem;padding:.6rem .85rem;border:1px solid var(--sky-300);border-radius:var(--r-sm);background:var(--paper-50);font:400 .95rem/1.3 var(--f-text);color:var(--ink-950)}
.iti__search-input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.iti__search-input + .iti__country-list{border-top:1px solid var(--hair-2)}
.iti--inline-dropdown .iti__country-list{max-height:240px;padding:.35rem}
.iti__country{gap:.1rem;padding:.55rem .65rem;border-radius:var(--r-xs);font-size:.95rem;color:var(--ink-950)}
.iti__country.iti__highlight{background:var(--sky-100)}
.iti__country[aria-selected="true"]{font-weight:600}

/* side notes beside the forms */
.side-note{position:relative;padding:clamp(1.6rem,3vw,2.3rem) clamp(1.4rem,2.6vw,2.1rem);border-radius:var(--r-lg);background:var(--paper-100);box-shadow:var(--sh-1);outline:1px solid rgb(var(--ribbon-rgb) / .36);outline-offset:-10px}
.side-note h2{margin:0 0 .7rem;font-size:clamp(1.65rem,1.35rem + .8vw,2.05rem);line-height:1.06}
.side-note p{margin:0 0 1rem}
.side-note p + h2{margin-top:1.9rem}
.side-note ol{list-style:none;display:grid;gap:.8rem;margin:0 0 1.7rem;padding:0}
.side-note ol li{position:relative;padding-left:1.5rem;font:600 1.24rem/1.25 var(--f-display);color:var(--ink-950)}
/* a small gilt diamond, the homepage's list mark; owner rule: no decorative numerals */
.side-note ol li::before{content:"";position:absolute;left:.2rem;top:.5em;width:7px;height:7px;border-radius:1.5px;background:var(--gold);transform:rotate(45deg)}
.side-note .small{margin:0;font-size:.9rem;line-height:1.55}
.side-note-deep{background:var(--ink-950);color:var(--on-deep);border:1px solid rgb(var(--gold-rgb) / .42);outline-color:rgb(var(--gold-rgb) / .3);box-shadow:0 2px 6px rgb(var(--ink-rgb) / .12),0 40px 70px -40px rgb(var(--ink-rgb) / .7);isolation:isolate;overflow:hidden}
.side-note-deep::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(200deg,rgb(var(--ember-rgb) / .16),rgb(var(--ember-rgb) / 0) 48%),linear-gradient(20deg,rgb(var(--ribbon-rgb) / .26),rgb(var(--ribbon-rgb) / 0) 55%)}
.side-note-deep h2{color:var(--on-deep-strong)}
.side-note-deep p{color:var(--on-deep)}
.side-note-deep .small.muted{margin-top:1.6rem;color:var(--on-deep-muted)}

/* =====================================================================================================
   QUIZ: the same gilt-framed card; a progress rule, rounded choice tiles, then the ranked archive
   ===================================================================================================== */
.quiz{max-width:860px;margin-inline:auto;padding:clamp(1.35rem,3.6vw,2.75rem)}
.quiz-progress{display:flex;align-items:center;gap:1.1rem;margin:0 0 clamp(1.5rem,3vw,2.1rem);font:600 .72rem/1.2 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.quiz-progress > span{flex:none}
.quiz-bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--sky-100);overflow:hidden;box-shadow:inset 0 1px 1px rgb(var(--ink-rgb) / .08)}
.quiz-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ember-500),var(--ember-300))}
.quiz-card h2{max-width:17em;font-size:clamp(1.85rem,1.3rem + 1.8vw,2.75rem);line-height:1.04;letter-spacing:-.014em}
.quiz-card h2:focus{outline:none}
.quiz-sub{margin:.85rem 0 0;color:var(--muted)}
.quiz-card > .series-list,.quiz-card > .fieldset,.quiz-card > div:not([class]),.quiz-card > form{margin-top:1.7rem}
.quiz-card > .fieldset{margin-bottom:0}
.quiz-card > .form-error{margin:.8rem 0 0;font-size:.92rem}
.quiz-nav{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.1rem;padding-top:1.4rem}
.quiz-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.quiz-nav .back{min-height:48px;padding:0 1.35rem;border:1px solid rgb(var(--ink-rgb) / .26);border-radius:var(--r-pill);background:transparent;color:var(--ink-950);font:500 1rem/1 var(--f-text);cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .45s var(--ease)}
.quiz-nav .back:hover{border-color:var(--ink-950);background:rgb(var(--ink-rgb) / .04)}
.quiz-nav .back:active{transform:scale(.97)}
.series-list{display:grid;gap:.7rem}
.series-row{display:flex;align-items:center;gap:.6rem}
.series-row .form-input{flex:1;min-width:0}
.series-row button{flex:none;width:48px;height:48px;border:1px solid var(--sky-300);border-radius:50%;background:var(--paper-0);color:var(--muted);font:300 1.55rem/1 var(--f-text);cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),transform .45s var(--ease)}
.series-row button:hover{border-color:var(--ribbon);color:var(--rubric)}
.series-row button:active{transform:scale(.94)}
.add-series{width:100%;min-height:52px;margin-top:.25rem;padding:.75rem 1rem;border:1px dashed rgb(var(--ribbon-rgb) / .5);border-radius:var(--r-sm);background:transparent;color:var(--rubric);font:500 1rem/1.2 var(--f-text);cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .45s var(--ease)}
.add-series:hover{background:rgb(var(--ribbon-rgb) / .05);border-color:var(--ribbon)}
.add-series:active{transform:scale(.985)}
.count-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(10rem,13rem);align-items:center;gap:.75rem 1rem;padding:.7rem .7rem .7rem 1.15rem;border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--sky-50)}
.count-row + .count-row{margin-top:.6rem}
.count-row span{font:600 1.3rem/1.2 var(--f-display);color:var(--ink-950);overflow-wrap:anywhere}
#quiz-gate .form-row,#quiz-gate > .form-group{margin-top:.2rem}
#quiz-gate .btn-block{margin-top:.2rem}

/* results */
.results h2{font-size:clamp(2rem,1.4rem + 2.1vw,3.05rem)}
.result-one{position:relative;isolation:isolate;overflow:hidden;margin:1.6rem 0 1.3rem;padding:clamp(1.4rem,3vw,2.1rem);border:1px solid rgb(var(--gold-rgb) / .45);border-radius:var(--r-md);background:var(--ink-950);color:var(--on-deep);box-shadow:0 30px 60px -36px rgb(var(--ink-rgb) / .75)}
.result-one::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(200deg,rgb(var(--ember-rgb) / .16),rgb(var(--ember-rgb) / 0) 50%),linear-gradient(20deg,rgb(var(--ribbon-rgb) / .28),rgb(var(--ribbon-rgb) / 0) 55%)}
.result-one .rank{font:600 .7rem/1.2 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-on-deep)}
.result-one h3{margin:.6rem 0 .75rem;font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);line-height:1.05;color:var(--on-deep-strong);overflow-wrap:anywhere}
.result-one p{margin:0;color:var(--on-deep)}
.result-rest{list-style:none;display:grid;gap:.6rem;margin:0 0 1.4rem;padding:0}
.result-rest li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.9rem;padding:1rem 1.15rem;border:1px solid var(--hair-2);border-radius:var(--r-md);background:var(--sky-50);line-height:1.5}
/* the rank quiz.js writes is content, so it reads as text at the title's size, never as a badge */
.result-rest .n{font:600 1.08rem/1.25 var(--f-text);font-variant-numeric:lining-nums;color:var(--ink-950)}
.result-rest b{font:600 1.32rem/1.25 var(--f-display);color:var(--ink-950);overflow-wrap:anywhere}
.reveal-line{margin:1.7rem 0 .45rem;font:italic 500 clamp(1.65rem,1.2rem + 1.5vw,2.35rem)/1.12 var(--f-display);color:var(--rubric)}
.results > p{max-width:40em}
.results > p b{color:var(--ink-950)}
.results .ctas{margin-top:1.4rem}

/* =====================================================================================================
   ABOUT
   ===================================================================================================== */
.story{position:relative;background:var(--bg);padding:clamp(4.5rem,9vw,8rem) 0 clamp(4rem,8vw,7rem)}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.story-side h2{font-size:var(--fs-h2-xl);line-height:.98;letter-spacing:-.02em}
.story-photo{width:100%;max-width:400px;margin-top:clamp(2rem,4vw,3.25rem)}
.story-photo .arch-glass img{object-position:47% 50%}
.story-text{max-width:35em;padding-top:clamp(0rem,1.2vw,1rem)}
.story-text p{font-size:1.08rem}
.story-text .dropcap{display:flow-root}
.story-text .pull{position:relative;margin:2.4rem 0;padding:1.7rem 0;font:italic 500 clamp(1.85rem,1.3rem + 1.8vw,2.8rem)/1.1 var(--f-display);color:var(--rubric);text-wrap:balance}
.story-text .pull::before,.story-text .pull::after{content:"";position:absolute;left:0;width:4.5rem;height:1px;background:var(--gold)}
.story-text .pull::before{top:0}
.story-text .pull::after{bottom:0}

.languages{position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--sky-50) 34%,var(--sky-100) 100%);padding:clamp(3.5rem,7vw,6rem) 0 clamp(5rem,9vw,8rem)}
.languages-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.languages-head h2{font-size:var(--fs-h2-xl);line-height:.98;letter-spacing:-.02em}
.languages-head .lead{margin:0;font:italic 500 clamp(1.5rem,1.15rem + 1.1vw,2.1rem)/1.22 var(--f-display);color:var(--rubric)}
.three-up{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(2.75rem,5vw,4rem);align-items:stretch}
.lang-card{position:relative;padding:2.3rem 2rem 2.1rem;border:1px solid rgb(var(--ember-rgb) / .3);border-radius:var(--r-lg);background:var(--card);box-shadow:0 2px 6px rgb(var(--ink-rgb) / .06),0 34px 60px -38px rgb(var(--ink-rgb) / .5)}
.lang-qf{display:block;width:2.7rem;height:2.7rem;margin-bottom:1.15rem;color:var(--gold)}
.lang-card h3{margin-bottom:.75rem;font-size:clamp(1.55rem,1.35rem + .6vw,1.85rem)}
.lang-card p{margin:0;font-size:.98rem}
.lang-card.lead-item{isolation:isolate;overflow:hidden;background:var(--ink-950);color:var(--on-deep);border-color:rgb(var(--gold-rgb) / .5);box-shadow:0 2px 6px rgb(var(--ink-rgb) / .12),0 40px 70px -40px rgb(var(--ink-rgb) / .8)}
.lang-card.lead-item::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(200deg,rgb(var(--ember-rgb) / .16),rgb(var(--ember-rgb) / 0) 48%),linear-gradient(20deg,rgb(var(--ribbon-rgb) / .26),rgb(var(--ribbon-rgb) / 0) 55%)}
.lang-card.lead-item h3{color:var(--on-deep-strong)}
.lang-card.lead-item .lang-qf{color:var(--gold-on-deep)}
.covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.6vw,2.25rem);max-width:980px;margin:clamp(3.5rem,7vw,5.5rem) auto 0}
.covers figure{margin:0}
.covers img{width:100%;border-radius:3px 10px 10px 3px;box-shadow:0 2px 4px rgb(var(--ink-rgb) / .12),0 22px 36px -24px rgb(var(--ink-rgb) / .45)}
.covers figcaption{margin-top:1.1rem;font-size:.86rem;line-height:1.4;text-align:center;color:var(--text)}
.covers-note{margin:2.2rem 0 0;text-align:center;font:italic 500 1.3rem/1.3 var(--f-display);color:var(--muted)}

/* Meet Bubba: the sky deepens to navy inside the top padding, before any text */
.meet{position:relative;--pad:clamp(8rem,14vw,12rem);padding:var(--pad) 0 clamp(4.5rem,8vw,7rem);
  background:linear-gradient(180deg,var(--sky-100) 0,var(--sky-200) calc(var(--pad) * .14),var(--sky-300) calc(var(--pad) * .32),var(--sky-400) calc(var(--pad) * .52),var(--sky-500) calc(var(--pad) * .7),var(--ink-800) calc(var(--pad) * .86),var(--ink-950) var(--pad),var(--ink-950) 100%)}
.meet-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.meet-photo{width:100%;max-width:440px;aspect-ratio:1000/1149}
.meet h2{font-size:var(--fs-h2-xl);line-height:.98;letter-spacing:-.02em}
.meet .role{margin:1rem 0 1.7rem;font:italic 500 clamp(1.3rem,1.15rem + .5vw,1.6rem)/1.2 var(--f-display);color:var(--gold-on-deep)}
.meet .prose{max-width:37em}
.meet .prose p{color:var(--on-deep)}
.meet .prose i{color:var(--on-deep-strong)}
blockquote.quote{position:relative;margin:2.3rem 0 0;padding:1.8rem clamp(1.3rem,3vw,2rem) 1.6rem;border:1px solid rgb(var(--gold-rgb) / .32);border-radius:var(--r-lg);background:rgb(var(--deep-rgb) / .05);font:italic 500 clamp(1.4rem,1.15rem + .9vw,1.85rem)/1.32 var(--f-display);color:var(--on-deep-strong)}
blockquote.quote cite{display:block;margin-top:1.1rem;font:normal 600 .9rem/1.2 var(--f-text);letter-spacing:.06em;color:var(--gold-on-deep)}

/* the close: night turns back to a pale sky inside the top padding; the footer rises out of its foot */
.close{position:relative;padding:clamp(4rem,9vw,8rem) 0 calc(clamp(5rem,10vw,8.5rem) + var(--foot-r));background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 12%,var(--sky-50) 48%,var(--sky-100) 100%)}
.close.from-night{--dawn:clamp(9rem,16vw,14rem);padding-top:calc(var(--dawn) + clamp(1rem,3vw,2.5rem));
  background:linear-gradient(180deg,var(--ink-950) 0,var(--ink-800) calc(var(--dawn) * .14),var(--sky-500) calc(var(--dawn) * .32),var(--sky-400) calc(var(--dawn) * .48),var(--sky-300) calc(var(--dawn) * .63),var(--sky-200) calc(var(--dawn) * .77),var(--sky-100) calc(var(--dawn) * .9),var(--sky-50) var(--dawn),var(--bg) calc(var(--dawn) + 8rem),var(--sky-50) 74%,var(--sky-100) 100%)}
.close h2{max-width:15em;margin:1.6rem auto 0;font-size:clamp(2.3rem,1.5rem + 3.2vw,4.3rem);line-height:1.02}
.close .lead{max-width:36em;margin:1.5rem auto 0;color:var(--text)}

/* =====================================================================================================
   Static capture (?static), tablet and phone, reduced motion
   ===================================================================================================== */
.static .rv{opacity:1;transform:none;transition:none}
.static .hero-in{animation:none}

@media (max-width:1023px){
  :root{--hdr:72px}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .brand{grid-column:1/-1}
  .page-hero-grid{gap:clamp(1.5rem,4vw,2.5rem)}
  .page-hero-photo{max-width:330px}
  .side-grid{grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto}
  .story-grid,.meet-grid,.languages-head{grid-template-columns:minmax(0,1fr)}
  .story-photo,.meet-photo{max-width:400px}
  .meet-photo{justify-self:center}
  .three-up{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
}
@media (max-width:767px){
  :root{--hero-r:24px}
  .page-hero-grid{grid-template-columns:minmax(0,1fr)}
  .page-hero-photo{justify-self:start;max-width:360px}
}
@media (max-width:640px){
  :root{--frame:6px}
  .masthead{top:8px}
  .masthead-bar{padding:.4rem .4rem .4rem .7rem;border-radius:16px}
  .lockup{gap:.5rem;overflow:hidden}
  .lockup > span{min-width:0}
  .lockup img{width:30px;height:29px}
  .lockup .name{font-size:1.06rem}
  .lockup .sub{font-size:.6rem;white-space:normal;line-height:1.2;margin-top:.15rem}
  .menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-btn{width:44px;padding:0;justify-content:center}
  .masthead-actions .btn-sm{padding:.5rem .95rem;font-size:.88rem;min-height:44px}
  .masthead-actions .btn-sm .arr{display:none}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot > div:last-child{grid-column:1/-1}
  .legal{flex-direction:column}
  .page-hero .ctas .btn,.close .ctas .btn{width:100%}
  .page-hero-photo{justify-self:center;max-width:330px}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .form-card,.quiz{padding:1.15rem 1rem 1.3rem}
  .count-row{grid-template-columns:minmax(0,1fr);padding:.85rem}
  .quiz-nav .btn{padding-left:1.15rem}
  .covers{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
  .lang-card{padding:2rem 1.5rem 1.8rem}
  .side-note{outline-offset:-8px}
}
@media (max-width:400px){
  .btn{max-width:100%}
  .btn-lg{white-space:normal;line-height:1.25;text-align:left}
  .masthead{padding-inline:6px}
  .masthead-bar{padding-left:.55rem;gap:.5rem}
  .lockup{gap:.4rem}
  .lockup img{width:26px;height:25px}
  .lockup .name{font-size:.98rem}
  .masthead-actions{gap:.3rem}
  .masthead-actions .btn-sm{padding:.5rem .8rem;font-size:.84rem}
  .menu-btn{width:42px;min-height:42px}
  .colophon .lockup img{width:44px;height:42px;padding:5px}
  .quiz-nav{flex-wrap:wrap}
  .chip{padding:.75rem .9rem}
}
@media (max-width:340px){
  .masthead .lockup img{display:none}
  .lockup .name{font-size:.94rem}
  .masthead-actions .btn-sm{padding:.45rem .7rem;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* =====================================================================================================
   ABOUT: example covers, 2026-10-15. Appended block; nothing above it changed.
   Four sermon-series covers drawn in HTML/CSS replace the house's real covers in "We speak both
   languages." They are examples only: every author line reads "Your Name".
   Owner rules kept here: no cross shapes, no numerals, no square corners, only transform and opacity
   animate, and the hover lift exists only for a fine pointer with motion allowed.
   Every size inside a cover is in cqi (a share of that cover's own width), so each cover scales as one
   picture, from about 130px to 218px wide, and its text wraps the same way at every width.
   The grid itself is still .covers above (4 across, 2 x 2 under 641px); the old .covers img and
   .covers figcaption rules no longer match anything.
   ===================================================================================================== */
.ex-cover{position:relative;isolation:isolate;container-type:inline-size;border-radius:4px 8px 8px 4px;
  box-shadow:0 1px 2px rgb(var(--ink-rgb) / .14),0 6px 12px -6px rgb(var(--ink-rgb) / .22),0 26px 40px -24px rgb(var(--ink-rgb) / .5)}
/* the deeper hover shadow fades in on its own layer, so box-shadow itself never animates */
.ex-cover::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 2px 4px rgb(var(--ink-rgb) / .1),0 44px 60px -30px rgb(var(--ink-rgb) / .55)}
.ex-face{position:relative;overflow:hidden;aspect-ratio:668/1024;border-radius:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12cqi 9cqi 11cqi 12cqi}
.ex-face > *{position:relative;z-index:1;flex:none;max-width:100%}
.ex-face > .ex-frame,.ex-face > .ex-band,.ex-face > .ex-sun,.ex-face > .ex-arches{position:absolute;z-index:0}
/* the spine: a dark hinge, a thin highlight, a soft crease, then nothing; plus a faint fore-edge and hairline */
.ex-face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgb(var(--night-rgb) / .36) 0,rgb(var(--night-rgb) / .12) 1.5%,rgb(255 255 255 / .16) 2.7%,rgb(var(--night-rgb) / .16) 4.2%,rgb(255 255 255 / .05) 6.2%,rgb(255 255 255 / 0) 10%),
    linear-gradient(270deg,rgb(var(--night-rgb) / .12) 0,rgb(var(--night-rgb) / 0) 2.4%);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .1)}
.ex-title{display:block;margin-top:auto;font-family:var(--f-display);font-weight:600;line-height:.95;text-wrap:balance}
.ex-title i{display:block}
.ex-orn{display:block;height:auto}
.ex-sub{display:block;text-wrap:balance}
.ex-sub .nw{white-space:nowrap}
.ex-author{display:block;margin-top:auto;font:500 max(9px,6.2cqi)/1 var(--f-text);font-variant-caps:small-caps;letter-spacing:.12em;margin-right:-.12em}

/* Unshaken: deep navy, gold foil type, a fine double rule frame */
.ex-unshaken .ex-face{padding-bottom:13.5cqi;color:var(--on-deep);background:
  radial-gradient(110% 60% at 50% 0%,rgb(var(--ember-rgb) / .13),rgb(var(--ember-rgb) / 0) 64%),
  radial-gradient(90% 55% at 0% 100%,rgb(var(--ribbon-rgb) / .3),rgb(var(--ribbon-rgb) / 0) 70%),
  linear-gradient(160deg,var(--ink-900) 0%,var(--ink-950) 62%)}
.ex-unshaken .ex-frame{inset:6.5cqi 6cqi 6.5cqi 9cqi;border:1px solid rgb(var(--gold-rgb) / .62);border-radius:1.8cqi}
.ex-unshaken .ex-frame::before{content:"";position:absolute;inset:1.6cqi;border:1px solid rgb(var(--gold-rgb) / .28);border-radius:1cqi}
.ex-unshaken .ex-title{font-size:11.5cqi;letter-spacing:.1em;margin-right:-.1em;text-transform:uppercase;color:var(--ember-300)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ex-unshaken .ex-title{background:linear-gradient(112deg,var(--ember-400) 0%,var(--ember-300) 30%,var(--ember-100) 48%,var(--ember-300) 64%,var(--ember-400) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.ex-unshaken .ex-orn{width:46cqi;margin:5cqi 0 4.5cqi;color:var(--ember-300)}
.ex-unshaken .ex-sub{font:italic 500 max(10px,7.4cqi)/1.2 var(--f-display);color:var(--on-deep)}
.ex-unshaken .ex-author{color:var(--ember-300)}

/* The Sermon on the Mount: warm paper, a burgundy cloth spine, burgundy type and a leaf ornament */
.ex-mount .ex-face{padding:13cqi 8cqi 13cqi 20cqi;color:var(--text-body);background:
  radial-gradient(110% 80% at 68% 32%,var(--paper-50),rgb(var(--paper-rgb) / 0) 72%),
  linear-gradient(180deg,var(--paper-100),var(--paper-200))}
.ex-mount .ex-face::before{content:"";position:absolute;z-index:0;top:7cqi;bottom:7cqi;left:20cqi;right:8cqi;border-block:1px solid rgb(var(--ribbon-rgb) / .5)}
.ex-mount .ex-band{top:0;bottom:0;left:0;width:12.5cqi;background:linear-gradient(90deg,var(--ribbon) 0%,var(--ribbon-light) 58%,var(--ribbon) 100%);box-shadow:1px 0 0 rgb(var(--gold-rgb) / .75),3px 0 0 rgb(var(--ink-rgb) / .06)}
.ex-mount .ex-title{font-size:16cqi;line-height:.94;letter-spacing:-.005em;color:var(--ribbon)}
.ex-mount .ex-title i{font-weight:500;font-size:.5em;line-height:1.55;letter-spacing:.02em}
.ex-mount .ex-orn{width:52cqi;margin:4.5cqi 0 4cqi;color:var(--gold)}
.ex-mount .ex-sub{font:italic 400 max(9px,6cqi)/1.38 var(--f-text);color:var(--text-body)}
.ex-mount .ex-author{color:var(--ribbon)}

/* Psalms for the Weary: an amber field, a large set title, a low sun on the horizon */
.ex-psalms .ex-face{align-items:flex-start;text-align:left;padding:11cqi 9cqi 11cqi 13cqi;color:var(--ink-950);background:
  linear-gradient(180deg,var(--ember-200) 0%,var(--ember-300) 34%,var(--ember-400) 66%,var(--ember-500) 66.2%,var(--ember-500) 100%)}
.ex-psalms .ex-sun{left:calc(53.5% - 27cqi);top:calc(66.1% - 27cqi);width:54cqi;height:54cqi;border-radius:50%;clip-path:inset(0 0 50% 0);
  background:radial-gradient(circle at 50% 70%,var(--ember-050) 0%,var(--ember-100) 46%,var(--ember-200) 100%)}
/* the sun's reflection: fine light lines on the lower field, fading at both ends */
.ex-psalms .ex-face::before{content:"";position:absolute;z-index:0;left:calc(53.5% - 19cqi);top:calc(66.2% + 2.4cqi);width:38cqi;height:16cqi;
  background:repeating-linear-gradient(180deg,rgb(var(--gold-rgb) / .9) 0 1px,rgb(var(--gold-rgb) / 0) 1px 3.4cqi);
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0%,#000 30%,transparent 100%);mask-image:radial-gradient(50% 100% at 50% 0%,#000 30%,transparent 100%)}
.ex-psalms .ex-title{margin-top:0;font-size:25cqi;line-height:.86;letter-spacing:-.02em;color:var(--ink-950)}
.ex-psalms .ex-title i{margin-top:.14em;font-weight:500;font-size:.42em;line-height:1.15;letter-spacing:0}
.ex-psalms .ex-sub{max-width:66cqi;margin-top:5cqi;font:500 max(9px,5.6cqi)/1.4 var(--f-text);color:var(--ink-900);text-wrap:pretty}
.ex-psalms .ex-author{display:flex;align-items:center;gap:3cqi;color:var(--ink-950)}
.ex-psalms .ex-author::before{content:"";width:9cqi;height:1px;background:currentColor}

/* Advent: ink-800 into night, nested arches with warm light at the innermost door */
.ex-advent .ex-face{color:var(--on-deep);background:
  radial-gradient(44% 26% at 52% 38%,rgb(var(--gold-rgb) / .15),rgb(var(--gold-rgb) / 0) 74%),
  linear-gradient(180deg,var(--ink-800) 0%,var(--ink-900) 56%,var(--ink-950) 100%)}
.ex-advent .ex-arches{top:10cqi;left:14cqi;width:76cqi;color:rgb(var(--gold-rgb) / .78);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 97%);mask-image:linear-gradient(180deg,#000 52%,transparent 97%)}
.ex-advent .ex-title{font-size:20cqi;font-style:italic;font-weight:500;line-height:1;letter-spacing:.005em;color:var(--on-deep-strong)}
.ex-advent .ex-sub{margin-top:3.5cqi;font:500 max(8px,4.4cqi)/1.45 var(--f-text);letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:var(--ember-300)}
.ex-advent .ex-author{margin-top:7cqi;color:var(--on-deep-muted)}

/* the group caption balances its two lines on narrow phones */
.covers-note{text-wrap:balance}

/* a gentle lift for a fine pointer only; reduced motion keeps the covers still */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ex-cover{transition:transform .6s var(--ease)}
  .ex-cover::after{transition:opacity .6s var(--ease)}
  .ex-cover:hover{transform:translateY(-6px)}
  .ex-cover:hover::after{opacity:1}
}