/* Farewell Service: mourning stationery. A white sheet inside a black edge band, engraved stationer's caps
   for every label, a calm book face for the texts. Half-mourning mauve is spent on one thing only:
   the action that moves a text toward the printed program. */
@font-face{font-family:"Marcellus SC";src:url(/fonts/marcellus-sc-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:optional}
@font-face{font-family:Spectral;src:url(/fonts/spectral-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:optional}
@font-face{font-family:Spectral;src:url(/fonts/spectral-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url(/fonts/spectral-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --edge:#0b0b0b; --paper:#fff; --ink:#121212; --ink-2:#38353a; --muted:#545058; --rule:#d6d3d8; --hair:#121212;
  --mauve:#5d3f6e; --mauve-ink:#fff; --mauve-wash:#f4eff6;
  --caps:"Marcellus SC",Georgia,serif; --book:Spectral,Georgia,"Times New Roman",serif;
  --band:14px; --gut:clamp(16px,4vw,32px); --target:52px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --edge:#fff; --paper:#121113; --ink:#f1eff2; --ink-2:#d2ced5; --muted:#b4afb8; --rule:#3a373d; --hair:#e9e6eb;
  --mauve:#b99ac9; --mauve-ink:#141016; --mauve-wash:#241d28; color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--edge);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 1.3125rem/1.65 var(--book);
  border:var(--band) solid var(--edge);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 0 7px var(--paper),inset 0 0 0 8px var(--edge);
  font-variant-numeric:oldstyle-nums proportional-nums;text-rendering:optimizeLegibility}
::selection{background:var(--mauve);color:var(--mauve-ink)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:20px;background:var(--paper);padding:10px 16px;z-index:9}.skip:focus{left:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@view-transition{navigation:auto}

/* masthead: the engraved name card */
.mast{text-align:center;padding:38px var(--gut) 0}
.mast .name{font:400 1.55rem/1 var(--caps);letter-spacing:.32em;padding-left:.32em;text-decoration:none;display:inline-block}
.mast .sub{font:italic 400 1rem/1.4 var(--book);color:var(--muted);margin:.55rem 0 0}
nav.main{display:flex;justify-content:center;flex-wrap:wrap;gap:0 26px;max-width:1120px;margin:22px auto 0;padding:6px var(--gut);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font:400 .98rem/1 var(--caps);letter-spacing:.13em}
nav.main a{text-decoration:none;padding:12px 0;border-bottom:2px solid transparent}
nav.main a[aria-current]{border-bottom-color:var(--hair)}
nav.main a:hover{border-bottom-color:var(--rule)}
nav.main + main > .wrap{padding-top:40px}
.crumbs{max-width:1120px;margin:24px auto 0;padding:0 var(--gut);font:400 .95rem/1.5 var(--caps);letter-spacing:.11em;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* page: reading column + the program card in the margin */
.wrap{max-width:1120px;margin:0 auto;padding:4px var(--gut) 72px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.col{min-width:0;max-width:44rem}
h1{font:400 clamp(2.3rem,4.4vw,3.5rem)/1.08 var(--book);letter-spacing:-.015em;margin:.45rem 0 .4rem;text-wrap:balance}
.deck{font-style:italic;font-size:1.32rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.15rem;max-width:36em}
.facts{display:flex;flex-wrap:wrap;gap:6px 24px;padding:11px 0;margin:0 0 26px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:400 1rem/1.5 var(--caps);letter-spacing:.1em}
h2.rule{display:flex;align-items:center;gap:16px;font:400 1.02rem/1.25 var(--caps);letter-spacing:.2em;margin:2.9rem 0 1rem}
h2.rule::after{content:"";flex:1;height:1px;background:var(--hair)}
h3{font:600 1.22rem/1.3 var(--book);margin:0}
h3.sub{margin:1.8rem 0 .5rem}
p{margin:0 0 1em}
.meta{font-size:1rem;color:var(--muted);font-weight:400}
.src,.fine,.note{font-size:1.02rem;line-height:1.55;color:var(--muted)}
.fine{margin-top:2.4rem;padding-top:14px;border-top:1px solid var(--rule)}
.note{margin-top:1.6rem}
.basis{font-size:1.04rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.4rem}
.basis b{font:400 .9rem var(--caps);letter-spacing:.12em;color:var(--ink);margin-right:.4em}
.plain{padding-left:1.1em;margin:0}.plain li{margin:.35em 0}
.plain.qs{list-style:none;padding:0}.plain.qs li{border-bottom:1px solid var(--rule);padding:10px 0;margin:0}

/* buttons: the stationer's ruled box; the one mauve action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--target);padding:0 20px;font:600 1.05rem/1.1 var(--book);
  color:var(--ink);background:var(--paper);border:1.5px solid var(--hair);text-decoration:none;cursor:pointer;border-radius:0;
  transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--mauve-wash)}
.btn.add{background:var(--mauve);border-color:var(--mauve);color:var(--mauve-ink)}
.btn.add:hover{filter:brightness(1.12)}
.btn.add.on{background:var(--paper);color:var(--ink);border-color:var(--hair)}
.btn .i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}

/* lists of texts: ruled rows, never boxed */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{padding:20px 0 6px;border-bottom:1px solid var(--rule)}
.row h3 a{text-decoration:none}.row h3 a:hover{text-decoration:underline}
.row .first{margin:.45rem 0 .35rem;font-size:1.12rem;line-height:1.55;color:var(--ink-2)}
.row .why{font-style:italic;font-size:1.02rem;color:var(--muted);margin:0 0 .6rem}
.row .meta{margin:.15rem 0 0}
.row .acts{margin:.6rem 0 14px}
.row .acts .btn{min-height:48px;padding:0 16px;font-size:1rem}
.tiles,.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 32px}
.tiles a,.doors a{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;min-height:var(--target)}
.tiles b,.doors b{font:600 1.15rem/1.3 var(--book)}
.tiles span,.doors span{font:400 .95rem/1.4 var(--caps);letter-spacing:.08em;color:var(--muted)}
.tiles a:hover b,.doors a:hover b{text-decoration:underline}
.doors{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}.doors b{font-size:1.5rem;font-weight:400}.doors span{font:italic 400 1.05rem/1.4 var(--book);letter-spacing:0}

/* texts */
.vv{list-style:none;margin:0;padding:0;max-width:64ch}
.vv li{display:grid;grid-template-columns:2em 1fr;margin:0 0 .5em}
.vn{font:400 .9rem/2 var(--caps);color:var(--muted)}
.poem{max-width:64ch;margin:0 0 1.2rem}
.poem p{margin:0 0 1.15em}
.poem .ind{display:inline-block;width:1.2em}
.poem.prayer p{margin:0 0 .8em}
.poem .lab,.ps .meta{font:400 .9rem var(--caps);letter-spacing:.12em;color:var(--muted)}
.rubric{font-style:italic;font-size:1.05rem;color:var(--muted);margin:0 0 .9em}
.ps{padding:16px 0 4px;border-bottom:1px solid var(--rule)}.ps .first{font-size:1.1rem;color:var(--ink-2)}
.quote{margin:0 0 1.2rem;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote p{font-style:italic;margin:0 0 .5em}.quote footer{font-size:1rem;color:var(--muted)}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:0;font-size:1.08rem}
.dl dt{font:400 .9rem/1.9 var(--caps);letter-spacing:.12em;color:var(--muted)}.dl dd{margin:0}
.order{margin:0;padding:0;list-style:none;counter-reset:o}
.order li{counter-increment:o;padding:14px 0 10px 3rem;border-bottom:1px solid var(--rule);position:relative}
.order li::before{content:counter(o);position:absolute;left:0;top:14px;font:400 1rem/1.6 var(--caps);color:var(--muted)}
.order li p{margin:.3em 0 0;font-size:1.05rem;color:var(--ink-2)}

/* the answer: state is carried by the edge, never by colour alone */
.answer{margin:0 0 1.6rem;padding:18px 0 6px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.answer.no{border-top:6px solid var(--hair);border-bottom:6px solid var(--hair);box-shadow:inset 0 3px 0 var(--paper),inset 0 4px 0 var(--hair),inset 0 -3px 0 var(--paper),inset 0 -4px 0 var(--hair);padding:24px 0 10px}
.answer.ask{border-top:3px double var(--hair);border-bottom:3px double var(--hair)}
.answer .verdict{font:400 clamp(1.7rem,3vw,2.2rem)/1.15 var(--book);margin:0 0 .5rem}
.answer .verdict .on{display:block;font:400 .95rem/1.5 var(--caps);letter-spacing:.12em;color:var(--muted);margin-top:6px}
.answer .cite{font-size:1rem;color:var(--muted)}
.checker{margin:0 0 1.4rem}.checker label{display:block;font:400 .95rem var(--caps);letter-spacing:.14em;margin-bottom:8px}
.field{display:flex;flex-wrap:wrap;gap:12px}
input,select,textarea{font:400 1.12rem/1.4 var(--book);color:var(--ink);background:var(--paper);border:0;border-bottom:1.5px solid var(--hair);border-radius:0;padding:10px 2px;min-height:var(--target);width:100%}
input[type=date]{width:auto;min-width:13rem;border:1.5px solid var(--hair);padding:10px 12px;font:inherit;font-size:1.12rem}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}
input[type=file]{border:0;padding:10px 0;font-size:1rem;color:var(--muted)}
input[type=file]::file-selector-button{font:600 1.02rem var(--book);color:var(--ink);background:var(--paper);border:1.5px solid var(--hair);min-height:48px;padding:0 18px;margin-right:14px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--mauve-wash)}
textarea{border:1.5px solid var(--rule);padding:10px 12px;resize:vertical}
select{border:1.5px solid var(--hair);padding:10px 12px;appearance:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--mauve);outline-offset:2px}
::placeholder{color:var(--muted);opacity:1}
table.sched{width:100%;border-collapse:collapse;font-size:1.05rem;margin:0 0 1rem}
table.sched th,table.sched td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-weight:400}
table.sched thead th{font:400 .86rem var(--caps);letter-spacing:.12em;color:var(--muted)}
table.sched tr.no b{font-weight:600}table.sched tr.ask b{font-weight:400;font-style:italic}
.prose{max-width:44rem}.prose h2{font:400 1.02rem var(--caps);letter-spacing:.18em;margin:2.2rem 0 .6rem}.prose li{margin:.4em 0}

/* the program card: the only boxed object, black-edged like a mourning card */
.plancard{position:sticky;top:24px}
body.planner .plancard{position:static}
.plancard .card{border:6px solid var(--edge);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--edge);padding:24px 22px 22px;text-align:center}
.plancard .t{font:400 .95rem/1.4 var(--caps);letter-spacing:.18em;margin:0}
.pc-name{display:block;font:italic 400 1.45rem/1.25 var(--book);margin:.4rem 0 0;color:var(--ink)}.pc-dates{display:block;font:400 .9rem/1.4 var(--caps);letter-spacing:.12em;color:var(--ink-2);margin-top:2px}
.pc-list{list-style:none;padding:0;margin:16px 0 0;text-align:left;font-size:1rem;line-height:1.35}
.pc-list li{position:relative;padding:9px 0;border-top:1px solid var(--rule)}
.pc-list li b{display:block;font:400 .9rem/1.5 var(--caps);letter-spacing:.08em;color:var(--muted)}
.pc-list li i{display:block;font-size:.92rem;color:var(--muted)}
.pc-list li.empty{font-style:italic;color:var(--muted);border-top:0}
.pc-list li.new::before{content:"";position:absolute;left:-22px;top:0;border-top:16px solid var(--mauve);border-right:16px solid transparent}
.plancard .fold{margin-top:16px;width:100%}

/* home */
.home h1{font-size:clamp(2.5rem,5vw,3.9rem)}

/* footer */
footer.site{border-top:1px solid var(--hair);max-width:1120px;margin:0 auto;padding:28px var(--gut) 44px}
footer.site .fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:24px}
footer.site h2{font:400 .9rem var(--caps);letter-spacing:.18em;margin:0 0 8px}
footer.site ul{list-style:none;margin:0;padding:0;font-size:1.02rem}footer.site li{padding:4px 0}
footer.site .fine{border:0;margin:1.4rem 0 0;padding:0;font-size:.95rem}

/* planner */
.choices{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.choice{position:relative;display:block;padding:14px 0 12px 2.4rem;border-bottom:1px solid var(--rule);cursor:pointer;min-height:var(--target)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice b{font:600 1.15rem/1.3 var(--book);margin-right:.6em}.choice span{font-size:1rem;color:var(--muted)}
.choice::after{content:"";position:absolute;left:.9rem;top:21px;width:12px;height:12px;border:1.5px solid var(--hair);border-radius:50%}
.choice:has(input:checked)::after{background:var(--hair);box-shadow:inset 0 0 0 2px var(--paper)}
.choice:has(input:checked){border-bottom:2px solid var(--hair)}
.choice:has(input:checked)::before{content:"";position:absolute;left:0;top:0;border-top:14px solid var(--mauve);border-right:14px solid transparent}
.choice:has(input:focus-visible){outline:3px solid var(--mauve);outline-offset:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.grid2 label,.slots label{display:block;font:400 1rem/1.4 var(--caps);letter-spacing:.1em;color:var(--ink)}
.grid2 .wide{grid-column:1/-1}
.slots{list-style:none;margin:0;padding:0;counter-reset:s}
.slot{counter-increment:s;padding:16px 0 18px 3rem;border-bottom:1px solid var(--rule);position:relative}
.slot::before{content:counter(s);position:absolute;left:0;top:16px;font:400 1rem/1.6 var(--caps);color:var(--muted)}
.slot h3{font:600 1.15rem/1.3 var(--book);margin:0 0 4px}
.slot .note{margin:0 0 8px;font-size:1rem}
.slot .pick{display:grid;grid-template-columns:1fr 14rem;gap:10px 16px;align-items:end}
.slot .own{margin-top:10px}
.slot .fixedtxt{font-size:1rem;color:var(--ink-2);white-space:pre-line;margin:0}
.outs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
#shortlist li{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--rule);padding:6px 0;list-style:none}
#shortlist{padding:0}
#shortlist button{min-height:44px}
.booklet{display:none}

/* outputs: hidden on screen, printed on paper; slides fill the screen */
.out{display:none}
body.slides-on{overflow:hidden}
.slidedeck{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.slidedeck .slide{display:none;max-width:88vw;text-align:center;font:400 clamp(1.6rem,4.2vw,3.4rem)/1.35 var(--book)}
.slidedeck .slide.on{display:block}
.slidedeck .slide h2{font:400 clamp(.9rem,1.6vw,1.3rem)/1.4 var(--caps);letter-spacing:.24em;margin:0 0 1.2rem;color:#d9d4dc}
.slidedeck .slide.title img{width:min(32vh,320px);height:min(32vh,320px);object-fit:cover;border:6px solid #fff;margin-bottom:1.4rem}
.slidedeck .slide.title .nm{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.1}
.slidedeck .slide.title .dt{font:400 clamp(1rem,2vw,1.5rem) var(--caps);letter-spacing:.2em;color:#d9d4dc}
.deckbar{position:fixed;left:0;right:0;bottom:0;z-index:51;display:flex;gap:8px;justify-content:center;align-items:center;padding:12px;background:rgba(0,0,0,.6);transition:opacity .4s}
.deckbar button{min-height:48px;padding:0 18px;font:600 1rem var(--book);background:#000;color:#fff;border:1.5px solid #fff;cursor:pointer}
.deckbar output{color:#fff;font:400 .95rem var(--caps);letter-spacing:.12em;min-width:5rem;text-align:center}
body.idle .deckbar{opacity:0}

@media (max-width:860px){
  :root{--band:8px}
  body{font-size:1.2rem}
  .wrap{grid-template-columns:1fr;gap:36px}
  .plancard{position:static}
  .mast{padding-top:26px}.mast .name{font-size:1.18rem}.mast .sub{font-size:.95rem}
  nav.main{gap:0 12px;margin:16px 6px 0;padding:4px 2px;font-size:.84rem;letter-spacing:.05em}
  nav.main a{white-space:nowrap;padding:9px 0}
  .grid2,.slot .pick{grid-template-columns:1fr}
  .slot{padding-left:2.2rem}
  .vv li{grid-template-columns:1.6em 1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}@view-transition{navigation:none}}

/* print: the page chrome goes; only the chosen output prints */
@page{margin:.6in}
@page folded{size:letter landscape;margin:.35in}
@page sheet{size:letter portrait;margin:.5in}
@page reader{size:letter portrait;margin:.75in}
@media print{
  html,body{background:#fff!important;color:#000!important}
  body{border:0;box-shadow:none;font-size:12pt}
  .mast,nav.main,.crumbs,footer.site,.plancard,.acts,.skip,.deckbar,.checker{display:none!important}
  body.printing > *:not(#out){display:none!important}
  body.printing #out{display:block!important}
  a{color:#000;text-decoration:none}
}
#out .sheetf{page:folded;display:grid;grid-template-columns:1fr 1fr;gap:.7in;height:7.7in;break-after:page;color:#000;font:400 11.5pt/1.45 var(--book)}
#out .sheetf:last-child{break-after:auto}
#out .panel{overflow:hidden;display:flex;flex-direction:column}
#out .cover{align-items:center;justify-content:center;text-align:center;border:6pt solid #000;box-shadow:inset 0 0 0 3pt #fff,inset 0 0 0 4pt #000;padding:.4in}
#out .cover img{width:2.6in;height:2.6in;object-fit:cover;margin:0 0 .25in}
#out .cover .nm{font:400 28pt/1.1 var(--book);margin:0 0 .1in}
#out .cover .dt{font:400 11pt var(--caps);letter-spacing:.18em;margin:0 0 .3in}
#out .cover .when{font-style:italic;font-size:12pt;margin:0}
#out h4{font:400 10pt var(--caps);letter-spacing:.2em;text-align:center;margin:0 0 .14in;border-bottom:.75pt solid #000;padding-bottom:.08in}
#out .ol{list-style:none;margin:0;padding:0}
#out .ol li{display:grid;grid-template-columns:1fr auto;gap:2pt 10pt;padding:4.5pt 0;border-bottom:.5pt solid #bbb;break-inside:avoid}
#out .ol li b{font:400 9.5pt/1.5 var(--caps);letter-spacing:.1em;grid-column:1/-1}
#out .ol li .st{grid-column:1/-1;font-style:italic;font-size:.92em;line-height:1.35;margin-top:2pt}
#out .ol li.fixed span{font-style:italic;color:#333}
#out .ol li .by{font-style:italic;font-size:10pt;text-align:right}
#out .spread{page:folded;grid-column:1/-1;columns:2;column-gap:.7in;column-fill:auto;height:7.7in;border:0}
#out .spread h4{column-span:none}
#out .sheetf.inside{display:block}
#out .back{justify-content:space-between}
#out .back .poem p{margin:0 0 .7em}
#out .back .thanks{font-style:italic;text-align:center;border-top:.75pt solid #000;padding-top:.12in}
#out .sheet1{page:sheet;color:#000;font:400 12pt/1.45 var(--book)}
#out .sheet1 .head{display:flex;gap:.3in;align-items:center;border:6pt solid #000;box-shadow:inset 0 0 0 3pt #fff,inset 0 0 0 4pt #000;padding:.25in;margin-bottom:.25in}
#out .sheet1 .head img{width:1.6in;height:1.6in;object-fit:cover}
#out .sheet1 .nm{font:400 2em/1.1 var(--book);margin:0}
#out .sheet1 .ol li{padding:3pt 0}
#out .readerp{page:reader;break-after:page;color:#000;font:400 21pt/1.55 var(--book)}
#out .readerp:last-child{break-after:auto}
#out .readerp h4{font-size:12pt;text-align:left}
#out .readerp h5{font:400 26pt/1.2 var(--book);margin:0 0 .25in}
#out .readerp .who{font:italic 400 14pt var(--book);margin:0 0 .3in}
#out .readerp p{margin:0 0 .5em;orphans:4;widows:4}
.plancard{perspective:1600px}
.plancard .card{transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.15,1);backface-visibility:hidden}
.plancard.shut .card{transform:rotateY(-180deg)}
.folding{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(11,11,11,.4);perspective:1600px}
.folding .leaf{position:relative;width:min(56vw,380px);aspect-ratio:8.5/11;transform-style:preserve-3d;transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.15,1)}
.folding .face{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:#fff;color:#121212;font:italic 400 1.6rem/1.3 var(--book);border:6px solid #0b0b0b;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #0b0b0b;backface-visibility:hidden}
.folding .face.back{transform:rotateY(180deg)}
.folding.shut .leaf{transform:rotateY(-180deg)}