/* Fridays: /fridays/:id/present, v2 "Place Card". Only what base.css (section 16, the deck) lacks: the frame, the layout of each slide kind,
   the exit control, the bottom bar, the fading hint, the vertical (1080x1920) sizing. Flat selectors, one class where possible.
   Everything sits on the face (Myrtle, lamplight, grain, built by motion.js); text is Cotton, Mist or Gilt-hi on it, never on a photo.
   Type: Bellefair 400 for display and rows (never below 22px), Jost 400/500 for the rest. Design: design/DESIGN.md sections 3 to 9. */

:root{--fr:14px}

/* ---- sizes, in container units of the deck (the deck is a size container) ------------------------------ */
.deck{
  --t-display:min(var(--fs-display),11.5cqh);
  --t-statement:min(9rem,15cqh);
  --t-he:min(var(--fs-he-display),11cqh);
  --t-h1:min(var(--fs-h1),7cqh);
  --t-h2:min(var(--fs-h2),5.2cqh);
  --t-row:max(1.375rem,min(1.75rem,3.7cqh));
  --t-lede:max(1.0625rem,min(1.5rem,3.2cqh));
  --t-small:max(.9375rem,min(1.0625rem,2.4cqh));
  --row-pad:min(var(--s4),1.7cqh);
  --lines:rgba(185,199,189,.28);
}

/* ---- without scripts: a plain stack on Myrtle ------------------------------------------------------------- */
html:not(.has-deck) body{background:var(--myrtle);color:var(--cotton)}
html:not(.has-deck) .deck{background:var(--myrtle)}
html:not(.has-deck) .slide{height:auto;min-height:100%;overflow:visible}
html:not(.has-deck) .deck-ui,html:not(.has-deck) .deck-frame,html:not(.has-deck) .present-hint{display:none}
html:not(.has-deck) .slide-inner{gap:var(--s5)}

/* ---- the gilt frame: 1px Gilt at 55% inset 14px, a 22% line 5px inside; it arrives with the lamp -------- */
.deck-frame{position:fixed;inset:var(--fr);z-index:4;pointer-events:none;border:1px solid rgba(209,176,112,.55);border-radius:2px;transition:opacity 350ms linear}
.deck-frame::after{content:"";position:absolute;inset:4px;border:1px solid rgba(209,176,112,.22);border-radius:1px}
html.deck-opening .deck-frame{opacity:0}

/* ---- page furniture ---------------------------------------------------------------------------------------- */
.present-flash{position:fixed;z-index:7;top:calc(var(--fr) + 14px);left:50%;transform:translateX(-50%);width:min(64ch,100% - 2 * var(--margin))}
.present-flash .flash-wrap{margin:0}

.present-exit{position:fixed;z-index:6;top:calc(var(--fr) + 14px);left:max(var(--margin),calc(var(--fr) + 14px));--focus:var(--gilt);
  background:transparent;color:var(--cotton);border-color:var(--mist);transition:opacity 350ms linear,background-color 160ms var(--ease-set)}
.present-exit:hover{background:var(--myrtle-lit);color:var(--cotton);box-shadow:none}
html.js .present-exit,html.deck-opening .present-exit{opacity:0;pointer-events:none}
html[data-deck-ready] .present-exit{opacity:1;pointer-events:auto}
html.autoplay .present-exit:not(:hover):not(:focus-visible){opacity:0}
@media (pointer:coarse){.present-exit{min-height:44px}}

.present-hint{position:fixed;z-index:5;left:50%;bottom:calc(var(--fr) + 78px);transform:translateX(-50%);width:min(100% - 2 * var(--margin),92ch);margin:0;
  text-align:center;font-size:var(--fs-small);line-height:1.4;color:var(--mist);opacity:0;pointer-events:none;transition:opacity 500ms linear}
.present-hint.is-shown{opacity:1;transition-duration:300ms}
.hint-touch{display:none}
@media (pointer:coarse){.hint-keys{display:none}.hint-touch{display:inline}}
html.autoplay .present-hint{display:none}

