/* Fridays: base styles and reusable components, v2 "Place Card". Tokens live in tokens.css; the system is design/DESIGN.md.
   Contents: 1 reset  2 type  3 layout  4 links and focus  5 buttons  6 forms and choice tiles  7 marks (state lozenge, chip)
   8 seal, wordmark, lockup  9 faces, bands, photo slots  10 header and footer  11 season calendar (rail)
   12 content components  13 funnel  14 dashboard  15 flash  16 deck (present)  17 v1 hero compatibility  18 reduced motion  19 print.
   Rules of the system: Cotton paper, Myrtle ink, Gilt only as a mark or on dark. Nothing is drawn: no candles, flames, suns or skies.
   Radii: 2 paper, 4 controls, 8 faces and cards, 12 sheets, pill for chips. Three elevations: 0, 1 paper, 2 faces. No hover lifts. */

/* 1 reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--s5)}
body{margin:0;min-width:320px;font-family:var(--font-text);font-size:var(--fs-body);line-height:1.6;background:var(--cotton);color:var(--myrtle);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
summary{cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--myrtle);color:var(--cotton)}
.on-sea ::selection,.on-myrtle ::selection,.face ::selection{background:var(--gilt);color:var(--myrtle)}

/* 2 type ----------------------------------------------------------------- */
h1,h2,h3,.h1,.h2,.h3,.display{font-family:var(--font-display);font-weight:400;text-wrap:balance;break-after:avoid;letter-spacing:0}
h1,.h1{font-size:var(--fs-h1);line-height:1.06;max-width:var(--measure-head)}
h2,.h2{font-size:var(--fs-h2);line-height:1.1}
h3,.h3{font-size:var(--fs-h3);line-height:1.2}
.display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.005em;max-width:16ch}
.he-display{font-family:var(--font-he);font-weight:400;font-size:var(--fs-he-display);line-height:1.1}
.hour,.figure{font-family:var(--font-text);font-weight:400;font-size:var(--fs-figure);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.hour{font-family:var(--font-display)}
.narrative{font-size:var(--fs-body);line-height:1.6;max-width:var(--measure)}
.narrative > * + *{margin-top:1em}
.lead,.lede{font-size:var(--fs-lead);line-height:1.5;max-width:var(--measure)}
.body{font-size:var(--fs-body);line-height:1.6;max-width:var(--measure)}
.small{font-size:var(--fs-small);line-height:1.5}
.kicker,.label{font-family:var(--font-text);font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--sage)}
.on-sea .kicker,.on-myrtle .kicker,.face .kicker{color:var(--mist)}
.muted{color:var(--muted)}
.on-sea .muted,.on-sea-2{color:var(--mist)}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
.balance{text-wrap:balance}
.he{font-family:var(--font-he)}
:where(p,li,dd){text-wrap:pretty}
strong,b{font-weight:500}
em,i{font-style:normal}               /* no italics anywhere in this system */
p + p{margin-top:var(--s4)}

/* 3 layout --------------------------------------------------------------- */
.wrap{width:min(100% - 2 * var(--margin),var(--max));margin-inline:auto}
.wrap-narrow{width:min(100% - 2 * var(--margin),40rem);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.col-text{grid-column:2 / 9;min-width:0}                 /* columns 2 to 8 */
.col-aside{grid-column:10 / 13;min-width:0}             /* columns 10 to 12: contents, marginalia */
.col-full{grid-column:1 / -1;min-width:0}
@media (max-width:899px){.col-text{grid-column:1 / 10}}
@media (max-width:599px){
  .col-text,.col-aside{grid-column:1 / -1}
  .col-aside{order:-1;margin-bottom:var(--s3)}
}
.section{padding-top:var(--s9)}
.section-head{margin-bottom:var(--s6)}
main{display:block;padding-bottom:var(--s9)}
@media (max-width:599px){.section{padding-top:var(--s8)}main{padding-bottom:var(--s8)}}
.stack > * + *{margin-top:var(--stack,var(--s4))}
.stack-lg{--stack:var(--s6)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
.row-end{justify-content:flex-end}
.rows > * + *{border-top:1px solid var(--line)}
.measure{max-width:var(--measure)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:100;background:var(--myrtle);color:var(--cotton);padding:12px 16px;border-radius:var(--r-control);
  font-weight:500;text-decoration:none}
.skip-link:focus{top:var(--s3)}

/* 4 links and focus ------------------------------------------------------ */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness 120ms var(--ease-set)}
a:hover{text-decoration-thickness:2px}
a.plain,.plain a{text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.on-sea a,.on-myrtle a,.face a{color:var(--cotton)}

/* 5 buttons -------------------------------------------------------------- */
/* One primary per screen. No icons, no arrows. 52px; small 40px. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--r-control);
  font-family:var(--font-text);font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:.01em;text-align:center;text-decoration:none;
  background:var(--myrtle);color:var(--cotton);
  transition:background-color 160ms var(--ease-set),color 160ms var(--ease-set),box-shadow 160ms var(--ease-set),border-color 160ms var(--ease-set)}
.btn:hover{background:var(--myrtle-lit);box-shadow:inset 0 -2px 0 var(--gilt);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--myrtle);color:var(--cotton)}
.btn-secondary{background:transparent;color:inherit;border-color:currentColor}
.btn-secondary:hover{background:var(--linen);color:var(--myrtle);box-shadow:none}
.btn-quiet{min-height:44px;padding:0 4px;background:none;border:0;border-radius:0;color:inherit;font-weight:400;letter-spacing:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.btn-quiet:hover{background:none;box-shadow:none;text-decoration-thickness:2px;color:inherit}
.btn-danger{background:var(--claret);color:var(--cotton)}
.btn-danger:hover{background:#7F2029;box-shadow:none}
.btn-sm{min-height:40px;padding:0 18px}
.btn-sm.btn-quiet{padding:0 4px}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:var(--myrtle);box-shadow:none}
.btn-secondary[disabled]:hover{background:transparent}
.btn[aria-busy="true"]{cursor:progress;opacity:1}
.btn[aria-busy="true"]::before{content:"";width:8px;height:8px;margin-right:12px;background:currentColor;transform:rotate(45deg);animation:fr-pulse 800ms var(--ease-ink) infinite alternate}
@keyframes fr-pulse{from{opacity:.4}to{opacity:1}}
@media (pointer:coarse){.btn-sm{min-height:44px}}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
/* on dark stock: Gilt primary, Mist outline secondary */
.on-sea .btn,.on-myrtle .btn,.face .btn,.btn-sea{background:var(--gilt);color:var(--myrtle)}
.on-sea .btn:hover,.on-myrtle .btn:hover,.face .btn:hover,.btn-sea:hover{background:var(--gilt-hi);color:var(--myrtle);box-shadow:none}
.on-sea .btn-secondary,.on-myrtle .btn-secondary,.face .btn-secondary,.btn-sea.btn-secondary{background:transparent;color:var(--cotton);border-color:var(--mist)}
.on-sea .btn-secondary:hover,.on-myrtle .btn-secondary:hover,.face .btn-secondary:hover,.btn-sea.btn-secondary:hover{background:var(--myrtle-lit);color:var(--cotton);box-shadow:none}
.on-sea .btn-quiet,.on-myrtle .btn-quiet,.face .btn-quiet{background:none;color:var(--cotton);border:0}
.on-sea .btn-quiet:hover,.on-myrtle .btn-quiet:hover,.face .btn-quiet:hover{background:none;color:var(--cotton)}
.on-sea .btn-secondary[disabled]:hover{background:transparent}
.on-sea .btn-danger,.on-myrtle .btn-danger,.face .btn-danger{background:var(--claret);color:var(--cotton)}
/* copy confirmation */
.is-copied{background:var(--myrtle)!important;color:var(--cotton)!important;box-shadow:inset 0 -2px 0 var(--gilt)!important}

/* 6 forms and choice tiles ------------------------------------------------ */
.field{display:block}
.field + .field,.field + fieldset,fieldset + .field,fieldset + fieldset{margin-top:var(--s5)}
.field > label,.field-label{display:block;font-weight:500;font-size:var(--fs-ui);line-height:1.35}
.help{color:var(--muted);font-size:var(--fs-small);line-height:1.5;margin-top:var(--s1)}
.field > label + .help + :where(input,select,textarea,.control),
.field > label + :where(input,select,textarea,.control){margin-top:var(--s2)}
.field > .help + :where(input,select,textarea){margin-top:var(--s2)}
:where(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="password"],input[type="date"],input[type="search"],input:not([type]),select,textarea){
  display:block;width:100%;min-height:52px;padding:0 16px;background:var(--white);color:var(--myrtle);
  border:1px solid var(--sage);border-radius:var(--r-control);font-size:1rem;line-height:1.4;transition:border-color 120ms var(--ease-set)}
textarea{min-height:128px;padding:14px 16px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--myrtle)}
input::placeholder,textarea::placeholder{color:var(--sage);opacity:1}
select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F3D31' stroke-width='1.5'/%3E%3C/svg%3E") right 18px center / 12px 8px no-repeat}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.has-error :where(input,select,textarea){
  border:2px solid var(--claret);padding-left:15px}
