/* The Nonprofit Calendar: the one stylesheet.
   Ported from the approved October mock (reference/mock_v16.html: gen.py's .alm rules + oct.css).
   House rules: square controls (no pills), hairline borders, one accent per month (--acc, --tint, --tint2 are set
   per page on .alm), body text 18px+, nothing under 16px, 44px targets, no motion yet. */

:root{--desk:#F2F1EE;--paper:#FBFAF7;--tx:#24221F;--soft:#57534D;--rule:#D6D1C9;
  --d:"Alegreya",Georgia,serif;--b:"Alegreya Sans",system-ui,sans-serif;--l:"Alegreya Sans",system-ui,sans-serif;--sc:"Alegreya SC",Georgia,serif;
  --acc:#A3281F;--tint:#F3E7E4;--tint2:#E8CCC7;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--tx);font:19px/1.65 var(--b);overflow-x:hidden}
h1,h2,h3,h4,h5{margin:0;text-wrap:pretty}
p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* smooth scrolling for in-page links and jumps, so readers see the page move (Brian, 9 Oct); off for reduced motion */
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.skip{position:absolute;left:12px;top:-60px;z-index:70;display:inline-flex;align-items:center;min-height:44px;background:var(--tx);color:#FFFFFF;padding:11px 16px;font:500 18px/1.2 var(--b);text-decoration:none}
.skip:focus{top:12px}

/* ================= the almanac sheet ================= */
.alm{--boxr:50%;--hair:color-mix(in srgb,var(--acc) 28%,var(--paper));--bsize:19px;--pad:clamp(20px,5vw,64px);
  --c-bg:var(--paper);--c-fg:var(--tx);--c-acc:var(--acc);--c-tint:var(--tint);--c-hair:var(--hair);
  max-width:1080px;margin:32px auto 72px;background:var(--paper);color:var(--tx);font:var(--bsize)/1.65 var(--b);border-radius:10px;
  padding:clamp(18px,3vw,32px) var(--pad) 0;display:flex;flex-direction:column;gap:40px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 30px rgba(0,0,0,.05)}
.alm>main{display:flex;flex-direction:column;gap:40px;min-width:0}
@media (max-width:1120px){.alm{margin:24px 16px 56px}}
@media (max-width:640px){.alm{--pad:16px;margin:0;border-radius:0;box-shadow:none;padding-top:14px}}
.alm a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.alm a:hover{text-decoration-thickness:2px}
.alm mark{background:var(--tint2);color:var(--tx);padding:0 3px;border-radius:0}
.alm button:focus-visible,.alm select:focus-visible,.alm input:focus-visible,.alm textarea:focus-visible,.alm a:focus-visible,.bbar button:focus-visible,.bbar a:focus-visible,.sheet button:focus-visible,.sheet a:focus-visible,.sheet select:focus-visible{outline:3px solid var(--tx);outline-offset:2px}

/* masthead */
.mast{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.alm a.wm,.wm{font:500 22px/1.2 var(--sc);letter-spacing:.06em;color:var(--tx);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mast nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 22px;font:400 17px/1 var(--l)}
.alm .mast nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;text-decoration:none;color:var(--soft)}
.alm .mast nav a[aria-current]{color:var(--tx);text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--acc);text-decoration-thickness:2px}
.alm .mast nav a.btn{background:var(--paper);color:var(--acc);padding:10px 18px;border-radius:0;border:1px solid var(--hair);font:500 18px/1 var(--sc);letter-spacing:.04em;min-height:44px}
@media (hover:hover){.alm .mast nav a.btn:hover{background:var(--acc);color:#FFFFFF;text-decoration:none}}
.alm .mast nav a.btn[aria-current]{background:var(--tint);text-decoration:none}
/* saved count badge: square, accent, number only (Brian, 9 Oct) */
.mast nav .b-saved,.bbar .b-saved{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;margin-left:6px;background:var(--acc);color:#FFFFFF;font:700 16px/1 var(--b);vertical-align:middle}
.bbar .b-saved{margin-left:0}
@media (max-width:759px){.hide-ph{display:none!important}}

/* month strip */
.pic{margin:0;display:flex;flex-direction:column;gap:4px}
.frame{overflow:hidden;border-radius:50% 50% 12px 12px / 42% 42% 12px 12px;background:var(--tint)}
.pic img,.pic svg{display:block;width:100%;height:auto;aspect-ratio:5/1;object-fit:cover;object-position:50% 100%}
@media (max-width:640px){.pic img,.pic svg{aspect-ratio:3/1}.frame{border-radius:50% 50% 10px 10px / 34% 34% 10px 10px}}

/* month head */
.mhead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.yr{font:500 17px/1 var(--sc);letter-spacing:.3em;padding-left:.3em;color:var(--soft)}
.month{font:400 italic clamp(56px,10vw,104px)/.95 var(--d);letter-spacing:-.01em;color:var(--tx);text-wrap:balance}
.mhead .orn{margin:6px 0 4px}
/* the opener sits under the setup card so a first visit meets the first question near the top; with the card closed
   it tucks back up under the month nav */
.opener{max-width:46ch;align-self:center;justify-self:center;text-align:center;text-wrap:balance;margin-top:-28px;font-size:21px}  /* justify-self centres it in the sidebar layout's column too (Brian, 9 Oct: "odd alignment") */
.setup:not([hidden])+.opener{margin-top:0}
.opener b{font-weight:700}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--acc);margin:-8px 0}
.orn::before,.orn::after{content:"";height:1px;width:min(120px,22vw);background:var(--rule)}
.lab{font:500 19px/1.3 var(--sc);letter-spacing:.04em;color:var(--soft);margin-bottom:14px}
.lab.ctr{text-align:center}
.mnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:4px}
.alm .mnav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:500 18px/1 var(--sc);letter-spacing:.04em;text-decoration:none;color:var(--acc)}
.alm .mnav a:hover{text-decoration:underline}
.alm .mnav a.tlink{border:1px solid var(--hair);color:var(--tx)}
.mnav .off{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:500 18px/1 var(--sc);letter-spacing:.04em;color:var(--soft)}
.nowmonth{border:1px solid var(--hair);padding:12px 16px;text-align:center;font-size:18px}