/* ---- the bar: the season (ten lozenges, this Friday underlined), the slides (eight-pixel lozenges), the count, Pause ---- */
.deck-ui{padding:0 max(var(--margin),calc(var(--fr) + 14px)) calc(var(--fr) + 8px);transition:opacity 350ms linear}
html.deck-opening .deck-ui{opacity:0;pointer-events:none}
/* before the scripts have built the deck, nothing shows; a one-second guard reveals the plain stack if they never run */
@keyframes fr-reveal{to{opacity:1}}
html.js:not(.has-deck) .deck,html.js:not(.has-deck) .deck-ui{opacity:0;animation:fr-reveal 1ms linear 1.2s forwards}
.deck-season{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.deck-season .rail{flex-wrap:nowrap}
.deck-season .rail-wrap{width:auto;max-width:none;margin:0;align-self:flex-start}
.deck-season-label{margin:0 0 -6px 0;font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--mist)}
.deck-dots button::before{width:8px;height:8px;margin:-4px 0 0 -4px}
.deck-dots li.is-past button::before{background:var(--mist);border-color:var(--mist)}
.deck-dots button[aria-current="true"]::before{background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 10px rgba(232,196,128,.5)}
.deck-dots button:hover::before{border-color:var(--cotton)}
.deck-dots button:focus-visible{outline:2px solid var(--gilt);outline-offset:-2px}
.deck-count{min-width:3.6em;font-size:var(--fs-small);font-weight:500;color:var(--mist);letter-spacing:.01em}
.deck-tools .btn{min-height:40px}

/* ---- the ground: the blind Seal belongs to the title; every other slide takes the lamp alone ----------- */
/* the ghost Seal behind the title read as mud under the Hebrew and the copy: the brand opens on a clean lockup now (.deck-intro) and the ground carries light only */
.deck-seal{display:none}

/* ---- slide frame -------------------------------------------------------------------------------------------- */
.slide{padding:calc(var(--fr) + 66px) max(var(--margin),calc(var(--fr) + 20px)) calc(var(--fr) + 88px)}
.slide-inner{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;justify-content:safe center;gap:var(--s5)}
.sl-head{min-width:0}
.sl-kicker{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--mist)}
.sl-kicker::before{content:"";flex:none;width:6px;height:6px;background:var(--gilt);transform:rotate(45deg)}
.sl-title{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1);line-height:1.06;text-wrap:balance;max-width:var(--measure-head)}
.sl-body{margin-top:var(--s4);max-width:40ch;font-size:var(--t-lede);line-height:1.45;color:var(--mist);text-wrap:balance}
.sl-list{min-width:0}

/* rows arrive on opacity alone, 55ms apart: the one stagger, capped by the row count */
.has-deck .sl-item{opacity:0;transition:opacity 240ms var(--ease-set)}
.has-deck .slide.is-active .sl-item{opacity:1;transition-delay:calc(160ms + var(--i,0) * 55ms)}
.deck-opening .sl-item{transition-duration:0ms;transition-delay:0ms}

/* ---- title: the card. Kicker, name, Hebrew in Gilt, English, the date line; the blind Seal behind -------- */
.k-title{align-items:center;text-align:center;gap:0}
.k-title .sl-kicker{margin-bottom:var(--s5)}
.k-title .sl-kicker::before{display:none}
.tl-title{font-family:var(--font-display);font-weight:400;font-size:var(--t-display);line-height:1.02;letter-spacing:-.005em;max-width:14ch;text-wrap:balance}
.tl-title[data-len="l"]{font-size:calc(var(--t-display) * .9)}
.tl-title[data-len="xl"]{font-size:calc(var(--t-display) * .78)}
.tl-he{display:block;width:fit-content;margin:min(var(--s6),3.2cqh) auto 0;font-family:var(--font-he);font-weight:400;font-size:var(--t-he);line-height:1.1;color:var(--gilt)}
.tl-en{margin-top:var(--s2);font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2;color:var(--mist)}
.tl-date{margin-top:min(var(--s6),3.2cqh);font-size:var(--t-lede);line-height:1.4;color:var(--cotton)}
.tl-holiday{margin-top:var(--s3);max-width:52ch;font-size:var(--fs-small);font-weight:500;line-height:1.45;color:var(--gilt-hi)}
.tl-shalom{margin-top:min(var(--s6),3.2cqh);font-family:var(--font-he);font-size:var(--fs-h3);line-height:1.2}