textarea[aria-invalid="true"]{padding-top:13px}
.error-msg{color:var(--claret);font-weight:500;font-size:var(--fs-small);line-height:1.4;margin-top:var(--s2)}
fieldset{border:0;min-width:0}
legend{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.2;padding:0;margin-bottom:var(--s3)}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--myrtle)}
.check{display:flex;align-items:center;gap:var(--s3);min-height:44px;cursor:pointer}
.check input{cursor:pointer}
.check span{line-height:1.35}
.radio-rows .check{min-height:56px;border-bottom:1px solid var(--line)}
.radio-rows{border-top:1px solid var(--line)}

/* choice tiles: the input is hidden, the tile carries a ring and a state lozenge; checked, the tile becomes a small face */
.dinners{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:600px){.dinners{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dinner-row,.path-option{position:relative;display:grid;align-content:start;background:var(--white);color:var(--myrtle);border:1px solid var(--sage);border-radius:var(--r-face);
  cursor:pointer;transition:background-color 200ms var(--ease-set),color 200ms var(--ease-set),border-color 200ms var(--ease-set)}
.dinner-row input,.path-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.dinner-row:hover,.path-option:hover{border-color:var(--myrtle)}
.dinner-row:has(input:focus-visible),.path-option:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.dinner-row:has(input:checked),.path-option:has(input:checked){background:var(--myrtle);color:var(--cotton);border-color:var(--myrtle);--muted:var(--mist);--focus:var(--gilt)}
.dinner-row{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);min-height:92px;padding:var(--s4) var(--s5) var(--s4)}
.dinner-row::after,.path-option::after{content:"";position:absolute;top:18px;right:18px;width:10px;height:10px;border:1.5px solid currentColor;transform:rotate(45deg);
  transition:background-color 200ms var(--ease-set),border-color 200ms var(--ease-set)}
.dinner-row:has(input:checked)::after,.path-option:has(input:checked)::after{background:var(--gilt);border-color:var(--gilt)}
.dinner-row .dinner-date{grid-column:1;font-weight:500;font-size:var(--fs-small);line-height:1.4}
.dinner-row .dinner-parasha{grid-column:1 / -1;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2}
.dinner-row .dinner-candles{grid-column:1 / -1;color:var(--muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums lining-nums}
.dinner-row.is-full{cursor:not-allowed;background:var(--linen);border-color:var(--edge);color:var(--sage)}
.dinner-row.is-full::after{border-style:dotted;opacity:.7}
.dinner-row.is-full:hover{border-color:var(--edge)}
.path-choice{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:900px){.path-choice{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path-option{grid-template-columns:1fr;gap:var(--s3);min-height:176px;padding:var(--s5)}
.path-option .candle-pair{margin-bottom:var(--s2)}
.path-option::after{content:none}
.path-title{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.1}
.path-lead{display:block;margin-top:var(--s2);color:var(--muted);font-size:var(--fs-body);line-height:1.5}
.path-option:has(input:checked) .candle{background:var(--gilt);border-color:var(--gilt)}

/* 7 marks ---------------------------------------------------------------- */
/* The state lozenge: a square rotated 45 degrees, 10px (sm 8, lg 16), always followed by a word.
   Ring: open, queued, planned, unlit. Left half Held: doing. Lower half Held: held. Filled: done, sent, measured, lit.
   Claret: failed, blocked. Dotted ring: illustrative. Gilt ring: warm. */
.mark,.candle{--mk:10px;display:inline-block;position:relative;width:var(--mk);height:var(--mk);flex:none;margin:0 calc(var(--mk) * .35);vertical-align:calc(var(--mk) * -.05);
  border:1.5px solid currentColor;background:transparent;transform:rotate(45deg);
  transition:background-color 240ms var(--ease-set),border-color 240ms var(--ease-set),box-shadow 240ms var(--ease-set)}
.mark{margin-right:calc(var(--mk) * .75)}
.mark.sm,.candle.sm{--mk:8px}
.mark.lg,.candle.lg{--mk:16px}
.mark-filled,.mark-done,.mark-sent,.mark-measured{background:currentColor}
.mark-open,.mark-queued,.mark-planned{background:transparent}
.mark-doing{border-color:var(--held);background:linear-gradient(to top right,var(--held) 50%,transparent 50%)}
.mark-blocked,.mark-failed{color:var(--claret);background:var(--claret);border-color:var(--claret)}
.mark-held{border-color:var(--held);background:linear-gradient(to top left,var(--held) 50%,transparent 50%)}
.mark-illustrative{border-style:dotted;background:transparent}
.mark-warm{border-color:var(--gilt-deep)}
.status{display:inline-flex;align-items:center;white-space:nowrap}
.status-blocked,.status-failed{color:var(--claret);font-weight:500}
.status-held{color:var(--held)}
.on-sea .status-held,.on-myrtle .status-held,.face .status-held{color:var(--gilt)}
/* v1 candle markup: the flame and wax are not drawn; the lozenge is the .candle itself */
.candle .flame,.candle .wax,.menorah .light::before{display:none}
.candle[data-state="lit"]{background:var(--myrtle)}
.candle[data-state="unlit"]{background:transparent}
.candle[data-state="warm"]{border-color:var(--gilt-deep)}
.on-sea .candle[data-state="lit"],.on-myrtle .candle[data-state="lit"],.face .candle[data-state="lit"],.candle.on-sea[data-state="lit"]{background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 12px rgba(232,196,128,.5)}
.on-sea .candle[data-state="warm"],.on-myrtle .candle[data-state="warm"],.face .candle[data-state="warm"],.candle.on-sea[data-state="warm"]{border-color:var(--gilt)}
.candle.on-sea,.on-sea .candle{color:var(--mist)}
.candle-pair{display:inline-flex;align-items:center;gap:calc(var(--mk,10px) + 6px)}
.candle-pair .candle{margin:0}
.candle-pair.md-gap{gap:var(--s3)}
/* Chanukah: lozenges 6px, the shamash raised 4px. <span class="menorah" data-state="lit"><span class="light"></span> x lights, <span class="light shamash"></span></span> */
.menorah{display:inline-flex;align-items:center;gap:10px;flex:none}
.menorah .light{display:block;width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);transition:background-color 240ms var(--ease-set),box-shadow 240ms var(--ease-set)}
.menorah .light.shamash{transform:translateY(-4px) rotate(45deg)}
.menorah[data-state="lit"] .light,.menorah .light.is-lit{background:var(--myrtle);border-color:var(--myrtle)}
.on-sea .menorah .light,.menorah.on-sea .light,.on-myrtle .menorah .light,.face .menorah .light{color:var(--mist)}
.on-sea .menorah[data-state="lit"] .light,.on-sea .menorah .light.is-lit,.menorah.on-sea[data-state="lit"] .light,.menorah.on-sea .light.is-lit,.on-myrtle .menorah .light.is-lit,.face .menorah .light.is-lit{background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 10px rgba(232,196,128,.5)}

/* chip: 28px pill, lozenge then word */
.chip{display:inline-flex;align-items:center;min-height:28px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--linen);color:var(--myrtle);
  font-size:var(--fs-small);font-weight:500;line-height:1;white-space:nowrap;transition:background-color 160ms var(--ease-set),color 160ms var(--ease-set)}
.on-sea .chip,.on-myrtle .chip,.face .chip{background:var(--myrtle-lit);color:var(--cotton)}
.chip-failed,.chip-blocked{background:var(--claret-wash);color:var(--claret)}
.chip-held{color:var(--held)}

/* 8 seal, wordmark, lockup -------------------------------------------------- */
/* Seal: outlined artwork from site/static/brand (partials seal, seal-small, seal-foil), currentColor strokes, aria-hidden.
   Size it with --seal (default 72px). .seal-blind presses it into a dark face; .seal-foil is the gradient version; .seal-ink is #000. */
.seal{--seal:72px;display:block;width:var(--seal);height:var(--seal);flex:none;overflow:visible;color:var(--myrtle)}
.seal .seal-glyphs{fill:currentColor;stroke:none}
.seal .seal-inner{stroke-width:1}
.on-sea .seal,.on-myrtle .seal,.face .seal{color:var(--gilt)}
.seal-blind{color:var(--myrtle-lit)!important;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.07)) drop-shadow(0 -1.5px 0 rgba(0,0,0,.3))}
.plate .seal,.funnel-summary .seal,.deck-seal{color:var(--myrtle-lit);filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.07)) drop-shadow(0 -1.5px 0 rgba(0,0,0,.3))}
.seal-ink{color:#000!important}
.seal-cotton{color:var(--cotton)!important}
.seal-foil .seal-lines polygon{stroke:url(#fr-foil)}
.seal-foil .seal-glyphs{fill:url(#fr-foil)}
/* wordmark: outlined "Fridays"; the dotless i carries a lozenge (--wm-tittle: Gilt-deep on light, Gilt on dark) */
.wordmark-svg{display:block;height:28px;width:auto;color:inherit;overflow:visible}
.on-sea,.on-myrtle,.face{--wm-tittle:var(--gilt)}
.lockup{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.lockup:hover{text-decoration:none}
.lockup .seal{--seal:32px}
.lockup-stacked{flex-direction:column;gap:0;text-align:center}
.lockup-stacked .seal{--seal:72px;margin-bottom:16px}
.lockup-stacked .wordmark-svg{height:48px}
.lockup-stacked .tagline{display:block;margin-top:12px;font-size:17px;line-height:1.4;color:var(--sage)}
.on-sea .lockup-stacked .tagline,.on-myrtle .lockup-stacked .tagline,.face .lockup-stacked .tagline{color:var(--mist)}
@media (max-width:599px){.lockup .wordmark-svg{height:24px}.lockup .seal{--seal:28px}.lockup-stacked .seal{--seal:72px}.lockup-stacked .wordmark-svg{height:44px}}
/* wordmark as live text, for places that cannot hold the svg (e.g. the press sheet head) */
.wordmark{display:inline-block;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1;letter-spacing:.015em;white-space:nowrap;color:inherit;text-decoration:none}
.wm-i{position:relative;display:inline-block;line-height:1}
.wm-i::after{content:"";position:absolute;left:50%;bottom:.665em;width:.13em;height:.13em;margin-left:-.065em;background:var(--gilt-deep);transform:rotate(45deg)}
.on-sea .wm-i::after,.on-myrtle .wm-i::after,.face .wm-i::after{background:var(--gilt)}

/* 9 faces, bands, photo slots ------------------------------------------------ */
/* A face is dark stock set into the page: Myrtle, a soft lamp at the top, grain, an optional gilt frame.
   One large framed face per viewport at most. Small faces (tiles, summaries) take grain only: .face-small.
   --lamp-on (0 to 1) is how much lamplight shows; motion.js moves it. --lamp-x moves the light left and right. */
.face{position:relative;isolation:isolate;margin-inline:var(--face-inset);border-radius:var(--r-face);background:var(--myrtle);color:var(--cotton);
  overflow:hidden;box-shadow:var(--elev-2);--lamp-on:1;--fr:14px;--focus:var(--gilt);--muted:var(--mist);--line:rgba(185,199,189,.28);--line-strong:var(--mist)}
.face::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--lamp-on);
  background:radial-gradient(60% 55% at var(--lamp-x,78%) 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.face::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.10;mix-blend-mode:overlay}
.face a{color:var(--cotton)}
.face-small{margin-inline:0;box-shadow:none}
.face-small::before{opacity:.6}
.face-framed{outline:1px solid rgba(209,176,112,.55);outline-offset:calc(var(--fr) * -1)}
.face-framed::after{outline:1px solid rgba(209,176,112,.22);outline-offset:calc(var(--fr) * -1 - 6px)}
@media (max-width:599px){.face{--fr:8px}}
.face-flush{margin-inline:0}
/* "The card is set" (home, once per session; motion.js cardSet): the seal draws, the glyphs fade in, the lamp rises. Text is readable throughout. */
.face[data-set]{transition:--lamp-on 1200ms var(--ease-ink) 600ms}
.face.is-setting{--lamp-on:.4}
.face.is-setting.is-set{--lamp-on:1}
.face.is-setting .seal polygon{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease-ink)}
.face.is-setting.is-set .seal polygon{stroke-dashoffset:0}
.face.is-setting .seal .seal-glyphs{opacity:0;transition:opacity 500ms var(--ease-ink) 700ms}
.face.is-setting.is-set .seal .seal-glyphs{opacity:1}
/* scroll stages drive lamplight only */
.face[data-scroll-stage]{--lamp-on:calc(1 - var(--stage-i,0) * .12)}
/* Linen band: paper stock with a trace of grain (never behind forms or the dashboard) */
.band-linen{position:relative;isolation:isolate;background:var(--linen);padding-block:var(--s9)}
.band-linen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.05;mix-blend-mode:multiply}
@media (max-width:599px){.band-linen{padding-block:var(--s8)}}
/* paper: a sheet or a photo mount */
.paper{background:var(--white);border-radius:var(--r-print);box-shadow:var(--elev-1)}
/* photo slot: real photographs from site/static/photos/ when they exist, a blind plate when they do not.
   <figure class="photo photo-4x5"><img src="/static/photos/home.jpg" alt="..." width="1200" height="1500"><figcaption>...</figcaption></figure>
   <div class="plate photo-4x5" role="img" aria-label="..."> .plate-seal .plate-he .plate-en </div> */
.photo{background:var(--white);padding:8px;border-radius:var(--r-print);box-shadow:var(--elev-1)}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);aspect-ratio:var(--ratio,3 / 2)}
.photo figcaption{padding:var(--s3) 4px 4px;color:var(--sage);font-size:var(--fs-small);line-height:1.4}
.photo-4x5{--ratio:4 / 5}.photo-3x2{--ratio:3 / 2}.photo-1x1{--ratio:1 / 1}
.plate{position:relative;isolation:isolate;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s1);aspect-ratio:var(--ratio,3 / 2);
  padding:var(--s5) var(--s5) var(--s6);border-radius:var(--r-face);background:var(--myrtle);color:var(--cotton);text-align:center;overflow:hidden;--focus:var(--gilt);--muted:var(--mist)}