/* shared controls: square printed labels */
.lbl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:6px 16px;background:var(--c-bg);color:var(--c-acc);border:1px solid var(--c-hair);border-radius:0;font:500 18px/1.15 var(--sc);letter-spacing:.04em;cursor:pointer;text-decoration:none;text-align:center}
.alm a.lbl,.sheet a.lbl{text-decoration:none;color:var(--c-acc)}
@media (hover:hover){.lbl:hover{background:var(--c-tint)}}
.lbl.solid,.lbl[aria-pressed="true"],.alm a.lbl.solid{background:var(--c-acc);border-color:var(--c-acc);color:#FFFFFF}
.lbl.quiet{border:1px solid var(--rule);color:var(--c-fg)}
.lbl.wide,.wide{width:100%}
.lbl[disabled]{opacity:.6;cursor:progress}
.lnk{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--c-acc);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--c-hair);background:var(--c-bg)}
.seg .cell{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border:0;border-left:1px solid var(--c-hair);background:transparent;color:var(--c-acc);font:500 18px/1.1 var(--sc);letter-spacing:.04em;cursor:pointer}
.seg .cell:first-child{border-left:0}
@media (hover:hover){.seg .cell:hover{background:var(--c-tint)}}
.seg .cell[aria-pressed="true"]{background:var(--c-acc);color:#FFFFFF}
/* a choice (View: Month | Agenda) reads quietly: tint and a check, so solid accent keeps meaning red-letter day */
.seg .cell[aria-checked="true"]{background:var(--c-tint);color:var(--tx)}
.tick{display:none}
[aria-pressed="true"]>.tick,[aria-checked="true"]>.tick{display:inline}
/* Off | On switches: one role=switch button drawn as two square cells (Brian: two-cell labels, no pills). The cell that
   is set gets a tint and a check; only a filter that is On (Next-door states, Online, Free only) is solid accent. */
.sw{display:inline-flex;flex:none;padding:0;border:1px solid var(--c-hair);border-radius:0;background:var(--c-bg);color:var(--c-acc);font:500 18px/1.1 var(--sc);letter-spacing:.04em;cursor:pointer}
.sw-c{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 14px}
.sw-c+.sw-c{border-left:1px solid var(--c-hair)}
.sw .tick{display:none}
.sw[aria-checked="false"] .sw-off,.sw[aria-checked="true"] .sw-on{background:var(--c-tint);color:var(--tx)}
.sw[aria-checked="false"] .sw-off .tick,.sw[aria-checked="true"] .sw-on .tick{display:inline}
.sw.sw-solid[aria-checked="true"] .sw-on{background:var(--c-acc);color:#FFFFFF}
@media (hover:hover){.sw:hover{border-color:var(--c-acc)}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;background:var(--paper);color:var(--tx);border:1px solid var(--hair);border-radius:0;font:400 18px/1.2 var(--b);cursor:pointer;text-align:left}
@media (hover:hover){.chip:hover{background:var(--tint)}}
.chip .x{display:inline-grid;place-items:center;width:20px;height:24px;color:var(--acc);font:700 20px/1 var(--b)}
.chips .none{color:var(--soft);display:flex;align-items:center;min-height:44px}

/* setup: one question at a time (docs/SETUP_FLOW.md), and the Showing bar */
.alm select,.sheet select{-webkit-appearance:none;appearance:none;min-height:48px;max-width:22em;width:100%;padding:8px 34px 8px 12px;font:400 19px/1.2 var(--b);color:var(--tx);background:#FFFFFF var(--caret) no-repeat right 12px center;border:1px solid var(--soft);border-radius:0}
.ctl select{appearance:none;-webkit-appearance:none;width:auto!important;max-width:100%;field-sizing:content;min-height:44px;padding:4px 34px 4px 10px!important;margin:2px 0;font:400 20px/1.2 var(--b)!important;font-style:normal;color:var(--acc)!important;background:var(--tint) var(--caret) no-repeat right 12px center!important;border:0!important;border-bottom:1px solid var(--acc)!important;border-radius:0;cursor:pointer;vertical-align:baseline}
@media (hover:hover){.ctl select:hover{box-shadow:inset 0 -1px 0 var(--acc)}}  /* a 2px underline: tint2 behind accent text fell under 4.5:1 for March and November */
@media (max-width:640px){.ctl select{font-size:19px!important}}
.setup{border:1px solid var(--hair);background:var(--paper);padding:20px clamp(16px,3vw,28px) 16px;display:flex;flex-direction:column;gap:14px;max-width:860px;width:100%;margin:-16px auto 0}
.setup .lab{margin:0}
.wz-intro{color:var(--soft)}
.wz-echo{list-style:none;margin:0;padding:0 0 12px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--hair)}
.wz-echo li{display:flex;align-items:baseline;gap:10px;font:400 19px/1.4 var(--b)}
.wz-echo li::before{content:"\2713";color:var(--acc);font-weight:700}
.wz-redo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px dotted var(--rule)}
.wz-redo:empty{display:none}
.wz-redo li{display:block;border-bottom:1px dotted var(--rule)}
.echo-b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 0;background:none;border:0;color:var(--tx);font:400 19px/1.35 var(--b);text-align:left;cursor:pointer}
.echo-b .et::before{content:"\2713";color:var(--acc);font-weight:700;margin-right:10px}
.echo-b .ec{flex:none;font:500 18px/1 var(--sc);letter-spacing:.04em;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.echo-b:hover .ec{text-decoration-thickness:2px}}
.wz-count{font:500 17px/1 var(--sc);letter-spacing:.06em;color:var(--soft);margin-bottom:-6px}
.wz-step{display:flex;flex-direction:column;gap:14px}
.wz-q{font:400 italic 30px/1.2 var(--d);color:var(--tx)}
.wz-q:focus{outline:none}
.wz-hint{color:var(--soft);margin-top:-8px}
.ans-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){.ans-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* one answer per row on phones so no tile wraps (Brian, 9 Oct: 6 of 19 wrapped at two across) */
@media (max-width:480px){.ans-g{grid-template-columns:minmax(0,1fr)}}
/* answers read as plain words: sentence case in Alegreya Sans, so they fit one line on a phone; small caps stay for
   Next, Show my events and the labels */
.lbl.ans{justify-content:flex-start;text-align:left;min-height:52px;padding:10px 14px;font:500 20px/1.25 var(--b);letter-spacing:0}
.wz-state{display:flex;flex-wrap:wrap;gap:8px}
.alm .wz-state select,.sheet .wz-state select{flex:1 1 9em;width:auto;max-width:24em;min-width:0}
.wz-state .lbl{min-height:48px;min-width:4.5em}
.wz-or{font:400 italic 19px/1 var(--d);color:var(--soft)}
.wz-sum{font:400 italic 24px/1.4 var(--d);color:var(--tx)}
.wz-n{color:var(--soft)}
.wz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.wz-foot .lbl.solid{min-width:10em}
.setup.in-sheet{border:0;padding:0;margin:0}
.setup.in-sheet>.lab{display:none}
@media (max-width:640px){.wz-q{font-size:26px}.wz-sum{font-size:22px}}
.confirm{display:flex;flex-direction:column;gap:10px;background:var(--tint);padding:12px 16px}
.cf-q:focus{outline:none}
.cf-b{display:flex;flex-wrap:wrap;gap:8px}
.hint{font-size:18px;color:var(--soft)}
.hint.warn{color:var(--acc)}
.hint.warn:empty{display:none}
.showing{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin-top:-16px}
.sh-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sh-mid{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
/* Filters stays on the first line, at its right end, however the chips wrap */
@media (min-width:760px){.sh-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.sh-lab{display:inline-flex;align-items:center;min-height:44px}.sh-row .ftog{grid-column:3;grid-row:1}}
.sh-lab,.ctl-lab{font:500 18px/1 var(--sc);letter-spacing:.04em;color:var(--soft)}
.sh-count{font-size:18px;color:var(--soft)}
.sh-undo{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:18px;margin-top:-8px}
.sh-undo[hidden]{display:none}
.sh-count:focus{outline:none}
.sh-count:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.sh-hi{font-size:19px}
.sh-hi b{font:400 italic 21px/1 var(--d)}
.sh-acts{display:inline-flex;flex-wrap:wrap;gap:0 16px}
.showing .empty{display:flex;flex-direction:column;align-items:center;gap:10px}
.showing .empty:focus{outline:none}
.empty-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.empty-b:empty{display:none}
.f-guard{flex-basis:100%}
.none-note{text-align:center;color:var(--soft)}
.sh-count b{color:var(--tx)}
.fctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ctl select{font-size:19px;margin:0}
@media (max-width:759px){.showing .fctl{display:none}}
/* from 760px the Filters open from a square toggle at the end of the Showing row */
.ftog{gap:10px}
.ftog[aria-expanded="true"]{background:var(--c-tint)}
.ftog .car{font:400 16px/1 var(--b)}
@media (min-width:760px){.showing:not(.f-open) .fctl{display:none}.showing.f-open .fctl{border-top:1px dotted var(--rule);padding-top:12px}}
.fctl.in-sheet{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.fctl.in-sheet .ctl{flex-direction:column;align-items:flex-start}
/* Filters: causes and topics, tick as many as you like */
.mctl{flex-basis:100%;border:0;margin:0;padding:12px 0 0;border-top:1px dotted var(--rule);flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.mctl legend{float:left;padding:0;margin-bottom:2px}
.mctl .hint{clear:both}
.mchk{display:grid;grid-template-columns:repeat(auto-fill,minmax(14em,1fr));gap:0 18px}
.mc{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer;font:400 18px/1.3 var(--b)}
.mc input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;border:1.5px solid var(--soft);border-radius:0;background:var(--paper);display:grid;place-content:center;cursor:pointer}
.mc input::after{content:"";width:12px;height:7px;border-left:3px solid #FFFFFF;border-bottom:3px solid #FFFFFF;transform:translateY(-2px) rotate(-45deg);visibility:hidden}
.mc input:checked{background:var(--acc);border-color:var(--acc)}
.mc input:checked::after{visibility:visible}
.mc input:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.fctl.in-sheet .mctl{flex-direction:column;align-items:stretch;border-top:1px solid var(--rule);padding-top:20px}
@media (max-width:480px){.mchk{grid-template-columns:minmax(0,1fr)}}
.wz-multi{display:flex}
.wz-multi .lbl.solid{min-width:10em}

/* At a glance and This month */
.duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.duo.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.glance ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.glance li{display:flex;gap:18px;align-items:center;min-width:0;padding:14px 0;border-bottom:1px solid var(--rule)}
.glance li .tear{width:80px;height:92px;margin:0}
.glance li .tear .day{font-size:24px;padding-top:6px}
.gtxt{min-width:0}
.glance h3{font:700 19px/1.3 var(--d)}
.alm .glance h3 a{display:flex;align-items:center;min-height:44px;color:var(--tx);text-decoration-color:var(--acc)}
.glance p{font:400 16px/1.45 var(--l);color:var(--soft);margin-top:4px}
.glance .none{color:var(--soft);display:block}
.side{display:flex;flex-direction:column;gap:22px}
.todo{background:var(--tint);border:0;border-radius:0;padding:18px 22px}
.todo .lab{text-align:center;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:6px}
.todo .lab::before,.todo .lab::after{content:"\2766";color:var(--acc);margin:0 10px;font-size:.9em}
.todo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.todo li{display:block}
.todo li.plain{padding:8px 0 8px 22px;position:relative}
.todo li.plain::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:10px;background:var(--acc)}
.todo label{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
.todo input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:1px 0 0;border:1.5px solid var(--soft);border-radius:0;background:var(--paper);display:grid;place-content:center;cursor:pointer}
.todo input::after{content:"";width:12px;height:7px;border-left:3px solid #FFFFFF;border-bottom:3px solid #FFFFFF;transform:translateY(-2px) rotate(-45deg);visibility:hidden}
.todo input:checked{background:var(--acc);border-color:var(--acc)}
.todo input:checked::after{visibility:visible}
.trow{display:flex;align-items:flex-start;gap:4px}
.trow label{flex:1;min-width:0}
.ibtn{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer}
/* "Learn more" in place of the "i" box (Brian, 9 Oct) */
.ibox{color:var(--acc);font:500 17px/1.2 var(--b);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.ibtn[aria-expanded="true"] .ibox{text-decoration-thickness:2px;font-weight:700}
.tip{margin:0 0 8px 38px;padding:10px 14px;background:var(--paper);font-size:18px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.alm .tip a{display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;font:500 18px/1.2 var(--sc);letter-spacing:.04em}

/* tear-off date */
.tear{flex:none;box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:96px;height:112px;text-align:center;font-variant-numeric:lining-nums;background:#FFFFFF;border-radius:0;border:1px solid var(--hair);margin:4px;overflow:hidden}
.tear .band{display:block;width:100%;background:var(--acc);color:#FFFFFF;padding:6px 0 5px;font:500 16px/1 var(--sc);letter-spacing:.08em}
.tear .day{font:400 28px/1.1 var(--d);white-space:nowrap;padding-top:10px}
.tear.range .day{letter-spacing:-.02em}
.tear .wd{font:400 16px/1.2 var(--l);color:var(--soft);padding-bottom:7px}

/* month grid, every width (the desktop day table was dropped, Brian 9 Oct: tap a day to jump to it in the list) */
.mgrid-w{max-width:560px;width:100%;margin:0 auto}
.tday{flex:none;font:500 16px/1 var(--sc);letter-spacing:.06em;background:var(--tx);padding:4px 7px;color:#FFFFFF}
.mgrid-hd,.mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.mgrid-hd li{text-align:center;font:500 16px/1 var(--sc);color:var(--soft);padding:6px 0}
.mgrid li>*{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(44px,12vw,64px);font:400 20px/1 var(--d);border:1px solid var(--rule);background:var(--paper);color:var(--tx);border-radius:0;padding:0;text-decoration:none}
.alm .mgrid a{text-decoration:none;color:var(--tx)}
.mgrid button,.mgrid a{cursor:pointer}
.mgrid .has{background:var(--tint2);border-color:var(--tint2)}
/* has events: a short bar under the number (a square would read as the federal-holiday mark) */
.mgrid .has::after{content:"";position:absolute;bottom:9px;left:50%;width:14px;height:3px;margin-left:-7px;background:var(--tx)}
.alm .mgrid .red{background:var(--acc);border-color:var(--acc);color:#FFFFFF;font-weight:700}
.mgrid .red::after{background:#FFFFFF}
.mgrid .today{box-shadow:inset 0 0 0 3px var(--tx),inset 0 0 0 5px #FFFFFF;font-weight:700}
/* the corner marks: one shape per kind of date, so no mark depends on colour alone (the legend names each one) */
.mks{position:absolute;top:6px;right:6px;display:flex;gap:2px}
.mk{display:inline-block;flex:none;width:9px;height:9px;background:var(--tx)}
.mk-giving{clip-path:polygon(50% 0,100% 100%,0 100%)}
.mk-awareness{border-radius:50%}
.mk-observance{width:10px;height:10px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mk-note{background:transparent;box-shadow:inset 0 0 0 2px var(--tx)}
.mk-deadline{background:var(--acc)}
.mgrid .red .mk{background:#FFFFFF}
.mgrid .red .mk-note{background:transparent;box-shadow:inset 0 0 0 2px #FFFFFF}
@media (min-width:760px){.mgrid .mk{width:12px;height:12px}.mgrid .mk-observance{width:13px;height:13px}.mks{top:4px;right:4px}}
/* three cues, three shapes: today is a ring inside the square, the day being read in the list (wide screens) is a bar
   along the bottom, and keyboard focus is the outline outside */
.mgrid .inview{box-shadow:inset 0 -5px 0 var(--tx)}
.alm .mgrid .red.inview{box-shadow:inset 0 -5px 0 #FFFFFF}
.alm .mgrid .today.inview{box-shadow:inset 0 -7px 0 var(--tx),inset 0 0 0 3px var(--tx),inset 0 0 0 5px #FFFFFF}
.key{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:16px 0 0;font:400 16px/1.4 var(--l);color:var(--soft)}
.key li{display:inline-flex;align-items:center;gap:8px}
.key .mk{width:12px;height:12px}
.key .k-red::before{content:"";display:inline-block;width:12px;height:12px;background:var(--acc)}
.key .k-has::before{content:"";width:16px;height:16px;background:linear-gradient(var(--tx),var(--tx)) center bottom 3px/10px 2px no-repeat,var(--tint2);border:1px solid var(--soft)}
.key .k-today::before{content:"";width:14px;height:14px;box-shadow:inset 0 0 0 3px var(--tx)}
.key .k-inview::before{content:"";width:16px;height:16px;border:1px solid var(--rule);box-shadow:inset 0 -4px 0 var(--tx)}

/* What's on: one column, a quiet action line, hairlines only */
.list{display:flex;flex-direction:column;gap:28px;max-width:760px;width:100%;margin:0 auto}
.days-list{display:flex;flex-direction:column;gap:44px}
.dgroup{display:flex;flex-direction:column;gap:0;scroll-margin-top:16px}
.dgroup .dh:focus:not(:focus-visible){outline:none}
.dgroup .dh:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.dh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:700 23px/1.25 var(--d);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.dgroup.red .dh{border-bottom:1px solid var(--hair)}
.dgroup.red .dname{color:var(--acc)}
.rl{font:500 16px/1 var(--sc);letter-spacing:.06em;color:var(--acc);background:var(--tint);padding:4px 7px}
.dgroup.past .dname{color:var(--soft)}
/* Already happened: one section under the list, closed until the reader opens it (Brian, 13 Oct) */
.past-w{display:flex;flex-direction:column;gap:32px;padding-top:4px}
.past-w[hidden],.past-list[hidden]{display:none}
.lbl.past-btn{align-self:flex-start;justify-content:flex-start;gap:12px;padding:10px 18px;text-align:left;line-height:1.3}
.past-btn .pm{flex:none;width:1em;font:700 22px/1 var(--l);text-align:center}
.lbl.past-btn:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
@media (max-width:640px){.lbl.past-btn{align-self:stretch}}
.tks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tk{display:flex;flex-direction:column;gap:2px;padding:20px 0 12px;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,var(--paper));scroll-margin-top:16px}
.tk:last-child{border-bottom:0}
.tk .when{font:500 17px/1.4 var(--l);color:var(--soft);font-variant-numeric:lining-nums}
.tk h3,.tk h4{font:700 20px/1.35 var(--d)}
.alm .tk h3 a,.alm .tk h4 a{display:inline;padding:9px 0;color:var(--tx);text-decoration:none}
.alm .tk h3 a:hover,.alm .tk h4 a:hover,.alm .tk h3 a:focus-visible,.alm .tk h4 a:focus-visible{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1px}
.alm .tk.dl h4 a,.tk.dl .when{color:var(--acc)}
.tk .meta{font-size:17px;color:var(--soft);margin-top:2px}
.tk .acts{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:2px}
.act{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;color:var(--acc);font:500 17px/1.2 var(--sc);letter-spacing:.04em;cursor:pointer;text-decoration:none}
@media (hover:hover){.act:hover{text-decoration:underline;text-underline-offset:4px}}
.act[aria-pressed="true"]{color:var(--tx)}
.act[aria-pressed="true"] [aria-hidden]{color:var(--acc)}
.act[aria-expanded="true"]{text-decoration:underline;text-underline-offset:4px}
.conf{font-size:17px;color:var(--tx)}
.conf:empty{display:none}
.cal{margin-top:6px;padding:14px 0 6px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.cal-h{font:500 18px/1.2 var(--sc);letter-spacing:.04em}
.cal-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:640px){.cal-g{grid-template-columns:minmax(0,1fr)}}
.cal .act{align-self:flex-start}
.empty{border:1px solid var(--hair);padding:16px 20px;text-align:center}
.dgroup>.lnk.more,.rec>.lnk.more{align-self:flex-start;font:500 17px/1.2 var(--sc);letter-spacing:.04em;padding:0}
/* dates to know in the list: kind, title, a plain note, then the source, small, at the bottom */
.dts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dt{display:flex;flex-direction:column;gap:2px;padding:16px 0 10px;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,var(--paper));scroll-margin-top:16px}
.dt:last-child{border-bottom:0}
.dts:not([hidden])+.tks{border-top:1px solid color-mix(in srgb,var(--rule) 60%,var(--paper))}
.dk{font:500 17px/1.4 var(--sc);letter-spacing:.04em;color:var(--soft)}
/* inline, so a kind line that wraps keeps its mark at the start of the first line */
.dk .mk{width:11px;height:11px;margin-right:8px;vertical-align:1px}
.dt.k-deadline .dk{color:var(--acc)}
.dtt{font:700 20px/1.35 var(--d)}
.dnote{font-size:18px;line-height:1.5}
.dsrc{font:400 16px/1.45 var(--l);color:var(--soft);margin-top:6px}
.alm .dsrc a{padding:13px 0}
.dt .acts{margin-top:0}
.dgroup.allm .dname{font-style:italic}
.backdays{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alm .backdays:focus{position:static;width:auto;height:auto;clip:auto;overflow:visible;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font:500 17px/1.2 var(--sc);letter-spacing:.04em}
.dsum .dnote .lnk{font-size:18px;padding:0}
.mnext{display:flex;justify-content:flex-end;border-top:1px solid var(--rule);padding-top:6px}
.alm .mnext a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:500 18px/1 var(--sc);letter-spacing:.04em;text-decoration:none}
.alm .mnext a:hover{text-decoration:underline}
.mnav .dayslink{display:none!important}
@media (min-width:760px) and (max-width:1099px){.mnav .dayslink{display:inline-flex!important}}
/* At a glance: dates to know */
.gdates{margin-top:26px}
.glance .gdates .lab{font:500 19px/1.3 var(--sc);letter-spacing:.04em;color:var(--soft);margin-bottom:8px}
.gdl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gdl li{border-bottom:1px solid var(--rule)}
.alm .gdl a{display:flex;gap:12px;align-items:baseline;min-height:44px;padding:9px 0;color:var(--tx);text-decoration:none}
.gdl b{flex:none;width:6.4em;font:500 17px/1.3 var(--sc);letter-spacing:.04em;color:var(--acc);white-space:nowrap}
.gdl span{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
@media (hover:hover){.alm .gdl a:hover span{text-decoration-color:var(--acc)}}
.gmore{font-size:17px;color:var(--soft);margin-top:8px}
.rec .sub{margin-top:-18px}

/* While you wait */
.wyw{display:flex;flex-direction:column;gap:8px;max-width:920px;width:100%;margin:0 auto}
.wyw .lab{margin-bottom:0}
.sub{text-align:center;color:var(--soft);font-size:17px}
.rgrid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.alm .rcard{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border:1px solid var(--rule);background:var(--paper);color:var(--tx);text-decoration:none}
.alm .rcard:hover{border-color:var(--hair)}
.rcard b{font:700 19px/1.3 var(--d);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px}
.rcard span:last-child{font-size:17px;color:var(--soft)}
.srcl{font:500 16px/1 var(--sc);letter-spacing:.06em;color:var(--soft)}
/* who made it sits at the bottom of the card (Brian, 9 Oct) */
.rcard .srcl{order:3;margin-top:auto;padding-top:6px}

/* Your month ahead */
.mail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start;scroll-margin-top:16px}
@media (max-width:899px){.mail{grid-template-columns:minmax(0,1fr)}}
.mail-l{display:flex;flex-direction:column;gap:14px}
.mail-l .lab{font-size:24px;color:var(--acc);margin:0}
.mail-l .lab:focus{outline:none}
.pitch{font-size:20px;max-width:34ch}
.mail-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.flab{font:500 18px/1.2 var(--sc);letter-spacing:.04em;color:var(--tx)}
.field label.check{font:400 18px/1.45 var(--b);letter-spacing:0}
.field .help{font-size:17px;color:var(--soft)}
.alm input[type=email],.alm input[type=text],.alm input[type=url],.alm input[type=date],.alm textarea{width:100%;max-width:26em;min-height:50px;padding:8px 12px;font:400 19px/1.3 var(--b);color:var(--tx);background:#FFFFFF;border:1px solid var(--soft);border-radius:0}
.alm textarea{max-width:40em;min-height:140px;resize:vertical}
.alm input[type=date]{-webkit-appearance:none;appearance:none;display:block;text-align:left}
.alm [aria-invalid="true"]{border-color:var(--acc);border-width:2px}
.err{color:var(--acc);font-size:17px;font-weight:700}
.err:empty{display:none}
.picks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.picks li{border:1px solid var(--rule);padding:6px 12px;font-size:18px}
.picks .none{color:var(--soft)}
.mail-form .lbl.solid,.evform .lbl.solid{align-self:flex-start;min-width:12em;min-height:50px}
.priv{font-size:17px;color:var(--soft)}
.alm .sub a,.alm .priv a{padding:12px 0}
.ok{border:1px solid var(--hair);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ok:focus{outline:3px solid var(--tx);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* About: "What should we add next?" */
.suggest{border-top:1px solid var(--hair);padding-top:24px}
.sg-form{display:flex;flex-direction:column;gap:18px}
.sg-form .help{font-size:17px}
.sg-acts .lbl.solid{min-width:10em}
.sample>summary{list-style:none;font:500 18px/1.2 var(--sc);letter-spacing:.04em}
/* the sample opens from a button beside "Send me my month" once the script runs (Brian, 9 Oct) */
.sample.by-btn>summary{display:none}
.mail-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sample>summary::-webkit-details-marker{display:none}
.sample>summary::after{content:"";width:0;height:0;margin-left:10px;border:6px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.sample[open]>summary::after{border-top-color:transparent;border-bottom-color:currentColor;transform:translateY(-3px)}
.sample[open]>summary{margin-bottom:8px}
.email{background:#FFFFFF;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ehead{display:grid;gap:2px;padding:12px 18px;border-bottom:1px solid var(--rule);font-size:17px}
.ehead p{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 8px}
.ehead span{font:500 16px/1.4 var(--sc);letter-spacing:.04em;color:var(--soft)}
.ebody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;font-size:18px}
.ebody .eh{font:500 18px/1.2 var(--sc);letter-spacing:.04em;color:var(--acc);margin-top:6px;padding-bottom:4px;border-bottom:1px dotted var(--rule)}
.elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.elist li{display:grid;grid-template-columns:3.9em minmax(0,1fr);gap:0 8px}
.elist b{color:var(--acc)}
.elist span{grid-column:2;display:block;color:var(--soft);font-size:16px}
.esrc{display:block;color:var(--soft);font-size:16px}
.efoot{font-size:16px;color:var(--soft);border-top:1px solid var(--rule);padding-top:10px;margin-top:4px}

/* Best days to...: one row per card (what, and when), opened for the why, like the This month checklist */
.best{background:var(--tint);padding:18px 22px}
.best .lab{text-align:center;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:6px}
.best .lab::before,.best .lab::after{content:"\2766";color:var(--acc);margin:0 10px;font-size:.9em}
.bdays{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bdays>li+li{border-top:1px solid var(--hair)}
.bd summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:4px 16px;min-height:44px;padding:10px 0;cursor:pointer}
.bd summary::-webkit-details-marker{display:none}
.bd summary:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.bd-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-h{font:700 20px/1.3 var(--b);color:var(--tx)}
.bd-w{font:400 italic 20px/1.3 var(--d);color:var(--acc)}
.bd summary .ibox{flex:none;display:inline-flex;align-items:center;min-height:28px}
.bd[open] summary .ibox{text-decoration-thickness:2px;font-weight:700}
.bd-b{margin:0 0 12px;padding:12px 16px;background:var(--paper);font-size:18px;line-height:1.55;display:flex;flex-direction:column;gap:6px}
.bd-b .srch{margin-top:6px}
.best .src{font:400 16px/1.5 var(--l);color:var(--soft)}
@media (prefers-reduced-motion:no-preference){.bd[open] .bd-b{animation:bd-open .18s ease-out}}
@keyframes bd-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.srch{font:500 16px/1 var(--sc);letter-spacing:.06em;color:var(--soft);margin-top:4px}
.srcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.srcs li{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:16px;color:var(--soft)}
.alm .srcs a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--soft)}

/* More resources: added by tnc.js only for engaged visitors */
.more-res{margin:24px 0 16px;padding:16px 0 0;border-top:1px solid var(--rule);color:var(--tx)}
.more-res h2{margin:0 0 8px;font:600 22px/1.2 var(--d);color:var(--tx)}
.more-res ul{list-style:none;margin:0;padding:0}
.more-res li{padding:4px 0 8px;font:400 18px/1.45 var(--b);color:var(--soft);overflow-wrap:anywhere}
.alm .more-res a{display:flex;width:fit-content;align-items:center;min-height:44px;font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.alm .more-res a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* footer */
.foot2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:8px 0 16px;border-top:1px solid var(--rule);font:400 16px/1.4 var(--l);color:var(--soft)}
.foot2 nav{display:flex;flex-wrap:wrap;gap:0 18px}
.alm .foot2 a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:17px;color:var(--soft)}
.alm .foot2 a.ayni{color:var(--acc)}

/* event page */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px;font:400 17px/1.4 var(--l);color:var(--soft)}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"\203A";color:var(--soft)}
.alm .crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--soft)}
.crumbs [aria-current]{overflow-wrap:anywhere}
@media (max-width:640px){.crumbs li[aria-current]{display:none}}
.ev-head{display:flex;gap:22px;align-items:flex-start}
.ev-head .tear{margin:0}
.ev-head .kick{font:500 18px/1.3 var(--sc);letter-spacing:.04em;color:var(--acc)}
.ev-title{font:400 italic clamp(34px,5vw,52px)/1.08 var(--d);letter-spacing:-.005em;margin-top:4px}
.ev-org{font-size:20px;color:var(--soft);margin-top:8px}
@media (max-width:560px){.ev-head{flex-direction:column;gap:14px}}
.ev-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:820px){.ev-grid{grid-template-columns:1fr}}
.ev-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.facts{margin:0;border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px dotted var(--rule)}
.facts dt{font:500 18px/1.4 var(--sc);letter-spacing:.04em;color:var(--soft)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.facts .yt{display:block;color:var(--soft);font-size:17px}
.facts .yt:empty{display:none}
.facts .fine{display:block;color:var(--soft);font-size:16px}
@media (max-width:560px){.facts div{grid-template-columns:1fr;gap:0}}
.ev-desc{font-size:20px;max-width:60ch}
.ev-acts{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.ev-acts .act{padding:0 6px}
.ev-acts .lbl[aria-pressed="true"]{background:var(--tint);border-color:var(--hair);color:var(--tx)}
.ev-acts .lbl[aria-pressed="true"] [aria-hidden]{color:var(--acc)}
.pastnote{border:1px solid var(--hair);background:var(--tint);padding:12px 16px;font-size:18px}
.addcal .lab{margin-bottom:8px}
.srcline{font-size:17px;color:var(--soft);border-top:1px dotted var(--rule);padding-top:14px}
.srcline a{padding:12px 0}
.ev-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ev-side .wyw{gap:10px}
.ev-side .wyw .lab,.ev-side .sub{text-align:left}
.ev-side .rgrid{grid-template-columns:minmax(0,1fr)}
.related{display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto}

/* forms page */
.evform{display:flex;flex-direction:column;gap:22px;max-width:760px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.fgrid .full{grid-column:1/-1}
@media (max-width:640px){.fgrid{grid-template-columns:minmax(0,1fr)}}
fieldset{border:1px solid var(--rule);padding:16px 18px 20px;margin:0;min-width:0}
legend{font:500 19px/1.3 var(--sc);letter-spacing:.04em;color:var(--soft);padding:0 6px}
.req{color:var(--acc)}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer;font-size:18px}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:1px 0 0;border:1.5px solid var(--soft);border-radius:0;background:#FFFFFF;display:grid;place-content:center;cursor:pointer}
.check input::after{content:"";width:12px;height:7px;border-left:3px solid #FFFFFF;border-bottom:3px solid #FFFFFF;transform:translateY(-2px) rotate(-45deg);visibility:hidden}
.check input:checked{background:var(--acc);border-color:var(--acc)}
.check input:checked::after{visibility:visible}
.fixnote{border-left:3px solid var(--acc);background:var(--tint);padding:12px 16px}

/* prose pages: about, privacy, terms, guides, my events, 404 */
.page-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.page-head h1{font:400 italic clamp(40px,6vw,64px)/1.05 var(--d);letter-spacing:-.005em;text-wrap:balance}
.page-head .lede{font-size:21px;max-width:44ch}
.prose{max-width:68ch;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.prose h2{font:700 24px/1.3 var(--d);margin-top:14px}
.prose h3{font:700 20px/1.3 var(--d);margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
/* a list item that is only a link (Keep reading, Sources) gets a full 44px target */
.prose li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
.prose .fine{font-size:17px;color:var(--soft)}
.prose table{border-collapse:collapse;width:100%;font-size:17px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:8px 10px;border-top:1px solid var(--rule)}
.tblw{overflow-x:auto}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.mlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.mlist{grid-template-columns:minmax(0,1fr)}}
.alm .mcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--rule);background:#FFFFFF;color:var(--tx);text-decoration:none}
.mcard .band{background:var(--macc);color:#FFFFFF;padding:8px 14px;font:500 17px/1 var(--sc);letter-spacing:.08em}
.mcard b{font:400 italic 34px/1.1 var(--d);padding:12px 14px 2px}
.mcard span:last-child{padding:0 14px 14px;color:var(--soft);font-size:17px}
.alm .mcard:hover{border-color:var(--macc)}
.mine-page{max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* My events list, menu, sheets and the phone bottom bar */
.stash{display:none}
.mine.in-sheet,.menu.in-sheet{display:block}
.mine-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.mine-list li{display:grid;grid-template-columns:4.4em minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px dotted var(--rule)}
.mine-list li.none{display:block;color:var(--soft);border:0}
.mine-list li.past{opacity:.75}
.mine-list .mh{display:block;font:500 17px/1.2 var(--sc);letter-spacing:.04em;color:var(--soft);border:0;padding:16px 0 4px}
.mdate{font:500 17px/1.1 var(--sc);color:var(--acc)}
.mt{display:flex;flex-direction:column;min-width:0}
.mt a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px;display:inline-flex;min-height:44px;align-items:center}
.mt span{font-size:16px;color:var(--soft)}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:flex;align-items:center;min-height:52px;border-bottom:1px dotted var(--rule);font:500 19px/1.2 var(--sc);letter-spacing:.03em;color:var(--tx);text-decoration:none}
.menu a[aria-current]{color:var(--acc);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:6px}
.menu .mh{font:500 16px/1 var(--sc);letter-spacing:.06em;color:var(--soft);padding:16px 0 4px}
.sheet{--c-bg:var(--paper);--c-fg:var(--tx);--c-acc:var(--acc);--c-tint:var(--tint);--c-hair:color-mix(in srgb,var(--acc) 28%,var(--paper));position:fixed;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(36,34,31,.5)}
.sheet-in{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;background:var(--paper);color:var(--tx);border-left:1px solid var(--rule);font:400 19px/1.5 var(--b)}
@media (max-width:759px){.sheet-in{top:auto;left:0;width:100%;max-height:86vh;border-left:0;border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.sheet-hd h2{font:400 italic 26px/1.2 var(--d)}
.sheet-body{flex:1;overflow:auto;padding:16px;overscroll-behavior:contain}
.sheet-body .sub{text-align:left}
.sheet-foot{display:flex;flex-direction:column;gap:10px;padding:12px 16px;border-top:1px solid var(--rule)}
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;background:var(--paper);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.bbar button,.bbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;padding:6px 2px;background:transparent;border:0;border-left:1px solid var(--rule);color:var(--tx);cursor:pointer;text-decoration:none;font:inherit}
.bbar>:first-child{border-left:0}
.bbar b{font:500 18px/1.1 var(--sc);letter-spacing:.02em}
.bbar span{font:400 16px/1.1 var(--l);color:var(--soft);white-space:nowrap}
@media (max-width:759px){.bbar{display:grid}body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
html.sheet-open{overflow:hidden}
.note-bar{border:1px solid var(--hair);background:var(--tint);padding:12px 16px;font-size:18px}
.formwrap{max-width:760px;width:100%;margin:0 auto}
.check.full,.field.full{grid-column:1/-1}
.alm .crumbs a,.alm .srcs a{min-width:44px}
.evform .field input,.evform .field select,.evform .field textarea{max-width:none}

/* ================= "Show on the calendar": one Off | On switch per kind of date ================= */
.dfil{display:flex;flex-direction:column;gap:8px}
.dfil-h{margin:0}
.dctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.ctl.dctl .ctl-lab{flex:1 1 9em;font:400 18px/1.3 var(--b);letter-spacing:0;color:var(--tx)}
.dk-hint{font-size:17px;margin-top:-4px}
.dk-hint .lnk{font-size:17px;padding:0}
/* compact switches here (Brian, 9 Oct: "these switches are huge"): 34px to look at, still a 44px target via ::after */
/* rows sit 44px apart so neighbouring tap areas never overlap */
.dfil{gap:10px}
.dfil .sw{position:relative}
.dfil .sw-c{min-height:42px;padding:2px 10px;font-size:16px;gap:4px}
.dfil .sw::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
/* in the Filters panel each label sits next to its switch, not across the panel from it */
.fctl .dctl{justify-content:flex-start}
.fctl .dctl .ctl-lab{flex:0 1 14em}
.fctl .dfil{flex-basis:100%;border-top:1px dotted var(--rule);padding-top:12px}
.fctl.in-sheet .dfil{border-top:1px solid var(--rule);padding-top:20px;gap:14px}
.fctl.in-sheet .dctl{flex-direction:row;align-items:center}

/* ================= month layout: from 1100px the grid is a sticky sidebar that steers the list =================
   Below 1100px the grid stays inline above the list, and the month head carries the month links and Today. */
.mlay{display:flex;flex-direction:column;gap:40px;min-width:0}
@media (max-width:1099px){
  .snav,.stoday,#m-dfil-s{display:none}
  #m-days.agenda{display:none}
}
@media (min-width:1100px){
  body[data-page="month"] .alm{max-width:1280px}
  .mhead .mnav,#m-dfil-f,.ctl-view{display:none}
  /* more air between the calendar and the page (Brian, 9 Oct) */
  .mlay{display:grid;grid-template-columns:364px minmax(0,1fr);column-gap:clamp(72px,7vw,112px);row-gap:0;align-items:start}
  .mlay>*{grid-column:2;margin-bottom:40px}
  .mlay>.orn{margin-bottom:32px}
  .mlay>:last-child{margin-bottom:0}
  /* spans every row of the right column, so it stays in view the whole way down; scrolls on its own if taller */
  /* it scrolls on its own only when the window is too short for it, and the wheel then passes on to the page at
     its ends (no overscroll containment: that froze the page under the pointer). A fade says there is more. */
  .mlay>.mside{grid-column:1;grid-row:1 / span 40;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
    margin:0;padding:2px 6px 12px;display:flex;flex-direction:column;gap:8px}
  .mside.ovf:not(.at-end){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
  .snav{display:flex;justify-content:space-between;align-items:center;margin:0 -6px;border-bottom:1px solid var(--rule)}
  .alm .snav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:500 18px/1 var(--sc);letter-spacing:.04em;text-decoration:none;color:var(--acc)}
  .alm .snav a:hover{text-decoration:underline}
  .mside .lab{margin:4px 0 0}
  .mside .mgrid-w{max-width:none}
  .mside .mgrid li>*{height:46px;font-size:19px}
  .alm .snav .stoday{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--hair);color:var(--tx);white-space:nowrap}
  .alm .snav .stoday[hidden]{display:none}
  .mside .key{justify-content:flex-start;gap:2px 16px;margin:0;line-height:1.25}
  .mside .dfil{border-top:1px solid var(--rule);padding-top:10px}
  /* the right column is narrower than the page was, so its two-up blocks stack */
  .mlay .duo,.mlay .mail{grid-template-columns:minmax(0,1fr)}
  .mlay .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mlay .list,.mlay .wyw{max-width:none}
}
/* laptop windows: shorter grid squares so the sidebar fits a 768px window (still 44px targets) */
@media (min-width:1100px) and (max-height:860px){.mside .mgrid li>*{height:44px}}

/* Windows High Contrast: colour fills vanish, so draw every grid cue with system colours */
@media (forced-colors:active){
  .mk,.mgrid .has::after,.key li::before{forced-color-adjust:none;background:CanvasText}
  .mgrid .red{border:3px solid CanvasText}
  .mgrid .today{outline:3px double CanvasText;outline-offset:-6px}
  .mgrid .inview{border-bottom:5px solid Highlight}
  .mk-note{background:Canvas;box-shadow:inset 0 0 0 2px CanvasText}
  .key .k-red::before{background:Canvas;border:3px solid CanvasText}
  .key .k-has::before{background:linear-gradient(CanvasText,CanvasText) center bottom 3px/10px 2px no-repeat Canvas}
  .key .k-today::before{background:Canvas;outline:3px double CanvasText;outline-offset:-5px}
  .key .k-inview::before{background:Canvas;border-bottom:4px solid Highlight;box-shadow:none}
  .sw[aria-checked="false"] .sw-off,.sw[aria-checked="true"] .sw-on{outline:2px solid Highlight;outline-offset:-4px}
}