/* ---- statement: one sentence, large; a short gilt rule, then the thought ------------------------------------ */
.k-statement{align-items:flex-start;gap:0}
.st-title{font-family:var(--font-display);font-weight:400;font-size:var(--t-statement);line-height:.98;letter-spacing:-.01em;max-width:13ch;text-wrap:balance}
.st-title[data-len="l"]{font-size:calc(var(--t-statement) * .78);max-width:16ch}
.st-title[data-len="xl"]{font-size:calc(var(--t-statement) * .62);max-width:20ch}
.st-body{margin-top:var(--s6);max-width:44ch;text-wrap:pretty;font-size:var(--t-lede);line-height:1.5;color:var(--mist)}
.st-body::before{content:"";display:block;width:64px;height:1px;margin-bottom:var(--s5);background:var(--gilt)}

/* ---- agenda: time, title; the horizon row carries the candle-lighting ------------------------------------- */
.agenda > li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:var(--s5);padding-block:var(--row-pad);border-top:1px solid var(--lines)}
.agenda > li:first-child{border-top:0}
.agenda-time{padding-top:.5em;font-size:var(--t-small);font-weight:500;line-height:1.3;color:var(--mist)}
.agenda-body{min-width:0}
.agenda-title{display:block;font-size:var(--t-row);line-height:1.2}
.agenda-item.is-untimed .agenda-title{color:var(--mist)}
.agenda > li.agenda-horizon{display:grid;align-items:center;margin-block:var(--s2);padding-block:min(var(--s4),1.5cqh);border-top:1px solid var(--gilt);border-bottom:1px solid var(--gilt)}
.agenda-horizon .candle-pair{justify-self:end}
.agenda-horizon-text{font-size:var(--t-small);font-weight:500;line-height:1.3;color:var(--gilt-hi)}
.agenda > li.agenda-horizon + li{border-top:0}

/* ---- promise: the headline, then lit lozenges, one commitment each ---------------------------------------- */
.k-promise .sl-title{font-size:min(var(--fs-h1),6.6cqh)}
.pm-list > li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--s4);align-items:start;padding-block:var(--row-pad);border-top:1px solid var(--lines)}
.pm-list > li:first-child{border-top:0}
.pm-list .candle{margin:.62em 0 0 6px}
.pm-text{font-family:var(--font-display);font-size:var(--t-row);line-height:1.25}

/* ---- proof: the first claim at heading size with its chip, the rest as rows -------------------------------- */
.k-proof .sl-title{font-size:var(--t-h2)}
.k-proof .sl-body{margin-top:var(--s2)}
.k-proof .sl-list{display:grid;grid-template-columns:1fr;column-gap:var(--s8);align-content:start}
.k-proof .sl-item{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding-block:var(--s4);border-top:1px solid var(--lines)}
.pr-claim{font-family:var(--font-display);font-size:var(--t-row);line-height:1.22;text-wrap:balance}
.pr-kind{flex:none}
.pr-kind .mark{margin:0 8px 0 0}
.pr-lead{border-top:0!important;padding-top:0!important}
.pr-lead .pr-claim{font-size:min(4.25rem,8cqh);line-height:1.04;max-width:18ch}

/* ---- partners: plates; the name as a heading, the role in Mist ------------------------------------------- */
.pa-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.pa-grid > li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s5);border:1px solid var(--lines);border-radius:var(--r-face);background:rgba(42,75,61,.55)}
.pa-grid > li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain);opacity:.1;mix-blend-mode:overlay;pointer-events:none}
.pa-tag{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--mist)}
.pa-tag .mark{margin:0 8px 0 0}
.pa-name{display:block;font-family:var(--font-display);font-size:max(1.5rem,min(2.5rem,5cqh));line-height:1.1;text-wrap:balance}
.pa-role{display:block;font-size:var(--t-small);line-height:1.45;color:var(--mist)}