.plate::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 55% at 78% 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.plate::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.10;mix-blend-mode:overlay}
.plate .seal{position:absolute;left:50%;top:40%;translate:-50% -50%;--seal:56cqmin;z-index:-1}
.plate-he{font-family:var(--font-he);font-size:clamp(2.25rem,12cqw,var(--fs-he-display));line-height:1.1;color:var(--gilt)}
.plate-en{color:var(--mist);font-size:var(--fs-body)}
.photo .plate{border-radius:var(--r-print)}
.photo-4x5.plate{aspect-ratio:4 / 5}

/* scene: the art-directed stand-in for a photograph, drawn in light only (no objects, no clip-art): a candle's glow, warm bokeh at several depths,
   a linen table catching the light across the bottom, grain and a vignette. It fills its container: <div class="scene-bg" aria-hidden="true"></div>
   inside a .face (behind the text), or give any box the class .scene. Move the light with --sx and --sy. When site/static/photos/<key>.jpg exists the
   template draws <img class="scene-photo"> inside the same wrapper and the scene is only the colour behind it. A shade keeps text at 4.5:1 either way. */
.scene,.scene-bg{--sx:64%;--sy:44%;background:#10241C}
.scene-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scene{position:relative;isolation:isolate;overflow:hidden}
.scene::before,.scene-bg::before{content:"";position:absolute;inset:-14px;z-index:0;filter:blur(1.6px);
  background:
    radial-gradient(26% 34% at var(--sx) var(--sy),rgba(255,222,160,.62),rgba(236,176,96,.22) 46%,transparent 74%),
    radial-gradient(circle at calc(var(--sx) - 21%) calc(var(--sy) - 17%),rgba(240,200,130,.30) 0 2.3%,rgba(240,200,130,.05) 2.7%,transparent 3%),
    radial-gradient(circle at calc(var(--sx) + 17%) calc(var(--sy) - 22%),rgba(240,200,130,.26) 0 1.7%,rgba(240,200,130,.04) 2.1%,transparent 2.4%),
    radial-gradient(circle at calc(var(--sx) + 27%) calc(var(--sy) + 4%),rgba(240,200,130,.22) 0 3%,rgba(240,200,130,.04) 3.4%,transparent 3.7%),
    radial-gradient(circle at calc(var(--sx) - 33%) calc(var(--sy) + 9%),rgba(240,200,130,.20) 0 1.5%,rgba(240,200,130,.03) 1.9%,transparent 2.2%),
    radial-gradient(circle at calc(var(--sx) - 8%) calc(var(--sy) - 30%),rgba(240,200,130,.22) 0 1.1%,transparent 1.5%),
    radial-gradient(circle at calc(var(--sx) + 6%) calc(var(--sy) + 18%),rgba(240,200,130,.16) 0 2%,transparent 2.4%),
    radial-gradient(ellipse 30% 8% at calc(var(--sx) - 12%) 80%,rgba(214,170,104,.24),transparent 70%),
    radial-gradient(ellipse 22% 7% at calc(var(--sx) + 14%) 84%,rgba(214,170,104,.20),transparent 70%),
    linear-gradient(180deg,transparent 0 66%,rgba(236,222,190,.10) 66.5%,rgba(236,222,190,.22) 100%),
    radial-gradient(120% 90% at 50% 0,#1E3C30,#10241C 72%)}
.scene::after,.scene-bg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grain);opacity:.12;mix-blend-mode:overlay;
  box-shadow:inset 0 0 160px rgba(6,16,12,.55)}
.scene-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.scene-bg:has(.scene-photo)::after{z-index:3}
/* the shade that keeps type legible over a real photograph or a bright flame */
.scene-bg > .scene-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(16,36,28,.62),rgba(16,36,28,.38) 38%,rgba(16,36,28,.80))}
@media (prefers-reduced-motion:no-preference){
  .scene-bg::before,.scene::before{animation:fr-flicker 7s ease-in-out infinite alternate}
}
@keyframes fr-flicker{from{opacity:.94}to{opacity:1}}

