/* Con Affetto — paper documents (recital program, service hours letter).
   On screen: a sheet of letter paper under a toolbar. In print: just the sheet. */

:root{
  --ink:#1F1B16;
  --soft:#4F473B;
  --faint:#857B6B;
  --rule:#C9C0AB;
  --sage:#5C6E5E;
  --rust:#8E2E21;
  --serif:"EB Garamond",Iowan Old Style,Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;background:#E4E0D4;color:var(--ink);font-family:var(--serif);font-variant-numeric:oldstyle-nums}
img{max-width:100%;display:block}
p{margin:0}

/* ---------- toolbar (screen only) ---------- */
.toolbar{
  position:sticky;top:0;z-index:5;background:#1F2E24;color:#EFEBDB;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:12px max(16px, calc((100% - 8.5in) / 2));font-family:var(--sans);font-size:13.5px;
}
.toolbar a{color:#EFEBDB}
.tb-back{text-decoration:none;opacity:.85}
.tb-back:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.tb-group{display:inline-flex;border:1px solid rgba(239,235,219,.35)}
.tb-group a{padding:6px 12px;text-decoration:none}
.tb-group a[aria-current="true"]{background:#EFEBDB;color:#1F2E24}
.tb-print,.tb-form button{
  font:inherit;font-weight:600;background:#9A3123;color:#fff;border:0;padding:8px 18px;cursor:pointer;
}
.tb-print:hover,.tb-form button:hover{background:#B23A29}
.tb-hint{opacity:.7;font-size:12.5px}
.tb-form{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;flex:1}
.tb-form label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.tb-form label.wide{flex:1;min-width:200px}
.tb-form input{font-family:var(--serif);font-size:15px;padding:5px 8px;border:0;background:#F7F4EC;color:var(--ink);text-transform:none}
.tb-form button{background:transparent;border:1px solid rgba(239,235,219,.5);font-weight:500}
.tb-form button:hover{background:rgba(255,255,255,.1)}
.toolbar :focus-visible{outline:2px solid #E8D9AE;outline-offset:2px}

/* ---------- the sheet ---------- */
.sheet{
  width:8.5in;max-width:calc(100% - 32px);min-height:11in;margin:28px auto 60px;
  background:#FFFEFA;padding:.6in .7in;box-shadow:0 10px 36px rgba(0,0,0,.18);
}

/* ---------- program ---------- */
.program-sheet{display:flex;flex-direction:column}
.ph{text-align:center;margin-bottom:.22in}
.ph-mark{width:.62in;height:auto;margin:0 auto 6px}
.ph-word{font-size:21pt;letter-spacing:.01em;line-height:1}
.ph-gloss{font-style:italic;color:var(--faint);font-size:11.5pt;margin-top:3px}

.program{flex:1}
.program .venue{
  font-family:var(--sans);font-size:9.5pt;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center;
}
.program h2{font-weight:500;font-size:25pt;line-height:1.1;text-align:center;margin:6px 0 4px}
.program .when{font-style:italic;text-align:center;font-size:13.5pt;color:var(--soft)}
.program .presenter{font-style:italic;text-align:center;font-size:12pt;color:var(--soft);margin-top:2px}
.program .divider{border:0;border-top:1px solid var(--rule);margin:.2in 0 .22in}

.entry{margin-bottom:12pt;break-inside:avoid}
.entry .line{display:flex;align-items:baseline;gap:6px}
.entry .piece{font-style:italic;font-size:15pt;line-height:1.25}
.entry .dots{flex:1 1 12px;min-width:12px;border-bottom:1.2px dotted #B3A98F;transform:translateY(-4px)}
.entry .who{font-family:var(--sans);font-size:10.5pt;color:var(--soft);white-space:nowrap}
.entry .who.comp{font-family:var(--serif);font-size:12.5pt}
.entry .composer{font-size:12pt;color:var(--soft);margin-top:1px}
.entry .movement{font-size:12pt;font-style:italic;color:var(--soft);padding-left:14pt;margin-top:1px}
.set{margin-bottom:14pt;break-inside:avoid}
.set .player{
  font-family:var(--sans);font-size:9.5pt;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rust);margin:0 0 5pt;
}
.set .entry{margin-bottom:6pt}
.program .closing{
  margin-top:.18in;padding-top:.14in;border-top:1px solid var(--rule);
  text-align:center;font-style:italic;font-size:13pt;color:var(--soft);
}

.pf{margin-top:.25in;padding-top:.14in;border-top:1px solid var(--rule);text-align:center}
.pf p{font-size:12pt;font-style:italic;color:var(--ink)}
.pf .pf-small{font-family:var(--sans);font-style:normal;font-size:8.5pt;letter-spacing:.03em;color:var(--faint);margin-top:6px}

/* Large print: for anyone who finds standard program type hard to read. */
body.large .program h2{font-size:32pt}
body.large .program .when{font-size:17pt}
body.large .program .presenter{font-size:15pt}
body.large .program .venue{font-size:11.5pt}
body.large .entry{margin-bottom:15pt}
body.large .entry .piece{font-size:20pt}
body.large .entry .who{font-size:13.5pt}
body.large .entry .who.comp{font-size:16pt}
body.large .entry .composer,body.large .entry .movement{font-size:15pt}
body.large .set .player{font-size:12pt}
body.large .program .closing{font-size:16pt}
body.large .pf p{font-size:14.5pt}

/* ---------- program: concert-hall dress ----------
   Gilda Display for the name and title, EB Garamond for everything else,
   a double sage frame, spaced capitals for names, and a diamond rule. */
.program-sheet{position:relative;padding:.8in 1.05in .7in}
.program-sheet::before,.program-sheet::after{content:"";position:absolute;pointer-events:none}
.program-sheet::before{inset:.4in;border:1.2px solid var(--sage)}
.program-sheet::after{inset:.47in;border:.6px solid var(--sage);opacity:.65}
.program-sheet .ph{margin-bottom:.08in}
.program-sheet .ph-mark{width:.52in;margin-bottom:9px}
.program-sheet .ph-word{font-family:"Gilda Display",var(--serif);font-size:12.5pt;letter-spacing:.44em;text-transform:uppercase;padding-left:.44em;color:var(--sage)}
.program-sheet .ph-gloss{font-size:11pt;color:var(--faint);margin-top:4px}
.program-sheet .program .venue{font-family:var(--serif);font-weight:500;font-size:10pt;letter-spacing:.3em;padding-left:.3em;color:var(--sage);margin-top:.08in}
.program-sheet .program h2{font-family:"Gilda Display",var(--serif);font-weight:400;font-size:27pt;line-height:1.08;margin:7px 0 6px;text-wrap:balance}
.program-sheet .program .when{font-size:13pt}
.program-sheet .program .presenter{font-size:11.5pt;color:var(--faint)}
.program-sheet .program .divider{
  border:0;position:relative;height:9px;width:2.7in;margin:.18in auto .2in;overflow:visible;
  background:linear-gradient(var(--sage),var(--sage)) left center/calc(50% - 11px) .7px no-repeat,
             linear-gradient(var(--sage),var(--sage)) right center/calc(50% - 11px) .7px no-repeat;
}
.program-sheet .program .divider::after{content:"";position:absolute;left:50%;top:50%;width:5.5px;height:5.5px;background:var(--sage);transform:translate(-50%,-50%) rotate(45deg)}
.program-sheet .set{margin-bottom:10pt}
.program-sheet .set .entry{margin-bottom:2pt}
.program-sheet .set .player{font-family:var(--serif);font-weight:500;font-size:10pt;letter-spacing:.26em;color:var(--sage);text-align:center;margin:0 0 3pt}
.program-sheet .entry .piece{font-size:13.5pt}
.program-sheet .entry .dots{border-bottom:0;height:3px;transform:translateY(-3px);background:radial-gradient(circle,#9AA79C 0 .75px,transparent 1.05px) left bottom/5px 3px repeat-x}
.program-sheet .entry .who{font-family:var(--serif);font-size:12pt;color:var(--soft)}
.program-sheet .entry .composer,.program-sheet .entry .movement{font-size:11pt;line-height:1.3}
.program-sheet .program .closing{border-top:0}
.program-sheet .pf{border-top:0;padding-top:0;margin-top:.12in}
.program-sheet .pf::before{content:"";display:block;width:5.5px;height:5.5px;background:var(--sage);transform:rotate(45deg);margin:0 auto .12in}
.program-sheet .pf p{font-size:11.5pt;color:var(--soft)}
.program-sheet .pf .pf-small{font-family:var(--serif);font-size:8.5pt;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);margin-top:8px}
.program-sheet .pq{margin:.1in auto 0;text-align:center;max-width:4.6in}
.program-sheet .pq blockquote{margin:0;font-family:"Gilda Display",var(--serif);font-size:13pt;line-height:1.25;color:var(--ink)}
.program-sheet .pq blockquote::before{content:"\201C"}
.program-sheet .pq blockquote::after{content:"\201D"}
.program-sheet .pq figcaption{margin-top:6px;font-size:8.5pt;letter-spacing:.26em;text-transform:uppercase;color:var(--sage)}
body.large .program-sheet .pq blockquote{font-size:18pt}
body.large .program-sheet .program h2{font-size:34pt}
body.large .program-sheet .entry .piece{font-size:19pt}
body.large .program-sheet .entry .who{font-size:15pt}
body.large .program-sheet .set .player{font-size:12pt}

/* ---------- hours letter ---------- */
.letter-sheet{font-size:12pt;line-height:1.5}
.letter-sheet > p{margin-bottom:11pt}
.lh{display:flex;align-items:center;gap:14px;padding-bottom:.16in;border-bottom:1.5px solid var(--sage);margin-bottom:.32in}
.lh-mark{width:.55in;height:auto}
.lh-word{font-size:22pt;line-height:1}
.lh-line{font-family:var(--sans);font-size:9pt;letter-spacing:.03em;color:var(--soft);margin-top:5px}
.l-date{margin-bottom:.22in !important}
.l-re{margin-bottom:14pt !important}

table.hours{width:100%;border-collapse:collapse;margin:6pt 0 12pt;font-size:11pt;line-height:1.35}
.hours th,.hours td{text-align:left;padding:6pt 8pt 6pt 0;border-bottom:1px solid var(--rule);vertical-align:top}
.hours thead th{font-family:var(--sans);font-size:8.5pt;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:600;border-bottom:1.5px solid var(--ink)}
.hours td.d{white-space:nowrap;width:1.35in}
.hours .loc{display:block;color:var(--faint);font-style:italic;font-size:10.5pt}
.hours .num{text-align:right;padding-right:0;width:.7in;font-variant-numeric:lining-nums tabular-nums}
.hours tfoot th,.hours tfoot td{border-bottom:0;border-top:1.5px solid var(--ink);font-weight:600;padding-top:7pt}
.hours tfoot th{font-family:var(--sans);font-size:9pt;letter-spacing:.1em;text-transform:uppercase}
.hours tr{break-inside:avoid}
.l-note{font-size:10.5pt;font-style:italic;color:var(--soft)}
.l-close{margin-top:14pt}

.signs{display:flex;flex-wrap:wrap;gap:.2in .6in;margin-top:.55in;break-inside:avoid}
.sign{width:2.9in}
.sign-line{border-bottom:1px solid var(--ink);height:.45in}
.sign-name{margin-top:5px !important;font-size:12pt}
.sign-title{font-size:10.5pt;color:var(--soft);font-style:italic}

.nohours{padding:1in 0;text-align:center}
.nohours h1{font-weight:500;font-size:20pt;margin:0 0 10px}
.nohours p{color:var(--soft);max-width:44ch;margin:0 auto}

/* ---------- small screens ---------- */
@media screen and (max-width:700px){
  .sheet{padding:28px 20px;min-height:0;margin-top:16px}
  .entry .line{flex-wrap:wrap}
  .entry .dots{display:none}
  .entry .who{flex-basis:100%;margin-top:1px}
  .hours td.d{width:auto;white-space:normal}
}

/* ---------- print ---------- */
@page{size:letter;margin:.5in .6in}
@media print{
  body{background:#fff}
  .toolbar{display:none}
  .sheet{width:auto;max-width:none;min-height:0;margin:0;padding:0;box-shadow:none;background:#fff}
  .program-sheet{min-height:0;height:9.98in;padding:.42in .65in .32in}
  .program-sheet::before{inset:0}
  .program-sheet::after{inset:.07in}
  a{color:inherit;text-decoration:none}
}