/* ---- menu: a centred card; the courses set large, a gilt lozenge between each ------------------------------ */
.k-menu{align-items:center;text-align:center;gap:min(var(--s6),3cqh)}
.k-menu .sl-head{display:flex;flex-direction:column;align-items:center}
.k-menu .sl-kicker{justify-content:center}
.k-menu .sl-title{font-size:var(--t-h2);max-width:24ch}
.k-menu .sl-body{max-width:46ch}
.k-menu .sl-list{display:flex;flex-direction:column;align-items:center}
.k-menu .sl-item + .sl-item::before{content:"";display:block;width:6px;height:6px;margin:min(var(--s3),1.3cqh) auto min(var(--s3),1.3cqh);background:var(--gilt);transform:rotate(45deg)}
.mn-name{display:block;font-family:var(--font-display);font-size:max(1.5rem,min(2.5rem,4.8cqh));line-height:1.12;text-wrap:balance}

/* ---- actions: date in Gilt, the task, the owner beneath ---------------------------------------------------- */
.k-actions .sl-title,.k-schedule .sl-title{font-size:var(--t-h2)}
.k-actions .sl-body,.k-schedule .sl-body{margin-top:var(--s2)}
.k-actions .sl-item{display:grid;grid-template-columns:6rem minmax(0,1fr);column-gap:var(--s4);padding-block:var(--row-pad);border-top:1px solid var(--lines)}
.act-when{display:flex;flex-direction:column;font-weight:500;font-variant-numeric:tabular-nums lining-nums;color:var(--gilt-hi)}
.act-date{padding-top:.35em;font-size:var(--t-small);line-height:1.3}
.act-time{font-size:var(--fs-small);line-height:1.3;color:var(--mist)}
.act-body{min-width:0}
.act-task{display:block;font-family:var(--font-display);font-size:max(1.375rem,min(1.5rem,3.2cqh));line-height:1.2}
.act-owner{display:block;margin-top:2px;font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--mist)}