/* host card: a portrait slot (photo, or an art-directed scene with the initial), the name, two lines, one way to write */
.host-card{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s6);align-items:start}
.host-portrait{margin:0}
.host-portrait img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-face);box-shadow:var(--elev-1)}
.host-scene{--sx:60%;--sy:40%;display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 5;border-radius:var(--r-face);box-shadow:var(--elev-1)}
.host-initial{position:relative;z-index:2;font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--gilt)}
.host-name{margin-top:var(--s2);font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1}
.host-bio{margin-top:var(--s3);max-width:44ch;font-size:var(--fs-ui);line-height:1.55}
.host-contact{margin-top:var(--s4)}
@media (max-width:599px){.host-card{grid-template-columns:7rem minmax(0,1fr);gap:var(--s4)}.host-initial{font-size:3.5rem}.host-name{font-size:1.75rem}}

/* 10 header and footer ----------------------------------------------------- */
.site-header{background:var(--cotton)}
.header-inner{width:min(100% - 2 * var(--margin),var(--max));margin-inline:auto;min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.site-nav ul{display:flex;align-items:center;gap:var(--s6)}
.site-nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none}
.site-nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.site-nav a[aria-current]:not(.btn){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.site-nav .btn{min-height:40px;color:var(--myrtle)}
.site-nav .btn:hover{color:var(--myrtle)}
@media (max-width:599px){
  .header-inner{flex-wrap:wrap;gap:0;min-height:0}
  .header-inner .lockup{height:60px}
  .site-nav{width:100%}
  .site-nav ul{gap:var(--s5);height:44px;margin-bottom:var(--s1)}
  .site-nav .nav-ask{display:none}
}

.site-footer{--sea-now:var(--myrtle-deep);position:relative;isolation:isolate;background:var(--myrtle-deep);color:var(--cotton);padding:var(--s8) 0 var(--s7);text-align:center}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.10;mix-blend-mode:overlay}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.footer-grid{display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.footer-line{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.2;max-width:42ch}
.footer-notes{color:var(--mist);font-size:var(--fs-small);line-height:1.5}
.footer-notes p + p{margin-top:var(--s1)}
.footer-notes a{color:var(--cotton)}
.footer-shalom{font-family:var(--font-he);font-weight:400;font-size:var(--fs-h2);line-height:1.1;color:var(--mist)}
.site-footer .rail-wrap{width:auto}

/* 11 season calendar ------------------------------------------------------- */
/* ol.rail > li.rail-item[data-friday][data-state] > a.rail-link: a Friday card. motion.js markRail() sets data-state to
   past | tonight (the next Friday: a small face) | upcoming from the Los Angeles clock. No JS: all upcoming.
   Compact inside .site-footer, .deck-ui and .rail-compact: ten lozenges 14px apart. */
.rail-wrap{width:100%}
.rail{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:600px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rail{grid-template-columns:repeat(5,minmax(0,1fr))}}
.rail-item{min-width:0;display:flex}
.rail-link{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-height:208px;padding:0 20px 20px;border-radius:var(--r-face);
  background:var(--cotton);color:var(--myrtle);text-decoration:none;overflow:hidden}
.rail-link:hover{text-decoration:none}
.rail-link::before{content:"";position:absolute;left:0;right:0;top:40px;height:1px;background:var(--edge);transition:background-color 160ms var(--ease-set)}
.rail-link:hover::before{background:var(--myrtle)}
.rail-kicker{display:flex;align-items:center;height:40px;font-size:var(--fs-small);font-weight:500;color:var(--sage)}
.rail-stage{position:absolute;top:0;right:20px;height:40px;display:flex;align-items:center;gap:var(--s3)}
.rail-stage .menorah{gap:6px;margin-right:2px}
.rail-stage .menorah .light{width:5px;height:5px}
.rail-stage .candle{--mk:9px;color:var(--sage)}
.rail-label{display:flex;flex-direction:column;margin-top:var(--s4);min-width:0}
.rail-date{font-family:var(--font-display);font-size:2.25rem;line-height:1.1;white-space:nowrap}
.rail-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);margin-top:var(--s1);font-family:var(--font-display);font-size:1.5rem;line-height:1.25}
.rail-en{overflow-wrap:anywhere}
.rail-he{font-family:var(--font-he);font-size:1.5rem;line-height:1.25;color:inherit}
.rail-holiday{margin-top:var(--s1);font-size:var(--fs-small);color:var(--sage);line-height:1.3}
.rail-tag{display:block;margin-top:var(--s1);font-size:var(--fs-small);font-weight:500;line-height:1.3}
.rail-tag:empty{display:none}
.rail-daylight{display:block;height:2px;margin-top:auto;width:calc(var(--m,100) / 120 * 100%);background:var(--gilt-deep)}
.rail-candles{display:block;margin-top:var(--s3);font-size:var(--fs-small);font-variant-numeric:tabular-nums lining-nums;line-height:1.3}
.rail-label + .rail-daylight{margin-top:var(--s5)}
.rail-link .rail-label{flex:1 0 auto}
.rail-link .rail-label ~ .rail-daylight{margin-top:var(--s4)}
.rail-note{margin-top:var(--s4);color:var(--muted);font-size:var(--fs-small)}
/* next Friday: a small face */
.rail-item[data-state="tonight"] .rail-link{background:var(--myrtle);color:var(--cotton);box-shadow:var(--elev-2);
  background-image:radial-gradient(60% 55% at 78% 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.rail-item[data-state="tonight"] .rail-link::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.10;mix-blend-mode:overlay;pointer-events:none}
.rail-item[data-state="tonight"] .rail-link::before{background:rgba(185,199,189,.28)}
.rail-item[data-state="tonight"] .rail-link:hover::before{background:var(--gilt)}
.rail-item[data-state="tonight"] .rail-kicker,.rail-item[data-state="tonight"] .rail-holiday{color:var(--mist)}
.rail-item[data-state="tonight"] .rail-tag{color:var(--gilt)}
.rail-item[data-state="tonight"] .rail-daylight{background:var(--gilt)}
.rail-item[data-state="tonight"] .rail-link:focus-visible{outline-color:var(--myrtle)}
.rail-item[data-state="tonight"] .rail-stage .candle{color:var(--gilt);background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 12px rgba(232,196,128,.5)}
.rail-item[data-state="tonight"] .rail-stage .menorah .light{color:var(--mist)}
.rail-item[data-state="tonight"] .rail-stage .menorah .light.is-lit,.rail-item[data-state="tonight"] .rail-stage .menorah .light{border-color:var(--gilt);background:var(--gilt)}
/* past: Sage text, an Edge daylight rule, "Passed" */
.rail-item[data-state="past"] .rail-link{color:var(--sage)}
.rail-item[data-state="past"] .rail-daylight{background:var(--edge)}
.rail-item[data-state="past"] .rail-stage .candle{background:var(--sage)}
.rail-item[data-state="past"] .rail-stage .menorah .light{background:var(--sage);border-color:var(--sage)}
.rail-item[data-state="upcoming"] .rail-stage .menorah .light{background:transparent}
/* Chanukah Fridays: the lozenges are state-free (they show which night), the name says it */
/* phones: 72px rows */
@media (max-width:599px){
  .rail{gap:var(--s2)}
  .rail-link{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;grid-template-areas:"date name candles";align-items:center;min-height:72px;padding:var(--s3) var(--s4) var(--s3);column-gap:var(--s3)}
  .rail-link::before{display:none}
  .rail-kicker{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .rail-stage{display:none}
  .rail-label{display:contents}
  .rail-date{grid-area:date;font-size:1.5rem}
  .rail-name{grid-area:name;margin-top:0;font-size:1.25rem}
  .rail-he{font-size:1.25rem}
  .rail-holiday,.rail-tag{grid-column:2 / 4;margin-top:0}
  .rail-candles{grid-area:candles;margin-top:0;text-align:right}
  .rail-daylight{position:absolute;left:var(--s4);bottom:0;margin:0!important;width:calc((100% - 2 * var(--s4)) * var(--m,100) / 120)}
  .rail-item[data-state="tonight"] .rail-tag,.rail-item[data-state="past"] .rail-tag{grid-column:2 / 4}
  .rail-date{white-space:nowrap}
}
/* compact: ten lozenges, 14px apart, in the footer, the deck bar and anywhere marked .rail-compact */
:is(.site-footer,.deck-ui,.rail-compact) .rail{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
:is(.site-footer,.deck-ui,.rail-compact) .rail-item{flex:none}
:is(.site-footer,.deck-ui,.rail-compact) .rail-link{display:flex;flex-direction:row;align-items:center;justify-content:center;width:24px;min-height:44px;padding:0;
  background:none!important;box-shadow:none!important;color:var(--mist);overflow:visible;border-radius:0}
:is(.site-footer,.deck-ui,.rail-compact) .rail-link::before,:is(.site-footer,.deck-ui,.rail-compact) .rail-link::after{display:none!important}
:is(.site-footer,.deck-ui,.rail-compact) :is(.rail-kicker,.rail-label,.rail-daylight,.rail-candles,.rail-note,.rail-holiday,.menorah){display:none!important}
:is(.site-footer,.deck-ui,.rail-compact) .rail-stage{position:static;height:auto;display:flex}
:is(.site-footer,.deck-ui,.rail-compact) .rail-stage .candle{--mk:10px;display:block;margin:0;color:var(--mist);background:transparent;border-color:var(--mist);box-shadow:none}
:is(.site-footer,.deck-ui,.rail-compact) .rail-item[data-state="past"] .rail-stage .candle{background:var(--mist);border-color:var(--mist)}
:is(.site-footer,.deck-ui,.rail-compact) .rail-item[data-state="tonight"] .rail-stage .candle{background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 12px rgba(232,196,128,.5)}
:is(.site-footer,.deck-ui,.rail-compact) .rail-item.is-here .rail-link{box-shadow:inset 0 -2px 0 var(--gilt)!important}
:is(.site-footer,.deck-ui,.rail-compact) .rail-link:hover .candle{border-color:var(--cotton)}
:is(.site-footer,.deck-ui,.rail-compact) .rail-link:focus-visible{outline-color:var(--gilt)}
.rail-compact{color:var(--cotton)}
@media (max-width:599px){
  :is(.site-footer,.deck-ui,.rail-compact) .rail-link{display:flex;grid-template-columns:none;min-height:44px;padding:0;width:24px}
  :is(.site-footer,.deck-ui,.rail-compact) .rail-stage{display:flex}
  :is(.site-footer,.deck-ui,.rail-compact) .rail{gap:0}
}

/* 12 content components ---------------------------------------------------- */
/* agenda: time, title, detail. One horizon row: Gilt-deep rules above and below, a lit lozenge, "Candles at 5:44 pm" */
.agenda{display:block}
.agenda > li{display:grid;grid-template-columns:6rem minmax(0,1fr);column-gap:var(--s5);padding-block:var(--s3)}
.agenda-time{font-weight:500;font-variant-numeric:tabular-nums lining-nums;text-align:right;padding-top:.3rem;line-height:1.3}
.agenda-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.2}
.agenda-detail{color:var(--muted);font-size:var(--fs-small);line-height:1.5;margin-top:var(--s1)}
.agenda-owner{color:var(--muted);font-size:var(--fs-small)}
.agenda > li.agenda-horizon{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;margin-block:var(--s3);border-top:1px solid var(--gilt-deep);border-bottom:1px solid var(--gilt-deep)}
.agenda-horizon .candle-pair{gap:0}
.agenda-horizon .candle-pair .candle + .candle{display:none}
.agenda-horizon .candle{background:var(--myrtle)}
.agenda-horizon-text{font-weight:500;line-height:1.2}
.on-sea .agenda > li.agenda-horizon,.deck .agenda > li.agenda-horizon,.face .agenda > li.agenda-horizon{border-color:var(--gilt)}
.on-sea .agenda-horizon .candle,.deck .agenda-horizon .candle,.face .agenda-horizon .candle{background:var(--gilt);border-color:var(--gilt);box-shadow:0 0 12px rgba(232,196,128,.5)}
@media (max-width:599px){.agenda > li{grid-template-columns:4.5rem minmax(0,1fr);column-gap:var(--s3)}}

/* action items: Task, Owner, Due, Status chip. 48px rows. data-label blocks under 600px. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.actions-table,.data-table{width:100%}
.actions-table th,.actions-table td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4) var(--s3) 0;height:48px}
.actions-table thead th{font-size:var(--fs-small);font-weight:500;color:var(--sage);border-bottom:1px solid var(--edge)}
.actions-table tbody tr + tr td,.actions-table tbody tr + tr th{border-top:1px solid var(--edge)}
.actions-table .task{font-weight:500}
.actions-table .why{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-small);margin-top:var(--s1)}
.actions-table td{font-size:var(--fs-small);font-variant-numeric:tabular-nums lining-nums}
.actions-table select{min-height:44px;width:auto;min-width:9rem}
:is(.actions-table,.data-table) .status{min-height:28px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--linen);font-weight:500;line-height:1}
:is(.actions-table,.data-table) .status-blocked,:is(.actions-table,.data-table) .status-failed{background:var(--claret-wash)}
@media (max-width:599px){
  .actions-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .actions-table,.actions-table tbody,.actions-table tr,.actions-table td,.actions-table th{display:block;width:100%;height:auto}
  .actions-table tr{padding:var(--s3) 0}
  .actions-table tr + tr{border-top:1px solid var(--edge)}
  .actions-table tr + tr td,.actions-table tr + tr th{border-top:0!important}
  .actions-table td,.actions-table th{padding:var(--s1) 0}
  .actions-table td[data-label]::before{content:attr(data-label);display:block;color:var(--sage);font-weight:500;font-size:var(--fs-small)}
}

/* proof: rows with Edge rules; the kind chip, the claim in Bellefair, the evidence in Jost, the source in Sage */
.proof > li{padding-block:var(--s5)}
.proof > li + li{border-top:1px solid var(--edge)}
.proof > li:first-child{padding-top:0}
.proof-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.proof-claim{grid-column:2 / 9;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.2}
.proof-evidence{grid-column:2 / 9;margin-top:var(--s2);max-width:var(--measure)}
.proof-source{grid-column:2 / 9;margin-top:var(--s1);color:var(--sage);font-size:var(--fs-small)}
.proof-kind{grid-column:10 / 13;grid-row:1 / span 2;display:flex;align-items:flex-start;padding-top:.15rem}
.proof-kind .status{min-height:28px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--linen);font-size:var(--fs-small);font-weight:500;line-height:1;white-space:normal}
@media (max-width:899px){.proof-claim,.proof-evidence,.proof-source{grid-column:1 / 10}}
@media (max-width:599px){
  .proof-claim,.proof-evidence,.proof-kind,.proof-source{grid-column:1 / -1}
  .proof-kind{grid-row:1;margin-bottom:var(--s3);padding-top:0}
}

/* promise band: Linen, grain, 96px; the headline, the lead, commitments in two columns from 900px */
.promise-band{position:relative;isolation:isolate;background:var(--linen);padding-block:var(--s9)}
.promise-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.05;mix-blend-mode:multiply}
.promise-headline{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.06;max-width:var(--measure-head);text-wrap:balance}
.promise-body{font-size:var(--fs-lead);line-height:1.5;max-width:var(--measure);margin-top:var(--s5)}
.commitments{margin-top:var(--s7);display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:900px){.commitments{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s8)}}
.commitments > li{position:relative;padding:var(--s4) 0 var(--s4) 32px;font-size:var(--fs-body);line-height:1.5;border-top:1px solid var(--edge)}
.commitments > li::before{content:"";position:absolute;left:5px;top:calc(var(--s4) + .55em);width:8px;height:8px;background:var(--gilt-deep);transform:rotate(45deg)}
.commitments > li > .candle{display:none}
@media (max-width:599px){.promise-band{padding-block:var(--s8)}}

