[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--navy-800);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);line-height:1.15;font-weight:600;margin:0 0 .5em}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--surface);padding:.5rem 1rem;z-index:100}
.skip:focus{left:.5rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.prose{max-width:var(--measure)}
.muted{color:var(--text-muted)}
.small{font-size:var(--step--1)}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:600;color:var(--accent-text)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.site-header{background:var(--navy-900);color:var(--ivory-50);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(236,208,154,.18)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ivory-50);text-decoration:none}
.brand:hover{color:var(--gold-300)}
.brand img{display:block;height:48px;width:auto}
@media (max-width:22rem){.brand img{height:42px}}
.brand-name{font-family:var(--font-display);font-size:1.45rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.nav-toggle{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid rgba(236,208,154,.4);color:var(--ivory-50);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.95rem;cursor:pointer}
.site-nav{display:none}
.site-nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--navy-900);padding:.5rem 1.25rem 1.25rem;border-bottom:1px solid rgba(236,208,154,.18)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.site-nav a{display:block;color:var(--ivory-100);text-decoration:none;padding:.6rem .75rem;border-radius:var(--radius-sm)}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:rgba(236,208,154,.12);color:var(--gold-300)}
@media (min-width:60rem){
  .nav-toggle{display:none}
  .site-nav,.site-nav.open{display:block;position:static;padding:0;background:none;border:0}
  .site-nav ul{flex-direction:row;gap:.25rem}
  .site-nav a{padding:.45rem .8rem;font-size:.98rem}
}