/* ---- schedule: a timeline; ring lozenges on a Mist line, the date and time, what goes out ----------------- */
.k-schedule .sl-item{position:relative;display:grid;grid-template-columns:14px 7.5rem minmax(0,1fr);column-gap:var(--s4);align-items:start;padding-block:var(--row-pad)}
.k-schedule .sl-item::before{content:"";position:absolute;left:6px;top:calc(var(--row-pad) + .72em + 7px);bottom:calc(var(--row-pad) * -1 - .72em + 7px);width:1px;background:var(--lines)}
.k-schedule .sl-item.is-end::before{display:none}
.k-schedule .sch-mark{--mk:10px;margin:.42em 0 0 0;background:var(--myrtle);color:var(--gilt-hi);z-index:1}
.sch-when{display:flex;flex-direction:column;font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.sch-date{padding-top:.2em;font-size:var(--t-small);line-height:1.3}
.sch-time{font-size:var(--fs-small);line-height:1.3;color:var(--mist)}
.sch-what{font-family:var(--font-display);font-size:max(1.375rem,min(1.5rem,3.2cqh));line-height:1.2}

/* ---- close: the foil Seal, the name of the night, the blessing, the next candles, one gilt button ------------ */
.k-close{align-items:center;text-align:center;gap:0}
.cl-seal{margin-bottom:min(var(--s6),3.4cqh)}
.cl-seal .seal{--seal:min(160px,17cqh)}
.cl-title{font-family:var(--font-display);font-weight:400;font-size:min(var(--fs-display),10cqh);line-height:1;letter-spacing:-.005em;max-width:16ch;text-wrap:balance}
.cl-title[data-len="l"]{font-size:calc(min(var(--fs-display),10cqh) * .88)}
.cl-title[data-len="xl"]{font-size:calc(min(var(--fs-display),10cqh) * .74)}
.cl-body{margin-top:var(--s4);max-width:44ch;text-wrap:balance;font-size:var(--t-lede);line-height:1.45;color:var(--mist)}
.cl-shalom{margin-top:min(var(--s6),3.4cqh);font-family:var(--font-he);font-size:min(var(--fs-he-display),9.5cqh);line-height:1.1;color:var(--gilt)}
.cl-next{margin-top:min(var(--s5),2.6cqh);font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.3}
.cl-foot{margin-top:min(var(--s6),3.2cqh)}

/* ---- wide, landscape: the 12-column grid ---------------------------------------------------------------------- */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .k-agenda,.k-promise,.k-proof,.k-partners,.k-actions,.k-schedule{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-content:safe center;align-items:start;gap:0 var(--gutter)}
  .k-agenda .sl-head{grid-column:1 / 6;align-self:center}
  .k-agenda .sl-list{grid-column:7 / 13}
  .k-promise .sl-head{grid-column:1 / 7;align-self:center}
  .k-promise .sl-list{grid-column:8 / 13}
  .k-proof .sl-head{grid-column:1 / -1;margin-bottom:var(--s6)}
  .k-proof .sl-list{grid-column:1 / -1;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(var(--n,3),auto)}
  .k-proof .sl-list.is-solo{grid-template-columns:1fr}
  .k-proof .pr-lead{grid-row:1 / span var(--n,3);align-self:center;padding-right:var(--s7)}
  .k-proof .sl-item:not(.pr-lead){grid-column:2}
  .k-proof .sl-item:not(.pr-lead):nth-child(2){border-top:0;padding-top:0}
  .k-partners .sl-head{grid-column:1 / 5;align-self:center}
  .k-partners .sl-list{grid-column:5 / 13;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  .k-partners .pa-grid > li{min-height:min(15rem,24cqh);padding:var(--s6)}
  .k-menu .sl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s9);grid-auto-flow:column;grid-template-rows:repeat(3,auto);align-items:start}
  .k-menu .sl-item:nth-child(4)::before{display:none}
  .k-actions[data-cols="1"] .sl-head,.k-schedule[data-cols="1"] .sl-head{grid-column:1 / 5;align-self:center}
  .k-actions[data-cols="1"] .sl-list,.k-schedule[data-cols="1"] .sl-list{grid-column:5 / 13}
  .k-actions[data-cols="2"] .sl-head,.k-schedule[data-cols="2"] .sl-head{grid-column:1 / -1;margin-bottom:var(--s4)}
  .k-actions[data-cols="2"] .sl-list,.k-schedule[data-cols="2"] .sl-list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,4),auto);column-gap:var(--s8)}
  .k-statement{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);grid-template-rows:auto auto;align-content:safe center;align-items:end;gap:0 var(--gutter)}
  .k-statement .sl-kicker{grid-column:1 / -1;grid-row:1}
  .k-statement .st-title{grid-column:1 / 9;grid-row:2;max-width:none}
  .k-statement .st-body{grid-column:9 / 13;grid-row:2;margin-top:0;max-width:none;padding-bottom:.6rem}
}