/* press release: a White sheet, 68ch */
.release{max-width:68ch;margin-inline:auto;padding:var(--s8);background:var(--white);border-radius:var(--r-print);box-shadow:var(--elev-1)}
@media (max-width:599px){.release{padding:var(--s5)}}
.release-mark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);color:var(--sage);font-size:var(--fs-small);font-weight:500}
.release-mark .wordmark-svg{height:24px;color:var(--myrtle)}
.release-mark .seal{--seal:24px}
.embargo-bar{background:var(--myrtle);color:var(--cotton);font-weight:500;padding:12px 16px;line-height:1.4;border-radius:var(--r-print)}
.embargo-bar .released{display:block;font-weight:400;color:var(--mist)}
.release-headline{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.06;margin-top:var(--s6);text-wrap:balance}
.release-sub{font-size:var(--fs-lead);line-height:1.5;color:var(--sage);margin-top:var(--s3)}
.release-body{margin-top:var(--s6);font-size:var(--fs-body);line-height:1.7}
.release-body p + p{margin-top:1em}
.dateline{font-weight:500;margin-right:.35em}
.release-quote{margin:var(--s6) 0;padding-left:var(--s5);border-left:2px solid var(--gilt-deep);font-family:var(--font-display);font-size:1.75rem;line-height:1.3}
.release-quote cite{display:block;margin-top:var(--s3);font-family:var(--font-text);font-style:normal;font-size:var(--fs-small);font-weight:500;color:var(--sage)}
.release-boiler{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--edge);font-size:var(--fs-small);line-height:1.55;color:var(--sage)}
.release-boiler h3{font-family:var(--font-text);font-size:var(--fs-small);font-weight:500;color:var(--myrtle);margin-bottom:var(--s1)}
.release-boiler p + p,.release-boiler h3 + p{margin-top:0}
.release-boiler section + section{margin-top:var(--s4)}
.release-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}