/* Hero */
.hero{background:var(--hero-grad);color:var(--ivory-50);position:relative;overflow:hidden}
.hero .wrap{padding-top:clamp(3rem,8vw,6.5rem);padding-bottom:clamp(3.5rem,9vw,7rem);position:relative;z-index:1}
.hero h1{color:var(--ivory-50);max-width:16ch;margin-bottom:.35em}
.hero .lede{font-size:var(--step-1);max-width:34rem;color:var(--ivory-100)}
.hero .eyebrow{color:var(--gold-300)}
.hero-art{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;opacity:.9;pointer-events:none}
.hero-art svg{width:100%;height:100%}
.page-hero{background:var(--hero-grad);color:var(--ivory-50)}
.page-hero .wrap{padding-top:clamp(2.2rem,6vw,4rem);padding-bottom:clamp(2.2rem,6vw,3.5rem)}
.page-hero h1{color:var(--ivory-50);font-size:var(--step-3);margin-bottom:.25em}
.page-hero p{color:var(--ivory-100);max-width:40rem;margin:0;font-size:var(--step-1)}
.page-hero .eyebrow{color:var(--gold-300)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:600;font-size:1rem;padding:.8rem 1.35rem;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;line-height:1.2;min-height:44px}
.btn-gold{background:var(--gold-400);color:var(--navy-900)}
.btn-gold:hover{background:var(--gold-300);color:var(--navy-900)}
.btn-ghost{border-color:rgba(236,208,154,.6);color:var(--ivory-50);background:transparent}
.btn-ghost:hover{background:rgba(236,208,154,.12);color:var(--ivory-50)}
.btn-navy{background:var(--navy-800);color:var(--ivory-50)}
.btn-navy:hover{background:var(--navy-700);color:#fff}
.btn-line{background:var(--surface);border-color:var(--navy-700);color:var(--navy-800)}
.btn-line:hover{background:var(--ivory-100);color:var(--navy-900)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Sections */
.section{padding:clamp(2.75rem,7vw,5rem) 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:44rem;margin-bottom:2rem}
.grid{display:grid;gap:1.25rem}
@media (min-width:44rem){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:44rem) and (max-width:59.99rem){.grid-3{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.4rem 1.25rem;box-shadow:var(--shadow)}
.card h3{font-size:var(--step-1);margin-bottom:.35em}
.card .icon{width:44px;height:44px;margin-bottom:.8rem;color:var(--accent-text)}
.card a.more{font-weight:600}
.feature-card{display:flex;flex-direction:column}
.feature-card p{flex:1}

/* Scripture callout */
.scripture{position:relative;margin:0;padding:1.5rem 1.5rem 1.25rem 1.6rem;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow)}
.scripture p{font-family:var(--font-display);font-size:var(--step-1);line-height:1.4;color:var(--navy-800);margin-bottom:.5rem}
.scripture cite{font-style:normal;font-weight:600;color:var(--accent-text);font-size:.95rem}
.promise{background:var(--navy-900);color:var(--ivory-100)}
.promise .scripture{background:rgba(255,255,255,.04);box-shadow:none;border-left-color:var(--gold-400)}
.promise .scripture p{color:var(--ivory-50);font-size:var(--step-2)}
.promise .scripture cite{color:var(--gold-300)}
.promise h2{color:var(--ivory-50)}
.promise a{color:var(--gold-300)}
/* Why now: the gathering of Israel */
.gathering{background:linear-gradient(180deg,var(--ivory-50,#fbf7ef),#f6ecd8);text-align:center;border-bottom:1px solid rgba(217,164,65,.25)}
.gathering-inner{max-width:46rem}
.gathering-sun{display:block;width:3.25rem;height:1.625rem;margin:0 auto 1rem;border-radius:3.25rem 3.25rem 0 0;background:var(--gold-400,#d9a441);
  box-shadow:0 0 0 6px rgba(217,164,65,.14),0 0 0 13px rgba(217,164,65,.07);position:relative}
.gathering-sun::after{content:"";position:absolute;left:-1.5rem;right:-1.5rem;bottom:-2px;height:2px;background:var(--navy-900);border-radius:2px}
.gathering .eyebrow{margin:0 0 .75rem}
.gathering-text{margin:0 auto;font-family:var(--font-display);font-size:clamp(1.3rem,1.05rem + 1.2vw,1.85rem);line-height:1.45;color:var(--navy-900);text-wrap:pretty}
.gathering-ref{margin:1.1rem 0 0;font-size:var(--step--1);color:var(--text-muted);letter-spacing:.02em}
.gathering-ref a{color:var(--accent-text)}

/* Image placeholders (Media Library TODO) */
.media-ph{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,var(--navy-700),var(--navy-900));aspect-ratio:4/3;display:flex;align-items:flex-end;color:var(--ivory-100)}
.media-ph svg{position:absolute;inset:0;width:100%;height:100%}
.media-ph figcaption{position:relative;z-index:1;font-size:.8rem;padding:.5rem .75rem;background:rgba(15,27,51,.6);width:100%}

/* Forms */
.form{display:grid;gap:1.1rem}
.field label,.field legend{display:block;font-weight:600;color:var(--navy-800);margin-bottom:.35rem}
.field .hint{display:block;font-size:var(--step--1);color:var(--text-muted);margin:-.15rem 0 .4rem}
input[type=text],input[type=number],input[type=search],input[type=date],input[type=url],input[type=email],input:not([type]),select,textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1.5px solid #cdbf9f;border-radius:var(--radius-sm);padding:.7rem .8rem;min-height:44px}
textarea{min-height:8rem;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--navy-600);outline:3px solid rgba(42,111,219,.25);outline-offset:0}
fieldset{border:0;padding:0;margin:0}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;color:var(--text);border:1.5px solid #cdbf9f;background:var(--surface);border-radius:999px;padding:.45rem .9rem;cursor:pointer;min-height:44px;margin:0}
.seg input{accent-color:var(--navy-700)}
.seg label:has(input:checked){border-color:var(--navy-700);background:var(--navy-800);color:var(--ivory-50)}
.row-2{display:grid;gap:1.1rem}
@media (min-width:40rem){.row-2{grid-template-columns:1fr 1fr}}
.tool-layout{display:grid;gap:2rem}
@media (min-width:62rem){.tool-layout{grid-template-columns:minmax(18rem,25rem) 1fr;align-items:start}.tool-layout .panel-sticky{position:sticky;top:5rem}}

/* Demo badge */
.demo-badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff4d9;color:#6b4a0c;border:1px solid #e6c578;border-radius:999px;padding:.3rem .8rem;font-size:.85rem;font-weight:600}
.demo-note{background:#fff8e6;border:1px solid #ecd391;border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:var(--step--1);color:#5a430f}

/* Results */
.results{display:grid;gap:1.25rem}
.result-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow)}
.result-block > h3{font-size:var(--step-1);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.result-block > h3 .num{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--navy-800);color:var(--gold-300);font-family:var(--font-body);font-size:.85rem;font-weight:600}
.talk-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.talk-list li{border-top:1px solid var(--border);padding-top:1rem}
.talk-list li:first-child{border-top:0;padding-top:0}
.talk-title{font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1.25}
.talk-meta{font-size:var(--step--1);color:var(--text-muted)}
.talk-quote{margin:.5rem 0 0;padding-left:.9rem;border-left:3px solid var(--gold-300);font-style:italic;color:var(--ink-900)}
.talk-quote footer{font-style:normal;font-size:var(--step--1);color:var(--text-muted);margin-top:.2rem}
.verse{margin:0 0 .9rem}
.verse cite{font-style:normal;font-weight:600;color:var(--accent-text)}
.tag{display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:999px;vertical-align:middle}
.tag-cut{background:#fde8e4;color:#8a2f22}
.tag-add{background:#e3f0e8;color:#2c5a43}
.tag-core{background:#e6ebf5;color:var(--navy-700)}
.tag-time{background:var(--ivory-100);color:var(--navy-800);border:1px solid var(--border)}
.outline{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.outline > li{border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1rem .85rem;background:var(--bg)}
.outline > li.optional{border-style:dashed}
.outline h4{font-family:var(--font-body);font-size:1.05rem;font-weight:600;margin:0 0 .35rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;color:var(--navy-800)}
.outline ul{margin:.25rem 0 0;padding-left:1.15rem}
.slot{border:2px dashed var(--gold-400);background:#fffaf0;border-radius:var(--radius-sm);padding:.75rem .9rem;margin:.6rem 0;color:#5a430f}
.slot strong{color:#6b4a0c}
.slot.prompting{border-color:#9db3d9;background:#f3f6fc;color:var(--navy-800)}
.slot.prompting strong{color:var(--navy-700)}
.nudge{position:relative;display:block;background:#eef2f9;border-radius:var(--radius-sm);padding:.65rem .85rem .65rem 2.1rem;margin:.5rem 0;color:var(--navy-800);font-size:var(--step--1)}
.nudge::before{content:"✦";position:absolute;left:.85rem;top:.65rem;color:var(--gold-700);font-size:1rem;line-height:1.4}
.fulltext p{font-size:1.07rem;line-height:1.75}
.fulltext .slot{font-size:.98rem}
.epl{display:grid;gap:.9rem}
@media (min-width:48rem){.epl{grid-template-columns:repeat(3,1fr)}}
.epl > div{background:var(--bg);border-radius:var(--radius-sm);padding:1rem;border:1px solid var(--border)}
.epl h4{font-size:1.35rem;margin-bottom:.15rem}
.epl .what{font-size:.85rem;font-weight:600;color:var(--accent-text);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.closing{background:var(--navy-900);color:var(--ivory-100);border-radius:var(--radius);padding:1.4rem}
.closing h3{color:var(--ivory-50)}
.closing .amen{font-family:var(--font-display);font-size:var(--step-1);color:var(--gold-300)}
.tabs{display:inline-flex;border:1.5px solid var(--navy-700);border-radius:999px;overflow:hidden}
.tabs button{font:inherit;font-weight:600;font-size:.92rem;padding:.55rem 1.1rem;border:0;background:var(--surface);color:var(--navy-800);cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--navy-800);color:var(--ivory-50)}
.empty-state{border:2px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--text-muted);background:var(--surface)}

/* Timer */
.meter{height:14px;border-radius:999px;background:var(--ivory-200);overflow:hidden;position:relative}
.meter > span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-400),var(--gold-500));border-radius:999px;transition:width .3s}
.meter.over > span{background:linear-gradient(90deg,#d58a6f,var(--rose-600))}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media (min-width:40rem){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .85rem}
.stat b{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--navy-800);line-height:1.1}
.stat span{font-size:.82rem;color:var(--text-muted)}
.para-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.para-list li{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .8rem;background:var(--bg);font-size:.95rem}
.para-list .para-head{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.25rem;font-size:.85rem;color:var(--text-muted)}
.verdict{font-family:var(--font-display);font-size:var(--step-2);color:var(--navy-800);margin:.25rem 0 .75rem}
input[type=range]{width:100%;accent-color:var(--navy-700);min-height:44px}

/* Question layers */
.layers{display:grid;gap:1.25rem}
.layer{border-radius:var(--radius);padding:1.3rem;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);position:relative}
.layer-1{border-top:5px solid var(--gold-300)}
.layer-2{border-top:5px solid var(--gold-500)}
.layer-3{border-top:5px solid var(--navy-700)}
.layer ol{padding-left:1.2rem;margin:.4rem 0 .8rem}
.layer li{margin-bottom:.4rem}
.when{background:var(--bg);border-radius:var(--radius-sm);padding:.75rem .9rem;font-size:var(--step--1)}
.plug{border:2px dashed #9db3d9;background:#f3f6fc;border-radius:var(--radius);padding:1.1rem 1.2rem;color:var(--navy-800)}

/* Prayer */
.lang-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.lang-table th,.lang-table td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.lang-table th{background:var(--navy-800);color:var(--ivory-50);font-weight:600}
.lang-table td:first-child{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--navy-800);white-space:nowrap}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4rem 1fr;gap:.75rem;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--gold-300);color:var(--navy-900);font-weight:700;font-family:var(--font-display);font-size:1.2rem}
.suggest-out{min-height:3rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem .9rem;font-family:var(--font-display);font-size:1.25rem;color:var(--navy-800)}
.suggest-out mark{background:#fbe9bd;color:inherit;border-radius:3px;padding:0 .1em}
.gentle{background:#f2f7f3;border:1px solid #cfe2d5;border-radius:var(--radius);padding:1.2rem 1.3rem}
.gentle h3{color:var(--sage-600)}

/* About */
.about-body h2{font-size:var(--step-2);margin-top:2rem}
.about-body blockquote{margin:1.25rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;color:var(--navy-800);box-shadow:var(--shadow)}
.about-body blockquote p{margin:0}
.signature{font-family:var(--font-display);font-size:var(--step-2);color:var(--navy-800)}

/* Footer */
.site-footer{background:var(--navy-900);color:var(--ivory-200);padding:3rem 0 2rem;font-size:var(--step--1)}
.site-footer a{color:var(--gold-300)}
.site-footer .disclaimer{font-weight:600;color:var(--ivory-50);font-size:1rem}
.footer-grid{display:grid;gap:1.75rem}
@media (min-width:48rem){.footer-grid{grid-template-columns:1fr 1fr}}
@media (min-width:68rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.6rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.footer-bottom{border-top:1px solid rgba(236,208,154,.18);margin-top:2rem;padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

@media print{.site-header,.site-footer,.panel-sticky,.no-print{display:none!important}.result-block{box-shadow:none;break-inside:avoid}body{background:#fff}}

/* Added in build pass 2 */
.h3{font-size:var(--step-1)}
.small{font-size:var(--step--1)}
.submark{display:block;height:60px;width:auto;margin-bottom:1rem}
.demo-wrap{margin-top:1rem!important}
.form .field{margin-bottom:1.1rem}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--link);text-decoration:underline;cursor:pointer}
.result-head{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between}
.result-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.result-actions .btn{padding:.5rem 1rem;font-size:.92rem}
.summary-line{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.opening-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.opening-list li{background:var(--bg);border-left:4px solid var(--gold-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.75rem .9rem}
.opening-list .kind{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.15rem}
.age-note{background:var(--bg-alt);border-radius:var(--radius-sm);padding:.8rem 1rem;margin:0 0 .25rem}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.85rem;color:var(--text-muted);margin:.25rem 0 1rem}
.prayer-prompts{padding-left:1.2rem;margin:.25rem 0 0}
.prayer-prompts li{margin-bottom:.35rem}
.addcut{display:grid;gap:1rem}
@media (min-width:48rem){.addcut{grid-template-columns:1fr 1fr}}
.addcut ul{padding-left:1.15rem;margin:.3rem 0 0}
.fulltext .credit{font-size:var(--step--1);color:var(--text-muted)}
.fulltext blockquote{margin:.5rem 0 1rem;padding-left:1rem;border-left:3px solid var(--gold-300);font-style:italic}

.footer-note{color:var(--silver-400);font-size:.85rem}
.resource-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
@media (min-width:44rem){.resource-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.resource-list{grid-template-columns:repeat(4,1fr)}}
.resource-list a{font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.resource-list p{margin:.25rem 0 0;color:var(--text-muted);font-size:var(--step--1)}
.ext::after{content:" \2197";font-family:var(--font-body);font-size:.8em}
mark.fill{background:#fbefd2;color:#6b4a0c;border-radius:3px;padding:0 .15em}
/* Keep the sunrise art clear of the hero text on wide screens */
@media (min-width:60rem){
  .hero{overflow:hidden}
  .hero-art{right:-40%;height:58%}
  .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(27,42,65,.85) 0%,rgba(27,42,65,.55) 32%,rgba(27,42,65,0) 52%)}
}

/* Independence disclaimer shown under results and on About/Donate */
.disclaimer-box{margin:1.25rem 0 0;padding:.85rem 1rem;border:1px solid var(--ivory-200);border-left:4px solid var(--silver-400);border-radius:10px;background:var(--surface);color:var(--ink-600);font-size:var(--step--1, .9rem);line-height:1.55}

/* AI sources, outside-source warnings, report link */
.ai-sources{margin:1.25rem 0 0;padding:1rem 1.15rem;border:1px solid #e3dccb;border-radius:12px;background:#fffdf8}
.ai-sources h4{margin:0 0 .5rem;font-family:var(--font-body);font-size:1rem}
.ai-sources ul{margin:0;padding-left:1.1rem}
.ai-sources li{margin:.35rem 0}
.src-warning,.outside-flag{color:#8a4b12;background:#fbecd7;border-radius:6px;padding:.05rem .4rem;font-size:.9em;font-weight:600}
.report-line{margin:.75rem 0 0;font-size:.92rem}
.report-line a{color:var(--navy-700, #1B2A41);font-weight:600}
.src-label{font-size:.82em;font-weight:600;color:var(--navy-700,#1B2A41);background:#e8edf3;border-radius:6px;padding:.05rem .4rem}
.history-check{margin:1.25rem 0 0;padding:1rem 1.15rem;border:1px solid #d5dbe3;border-left:4px solid var(--navy-700,#1B2A41);border-radius:12px;background:#f8fafc}
.history-check h4{margin:0 0 .5rem;font-family:var(--font-body);font-size:1rem}
.history-check ul{margin:0;padding-left:1.1rem}.history-check li{margin:.45rem 0}
.hc-label{font-weight:700}.hc-verify .hc-label{color:#8a4b12}.hc-ok .hc-label{color:#2f6b3a}
.hc-info{cursor:help;color:var(--slate,#5B6475);font-weight:400}
/* Donate */
.donate-wrap{display:grid;gap:2rem;align-items:start}
@media (min-width:56rem){.donate-wrap{grid-template-columns:1.05fr 1fr}}
.donate-card{background:var(--surface,#fff);border:1px solid #e3dccb;border-radius:16px;padding:1.5rem;box-shadow:0 6px 24px rgba(27,42,65,.06)}
.donate-card h2{margin-top:0}
.donate-warm{font-family:var(--font-display,'Cormorant Garamond',serif);font-size:1.35rem;color:var(--ember,#B9782F);margin:.25rem 0 1rem}
.amounts{border:0;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.amount{position:relative}
.amount input{position:absolute;opacity:0;inset:0}
.amount span{display:inline-flex;align-items:center;justify-content:center;min-width:4.5rem;min-height:48px;padding:.5rem 1rem;border:2px solid var(--navy-700,#1B2A41);border-radius:999px;font-weight:700;font-size:1.1rem;color:var(--navy-800,#1B2A41);background:#fff;cursor:pointer}
.amount input:checked + span{background:var(--navy-800,#1B2A41);color:var(--ivory-50,#F7F1E5)}
.amount input:focus-visible + span{outline:3px solid var(--gold-400,#D9A441);outline-offset:2px}
.custom-row{margin:0 0 1rem}.custom-row input{width:7rem;padding:.55rem;border:1px solid #c9c2b2;border-radius:8px;font:inherit}
.dollar{font-weight:700;margin-left:.4rem}
#donate-btn[disabled]{opacity:.65;cursor:not-allowed}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Silhouette art banners ---------- */
/* The image sets its own height from its width (never height:100%), so it can never be squeezed;
   object-fit is a second guard if a browser ever sizes the box differently. */
.art-banner{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ivory-100,#f3ead7);
  box-shadow:0 1px 2px rgba(15,27,51,.08),0 12px 32px rgba(15,27,51,.14);isolation:isolate;min-width:0;width:100%;max-width:100%}
.art-banner picture{display:block;width:100%}
.art-banner img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:1600/700;object-fit:cover;object-position:50% 100%}
/* soft sun-glow layered over the painted sun */
.art-banner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at var(--sun-x,50%) var(--sun-y,85%),rgba(255,236,190,.55) 0,rgba(236,208,154,.22) 14%,rgba(236,208,154,0) 34%);
  mix-blend-mode:soft-light;opacity:.55;
  -webkit-mask:linear-gradient(180deg,#000 calc(var(--sun-y,85%) - 2%),transparent calc(var(--sun-y,85%) - .5%));
  mask:linear-gradient(180deg,#000 calc(var(--sun-y,85%) - 2%),transparent calc(var(--sun-y,85%) - .5%))}
.page-hero.has-art .wrap{display:grid;gap:1.5rem;align-items:center}
.page-hero.has-art .hero-banner{border:1px solid rgba(236,208,154,.35);box-shadow:0 18px 40px rgba(6,12,24,.35)}
@media (min-width:60rem){
  .page-hero.has-art .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
}
.banner-wide{margin:0 0 2rem}

/* ---------- Thin-line icon set (Dawn Gold, 1.75px) ---------- */
.icon{flex:none}
.card .icon{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--navy-900);color:var(--gold-500);
  margin-bottom:.9rem;box-shadow:inset 0 0 0 1px rgba(236,208,154,.25)}
.step-card .icon{background:var(--navy-900)}
.pledge .icon{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--navy-900);color:var(--gold-500);margin-bottom:.6rem}
.resource-list li.card .res-icon{width:40px;height:40px;padding:9px;margin:0 0 .6rem;display:block}
h2.with-icon{display:flex;align-items:center;gap:.6rem}
h2.with-icon .icon{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--navy-900);color:var(--gold-500)}

/* ---------- Gentle motion (all off under prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* home hero: the sun rises and the rays come to light */
  .hero-bg img{animation:dawn-rise 7s cubic-bezier(.22,.7,.2,1) both}
  .hero-glow{animation:glow-in 3.5s ease-out .6s both,glow-breathe 8s ease-in-out 4.1s infinite alternate}
  @keyframes dawn-rise{from{transform:translateY(2.5%) scale(1.06);filter:brightness(.82)}to{transform:none;filter:none}}
  @keyframes glow-in{from{opacity:0}to{opacity:1}}
  @keyframes glow-breathe{from{opacity:1}to{opacity:.6}}

  /* sections ease up into view (class added by site.js only, so no-JS shows everything) */
  .motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.7,.2,1);transition-delay:var(--rd,0s)}
  .motion .reveal.is-in{opacity:1;transform:none}

  /* cards and buttons lift a little */
  .btn{transition:transform .25s ease,box-shadow .25s ease,background-color .2s ease,color .2s ease}
  .feature-card,.step-card,.resource-list li.card,.values .card{transition:transform .3s ease,box-shadow .3s ease}
  @media (hover:hover){
    .btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,27,51,.14)}
    .feature-card:hover,.step-card:hover,.resource-list li.card:hover{transform:translateY(-4px);
      box-shadow:0 2px 4px rgba(15,27,51,.06),0 16px 32px rgba(15,27,51,.12)}
  }

  /* home hero: the sun's rays turn slowly (one turn every 100s; transform only, so it stays on the GPU) */
  .hero-rays::before{will-change:transform;animation:rays-in 4s ease-out 1.2s both,rays-turn 100s linear infinite}
  @keyframes rays-in{from{opacity:0}to{opacity:1}}
  @keyframes rays-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

  /* icons: a soft gold shimmer on hover, focus or tap */
  .icon{transition:filter .4s ease}
  .icon.shimmer{animation:icon-shimmer 1.4s ease-out}
  @media (hover:hover){
    :is(.card,.feature-card,.step-card,.pledge,h2.with-icon,a,button):hover .icon{animation:icon-shimmer 1.4s ease-out}
  }
  :is(a,button):focus-visible .icon{animation:icon-shimmer 1.4s ease-out}
  @keyframes icon-shimmer{
    0%{filter:none}
    35%{filter:brightness(1.25) drop-shadow(0 0 5px rgba(255,214,140,.75))}
    100%{filter:none}}

  /* banners: a slow sun-glow */
  .art-banner::after{animation:sun-glow 8s ease-in-out infinite alternate}
  @keyframes sun-glow{from{opacity:.35}to{opacity:.8}}
}

/* ---------- Home hero: photographic sunrise ---------- */
.hero-photo{background:var(--navy-900)}
.hero-photo::after{display:none}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg picture,.hero-bg img{display:block;width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:50% 45%}
/* warm light breathing where the sun sits */
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 57% 55%,rgba(255,214,140,.32) 0,rgba(217,164,65,.14) 18%,rgba(217,164,65,0) 40%);mix-blend-mode:screen}
/* soft golden rays radiating from the sun. Static here (reduced motion); they turn slowly in the motion block above.
   Masked to a soft circle around the sun so they fade out before the words, and under the navy veil on the text side. */
.hero-rays{position:absolute;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;--sx:57%;--sy:58%;--rr:30vmax;
  --ray-mask:radial-gradient(circle at var(--sx) var(--sy),#000 0,rgba(0,0,0,.55) calc(var(--rr) * .38),rgba(0,0,0,0) var(--rr)),
    linear-gradient(180deg,#000 calc(var(--sy) - 3%),rgba(0,0,0,.3) calc(var(--sy) + 6%),rgba(0,0,0,0) calc(var(--sy) + 16%));
  /* light fades out around the sun and below the ridgeline, so it never lies over the hills, the figure or the buttons */
  -webkit-mask-image:var(--ray-mask);-webkit-mask-composite:source-in;mask-image:var(--ray-mask);mask-composite:intersect}
.hero-rays::before{content:"";position:absolute;left:var(--sx);top:var(--sy);width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;transform:rotate(6deg);
  background:
    repeating-conic-gradient(from 0deg,rgba(255,224,170,0) 0deg,rgba(255,224,170,.15) 4deg,rgba(255,224,170,0) 8deg,rgba(255,224,170,0) 18deg),
    repeating-conic-gradient(from 9deg,rgba(255,212,140,0) 0deg,rgba(255,212,140,.08) 2.5deg,rgba(255,212,140,0) 5deg,rgba(255,212,140,0) 13deg)}
@media (max-width:47.99rem){.hero-rays{--rr:30vmax;--sx:72%;--sy:57%}
  .hero-glow{background:radial-gradient(circle at 72% 56%,rgba(255,214,140,.32) 0,rgba(217,164,65,.14) 18%,rgba(217,164,65,0) 40%)}}
@media (min-width:48rem){.hero-rays{--sx:83%;--sy:56%;--rr:34vmax}}
/* keep the headline legible: navy veil on the text side */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,28,45,.78) 0%,rgba(18,28,45,.45) 42%,rgba(18,28,45,.15) 62%,rgba(18,28,45,.65) 100%)}
.hero-photo .wrap{min-height:clamp(34rem,92svh,44rem);display:flex;flex-direction:column;justify-content:flex-start}
@media (min-width:48rem){
  .hero-bg img{object-position:70% 50%}
  .hero-glow{background:radial-gradient(circle at 83% 55%,rgba(255,214,140,.35) 0,rgba(217,164,65,.14) 14%,rgba(217,164,65,0) 34%)}
  .hero-bg::after{background:linear-gradient(90deg,rgba(18,28,45,.88) 0%,rgba(18,28,45,.62) 34%,rgba(18,28,45,.12) 62%,rgba(18,28,45,0) 100%),
    linear-gradient(0deg,rgba(18,28,45,.45) 0%,rgba(18,28,45,0) 30%)}
  .hero-photo .wrap{min-height:clamp(32rem,78vh,42rem);justify-content:center}
}
.hero-photo h1,.hero-photo .lede{text-shadow:0 1px 18px rgba(10,16,28,.55)}

/* ---------- Stepped forms (Refiner and friends) ---------- */
.stepped{display:grid;gap:1rem}
.stepped .field{margin-bottom:1rem}
.stepped .field:last-child{margin-bottom:0}
.progress{list-style:none;margin:0 0 .25rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;counter-reset:none}
.progress li{position:relative;display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--text-muted);
  padding-top:.55rem;border-top:3px solid #e4dac4;transition:color .3s ease,border-color .3s ease}
.progress li span{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;font-size:.75rem;
  background:#efe6d2;color:var(--navy-800);flex:none}
.progress li.is-active{color:var(--navy-800);border-top-color:var(--gold-500)}
.progress li.is-done{color:var(--navy-800);border-top-color:var(--navy-700)}
.progress li.is-done span{background:var(--navy-800);color:var(--gold-300)}
.form-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem 1.15rem 1.25rem;
  box-shadow:var(--shadow);transition:border-color .25s ease,box-shadow .25s ease}
.form-step:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(217,164,65,.18),var(--shadow)}
.step-title{display:flex;align-items:center;gap:.6rem;font-size:var(--step-1);margin:0 0 .9rem}
.step-num{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--navy-900);color:var(--gold-500);
  font-family:var(--font-body);font-size:.9rem;font-weight:700;flex:none}
.form-submit .btn{width:100%;justify-content:center}
.form-submit p{margin:.6rem 0 0;text-align:center}
.results-title{font-size:var(--step-2);margin:0 0 .75rem}
.tool-layout .demo-note{margin-bottom:1rem}
@media (max-width:61.99rem){
  .tool-layout{gap:2.5rem}
  .tool-layout > div:last-child{border-top:1px solid var(--border);padding-top:2rem}
}
.progress-2{grid-template-columns:repeat(2,1fr)}
.results-title{scroll-margin-top:5.5rem}

/* ---------- Speaker portraits beside talk suggestions ---------- */
.talk-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
  background:var(--navy-800);color:var(--gold-300);border:2px solid #ecd09a;box-shadow:0 2px 8px rgba(15,27,51,.15);text-decoration:none}
.avatar-sm{width:48px;height:48px}
.avatar-ini{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.02em;line-height:1}
.avatar img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 18%;display:block}
a.avatar:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.photo-credit{font-size:.75rem;color:var(--text-muted);margin:.9rem 0 0}
.prep-talk{display:flex;gap:.8rem;align-items:center;margin-top:.8rem;padding:.75rem .9rem;background:#fbf6ea;border:1px solid #efe3c5;border-radius:var(--radius-sm)}
@media (max-width:30rem){.avatar{width:52px;height:52px}.talk-item{gap:.75rem}}
/* phones: lower the photo a little so the sun rises in the gap between the words and the buttons */
@media (max-width:47.99rem){.hero-bg{top:3.25rem;bottom:-3.25rem}}
@media (max-width:47.99rem){
  .hero-photo{background:#141e31}
  .hero-bg picture{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3rem);mask-image:linear-gradient(180deg,transparent 0,#000 3rem)}
}

/* ---------- Scripture scenes (one per section) ---------- */
.scene-section .eyebrow{margin-bottom:.75rem}
.scene{display:grid;gap:1.25rem;align-items:center}
@media (min-width:56rem){.scene{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem}}
.scene-about{margin:2.5rem 0 2rem}
.scene.scene-stack{grid-template-columns:minmax(0,1fr);gap:1rem}
.scene-stack .scene-cap .scripture p{font-size:var(--step-0)}
.scene-cap .scripture p{font-size:var(--step-1)}
.scene-why{margin:.9rem 0 0;color:var(--text-muted);font-size:var(--step--1);line-height:1.55}
.fx{position:absolute;inset:0;pointer-events:none;z-index:1;display:block}
/* static by default: under reduced motion the light is simply there, and nothing moves */
.fx-rays{mix-blend-mode:screen;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.5) 14%,transparent 46%);
  mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.5) 14%,transparent 46%)}
.fx-rays::before{content:"";position:absolute;left:var(--sun-x);top:var(--sun-y);width:260%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,222,165,0) 0deg,rgba(255,222,165,.16) 3.5deg,rgba(255,222,165,0) 7deg,rgba(255,222,165,0) 15deg)}
.scene-grove .art-banner::after{display:none}
/* the Savior scene: light stays in the sky, never painted over the silhouette */
.scene-savior .fx-rays{
  -webkit-mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.6) 18%,transparent 50%),url(../img/art/silhouette-savior-sky-mask.png);
  -webkit-mask-size:100% 100%;-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.6) 18%,transparent 50%),url(../img/art/silhouette-savior-sky-mask.png);
  mask-size:100% 100%;mask-composite:intersect}
.fx-pillar{left:calc(var(--sun-x) - 7%);right:auto;width:14%;bottom:14%;mix-blend-mode:screen;opacity:.7;
  background:linear-gradient(180deg,rgba(255,244,214,.7),rgba(255,236,190,.35) 55%,rgba(255,236,190,0));filter:blur(8px)}
.fx-dusk{background:linear-gradient(180deg,rgba(15,27,51,.38),rgba(15,27,51,0) 48%)}
.fx-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff6dc;box-shadow:0 0 6px rgba(255,236,190,.9);opacity:.75}
.fx-stars i:nth-child(1){left:12%;top:10%}.fx-stars i:nth-child(2){left:27%;top:22%}.fx-stars i:nth-child(3){left:44%;top:8%}
.fx-stars i:nth-child(4){left:63%;top:17%}.fx-stars i:nth-child(5){left:78%;top:7%}.fx-stars i:nth-child(6){left:90%;top:25%}
.fx-water,.fx-coins{display:none}
@media (prefers-reduced-motion:no-preference){
  .fx{will-change:transform}
  .fx-rays::before{animation:scene-rays 70s linear infinite}
  @keyframes scene-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .fx-pillar{animation:pillar-breathe 7s ease-in-out infinite alternate}
  @keyframes pillar-breathe{from{opacity:.45;transform:scaleX(.92)}to{opacity:.95;transform:none}}
  .fx-dusk{animation:dusk-in 9s ease-in-out infinite alternate}
  @keyframes dusk-in{from{opacity:.55}to{opacity:1}}
  .fx-stars i{animation:twinkle 3.6s ease-in-out infinite alternate}
  .fx-stars i:nth-child(2){animation-delay:-1.1s}.fx-stars i:nth-child(3){animation-delay:-2.3s}.fx-stars i:nth-child(4){animation-delay:-.6s}
  .fx-stars i:nth-child(5){animation-delay:-2.9s}.fx-stars i:nth-child(6){animation-delay:-1.7s}
  @keyframes twinkle{from{opacity:.15;transform:scale(.6)}to{opacity:.9;transform:scale(1)}}
  .fx-water{display:block;top:69%;bottom:14.6%;overflow:hidden;mix-blend-mode:screen;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(var(--sun-x) - 18%),#000 calc(var(--sun-x) + 18%),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 calc(var(--sun-x) - 18%),#000 calc(var(--sun-x) + 18%),transparent)}
  .fx-water::before{content:"";position:absolute;inset:0 -20%;
    background:radial-gradient(ellipse 14px 1.4px at 50% 50%,rgba(255,240,205,.8),rgba(255,240,205,0)) 0 0/52px 9px,radial-gradient(ellipse 9px 1.2px at 50% 50%,rgba(255,240,205,.6),rgba(255,240,205,0)) 26px 4px/52px 9px;
    animation:water-glint 9s ease-in-out infinite alternate}
  /* waters: glints only on the open water between Alma and the listeners, never across a figure */
  .scene-waters .fx-water{left:33.5%;right:50.5%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
  @keyframes water-glint{from{transform:translateX(-4%);opacity:.5}to{transform:translateX(4%);opacity:1}}
  .fx-coins{display:block}
  .fx-coins i{position:absolute;left:36%;top:31%;width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;
    background:radial-gradient(circle,#fff8e2 0,rgba(255,236,190,.8) 18%,rgba(255,236,190,0) 60%),
      linear-gradient(90deg,transparent 45%,rgba(255,244,214,.9) 50%,transparent 55%),linear-gradient(0deg,transparent 45%,rgba(255,244,214,.9) 50%,transparent 55%);
    animation:coin-glint 5s ease-in-out infinite}
  .fx-coins i:nth-child(2){left:37.5%;top:33%;animation-delay:2.5s}
  @keyframes coin-glint{0%,70%,100%{opacity:0;transform:scale(.4) rotate(0)}82%{opacity:1;transform:scale(1) rotate(45deg)}}
}

/* ---------- Prayer prompts ---------- */
.pp-note{margin:0 0 1.75rem}
.pp-note .talk-quote{margin-top:1rem}
.pp-grid{display:grid;gap:1.25rem}
@media (min-width:48rem){.pp-grid{grid-template-columns:1fr 1fr}}
.pp-group h3{margin:0 0 .25rem;font-size:var(--step-1)}
.pp-group .small{margin:0 0 .75rem}
.pp-list{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.5rem}
.pp-item{display:flex;gap:.65rem;align-items:flex-start;width:100%;text-align:left;font:inherit;color:var(--text,#1f2a3a);line-height:1.45;
  background:var(--ivory-50);border:1px solid var(--border);border-radius:10px;padding:.65rem .75rem;cursor:pointer;min-height:44px}
.pp-item:hover{border-color:var(--gold-400)}
.pp-item.is-picked{border-color:var(--ember-500);background:#fbf2e0}
.pp-check{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--gold-500);margin-top:.1rem;position:relative}
.pp-item.is-picked .pp-check{background:var(--gold-500)}
.pp-item.is-picked .pp-check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--navy-900);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pp-carry{margin-top:1.5rem}
.pp-carry ol{margin:0 0 .75rem;padding-left:1.3rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.btn-sm{padding:.55rem 1rem;font-size:.95rem}
@media print{
  body.print-pp main > *:not(#prayer-prompts),body.print-pp #prayer-prompts .section-head,body.print-pp .pp-note,body.print-pp .pp-grid,body.print-pp .pp-carry .btn-row{display:none!important}
  body.print-pp .pp-carry{box-shadow:none;border:1px solid #ccc;max-width:5in}
}

/* ---------- Refiner: section times and "Short on time?" ---------- */
.timebar{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem;margin:0 0 1rem}
.timebar-total{font-family:var(--font-display);font-size:var(--step-2);color:var(--navy-800);font-weight:600}
.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:var(--step--1);max-width:28rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{flex:none;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--silver-400);position:relative;transition:background .2s}
.switch-ui::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+.switch-ui{background:var(--navy-700)}
.switch input:checked+.switch-ui::after{transform:translateX(1.1rem)}
.switch input:focus-visible+.switch-ui{outline:3px solid var(--focus);outline-offset:2px}
.cut-note{font-size:var(--step--1);background:#fdf3e3;border-left:3px solid var(--gold-500);padding:.45rem .7rem;margin:.5rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.run-total{margin:.35rem 0 0}
.outline>li.optional{border-style:dashed}
.sec-mark{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:1.5rem 0 .5rem;padding-top:.75rem;border-top:1px solid var(--border);font-weight:600;color:var(--navy-800)}
.sec-mark:first-child{margin-top:0;border-top:0;padding-top:0}
@media (prefers-reduced-motion:reduce){.switch-ui,.switch-ui::after{transition:none}}

/* ---------- Talk Timer: Start my talk ---------- */
.check{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--step--1);margin:.25rem 0 1rem}
.check input{margin-top:.2rem;width:1.1rem;height:1.1rem;accent-color:var(--navy-700)}
.d-plan{margin:0 0 1rem;padding-left:1.2rem}
.d-plan li{margin:.2rem 0}
.d-rec{border-top:1px solid var(--border);padding-top:1rem;margin-top:.5rem}
.d-privacy{background:#fdf3e3;border-left:3px solid var(--gold-500);padding:.5rem .7rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.deliver-setup .card+.card{margin-top:1rem}
.d-table{width:100%;border-collapse:collapse;font-size:var(--step--1);margin:.5rem 0 1rem}
.d-table th,.d-table td{text-align:left;padding:.35rem .4rem;border-bottom:1px solid var(--border)}
.d-table td:nth-child(n+2),.d-table th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.d-history{list-style:none;padding:0;margin:.5rem 0 1rem}
.d-history li{display:flex;flex-wrap:wrap;gap:.25rem 1rem;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:var(--step--1)}
body.stage-open{overflow:hidden}
.stage{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;padding:max(1rem,env(safe-area-inset-top)) 1.25rem max(1.25rem,env(safe-area-inset-bottom));
  background:var(--navy-900);color:var(--ivory-50);transition:background-color .8s ease;--sec:#e9c27a;overflow:hidden}
.stage>*{position:relative;z-index:1}
/* soft wash of the current section's color (last 5 seconds of a part) */
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--sec);opacity:0;transition:opacity .6s ease}
.stage.sec-ending::before{opacity:.2}
.stage[hidden]{display:none}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--step-0);color:var(--ivory-200);min-height:1.6em}
.stage-count{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.stage-rec{color:#ffb4a6;font-size:var(--step--1)}
.stage-now{text-align:center;max-width:40rem;margin:0 auto;width:100%}
.stage-sec{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,8vw,3.2rem);line-height:1.12;color:var(--sec);overflow-wrap:anywhere}
.stage-seccue{margin:.35rem 0 0;font-size:clamp(1.05rem,4.6vw,1.45rem);line-height:1.35;color:var(--ivory-100)}
.stage-seccue:empty{display:none}
.stage-clock:focus{outline:none}.stage-clock:focus-visible{outline:2px solid rgba(236,208,154,.45);outline-offset:-6px;border-radius:var(--radius)}
.stage-clock{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage-left{font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;line-height:1;font-size:clamp(4.25rem,min(30vw,21vh),15rem);letter-spacing:-.02em;color:var(--gold-300)}
.stage-sub{margin-top:.5rem;font-size:clamp(1rem,4.5vw,1.4rem);color:var(--ivory-200);font-variant-numeric:tabular-nums}
.stage-paused{margin-top:.8rem;font-size:var(--step-1);color:var(--ivory-50);background:rgba(255,255,255,.12);padding:.35rem .9rem;border-radius:999px}
.stage.is-paused .stage-left{opacity:.55}
.stage-next{margin:0 auto;text-align:center;font-size:clamp(1.25rem,5.6vw,2rem);line-height:1.25;color:var(--ivory-50);max-width:40rem}
.stage-next:empty{display:none}
.stage-next .nx-in{color:var(--ivory-200);font-variant-numeric:tabular-nums;white-space:nowrap}
.nx-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-right:.45em;vertical-align:.05em}
/* the bar: every part in proportion to its planned time; marker = where you should be now */
.stage-bar{position:relative;width:100%;max-width:44rem;margin:.2rem auto 0;height:22px}
.stage.one-part .stage-bar{height:12px}
.stage-segs{display:flex;gap:4px;height:100%}
.stage-seg{position:relative;flex:1 1 0;min-width:6px;border-radius:6px;overflow:hidden}
.stage-seg::before{content:"";position:absolute;inset:0;background:var(--seg);opacity:.22}
.stage-seg i{position:absolute;inset:0;background:var(--seg);transform-origin:left center;transform:scaleX(0)}
.stage-seg.done i{opacity:.6}
.stage-seg.now{box-shadow:0 0 0 2px var(--seg),0 0 14px color-mix(in srgb,var(--seg) 55%,transparent)}
.stage-mark{position:absolute;top:-7px;bottom:-7px;width:4px;margin-left:-2px;border-radius:2px;background:#fffaf0;box-shadow:0 0 0 1px rgba(15,27,51,.5),0 0 8px rgba(255,250,240,.6)}
.stage-goal{position:absolute;top:-9px;bottom:-9px;border-left:2px dashed #ffb19e}
.stage-cue{text-align:center;max-width:36rem;margin:0 auto;min-height:1.5em}
.stage-secleft{margin:0;font-size:var(--step-0);color:var(--ivory-200);font-variant-numeric:tabular-nums}
.stage-secleft:empty{display:none}
.stage-prompt{margin:.2rem 0 0;font-family:var(--font-display);font-size:clamp(1.2rem,5vw,1.8rem);line-height:1.25;color:var(--ivory-50)}
/* big, well-spaced buttons: two rows on phones */
.stage-ctrls{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.stage-ctrls .btn{justify-content:center;min-height:3.5rem;font-size:var(--step-0)}
.stage-ctrls .btn[hidden]{display:none}
.stage.one-part #st-add{grid-column:auto}
.stage-ctrls .st-end{border-color:rgba(255,177,158,.55);color:#ffd2c6}
@media (min-width:44rem){.stage-ctrls{grid-template-columns:repeat(4,1fr);max-width:46rem;margin:0 auto;width:100%}}
.stage[data-state="amber"]{background:#4a3410}
.stage[data-state="amber"] .stage-left{color:#ffc75a}
.stage[data-state="red"],.stage[data-state="over"]{background:#5a1a12}
.stage[data-state="red"] .stage-left,.stage[data-state="over"] .stage-left{color:#ffb19e}
.stage[data-state="red"] .stage-top,.stage[data-state="over"] .stage-top{color:#ffd2c6}
@media (prefers-reduced-motion:no-preference){
  .stage[data-state="red"]:not(.is-paused) .stage-left,.stage[data-state="over"]:not(.is-paused) .stage-left{animation:ember-pulse 1.6s ease-in-out infinite}
  @keyframes ember-pulse{0%,100%{opacity:1}50%{opacity:.62}}
  /* a calm breathing wash, about one breath a second, never a hard flash */
  .stage.sec-ending:not(.is-paused)::before{animation:sec-breathe 1.25s ease-in-out infinite alternate}
  @keyframes sec-breathe{from{opacity:.06}to{opacity:.3}}
  .stage.sec-new .stage-now{animation:now-in .9s cubic-bezier(.22,.7,.2,1)}
  .stage.sec-new::before{animation:now-wash 2.4s ease-out}
  @keyframes now-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes now-wash{0%{opacity:.26}100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){.stage,.stage::before{transition:none}}

/* ---------- My Talks ---------- */
.mt-tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:1rem}
.mt-tools .field{margin:0;flex:1 1 12rem}
.mt-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.mt-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.mt-item h3{margin:.1rem 0 .25rem;font-size:var(--step-1)}
.mt-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-size:var(--step--1);color:var(--text-muted)}
.mt-actions{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem;font-size:var(--step--1)}
.mt-empty{text-align:center;padding:2rem 1rem;border:1px dashed var(--border);border-radius:var(--radius)}
.mt-note{font-size:var(--step--1);background:var(--bg-alt);border-left:3px solid var(--gold-500);padding:.6rem .8rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.mt-form textarea{min-height:8rem}
.mt-form .row2{display:grid;gap:0 1rem}
@media (min-width:40rem){.mt-form .row2{grid-template-columns:1fr 1fr}}
.mt-count{font-size:var(--step--1);color:var(--text-muted);margin:.25rem 0 .75rem}
#mt-book{display:none}

/* ---------- Print: My Talks book and single talk ---------- */
@media print{
  body.print-book>*:not(#mt-book){display:none!important}
  body.print-book #mt-book{display:block!important}
  #mt-book{font-family:var(--font-body);color:#111;font-size:11.5pt;line-height:1.5}
  .bk-title{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;break-after:page;page-break-after:always}
  .bk-title h1{font-family:var(--font-display);font-size:44pt;color:#152448;margin:.4in 0 .1in;font-weight:600}
  .bk-title .bk-name{font-family:var(--font-display);font-size:18pt;color:#5a4a20}
  .bk-title .bk-sub{font-size:10pt;color:#555;margin-top:.3in}
  .bk-sun{width:1in;height:auto}
  .bk-sun.small{width:.35in;vertical-align:middle;margin-right:.08in}
  .bk-toc{break-after:page;page-break-after:always}
  .bk-toc h2,.bk-talk h2{font-family:var(--font-display);color:#152448;font-weight:600}
  .bk-toc h2{font-size:24pt;margin:0 0 .2in}
  .bk-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
  .bk-toc li{display:flex;gap:.12in;align-items:baseline;padding:.07in 0;border-bottom:1px dotted #bbb;counter-increment:toc}
  .bk-toc li::before{content:counter(toc) ".";color:#8a6d2b;min-width:.3in}
  .bk-toc .t{flex:1}
  .bk-toc .d{color:#555;font-size:10pt;white-space:nowrap}
  .bk-talk{break-before:page;page-break-before:always}
  .bk-talk:first-of-type{break-before:auto;page-break-before:auto}
  .bk-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid #c9a24e;padding-bottom:.06in;margin-bottom:.15in;font-size:9.5pt;color:#5a4a20;letter-spacing:.03em;text-transform:uppercase}
  .bk-talk h2{font-size:22pt;margin:0 0 .06in;line-height:1.15}
  .bk-meta{font-size:9.5pt;color:#555;margin:0 0 .18in}
  .bk-talk h3{font-family:var(--font-display);font-size:13pt;color:#152448;margin:.2in 0 .06in;break-after:avoid}
  .bk-text p{margin:0 0 .1in;orphans:3;widows:3}
  .bk-src{font-size:9.5pt;padding-left:.2in}
  .bk-src a{color:#111;text-decoration:none}
  .bk-src a::after{content:" (" attr(href) ")";color:#666;font-size:8pt;word-break:break-all}
  .bk-times{font-size:9.5pt;border-collapse:collapse}
  .bk-times td{padding:.02in .15in .02in 0}
  .bk-notes{font-style:italic;color:#333}
  .bk-foot{font-size:8pt;color:#777;margin-top:.3in}
  body.print-book .site-footer,body.print-book .site-header{display:none!important}
}
@page{size:letter;margin:.75in .8in .85in;@bottom-center{content:counter(page);font-size:9pt;color:#777}}
@page:first{@bottom-center{content:none}}
.stage:focus{outline:none}
.d-start-row{display:grid;gap:.6rem;margin-top:.5rem}
@media (min-width:30rem){.d-start-row{grid-template-columns:1fr 1fr}}
.d-start-row .btn{width:100%}
.d-start-row + .d-rec{border-top:0;padding-top:0;margin-top:0}
.stage-note{margin:.5rem auto 0;max-width:32rem;text-align:center;font-size:var(--step--1);background:rgba(255,255,255,.1);color:#fff6e6;border-radius:var(--radius-sm);padding:.5rem .8rem}
#deliver,#d-results{scroll-margin-top:5.5rem}

/* Church lesson resources (Questions page) */
.lr-grid{display:grid;gap:1rem;margin-top:1.25rem}
@media (min-width:44rem){.lr-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.lr-grid{grid-template-columns:repeat(3,1fr)}}
.lr-group h3{display:flex;align-items:center;gap:.6rem;margin:0 0 .25rem;font-size:var(--step-1)}
.card .lr-icon,.lr-icon{width:40px;height:40px;padding:9px;margin:0;border-radius:50%;background:var(--navy-900);color:var(--gold-500);flex:none}
.lr-blurb{margin:0 0 .6rem;color:var(--text-muted);font-size:var(--step--1)}
.lr-group ul{list-style:none;margin:0;padding:0}
.lr-group li{padding:.55rem 0;border-top:1px solid var(--border)}
.lr-group li a{font-weight:600;overflow-wrap:anywhere}
.lr-group li span{display:block;font-size:var(--step--1);color:var(--text-muted);margin-top:.1rem}
.lr-week{display:flex;gap:.9rem;align-items:flex-start;margin-top:1rem}
.lr-week .icon{width:44px;height:44px;padding:10px;margin:0;border-radius:50%;background:var(--navy-900);color:var(--gold-500);flex:none}
.lr-week-link{font-family:var(--font-display);font-size:var(--step-1);font-weight:600}
#lesson-resources{scroll-margin-top:5.5rem}
.cfm-link ul{list-style:none;margin:.2rem 0 0;padding:0}
.cfm-link li{margin:.35rem 0}
.cfm-link h3{display:flex;align-items:center;gap:.5rem}
.cfm-link h3 .icon{width:32px;height:32px;padding:7px;margin:0;border-radius:50%;background:var(--navy-900);color:var(--gold-500)}
.res-more{display:flex;gap:.75rem;align-items:center;margin:1.25rem 0 0}
.res-more .icon{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--navy-900);color:var(--gold-500);flex:none}
.footer-contact a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact-line{margin-top:1.25rem}

/* ---------- Home: prophets and apostles on the gathering ---------- */
.gq{max-width:62rem;margin-top:2.6rem;text-align:left}
.gq-head{text-align:center;font-size:var(--step-2,1.6rem);margin:0 0 1.3rem;color:var(--navy-800)}
.gq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.gq-card{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;background:var(--surface,#fff);border:1px solid #efe3c5;border-top:3px solid var(--gold-500,#c9962e);border-radius:var(--radius,12px);padding:1.05rem 1.1rem;box-shadow:var(--shadow)}
.gq-card blockquote{margin:0}
.gq-card blockquote p{margin:0 0 .6rem;font-family:var(--font-display);font-size:1.05rem;line-height:1.5;color:var(--navy-800)}
.gq-card figcaption{font-size:.85rem;line-height:1.45;color:var(--text-muted)}
.gq-card figcaption strong{color:var(--navy-800);font-weight:600}
.gq-more{text-align:center;margin:1.4rem 0 0;font-weight:600}
.gq .photo-credit{text-align:center}
@media (max-width:46rem){.gq-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Home: prophets teaching through the ages (wide panorama; never squished) ---------- */
.pano{margin:2.4rem auto 0;max-width:75rem;padding:0 var(--gutter,1rem)}
.pano-scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--radius,12px);box-shadow:var(--shadow);scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pano-scroll:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px}
.pano-art{position:relative;width:100%;aspect-ratio:10/3}
.pano-art img{display:block;width:100%;height:100%;object-fit:cover}
.pano figcaption{position:relative;height:1.2rem;margin:.55rem 0 0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:center}
.pano figcaption span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pano figcaption span:nth-child(1){left:8%}.pano figcaption span:nth-child(2){left:27%}.pano figcaption span:nth-child(3){left:46%}.pano figcaption span:nth-child(4){left:67%}.pano figcaption span:nth-child(5){left:88%}
.pano-hint{display:none;margin:.4rem 0 0;font-size:.8rem;color:var(--text-muted);text-align:center}
.pano-rays,.pano-drift{-webkit-mask-image:url(../img/art/prophets-ages-sky-mask.png);mask-image:url(../img/art/prophets-ages-sky-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden;mix-blend-mode:screen}
.pano-rays::before{content:"";position:absolute;left:var(--sun-x);top:var(--sun-y);width:120%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,222,165,0) 0deg,rgba(255,222,165,.2) 3deg,rgba(255,222,165,0) 6deg,rgba(255,222,165,0) 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 52%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 52%)}
.pano-drift::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:45%;background:radial-gradient(closest-side,rgba(255,240,205,.38),rgba(255,240,205,0))}
.pano-drift::before{transform:translateX(150%)}
@media (prefers-reduced-motion:no-preference){
  .pano-rays::before{animation:pano-rays 90s linear infinite}
  @keyframes pano-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .pano-drift::before{animation:pano-drift 26s ease-in-out infinite alternate}
  @keyframes pano-drift{from{transform:translateX(-30%)}to{transform:translateX(150%)}}
}
/* phones: keep the true shape and let people pan through the ages instead of shrinking it to a sliver */
@media (max-width:46rem){
  .pano{padding:0}
  .pano-scroll{border-radius:0}
  .pano-art{width:50rem;height:15rem;aspect-ratio:auto}
  .pano figcaption{display:none}
  .pano-hint{display:block}
}

/* ---------- Breeze: clouds drifting in and out, breathing gold light beams, swaying grass/wheat/plants ----------
   Clouds and beams live in .fx-sky, masked by the scene's sky mask (--sky) so they never pass over a figure.
   Everything is transform/opacity only (GPU-composited); offscreen scenes pause (.fx-off); reduced motion = static. */
.fx-sky{overflow:hidden;z-index:1;-webkit-mask-image:var(--sky);mask-image:var(--sky);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fx-sky .bm{position:absolute;inset:-20% -10% 0;opacity:.6;
  background:conic-gradient(from 148deg at calc(var(--sun-x,50%) - 14%) -45%,transparent 0deg,rgba(226,168,72,.22) 2deg,transparent 5deg,transparent 9deg,
    rgba(226,168,72,.16) 11deg,transparent 15deg,transparent 18deg,rgba(232,178,86,.24) 20.5deg,transparent 24deg,transparent 29deg,
    rgba(226,168,72,.15) 31deg,transparent 35deg,transparent 40deg,rgba(232,178,86,.2) 42deg,transparent 46deg,transparent 360deg);
  filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.75) 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.75) 45%,transparent 92%)}
.fx-dusk~.fx-sky .bm,.has-dusk .fx-sky .bm{mix-blend-mode:screen}
.fx-sky .cl{position:absolute;left:0;width:100%;top:3%;height:26%;opacity:.7;transform:translateX(-12%)}
.fx-sky .cl::before{content:"";position:absolute;left:35%;width:30%;height:100%;background:url(../img/art/breeze-cloud-1.png) center/contain no-repeat}
.fx-sky .c2{top:13%;height:20%;opacity:.4;transform:translateX(30%)}
.fx-sky .c2::before{background-image:url(../img/art/breeze-cloud-2.png);width:24%}
.fx-sky .c3{top:0;height:18%;opacity:.35;transform:translateX(-40%)}
.fx-grass{z-index:2;top:auto;height:22%;overflow:visible}
.fx-grass .t{position:absolute;bottom:0;height:100%;aspect-ratio:3/2;transform-origin:50% 100%;background:url(../img/art/breeze-grass.svg) bottom/contain no-repeat}
.fx-grass .ta{left:-2%}
.fx-grass .tb{left:8%;height:115%;background-image:url(../img/art/breeze-wheat.svg)}
.fx-grass .tc{right:7%;height:130%;background-image:url(../img/art/breeze-leaf.svg)}
.fx-grass .td{right:-2%;height:90%}
.pano .fx-grass{height:16%}
.pano .fx-grass .tb{left:16%}.pano .fx-grass .tc{right:auto;left:57%}.pano .fx-grass .td{right:auto;left:36%}
@media (prefers-reduced-motion:no-preference){
  .fx-sky .bm{animation:beam-breathe 11s ease-in-out infinite alternate}
  @keyframes beam-breathe{0%{opacity:.25}55%{opacity:.85}100%{opacity:.45}}
  .fx-sky .cl{animation:cloud-drift 80s linear infinite;animation-delay:-30s}
  .fx-sky .c2{animation-duration:110s;animation-delay:-75s}
  .fx-sky .c3{animation-duration:140s;animation-delay:-20s}
  @keyframes cloud-drift{0%{transform:translateX(-75%);opacity:0}18%{opacity:.75}82%{opacity:.75}100%{transform:translateX(75%);opacity:0}}
  .fx-grass .t{animation:sway 5.5s ease-in-out infinite alternate}
  .fx-grass .tb{animation-duration:4.2s;animation-delay:-1.3s}
  .fx-grass .tc{animation:sway-leaf 6.4s ease-in-out infinite alternate;animation-delay:-2.1s}
  .fx-grass .td{animation-duration:4.8s;animation-delay:-3s}
  @keyframes sway{0%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}100%{transform:skewX(-1deg)}}
  @keyframes sway-leaf{0%{transform:rotate(-2deg)}100%{transform:rotate(2.5deg)}}
  .fx-off .fx-sky .bm,.fx-off .fx-sky .cl,.fx-off .fx-grass .t,.fx-off .fx::before,.fx-off .hero-rays::before{animation-play-state:paused}
}
/* home hero (photo): keep cloud and beams clear of the headline and buttons */
.hero-bg .fx-sky{--sun-x:70%;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 46%,#000 66%);mask-image:linear-gradient(90deg,transparent 0,transparent 46%,#000 66%);-webkit-mask-size:auto;mask-size:auto}
.hero-bg .fx-grass{height:9%}
.hero-bg .fx-grass .tc{right:20%}
@media (max-width:47.99rem){
  .hero-bg .fx-sky{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 3%,transparent 12%);mask-image:linear-gradient(180deg,#000 0,#000 3%,transparent 12%)}
  .hero-bg .fx-sky .bm{display:none}
  .hero-bg .fx-grass{height:7%}
}

/* ---------- Panorama v2: who is who, and a rotating one-at-a-time view on phones ---------- */
.pano figcaption{display:none}
.pano-art{overflow:hidden}
.pano-info li{text-align:left}
.pano-dot{position:absolute;z-index:3;width:1.9rem;height:1.9rem;margin:0 0 0 -.95rem;border-radius:50%;border:2px solid var(--gold-500,#D9A441);
  background:rgba(15,27,51,.82);color:#F7F1E5;font:700 .82rem/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(255,236,190,.35);transition:transform .2s,background .2s}
.pano-dot:hover,.pano-dot:focus-visible,.pano-dot.on{background:var(--gold-500,#D9A441);color:#1B2A41;transform:scale(1.12)}
.pano-dot:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pano-stop{position:absolute;top:0;width:1px;height:1px;scroll-snap-align:center;pointer-events:none}
.pano-dots{position:relative;height:1.6rem;margin:.55rem 0 0}
.pano-dots button{position:absolute;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border:0;border-radius:999px;
  background:none;cursor:pointer;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.pano-dots .pd-n{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--navy-800,#1B2A41);color:#F7F1E5;font-size:.68rem;letter-spacing:0}
.pano-dots button[aria-current=true]{color:var(--text,#1B2A41);font-weight:700}
.pano-dots button[aria-current=true] .pd-n{background:var(--gold-500,#D9A441);color:#1B2A41}
.pano-info{list-style:none;margin:.8rem auto 0;padding:0;max-width:44rem;display:grid;gap:.75rem}
.pano-info li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border-radius:12px;background:var(--ivory-50,#FBF7EE);border:1px solid rgba(217,164,65,.45)}
.pano-info .pn{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--gold-500,#D9A441);color:#1B2A41;font-weight:700}
.pano-info p{margin:0}
.pano-name{font-weight:700;color:var(--text,#1B2A41)}
.pano-era{font-weight:400;color:var(--text-muted)}
.pano-note{margin:.15rem 0 .2rem!important;line-height:1.5}
.pano-refs{font-size:.92rem}
.pano.js .pano-info li{display:none}
.pano.js .pano-info li.on{display:flex;animation:pano-in .5s ease}
@keyframes pano-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pano.js .pano-info li.on{animation:none}}
.pano-hint{display:none!important}
@media (max-width:46rem){
  .pano-scroll{scroll-snap-type:x mandatory;scrollbar-width:none}
  .pano-scroll::-webkit-scrollbar{display:none}
  .pano-art{width:320vw;height:96vw;aspect-ratio:auto}
  .pano-dot{width:2.2rem;height:2.2rem;margin-left:-1.1rem;font-size:.95rem}
  .pano-dots{display:flex;justify-content:center;gap:.6rem;height:auto}
  .pano-dots button{position:static;transform:none;padding:.5rem;min-width:44px;min-height:44px;justify-content:center}
  .pano-dots .pd-name{display:none}
  .pano-dots .pd-n{width:.8rem;height:.8rem;font-size:0;background:rgba(27,42,65,.3)}
  .pano-dots button[aria-current=true] .pd-n{width:1.6rem;border-radius:999px}
  .pano-info{margin-left:1rem;margin-right:1rem}
}
/* /leaders: the panorama is the page's header scene */
.pano-header{margin:1.6rem 0 0;padding:0;max-width:none}
.pano-header .pano-scroll{box-shadow:0 18px 40px rgba(6,12,24,.35);border:1px solid rgba(236,208,154,.35)}
.page-hero .pano-header .pano-dots button{color:var(--ivory-100,#F3EAD7)}
.page-hero .pano-header .pano-dots button[aria-current=true]{color:#fff}
.page-hero .pano-header .pano-info li{color:var(--navy-900,#0F1B33)}
@media (max-width:46rem){
  .pano-header{margin-left:-1.25rem;margin-right:-1.25rem}
  .pano-header .pano-scroll{border-radius:0;border-left:0;border-right:0}
  .page-hero .pano-header .pano-dots .pd-n{background:rgba(247,241,229,.35)}
  .page-hero .pano-header .pano-dots button[aria-current=true] .pd-n{background:var(--gold-500,#D9A441)}
}
.hero-bg .fx-sky .cl::before{opacity:.22;filter:blur(9px)}
.pano-art picture,.pano-art img{display:block}

/* t118u: readable who-is-who card in the dark /leaders header: navy text on ivory, gold only on the number and era,
   and room below it for the phone browser's bottom bar */
.page-hero .pano-info li,.page-hero .pano-info p,.page-hero .pano-info .pano-name,.page-hero .pano-info .pano-note{color:#1B2A41}
.page-hero .pano-info .pano-name{font-weight:700}
.page-hero .pano-info .pano-era{color:#8A5A12;font-weight:600}
.page-hero .pano-info .pn{background:#D9A441;color:#1B2A41}
.page-hero .pano-info .pano-refs a{color:#1B2A41;text-decoration:underline;text-decoration-color:rgba(217,164,65,.9);text-underline-offset:2px}
.page-hero .pano-header{padding-bottom:calc(1.25rem + env(safe-area-inset-bottom))}
.page-hero .pano-header .pano-info{margin-bottom:calc(1rem + env(safe-area-inset-bottom))}

/* ---------- t119u: clean bottom edges on every picture ---------- */
/* Header pictures: the gold dawn glow of --hero-grad sat right under the picture on phones and read as a muddy
   grey smudge ending in a hard line; with a painted dawn in the picture, the header is plain night navy. */
.page-hero.has-art,.page-hero:has(.pano-header),.lf-hero:has(.pano-header){background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 60%,var(--navy-700) 100%)}
.page-hero.has-art .hero-banner,.pano-header .pano-scroll{box-shadow:0 8px 22px rgba(6,12,24,.45)}
/* Sun rays and the sun glow stay in the open sky: never fanned across the navy ground or over a figure. */
.fx-rays,.art-banner::after{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}
.fx-rays{-webkit-mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.5) 14%,transparent 46%),var(--sky);
  mask-image:radial-gradient(circle at var(--sun-x) var(--sun-y),#000 0,rgba(0,0,0,.5) 14%,transparent 46%),var(--sky)}
.art-banner::after{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--sun-y,85%) - 2%),transparent calc(var(--sun-y,85%) - .5%)),var(--sky);
  mask-image:linear-gradient(180deg,#000 calc(var(--sun-y,85%) - 2%),transparent calc(var(--sun-y,85%) - .5%)),var(--sky)}
/* Grass planted on each picture's own ground line (tools/tufts.json), clipped to the frame. */
.fx-grass.placed{top:0;height:auto;overflow:hidden}
.fx-grass.placed .t{right:auto}
.pano .fx-grass.placed{height:auto}
/* No inline gaps: pictures are blocks and the frames clip everything inside them. */
.pano-art picture{display:block;height:100%}
/* Body pictures: a tight shadow, not a wide grey haze spreading under the frame on the ivory page. */
.art-banner{box-shadow:0 1px 2px rgba(15,27,51,.08),0 5px 14px rgba(15,27,51,.10)}
.page-hero.has-art .hero-banner{box-shadow:0 8px 22px rgba(6,12,24,.45)}
/* Home photo: navy tufts read as pale ghost sprouts on the darker photo ground, so the photo has none. */
.hero-bg .fx-grass{display:none}

/* ---------- t126u: Talk Timer running total + chapel clock ---------- */
.stage-total{margin-top:.35rem;font-size:clamp(.95rem,3.9vw,1.2rem);color:var(--ivory-200);font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.92}
.stage-total b{font-weight:600;color:var(--ivory-50)}
.stage-total.is-over .st-totx{color:#ffb19e}
.stage-top{align-items:flex-start}
.stage-topl{display:flex;flex-direction:column;gap:.3rem;padding-top:.25rem}
.ck-mini{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;flex:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px}
.ck-mini:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
.ck-mini svg{display:block;width:clamp(96px,27vw,120px);height:auto}
.ck-cap{font-size:.8rem;line-height:1.2;color:var(--gold-300);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage[data-state="red"] .ck-cap,.stage[data-state="over"] .ck-cap{color:#ffd2c6}
@media (max-height:600px){.stage .ck-mini svg{width:76px}.stage .ck-cap{font-size:.72rem}}
.ck-face{overflow:visible}
.ck-rim{fill:#13203a;stroke:var(--gold-400,#D9A441);stroke-width:1.6}
.ck-hr{stroke:#f7f1e5;stroke-width:1.6;stroke-linecap:round}
.ck-mn{stroke:rgba(247,241,229,.35);stroke-width:.7}
.ck-done,.ck-left,.ck-over{fill:none;stroke-width:7;stroke-linecap:butt}
.ck-done{stroke:rgba(247,241,229,.16)}
.ck-left{stroke:rgba(217,164,65,.55)}
.ck-over{stroke:rgba(255,177,158,.6)}
.ck-ticks line{stroke:#fffaf0;stroke-width:1.4;stroke-linecap:round}
.ck-orig{fill:none;stroke:#ffb19e;stroke-width:1.2}
.ck-goal-hand{stroke:#D9A441;stroke-width:2.6;stroke-linecap:round;opacity:.9}
.ck-goal-dot{fill:#D9A441;stroke:#13203a;stroke-width:.8}
.ck-hour{stroke:#f7f1e5;stroke-width:3.6;stroke-linecap:round}
.ck-min{stroke:#f7f1e5;stroke-width:2.2;stroke-linecap:round}
.ck-pin{fill:#D9A441;stroke:#13203a;stroke-width:.8}
/* on the set-up card */
.ck-field{margin-top:1rem}
.ck-row{display:flex;gap:1rem;align-items:center}
.ck-setup svg{width:104px}
.ck-setup .ck-cap{color:var(--navy-800,#1B2A41);font-weight:600}
.ck-row .ck-help{margin:0}
/* enlarged, to set it */
.ck-panel{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));background:rgba(8,14,26,.74)}
.ck-panel[hidden]{display:none}
.ck-card{width:100%;max-width:24rem;max-height:100%;overflow:auto;text-align:center;background:var(--navy-900,#0F1B33);color:var(--ivory-50);border:1px solid rgba(236,208,154,.4);border-radius:var(--radius);padding:1.1rem 1.1rem 1rem;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ck-title{margin:0;font-family:var(--font-display);font-size:var(--step-2);color:var(--ivory-50)}
.ck-card .ck-help{margin:.35rem 0 .6rem;color:var(--ivory-200);font-size:var(--step--1)}
.ck-big{display:block;width:min(66vw,250px,40vh);height:auto;margin:.2rem auto .5rem;touch-action:none;cursor:grab;border-radius:50%}
.ck-big:focus-visible{outline:2px solid var(--gold-300);outline-offset:4px}
.ck-read{margin:0;font-variant-numeric:tabular-nums;color:var(--ivory-50)}
.ck-finish{margin:.2rem 0 .7rem;color:var(--gold-300);font-variant-numeric:tabular-nums}
.ck-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ck-btns .btn{justify-content:center;min-height:2.9rem}
.ck-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.8rem}
.ck-foot .linklike{color:var(--gold-300)}
@media (prefers-reduced-motion:no-preference){.ck-panel:not([hidden]) .ck-card{animation:ck-in .25s ease-out}}
@keyframes ck-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ck-field .label{display:block;font-weight:600;color:var(--navy-800);margin-bottom:.35rem}

/* ---------- t135u: bigger, bolder part name + a picture for each part ---------- */
.stage-now{max-width:46rem}
.stage-head{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,3vw,1rem);margin:0 auto;max-width:100%}
.stage-ic{flex:none;display:grid;place-items:center;width:calc(clamp(48px,14.5vw,64px) + 16px);aspect-ratio:1;border-radius:50%;color:var(--sec);
  background:color-mix(in srgb,var(--sec) 15%,transparent);border:2px solid color-mix(in srgb,var(--sec) 50%,transparent)}
.stage-ic:empty{display:none}
.stage-ic .sec-ic{width:clamp(48px,14.5vw,64px);height:clamp(48px,14.5vw,64px)}
.stage-ic[data-kind="dot"] .sec-ic{width:60%;height:60%}
.stage-sec{font-family:var(--font-body);font-weight:800;font-size:clamp(2.5rem,11vw,3.5rem);line-height:1.04;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--sec) 45%,#fffaf0);text-align:left;overflow-wrap:break-word;hyphens:auto;min-width:0}
.stage-head .stage-sec:only-child,.stage-ic:empty+.stage-sec{text-align:center}
.stage-seccue{margin-top:.5rem;font-size:clamp(1.2rem,5.4vw,1.7rem);font-weight:600;line-height:1.3;color:#fffaf0}
.stage-next{font-size:clamp(1.15rem,5vw,1.6rem)}
.nx-ic{display:inline-block;vertical-align:-.2em;margin-right:.35em}
.nx-ic .sec-ic{width:1.2em;height:1.2em;display:block}
.stage-bar{height:26px}
.stage-seg{container-type:inline-size}
.seg-ic{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.seg-ic .sec-ic{width:20px;height:20px;padding:3px;border-radius:50%;background:#13203a;color:var(--seg);stroke-width:2.2}
@container (max-width:27px){.seg-ic{display:none}}
.dp-ic{display:inline-block;vertical-align:-.25em;margin-right:.4em;color:var(--gold-700)}
.dp-ic .sec-ic{width:1.35em;height:1.35em;display:block}
@media (min-width:44rem){.stage-sec{font-size:clamp(3rem,6vw,4.25rem)}.stage-ic .sec-ic{width:68px;height:68px}.stage-ic{width:88px}}
@media (max-height:600px){.stage-sec{font-size:clamp(2.1rem,9vw,2.8rem)}.stage-ic .sec-ic{width:44px;height:44px}.stage-ic{width:58px}.stage-seccue{font-size:1.1rem;margin-top:.3rem}}
@media (forced-colors:active){.stage-ic{border-color:CanvasText}.seg-ic .sec-ic{background:Canvas}}
/* long part names step down so they wrap cleanly in two or three lines (still large) */
.stage.name-long .stage-sec{font-size:clamp(2.1rem,9vw,3rem)}
.stage.name-xlong .stage-sec{font-size:clamp(1.8rem,7.4vw,2.5rem);line-height:1.08}
@media (min-width:44rem){.stage.name-long .stage-sec{font-size:clamp(2.6rem,5vw,3.6rem)}.stage.name-xlong .stage-sec{font-size:clamp(2.2rem,4vw,3rem)}}
@media (max-height:600px){
  .stage{gap:.45rem}
  .stage.name-long .stage-sec{font-size:1.9rem}.stage.name-xlong .stage-sec{font-size:1.45rem}
  .stage-seccue{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stage-next{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .stage-left{font-size:clamp(3.6rem,min(26vw,17vh),15rem)}
  .stage-ctrls .btn{min-height:3rem}
}
@media (max-height:600px){
  .stage{gap:.4rem}
  .stage-left{font-size:clamp(3.4rem,min(24vw,14.5vh),15rem)}
  .stage-sub{margin-top:.1rem;font-size:1rem}
  .stage-total{margin-top:0}
  .stage-cue{min-height:0}
  .stage-bar{height:24px}
}
@media (max-height:600px){
  .stage-next b{display:inline-block;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  .stage.name-xlong .stage-seccue{-webkit-line-clamp:1}
  .stage.name-xlong .stage-ic{width:52px}.stage.name-xlong .stage-ic .sec-ic{width:38px;height:38px}
}
/* phones held sideways: part name on the left, countdown on the right */
@media (max-height:500px) and (orientation:landscape) and (min-width:560px){
  .stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto auto;column-gap:1.25rem;row-gap:.35rem;align-content:stretch;padding-top:max(.6rem,env(safe-area-inset-top));padding-bottom:max(.7rem,env(safe-area-inset-bottom))}
  .stage>*{grid-column:1/-1}
  .stage>.stage-now{grid-column:1;grid-row:2;align-self:center;margin:0;padding-left:env(safe-area-inset-left)}
  .stage>.stage-clock{grid-column:2;grid-row:2;align-self:center}
  .stage-head{justify-content:flex-start}
  .stage-seccue{text-align:left}
  .stage-sec{font-size:clamp(1.9rem,5vw,2.6rem)}
  .stage.name-long .stage-sec{font-size:clamp(1.7rem,4.2vw,2.2rem)}
  .stage.name-xlong .stage-sec{font-size:clamp(1.4rem,3.4vw,1.8rem)}
  .stage-left{font-size:clamp(3.2rem,min(14vw,22vh),7rem)}
  .stage-next{font-size:1.15rem}
  .stage-next b{max-width:none}
  .stage-ctrls{grid-template-columns:repeat(4,1fr)}
  .stage-ctrls .btn{min-height:2.75rem}
}
@media (max-height:360px) and (orientation:landscape) and (min-width:560px){
  .stage{grid-template-rows:0 minmax(0,1fr) auto auto auto auto;row-gap:.3rem}
  .stage>.stage-top{grid-row:1/3;align-self:start;pointer-events:none;z-index:2}
  .stage>.stage-top>*{pointer-events:auto}
  .stage .ck-mini svg{width:60px}
  .stage>.stage-now{padding-top:1.7rem}
  .stage>.stage-clock{padding-right:76px}
  .stage-left{font-size:clamp(2.6rem,17vh,4rem)}
  .stage-sub{font-size:.9rem}
  .stage-sec{font-size:1.75rem}.stage.name-long .stage-sec{font-size:1.45rem}.stage.name-xlong .stage-sec{font-size:1.2rem}
  .stage-ic{width:50px}.stage-ic .sec-ic{width:36px;height:36px}
  .stage-seccue{font-size:1rem;-webkit-line-clamp:1}
  .stage-next{font-size:1.05rem}
  .stage-bar{height:22px}.seg-ic .sec-ic{width:17px;height:17px}
  .stage-ctrls .btn{min-height:2.5rem;font-size:1rem}
}

/* nav: nine items fit on one line on desktop (added with the Family Lesson Maker) */
@media (min-width:60rem){.site-nav a{padding:.45rem .62rem;white-space:nowrap}}
/* ---------- t139u/t140u: Add a part, Finish line, smaller badge ---------- */
/* controls: Pause · +30 sec · Add a part on top, Skip section · End talk below (End fills the row on the last part) */
.stage-ctrls{grid-template-columns:repeat(6,minmax(0,1fr))}
.stage-ctrls .btn{grid-column:span 2;padding-left:.4rem;padding-right:.4rem;line-height:1.15;text-align:center}
.stage-ctrls #st-next,.stage-ctrls #st-end{grid-column:span 3}
.stage.on-last .stage-ctrls #st-end{grid-column:1/-1}
.stage.one-part .stage-ctrls #st-add{grid-column:span 2}
@media (min-width:44rem){.stage-ctrls{grid-template-columns:repeat(5,minmax(0,1fr));max-width:52rem}.stage-ctrls .btn,.stage-ctrls #st-next,.stage-ctrls #st-end{grid-column:auto}.stage.on-last .stage-ctrls{grid-template-columns:repeat(4,minmax(0,1fr))}.stage.on-last .stage-ctrls #st-end{grid-column:auto}}
@media (max-height:500px) and (orientation:landscape) and (min-width:560px){.stage-ctrls{grid-template-columns:repeat(5,minmax(0,1fr))}.stage-ctrls .btn,.stage-ctrls #st-next,.stage-ctrls #st-end{grid-column:auto}.stage.on-last .stage-ctrls{grid-template-columns:repeat(4,minmax(0,1fr))}.stage.on-last .stage-ctrls #st-end{grid-column:auto}}
/* the Add a part chooser: big picture buttons, over the controls */
.st-addsheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--navy-900);border-top:1px solid rgba(236,208,154,.35);border-radius:18px 18px 0 0;
  padding:1rem 1.25rem max(1.25rem,env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.45);max-height:85%;overflow:auto}
.st-addsheet[hidden]{display:none}
.st-add-h{margin:0 0 .75rem;text-align:center;font-weight:700;font-size:1.15rem;color:var(--ivory-50)}
.st-add-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;max-width:40rem;margin:0 auto .75rem}
.st-add-k{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .2rem;min-height:4.4rem;border-radius:14px;border:1px solid rgba(236,208,154,.35);background:rgba(255,255,255,.04);
  color:var(--ivory-50);font:inherit;font-size:.95rem;font-weight:600;line-height:1.1;cursor:pointer}
.st-add-k .sec-ic{width:30px;height:30px;color:var(--gold-300)}
.st-add-k:focus-visible{outline:2px solid var(--gold-300);outline-offset:2px}
.st-addsheet .st-add-x{display:flex;margin:0 auto;min-width:10rem;justify-content:center}
/* t140u: the round badge beside the part name is half the size it was; the name keeps its large size */
.stage-head{align-items:center}
.stage-ic{width:calc(clamp(24px,7.25vw,32px) + 10px);border-width:1.5px}
.stage-ic .sec-ic,.stage.name-xlong .stage-ic .sec-ic{width:clamp(24px,7.25vw,32px);height:clamp(24px,7.25vw,32px)}
.stage.name-xlong .stage-ic{width:calc(clamp(24px,7.25vw,32px) + 10px)}
@media (min-width:44rem){.stage-ic,.stage.name-xlong .stage-ic{width:44px}.stage-ic .sec-ic,.stage.name-xlong .stage-ic .sec-ic{width:34px;height:34px}}
@media (max-height:600px){.stage-ic,.stage.name-xlong .stage-ic{width:32px}.stage-ic .sec-ic,.stage.name-xlong .stage-ic .sec-ic{width:22px;height:22px}}
/* t139u: the stage note floats as a toast so it never pushes the cue, clock or Next line */
.stage .stage-note{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + .6rem);z-index:30;width:min(32rem,calc(100vw - 2rem));margin:0;background:rgba(20,28,48,.94);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none}
@media (max-height:600px){.stage-seccue{margin-bottom:.2rem}.stage-total{margin-bottom:.2rem}}
@media (max-height:600px){.stage.on-last .stage-secleft{display:none}}
/* t139u: very short phones (iPhone SE 1st gen) need a little more room once the last-part line and closing prompt show */
@media (max-height:600px){
  .stage{gap:.25rem}
  .stage .ck-mini svg{width:64px}
  .stage-ctrls .btn{min-height:2.75rem}
  .stage.on-last .stage-left{font-size:clamp(3rem,min(22vw,12vh),15rem)}
  .stage-clock{flex:1 0 auto}.stage-head{flex-shrink:0}
  .stage[data-state="over"] .stage-next{display:none}
  .stage[data-state="over"] .stage-prompt{font-size:1.05rem;line-height:1.25}
}
@media (max-width:43.99rem){.stage .stage-note{left:1rem;right:calc(1.25rem + 116px);width:auto;transform:none;text-align:left}}
@media (min-width:44rem){.stage.one-part .stage-ctrls #st-add{grid-column:auto}}
@media (max-height:500px) and (orientation:landscape) and (min-width:560px){.stage.one-part .stage-ctrls #st-add{grid-column:auto}}