/* ---- phones and tall screens: one column, the sea of Myrtle takes the whole of it ------------------------ */
@media (max-width:699px){
  :root{--fr:8px}
  .deck{--t-row:1.375rem;--t-lede:1.0625rem;--t-small:.9375rem;--row-pad:6px;--t-h1:min(var(--fs-h1),6cqh);--t-h2:1.75rem}
  .slide{padding:calc(var(--fr) + 62px) calc(var(--fr) + 14px) 138px}
  .present-exit{top:calc(var(--fr) + 10px);left:calc(var(--fr) + 14px)}
  .present-flash{top:calc(var(--fr) + 60px)}
  .present-hint{bottom:calc(var(--fr) + 94px)}
  .hint-keys{display:none}
  .hint-touch{display:inline}
  .slide-inner{gap:var(--s4)}
  .sl-kicker{margin-bottom:var(--s3)}
  .sl-body{margin-top:var(--s3);max-width:none}
  .deck-ui{padding-inline:calc(var(--fr) + 8px);padding-bottom:calc(var(--fr) + 4px)}
  .deck-season{align-items:center;width:100%}
  .deck-season-label{display:none}
  .k-title .sl-kicker{margin-bottom:var(--s4)}
  .tl-he{font-size:min(var(--fs-he-display),9cqh)}
  .tl-title{max-width:12ch}
  .agenda > li{grid-template-columns:4.75rem minmax(0,1fr);column-gap:var(--s3)}
  .k-promise .sl-title{font-size:1.875rem}
  .pr-lead .pr-claim{font-size:2rem}
  .k-proof .sl-item{gap:var(--s2);padding-block:var(--s3)}
  .pa-grid{gap:var(--s2)}
  .pa-grid > li{padding:var(--s3) var(--s4);gap:2px}
  .pa-name{font-size:1.5rem}
  .mn-name{font-size:1.5rem}
  .k-menu .sl-item + .sl-item::before{margin-block:var(--s2)}
  .k-actions .sl-item{grid-template-columns:4.75rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s3)}
  .act-body{display:contents}
  .act-when{grid-column:1;grid-row:1}
  .act-task{grid-column:2;grid-row:1 / span 2}
  .act-owner{grid-column:1;grid-row:2;margin:0}
  .tl-date{max-width:24ch;text-wrap:balance}
  .k-schedule .sl-item{grid-template-columns:14px 5rem minmax(0,1fr);column-gap:var(--s3)}
  .cl-title{font-size:2.5rem}
  .cl-seal .seal{--seal:min(112px,14cqh)}
  .cl-shalom{font-size:min(var(--fs-he-display),8cqh)}
  .cl-next{font-size:1.375rem}
  .st-title{font-size:min(var(--t-statement),11.5cqh,4rem)}
  .st-body{margin-top:var(--s4)}
}
/* small phones: the season row steps out so the slides keep their room; the dots and the count stay */
@media (max-width:699px) and (max-height:800px){
  .deck-season{display:none}
  .slide{padding-bottom:calc(var(--fr) + 78px)}
  .present-hint{bottom:calc(var(--fr) + 56px)}
}
/* tablets held upright, and anything wider than 700px that is taller than it is wide */
@media (min-width:700px) and (max-aspect-ratio:1/1){
  .slide{padding-bottom:calc(var(--fr) + 100px)}
  .k-menu .sl-list{display:flex}
}
@media (min-width:900px) and (max-aspect-ratio:1/1){
  .deck{--t-display:min(var(--fs-display),9cqh);--t-statement:min(9rem,12cqh);--t-he:min(var(--fs-he-display),8cqh);--t-row:min(1.875rem,3cqh);--t-lede:min(1.625rem,2.6cqh)}
}

/* ---- vertical: 1080 by 1920, for the video and for anyone holding a phone sideways to a tripod ------------ */
html.vertical{font-size:clamp(16px,2.1vw,26px)}
html.vertical .deck{--t-h1:min(9vw,5.2cqh);--t-h2:min(7vw,4cqh);--t-display:min(14vw,8.6cqh);--t-statement:min(17vw,9.4cqh);--t-he:min(17vw,8.6cqh);
  --t-row:min(6.2vw,3.1cqh);--t-lede:min(5.6vw,2.8cqh);--t-small:min(4.2vw,2.2cqh);--row-pad:min(2.4vw,1.3cqh)}