/* social kit: borderless card, a framed face at the true ratio, the caption, the count */
.social-grid{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s5)}
@media (min-width:600px){.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.social-card{min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.social-art{position:relative;isolation:isolate;container-type:inline-size;width:100%;background:var(--myrtle);color:var(--cotton);overflow:hidden;border-radius:var(--r-face);aspect-ratio:4 / 5;
  --muted:var(--mist);outline:1px solid rgba(209,176,112,.55);outline-offset:-10px}
.social-art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 78% 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.social-art::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.10;mix-blend-mode:overlay;pointer-events:none}
.social-art.ratio-4x5{aspect-ratio:4 / 5}
.social-art.ratio-9x16{aspect-ratio:9 / 16;max-width:240px;margin-inline:auto}
.social-art.ratio-191x100{aspect-ratio:1.91 / 1}
.social-art-sky{display:none}
.social-art-body{position:absolute;inset:0;padding:8cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5cqw;text-align:center}
/* the foil Seal from the brand folder, unless the art carries its own .seal svg */
.social-art-body::before{content:"";display:block;width:30cqw;height:30cqw;margin-bottom:1cqw;background:url("/static/brand/monogram-foil.svg") center / contain no-repeat}
.social-art-body .seal{--seal:30cqw}
.social-art-body .seal ~ *{order:0}
.social-art-body:has(.seal)::before{display:none}
.social-art-he{order:3;font-family:var(--font-he);font-size:11cqw;line-height:1.1;color:var(--gilt)}
.social-art-hour{order:4;font-family:var(--font-text);font-weight:400;font-size:6.2cqw;line-height:1.2;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--cotton)}
.social-art-name{order:1;font-family:var(--font-display);font-size:13cqw;line-height:1;color:var(--cotton)}
.ratio-191x100 .social-art-body{padding:5cqw;gap:1.5cqw}
.ratio-191x100 .social-art-body::before{width:16cqw;height:16cqw;margin-bottom:0}
.ratio-191x100 .social-art-name{font-size:8cqw}
.ratio-191x100 .social-art-he{font-size:6cqw}
.ratio-191x100 .social-art-hour{font-size:3.4cqw}
/* the tile: a partner's place card for social. The partner is the headline; the wordmark and the seal only sign it. It fills the frame top to bottom at every ratio. */
.social-art .scene-bg{--sx:70%;--sy:30%}
.social-art.ratio-9x16 .scene-bg{--sx:62%;--sy:36%}
.social-art-body.tile{padding:7cqw 8cqw 7cqw;align-items:stretch;justify-content:space-between;gap:3cqw;text-align:left}
.social-art-body.tile::before{display:none}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:3cqw;color:var(--cotton)}
.tile-wm .wordmark-svg{display:block;height:7cqw;width:auto}
.tile-n{font-size:3.6cqw;line-height:1.2;color:var(--mist);white-space:nowrap}
.tile-mid{display:flex;flex-direction:column;gap:2cqw}
.tile-given{font-size:4.2cqw;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.tile-who{font-family:var(--font-display);font-size:12.5cqw;line-height:1.02;color:var(--cotton);text-wrap:balance;overflow-wrap:anywhere}
.tile-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.5cqw 4cqw;font-size:4.6cqw;line-height:1.25;color:var(--cotton)}
.tile-he{font-family:var(--font-he);font-size:8cqw;line-height:1;color:var(--gilt)}
.tile-hour{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding-top:3cqw;border-top:1px solid rgba(209,176,112,.4);font-size:3.6cqw;color:var(--mist)}
.tile-seal .seal{--seal:7cqw;color:var(--gilt)}
.social-art.ratio-9x16 .tile-mid{flex:1;justify-content:center}
.social-art.ratio-9x16 .tile-who{font-size:14cqw}
.social-art.ratio-9x16 .tile-given{font-size:5cqw}
.social-art.ratio-9x16 .tile-meta{font-size:6cqw;flex-direction:column;align-items:flex-start}
.social-art.ratio-9x16 .tile-he{font-size:11cqw}
.social-art.ratio-4x5 .tile-mid{flex:1;justify-content:center}
.social-art.ratio-191x100 .social-art-body.tile{padding:4.5cqw 5cqw;gap:1.5cqw}
.social-art.ratio-191x100 .tile-wm .wordmark-svg{height:4.5cqw}
.social-art.ratio-191x100 .tile-n{font-size:2.2cqw}
.social-art.ratio-191x100 .tile-given{font-size:2.2cqw}
.social-art.ratio-191x100 .tile-who{font-size:6.4cqw}
.social-art.ratio-191x100 .tile-meta{font-size:2.6cqw}
.social-art.ratio-191x100 .tile-he{font-size:4cqw}
.social-art.ratio-191x100 .tile-foot{padding-top:1.5cqw;font-size:2.1cqw}
.social-art.ratio-191x100 .tile-seal .seal{--seal:4cqw}
.social-art.ratio-191x100 .tile-mid{flex:1;justify-content:center}
.social-channel{font-family:var(--font-text);font-size:var(--fs-body);font-weight:500;line-height:1.3}
.social-caption{white-space:pre-wrap;font-size:var(--fs-small);line-height:1.5}
.social-count,.social-alt{color:var(--sage);font-size:var(--fs-small);line-height:1.5}
.social-card .btn{align-self:flex-start;margin-top:auto}

/* 13 funnel ---------------------------------------------------------------- */
/* A concierge intake in a 640px column. #funnel-sky is the track (a 2px line, its Myrtle fill grows to the current step);
   #funnel-steps hangs four lozenges on it; .funnel-sun is the Gilt-deep lozenge at the end of the fill, inside the current step's ring.
   apply.js sets --funnel-p = (N - 1 - i) / (N - 1) on the track (1 at the first step, 0 at the last): the fill is scaleX(1 - p). */
.funnel{--n:4;max-width:640px;margin-inline:auto;width:min(100% - 2 * var(--margin),640px)}
.funnel:has(.funnel-steps > li:nth-child(3):last-child){--n:3}
.funnel:has(.funnel-steps > li:nth-child(5)){--n:5}
.funnel-sky{--funnel-p:1;position:relative;height:20px;margin-inline:calc(50% / var(--n));overflow:visible;background:none}
.funnel-sky::before,.funnel-sky::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px}
.funnel-sky::before{background:var(--edge)}
.funnel-sky::after{background:var(--myrtle);transform-origin:0 50%;transform:scaleX(calc(1 - var(--funnel-p)));transition:transform 320ms var(--ease-set)}
.funnel-sky .sky-layer{display:none}
.funnel-sun{position:absolute;z-index:2;top:50%;left:calc((1 - var(--funnel-p)) * 100%);width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gilt-deep);transform:rotate(45deg);
  transition:left 240ms var(--ease-set) 320ms}
.funnel-sky.is-setting .funnel-sun{animation:fr-stamp 260ms var(--ease-press) both}
.funnel-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:-20px}
.funnel-steps li{position:relative;padding-top:30px;text-align:center;font-size:var(--fs-small);line-height:1.35;color:var(--sage);min-width:0}
.funnel-steps li::before{content:"";position:absolute;left:50%;top:10px;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--cotton);border:1.5px solid var(--sage);transform:rotate(45deg);
  transition:background-color 240ms var(--ease-set),border-color 240ms var(--ease-set),width 240ms var(--ease-set),height 240ms var(--ease-set),margin 240ms var(--ease-set)}