html.vertical .slide{padding:calc(var(--fr) + 120px) calc(var(--fr) + 40px) 260px}
html.vertical .slide-inner{gap:min(4vw,2cqh)}
html.vertical .sl-kicker{font-size:min(4.2vw,2.2cqh)}
html.vertical .tl-title{max-width:12ch}
html.vertical .tl-en{font-size:min(7vw,3.6cqh)}
html.vertical .tl-holiday,html.vertical .tl-shalom{font-size:min(4vw,2.1cqh)}
html.vertical .tl-shalom{font-size:min(7vw,3.6cqh)}
html.vertical .st-title{max-width:11ch}
html.vertical .agenda > li{grid-template-columns:min(20vw,9rem) minmax(0,1fr)}
html.vertical .agenda-time,html.vertical .act-date,html.vertical .sch-date{font-size:min(4.2vw,2.2cqh)}
html.vertical .k-promise .sl-title{font-size:min(9vw,5cqh)}
html.vertical .pr-lead .pr-claim{font-size:min(10vw,5.4cqh)}
html.vertical .pa-name,html.vertical .mn-name{font-size:min(8vw,3.9cqh)}
html.vertical .pa-role,html.vertical .pa-tag,html.vertical .act-owner,html.vertical .act-time,html.vertical .sch-time{font-size:min(3.8vw,2cqh)}
html.vertical .act-task,html.vertical .sch-what{font-size:min(5.4vw,2.7cqh)}
html.vertical .k-actions .sl-item{grid-template-columns:min(22vw,10rem) minmax(0,1fr)}
html.vertical .k-schedule .sl-item{grid-template-columns:14px min(26vw,11rem) minmax(0,1fr)}
html.vertical .cl-title{font-size:min(14vw,8.2cqh)}
html.vertical .cl-seal .seal{--seal:min(26vw,12cqh)}
html.vertical .cl-shalom{font-size:min(17vw,8cqh)}
html.vertical .cl-next{font-size:min(6vw,3cqh)}
html.vertical .cl-body{font-size:min(5vw,2.5cqh)}
html.vertical .cl-foot .btn{min-height:min(9vw,5cqh);font-size:min(4.2vw,2.3cqh);padding-inline:min(6vw,3.4cqh)}
html.vertical .present-exit{font-size:min(3.6vw,2cqh);min-height:min(8vw,4.4cqh)}
html.vertical .present-hint{bottom:170px;font-size:min(3.4vw,1.8cqh)}
html.vertical .deck-ui{zoom:1.3;padding-bottom:calc(var(--fr) + 24px)}

/* ---- short screens (a laptop with its toolbar showing): quieter type, nothing cut -------------------------- */
@media (max-height:760px) and (min-width:700px) and (min-aspect-ratio:1/1){
  .slide{padding-top:calc(var(--fr) + 56px);padding-bottom:calc(var(--fr) + 78px)}
  .deck{--t-display:min(var(--fs-display),11cqh);--t-h1:min(var(--fs-h1),6.4cqh);--row-pad:min(var(--s3),1.4cqh)}
  .sl-body{margin-top:var(--s3)}
  .slide-inner{gap:var(--s4)}
}
@media (max-height:640px) and (min-width:700px){
  .present-hint{display:none}
  .deck-season-label{display:none}
}

/* ---- reduced motion: the final frame, rows already there ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .has-deck .sl-item{opacity:1}
  .present-hint,.present-exit,.deck-frame{transition:none}
}
html.reduced-motion .has-deck .sl-item{opacity:1}
html.reduced-motion .present-hint,html.reduced-motion .present-exit,html.reduced-motion .deck-frame{transition:none}


/* ---- the opening lockup: seal, wordmark, tagline, held clean on the ground, then it gives way to the title ----------------------------- */
.deck-intro{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(var(--s5),3cqh);padding:var(--s6);text-align:center;
  background:var(--myrtle-deep);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 300ms var(--ease-ink),visibility 0s linear 300ms}
.deck-intro.is-on{opacity:1;visibility:visible;transition:opacity 150ms var(--ease-ink)}
.di-seal{width:min(120px,16vh,26vw);height:auto}
.di-word{width:min(300px,52vw);height:auto}
.di-tag{font-size:var(--fs-lead);line-height:1.4;color:var(--mist);letter-spacing:.02em}
html:not(.has-deck) .deck-intro{display:none}
html.vertical .di-seal{width:min(220px,24vw)}
html.vertical .di-word{width:min(520px,62vw)}
html.vertical .di-tag{font-size:min(4.4vw,2.4cqh)}

/* ---- the ground, one light per slide kind: the same room, lit differently, so no two slides look alike ------------------------------ */
.deck-bg{--sx:70%;--sy:30%}
.deck-bg::before{background:
  radial-gradient(26% 34% at var(--sx) var(--sy),rgba(255,222,160,calc(.5 * var(--lamp-on))),rgba(236,176,96,calc(.16 * var(--lamp-on))) 46%,transparent 74%),
  radial-gradient(circle at calc(var(--sx) - 24%) calc(var(--sy) - 12%),rgba(240,200,130,.22) 0 2.2%,transparent 2.8%),
  radial-gradient(circle at calc(var(--sx) + 18%) calc(var(--sy) + 16%),rgba(240,200,130,.18) 0 3%,transparent 3.6%),
  radial-gradient(circle at calc(var(--sx) - 38%) calc(var(--sy) + 26%),rgba(240,200,130,.14) 0 1.6%,transparent 2.2%),
  radial-gradient(60% 55% at var(--lamp-x) 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.deck-bg[data-kind="title"]{--sx:84%;--sy:18%}
.deck-bg[data-kind="statement"]{--sx:20%;--sy:50%}
.deck-bg[data-kind="agenda"]{--sx:86%;--sy:78%}
.deck-bg[data-kind="promise"]{--sx:50%;--sy:6%}
.deck-bg[data-kind="proof"]{--sx:14%;--sy:84%}
.deck-bg[data-kind="partners"]{--sx:82%;--sy:22%}
.deck-bg[data-kind="menu"]{--sx:76%;--sy:60%}
.deck-bg[data-kind="actions"]{--sx:92%;--sy:10%}
.deck-bg[data-kind="schedule"]{--sx:8%;--sy:16%}
.deck-bg[data-kind="close"]{--sx:50%;--sy:96%}
.deck-bg[data-kind="close"] .deck-menorah{opacity:0}
.deck-menorah .light{width:14px;height:14px}
.deck-menorah{gap:12px}

/* a statement is a candle row drawn in light: two warm strokes with a flame of glow, beside the line */
.k-statement{position:relative}
@media (min-width:900px){.k-statement{padding-right:min(13vw,11rem)}}
.k-statement::after{content:"";position:absolute;right:0;top:50%;width:min(9vw,8rem);height:min(46cqh,26rem);translate:0 -50%;pointer-events:none;opacity:.9;
  background:
    radial-gradient(ellipse 22% 11% at 24% 6%,rgba(255,226,170,.85),rgba(255,226,170,0) 70%),
    radial-gradient(ellipse 22% 11% at 76% 12%,rgba(255,226,170,.85),rgba(255,226,170,0) 70%),
    linear-gradient(180deg,rgba(248,247,243,.0),rgba(248,247,243,.0) 8%,rgba(248,247,243,.55) 12%,rgba(236,222,190,.18) 100%) 24% 0 / 5% 100% no-repeat,
    linear-gradient(180deg,rgba(248,247,243,.0),rgba(248,247,243,.0) 14%,rgba(248,247,243,.5) 18%,rgba(236,222,190,.16) 100%) 76% 0 / 5% 100% no-repeat}
@media (max-width:899px){.k-statement::after{display:none}}

/* ---- the close: one gilt ask, the quiet way back, the address of the site, the source line ------------------------------------------ */
.cl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3) var(--s5)}
.cl-brief{color:var(--cotton)}
.cl-url{margin-top:min(var(--s5),2.4cqh);font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2;color:var(--gilt-hi);letter-spacing:.02em}
.cl-source{margin-top:var(--s2);font-size:var(--fs-small);line-height:1.4;color:var(--mist)}
html.vertical .cl-url{font-size:min(6.4vw,3.2cqh)}
html.vertical .cl-source{font-size:min(3.6vw,1.9cqh)}
/* the exit control repeats the close slide's own way back, so it steps aside there */
body:has(.slide.is-active[data-kind="close"]) .present-exit{opacity:0;pointer-events:none;visibility:hidden}

/* phones: one row of diamonds at the bottom, not two (the slide dots stay; the season rail steps out) */
@media (max-width:599px){.deck-season{display:none}}