.funnel-steps li.is-done{color:var(--myrtle)}
.funnel-steps li.is-done::before{background:var(--myrtle);border-color:var(--myrtle)}
.funnel-steps li[aria-current="step"]{color:var(--myrtle);font-weight:500}
.funnel-steps li[aria-current="step"]::before{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--cotton);border-color:var(--myrtle)}
.funnel-steps .step-name{display:block}
.funnel-steps button.step-name{width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.funnel-steps button.step-name:hover{text-decoration-thickness:2px}
.funnel-steps .funnel-answer{display:block;margin-top:2px;font-weight:400;color:var(--sage);overflow-wrap:anywhere}
.funnel-count{margin-top:var(--s7);color:var(--sage);font-size:var(--fs-small);font-weight:500}
.funnel-heading{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.06;max-width:var(--measure-head);margin-top:var(--s2);text-wrap:balance}
.funnel-heading:focus{outline:none}
.funnel-heading:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.funnel-panel{margin-top:var(--s6)}
.funnel-lead{color:var(--sage);font-size:var(--fs-lead);line-height:1.5;margin-top:var(--s3);max-width:var(--measure)}
.funnel-actions{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s7)}
.funnel-actions .btn:only-child{margin-left:auto}
.funnel-panel.is-out{opacity:0;transition:opacity 160ms ease-in}
.funnel-panel.is-in-next{animation:fx-in-next 220ms var(--ease-set) both}
.funnel-panel.is-in-prev{animation:fx-in-prev 220ms var(--ease-set) both}
@keyframes fx-in-next{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes fx-in-prev{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes fr-stamp{from{transform:rotate(45deg) scale(1.2)}to{transform:rotate(45deg) scale(1)}}
@media (max-width:599px){
  .funnel-steps li{padding-top:30px}
  .funnel-steps .step-name,.funnel-steps .funnel-answer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .funnel-steps button.step-name{position:absolute;inset:0;width:100%;height:44px;clip:auto;overflow:hidden;font-size:0;top:0}
  .funnel-count{margin-top:var(--s5)}
}
/* "Your request": a small face that fills as the person answers (apply.js writes the rows) */
.funnel-summary{position:relative;isolation:isolate;padding:var(--s6) var(--s5);border-radius:var(--r-face);background:var(--myrtle);color:var(--cotton);overflow:hidden;--muted:var(--mist);--focus:var(--gilt)}
.funnel-summary::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 78% 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.funnel-summary::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.10;mix-blend-mode:overlay;pointer-events:none}
.funnel-summary h2,.funnel-summary h3{font-size:var(--fs-h3);line-height:1.2}
.funnel-summary .seal{--seal:96px;margin:var(--s4) auto}
.funnel-summary dl > div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
.funnel-summary dt{color:var(--mist);font-size:var(--fs-small)}
.funnel-summary dd{margin:0;overflow-wrap:anywhere}
.funnel-summary dd.is-changed{animation:fr-flash 600ms var(--ease-set)}
@keyframes fr-flash{from{background-color:rgba(209,176,112,.18)}to{background-color:transparent}}
.review{border-top:1px solid var(--edge)}
.review > div{display:grid;grid-template-columns:minmax(7rem,1fr) 2fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--edge)}
.review dt{color:var(--sage);font-size:var(--fs-small);font-weight:500}
.review dd{margin:0}
/* timeline: lozenge-led */
.timeline{display:block}
.timeline > li{position:relative;display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--s5);padding:var(--s4) 0 var(--s4) 28px}
.timeline > li + li{border-top:1px solid var(--edge)}
.timeline > li::before{content:"";position:absolute;left:4px;top:calc(var(--s4) + .6em);width:8px;height:8px;background:var(--gilt-deep);transform:rotate(45deg)}
.timeline-when{font-weight:500;font-variant-numeric:tabular-nums lining-nums}
@media (max-width:599px){.timeline > li{grid-template-columns:1fr;gap:var(--s1)}}
.steps{counter-reset:step}
.steps > li{counter-increment:step;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0}
.steps > li + li{border-top:1px solid var(--edge)}
.steps > li::before{content:counter(step);font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1;font-variant-numeric:lining-nums;color:var(--gilt-deep)}
/* RSVP response: the address opens with grid-template-rows 0fr to 1fr */
.opens{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms var(--ease-set)}
.opens > div{overflow:hidden;min-height:0}
.opens.is-open{grid-template-rows:1fr}

/* 14 dashboard ------------------------------------------------------------- */
/* Cotton, no grain, no faces. Consistent table type, chips, a calm summary panel. */
.status-sentence{font-size:var(--fs-lead);line-height:1.5;max-width:var(--measure)}
.stat-row{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--s6);padding:var(--s5);background:var(--linen);border-radius:var(--r-face)}
.stat-row > *{flex:1 1 7rem;padding:0 var(--s5);min-width:0}
.stat-row > * + *{border-left:1px solid var(--edge)}
.stat-row > :first-child{padding-left:0}
.stat-row > :last-child{padding-right:0}
.stat-num{display:block;font-family:var(--font-text);font-weight:400;font-size:var(--fs-figure);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.stat-label{display:block;color:var(--sage);font-size:var(--fs-small);margin-top:var(--s2)}
.is-zero .stat-num,.stat-num.is-zero{color:var(--sage)}
.is-alert .stat-num,.stat-num.is-alert{color:var(--claret)}
@media (max-width:599px){.stat-row > *{flex-basis:45%;padding:var(--s2) var(--s3)}.stat-row > *:nth-child(odd){border-left:0;padding-left:0}}
.data-table{font-size:var(--fs-small);font-variant-numeric:tabular-nums lining-nums}
.data-table th{position:sticky;top:0;z-index:1;background:var(--linen);font-weight:500;text-align:left;white-space:nowrap;color:var(--myrtle)}
.data-table th,.data-table td{height:48px;padding:var(--s2) var(--s4);vertical-align:middle}
.data-table td{border-bottom:1px solid var(--edge)}
.data-table tbody tr:hover td{background:#F2F1EC}
.data-table .num,.data-table th.num{text-align:right}
.data-table-title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.2;margin-bottom:var(--s3)}
.needs-you{margin-top:var(--s8)}
@keyframes fr-wash{from{background-color:var(--linen)}to{background-color:transparent}}
.is-changed-row,.data-table tr.is-changed td{animation:fr-wash 900ms var(--ease-set)}

/* 15 flash ----------------------------------------------------------------- */
.flash{display:flex;align-items:flex-start;gap:var(--s3);max-width:var(--measure);padding:14px 18px;border-radius:var(--r-control);color:var(--myrtle);line-height:1.5}
.flash-ok{background:var(--linen)}
.flash-ok .candle,.flash-ok .candle-pair{margin-top:7px}
.flash-error{background:var(--claret-wash);border:1px solid var(--claret);color:var(--myrtle)}
.flash-error p:first-child{font-weight:500;color:var(--claret)}
.flash-body{min-width:0}
.flash-list{margin-top:var(--s2)}
.flash-list a{font-weight:500;color:var(--claret)}
.flash-wrap{width:min(100% - 2 * var(--margin),var(--max));margin:var(--s5) auto 0}

/* 16 deck (present) -------------------------------------------------------- */
/* <main class="deck" data-friday="03" [data-night="1|8"]> <section class="slide" data-kind data-duration> ... </section></main>
   motion.js builds .deck-bg (the face: Myrtle, lamplight, grain, a blind Seal) and .deck-ui (rail, dots, count, pause) when the page has none.
   "The press": the blind Seal presses in, the title arrives, the ground warms from Myrtle-deep to Myrtle, the lamp comes up. */
@property --lamp-on{syntax:"<number>";inherits:true;initial-value:1}
@property --lamp-x{syntax:"<percentage>";inherits:true;initial-value:78%}
html.has-deck,html.has-deck body{height:100%;overflow:hidden;background:var(--myrtle-deep)}
.deck-bg{position:fixed;inset:0;z-index:0;isolation:isolate;overflow:hidden;background:var(--myrtle);--lamp-on:1;--lamp-x:78%;
  transition:background-color 800ms var(--ease-ink),--lamp-on 800ms var(--ease-ink),--lamp-x 600ms var(--ease-ink)}
.deck-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--lamp-on);
  background: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::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.10;mix-blend-mode:overlay}
.deck-bg.is-opening{background-color:var(--myrtle-deep);--lamp-on:0}
.deck-bg.no-trans,.deck-bg.no-trans *{transition:none!important}
.deck-seal{position:absolute;left:50%;top:50%;--seal:min(70vh,92vw);translate:-50% -50%;scale:1;color:var(--myrtle-lit);
  filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.07)) drop-shadow(0 -1.5px 0 rgba(0,0,0,.3));
  transition:scale 500ms var(--ease-press),opacity 500ms var(--ease-press),filter 500ms var(--ease-press)}
.deck-bg.is-pre .deck-seal{scale:1.03;opacity:0;filter:drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(0,0,0,0))}
.deck-bg.is-pre .deck-seal .seal-glyphs{opacity:0}
.deck-seal .seal-glyphs{transition:opacity 500ms var(--ease-ink) 200ms}
.deck-menorah{position:absolute;left:50%;bottom:calc(var(--s9) + var(--s6));translate:-50% 0;transition:opacity 280ms var(--ease-set)}
.deck-menorah .light{width:8px;height:8px}
.deck-bg:not([data-kind="title"]):not([data-kind="close"]) .deck-menorah{opacity:0}
html.vertical .deck-menorah{bottom:240px}
html.vertical .deck-menorah .light{width:12px;height:12px}
html.vertical .deck-menorah{gap:16px}
.deck{position:fixed;inset:0;z-index:3;padding:0;container-type:size;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior:contain;
  background:var(--myrtle);color:var(--cotton);--focus:var(--gilt);--muted:var(--mist);--line:rgba(185,199,189,.28);--line-strong:var(--mist)}
html.has-deck .deck{background:transparent}
.slide{position:relative;height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:var(--s8) var(--margin) 104px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.slide > *{width:min(100%,var(--max));margin-inline:auto}
.has-deck .slide > *{opacity:0;transition:opacity 240ms var(--ease-set)}
.has-deck .slide.is-active > *{opacity:1}
/* the title arrives in sequence during the press: motion.js tags the first slide's items .seq-item with --seq */
html.deck-opening .slide .seq-item:not(.is-in){opacity:0!important}
.seq-item.is-in{transition:opacity 240ms var(--ease-set) calc(var(--seq,0) * 80ms)}
.deck-sweep{background:linear-gradient(100deg,var(--gilt) 42%,#F6E7BC 50%,var(--gilt) 58%) 100% 0 / 260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent!important;
  transition:background-position 800ms var(--ease-ink)}
.deck-sweep.is-swept{background-position:0% 0}
[data-shalom]{color:var(--mist);transition:opacity 350ms linear}
html.deck-opening [data-shalom]{opacity:0}
.deck:focus-visible{outline-offset:-4px}
.deck-ui{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:var(--s2) var(--margin) var(--s3);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:var(--s4);color:var(--cotton);--focus:var(--gilt)}
.deck-ui .rail-wrap{grid-column:1;align-self:end;max-width:260px}
.deck-ui .rail{justify-content:flex-start}
.deck-progress{grid-column:2;display:flex;align-items:center;gap:var(--s3)}
.deck-dots{display:flex;flex-wrap:wrap;justify-content:center;max-width:min(60vw,420px)}
.deck-dots button{position:relative;display:block;width:24px;height:44px;padding:0;border:0;background:transparent;color:var(--mist)}
.deck-dots button::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border:1px solid var(--mist);transform:rotate(45deg);transition:background-color 160ms var(--ease-set),border-color 160ms var(--ease-set)}
.deck-dots button[aria-current="true"]::before{background:var(--gilt);border-color:var(--gilt)}
.deck-count{font-size:var(--fs-small);font-weight:500;color:var(--mist);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.deck-tools{grid-column:3;justify-self:end;display:flex;gap:var(--s2);align-items:center}
.deck-pause[hidden]{display:none}
html:not(.autoplay) .deck-pause{display:none}
@media (max-width:699px){
  .deck-ui{grid-template-columns:1fr;justify-items:center;gap:0;padding-bottom:var(--s2)}
  .deck-ui .rail-wrap{grid-column:1;width:100%;max-width:none}
  .deck-ui .rail{justify-content:center}
  .deck-progress{grid-column:1}
  .deck-tools{grid-column:1;justify-self:center}
  .slide{padding-bottom:124px}
  .deck-dots{max-width:94vw}
}
@media (max-height:520px){.deck-ui .rail-wrap{display:none}}

/* 17 v1 hero compatibility ---------------------------------------------------- */
/* Pages written against v1 drew a sky. Nothing is drawn now: the sky layers are hidden and the hero panel is a face. */
.sky-wrap,.sky{display:none}
.hero{position:relative}
.hero-panel{position:relative;isolation:isolate;margin-inline:var(--face-inset);border-radius:var(--r-face);background:var(--myrtle);color:var(--cotton);padding-block:var(--s8);box-shadow:var(--elev-2);overflow:hidden;--muted:var(--mist);--focus:var(--gilt)}
.hero-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 78% 0,var(--lamp),transparent 70%),radial-gradient(120% 90% at 50% 0,var(--myrtle-lit),var(--myrtle) 70%)}
.hero-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.10;mix-blend-mode:overlay;pointer-events:none}
.hero-hour{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display);line-height:1.02;margin:0}
.hero-date{color:var(--mist);font-size:var(--fs-lead);margin-top:var(--s2)}
.hero-parasha{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1;margin-top:var(--s4)}
.hero-he{font-family:var(--font-he);font-size:var(--fs-he-display);line-height:1.1;color:var(--gilt)}
.hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.hero-head .hero-he{margin-left:auto}
.hero-holiday{margin-top:var(--s3);color:var(--mist)}
.shalom{color:var(--mist)}

/* 18 reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .has-deck .slide > *{opacity:1}
}
html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}

/* 19 print ----------------------------------------------------------------- */
/* Run of show: <section class="crew print-program"> head, address, contacts, <table class="runsheet"> Time, Cue, Who, Done.
   "Print run of show" button: <button data-print-runsheet> (motion.js adds html.print-runsheet and calls print()).
   Letter, .5in margins, #000 on #fff, the ink lockup at .35in (.print-lockup), Bellefair head, Jost body. No grain, faces or URLs. */
.print-program{max-width:none}
.print-head{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.15}
.print-meta{margin-top:var(--s3);color:var(--sage)}
.print-lockup{display:none}
.runsheet{width:100%;margin-top:var(--s5)}
.runsheet th,.runsheet td{text-align:left;vertical-align:top;padding:var(--s2) var(--s4) var(--s2) 0;border-bottom:1px solid var(--edge)}
.runsheet th{font-size:var(--fs-small);font-weight:500;background:var(--linen);padding-left:var(--s2)}
.runsheet td:first-child{padding-left:var(--s2)}
.runsheet td:first-child,.runsheet .time{font-weight:500;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.runsheet tr.is-candles td{font-weight:500;border-top:2px solid var(--myrtle)}
.runsheet td.done::after{content:"";display:inline-block;width:14px;height:14px;border:1px solid var(--sage)}
.print-only{display:none}

@page{size:letter;margin:.5in}
@media print{
  html,body{background:#fff!important;color:#000!important;font-family:var(--font-text);font-size:10.5pt;line-height:1.35;overflow:visible!important;height:auto!important}
  *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important}
  *::before,*::after{background:none!important;mix-blend-mode:normal!important;box-shadow:none!important}
  .site-header,.site-footer,.skip-link,.rail,.rail-wrap,.sky,.sky-wrap,.deck-bg,.deck-ui,.hero,.face,.band-linen,.promise-band,.photo,.plate,.sea,.btn,button,.flash,.col-aside,nav,.no-print{display:none!important}
  .print-only{display:block}
  .print-lockup{display:flex!important;align-items:center;gap:.08in;height:.35in;margin-bottom:8pt}
  .print-lockup .seal{--seal:.35in;color:#000!important}
  .print-lockup .wordmark-svg{height:.3in;color:#000!important;--wm-tittle:#000!important}
  .print-lockup .wordmark-svg *{fill:#000!important}
  .wm-i::after{background:#000!important}
  a{text-decoration:none!important}
  a[href]::after{content:none!important}
  main{padding:0}
  .section{padding-top:14pt}
  /* Only the program prints: after "Print run of show" (html.print-runsheet) and always for a crew link, so a plain
     Cmd-P on the crew's page also gives the run sheet. display:none, not visibility:hidden, which leaves blank pages. */
  :is(html.print-runsheet,html:has(main[data-audience="crew"])) :is(.briefing-body > :not(.crew),.briefing-aside,.kitchen-section:not(.crew)){display:none!important}
  :is(html.print-runsheet,html:has(main[data-audience="crew"])) :is(.wrap,.briefing-body){display:block;width:auto;max-width:none;margin:0;padding:0}
  :is(html.print-runsheet,html:has(main[data-audience="crew"])) .crew{padding-top:0!important;margin-top:0!important;width:auto;max-width:none}
  .crew .btn,.crew button{display:none!important}
  .print-meta p{margin:0 0 2pt}
  .crew .print-head,.print-head{font-family:var(--font-display);font-size:16pt;font-weight:400}
  .print-head [lang="he"]{font-family:var(--font-he);font-size:16pt}
  .runsheet{margin-top:10pt;width:100%}
  .runsheet thead{display:table-header-group}
  .runsheet tr{break-inside:avoid}
  .runsheet{font-size:10.5pt;line-height:1.3}
  .runsheet th,.runsheet td{border-bottom:.5pt solid #000;padding:3pt 6pt 3pt 0}
  .runsheet th{border-bottom:1pt solid #000;font-weight:500}
  .runsheet th:nth-child(1){width:.8in}
  .runsheet th:nth-child(3){width:1.6in}
  .runsheet th:nth-child(4){width:.4in}
  .runsheet td.done::after{width:.14in;height:.14in;border:1pt solid #000}
  .runsheet tr.is-candles td{font-weight:700;border-top:1pt solid #000}
  .print-meta{color:#000!important}
}