/* ============================================================
   ELC PORTAL: shared app styles.
   Faithful port of the Claude Design package (design/mockups/
   2026-07-07-portal-app-v0.1/portal-app.css). Consumes tokens.css
   only (ADR-0002): no hex, no font literals in this file.
   Voice: sentence case, full stops, no em-dashes, no emoji.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
img,svg{display:block;max-width:100%;}
html{overflow-x:hidden;}
body{font-family:var(--sans);font-weight:300;background:var(--paper);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;min-height:100vh;overflow-x:hidden;}
a{color:var(--purple);text-decoration:none;}
a:hover{color:var(--aubergine);}

/* ---- background: fixed topographic contour field, radiating from the mark ---- */
.topline{position:fixed;top:0;left:0;right:0;height:3px;background:var(--purple);z-index:60;}
#topo{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.62;}

/* ---- type recipes ---- */
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);}
.eyebrow::before{content:"// ";color:var(--red);}
.eyebrow.on-dark{color:rgba(244,242,234,0.6);}
.eyebrow.on-dark::before{color:var(--red-lift);}
.turn{font-family:var(--serif);font-style:italic;color:var(--gold-deep);}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:700;}

/* ---- tape chip: live markers only, max one per surface ---- */
.tape{display:inline-block;font-family:var(--stencil);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);padding:3px 10px 2px;transform:rotate(-1.2deg);}
header .tape{margin-left:14px;margin-right:auto;flex:none;}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,44px);background:rgba(244,242,234,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
/* Masthead wordmark = the CD branded lockup "ELC Portal" (Trevor 2026-07-20: "ELC
   Portal is the canonical name"). Hanken Grotesk 600 per the CD handover appendix; the
   "ELC" now lives in the wordmark, so the separate ELC crest crop was dropped (the CD
   lockup carries no crop). The CD specimen's "//" accent sub-line is deliberately
   omitted: that phrasing is hard-banned in outward copy. CD refines type polish (rule 7). */
.brand .desc{font-family:'Hanken Grotesk',var(--sans);font-size:24px;font-weight:600;letter-spacing:-0.01em;color:var(--aubergine);align-self:center;display:inline-flex;align-items:center;gap:11px;}
/* Portal ring mark (0063): the Portal's OWN logo, leading the "ELC Portal" lockup
   (Trevor 2026-07-20: "it is the logo for the portal", bigger + leading). CSS mask so
   the one file recolours by token; 7-ring at 40px clears the audit min-size floor. Path
   is relative to THIS stylesheet at site/assets/ (img/...), NOT the page. id="mark"
   anchors contour.js (the contour field grows from the ring). CD refines polish. */
.brand .portal-mark{width:40px;height:40px;flex:none;background:var(--aubergine);
  -webkit-mask:url(img/portal-mark.svg) center/contain no-repeat;
          mask:url(img/portal-mark.svg) center/contain no-repeat;}
nav{display:flex;align-items:center;gap:28px;}
.navlink{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--charcoal);padding:6px 2px;cursor:pointer;
  white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.navlink:hover{color:var(--ink);}
.navlink.active{color:var(--ink);border-bottom-color:var(--red);}

/* FAQ dropdown (issue 0037). ponytail: native details/summary, no JS; closes on re-click, not click-outside */
.nav-dd{position:relative;}
.nav-dd summary{list-style:none;}
.nav-dd summary::-webkit-details-marker{display:none;}
.nav-dd[open] summary{color:var(--ink);}
.nav-dd .dd-panel{position:absolute;top:calc(100% + 10px);right:-8px;min-width:180px;z-index:30;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--white);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-quiet);}
.nav-dd .dd-panel a{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--charcoal);
  padding:8px 12px;border-radius:6px;white-space:nowrap;}
.nav-dd .dd-panel a:hover{color:var(--ink);background:var(--paper);}
/* campus switcher (issue 0067): SCAFFOLD, Claude Design to restyle. Desktop = a
   nav-dd dropdown (summary "Centres"); links flow into .dd-panel (display:contents)
   and take .dd-panel a styling. Mobile = a .cal-pop sheet cloned from .campus-switch. */
.campus-switch{display:contents;}
.campus-switch .campus.active{color:var(--ink);font-weight:600;}
button.tab{background:none;border:none;padding:0;}
.cal-pop .campus-switch{display:flex;flex-direction:column;}
.cal-pop .campus{padding:13px 2px;border-top:1px solid var(--rule-2);font-size:15.5px;color:var(--charcoal);text-decoration:none;}
.cal-pop .campus:first-child{border-top:none;}

/* footer FAQ links: mobile only (no top nav below 720px) */
.foot-links .m-only{display:none;}

/* ---- layout ---- */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(26px,4vw,42px) clamp(20px,4vw,44px) 60px;}
.wrap.sub{padding-top:18px;}
.greet{margin-bottom:26px;}
.greet .eyebrow{margin-bottom:10px;display:inline-block;}
.greet h1{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(30px,4.4vw,46px);line-height:1.05;
  letter-spacing:-0.014em;color:var(--ink);max-width:20ch;}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}

/* ---- tiles ---- */
.tile{position:relative;background:var(--white);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-quiet);
  transition:box-shadow .18s,transform .12s,border-color .18s;}
.tile.link{cursor:pointer;}
.tile.link:hover{box-shadow:var(--shadow-hard);border-color:var(--purple);transform:translateY(-1px);}
.tile-top-purple{border-top:2px solid var(--purple);}

/* ---- this week feature ---- */
.feature{grid-column:span 7;overflow:hidden;display:flex;flex-direction:column;}
.feature .photo{position:relative;height:210px;}
.feature .photo img{width:100%;height:100%;object-fit:cover;} /* dormant-by-design: armonia/sport photo set pending */
.feature .photo .lab{position:absolute;top:15px;left:18px;}
.feature .body{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1;}
.ruler{height:9px;width:56px;border-bottom:2px solid var(--red);background-image:repeating-linear-gradient(90deg,var(--red) 0 1px,transparent 1px 9px);}
/* due badge on policy doc rows (render.js docs renderer emits .live for docs[].due) */
.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}

/* ---- note from leadership ---- */
.note{grid-column:span 5;padding:22px 24px 20px;display:flex;flex-direction:column;}
.note .who{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.note .when{font-family:var(--wordmark);font-weight:500;color:var(--muted);font-size:13px;margin-top:5px;letter-spacing:0;}
.headshot{border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(1.02);padding:2px;background:var(--paper);box-shadow:0 0 0 2px var(--purple);}
.note h2{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.28;color:var(--ink);margin-bottom:11px;}
.note p{font-size:14px;line-height:1.6;color:var(--charcoal);flex:1;}
.note .sig{margin-top:15px;padding-top:14px;border-top:1px solid var(--rule-2);font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);}
.note .chip{margin-top:14px;align-self:flex-start;}

/* ---- registration knoll ---- */
.reg-card{grid-column:span 4;padding:20px;display:flex;flex-direction:column;}
.reg-card .eyebrow{margin-bottom:12px;}
.reg-card h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;margin-bottom:9px;color:var(--ink);}
.reg-card p{font-size:13.5px;line-height:1.55;color:var(--charcoal);flex:1;margin-bottom:16px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:13.5px;
  padding:12px 18px;border-radius:6px;cursor:pointer;border:1px solid var(--aubergine);background:var(--aubergine);color:var(--white-pure);
  transition:background .18s,transform .06s;white-space:nowrap;text-decoration:none;}
.btn:hover{background:var(--aubergine-2);color:var(--white-pure);}
.btn .arw{font-family:var(--mono);font-weight:700;}
.btn:active{transform:translateY(1px);}
.btn.purple{background:var(--purple);border-color:var(--purple);}
.btn.purple:hover{background:var(--purple-hover);}
.btn.ghost{background:transparent;color:var(--aubergine);border-color:var(--rule);}
.btn.ghost:hover{background:var(--paper);border-color:var(--aubergine);color:var(--aubergine);}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink-deep);}
.btn.gold:hover{background:var(--gold-hover);color:var(--gold-ink-deep);}
.btn.block{width:100%;justify-content:space-between;}
.btn.sm{padding:9px 14px;font-size:12.5px;}

/* ---- sport wide ---- */
.sport{grid-column:span 8;padding:22px 24px;}
.sport .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;}
.sport .head h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;margin-top:6px;color:var(--ink);max-width:16ch;}
.sport .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;}
.sport .sub{margin-top:12px;font-size:12.5px;color:var(--muted);font-weight:300;}
.sport-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule-2);}
.sport .grid .sport-row:nth-last-child(-n+2){border-bottom:none;}
.sport-row span.n{font-size:14.5px;color:var(--ink);}
.status{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.status.open{color:var(--red);border:1px solid rgba(168,68,58,0.4);background:rgba(168,68,58,0.06);}
.status.soon{color:var(--muted);border:1px solid var(--rule);}

/* ---- policies (aubergine small inversion) ---- */
.policies{grid-column:span 4;padding:22px;background:var(--aubergine);border:1px solid var(--aubergine);border-radius:10px;
  color:var(--text-on-dark);display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .12s;text-decoration:none;}
.policies:hover{transform:translateY(-1px);}
.policies .rings{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 92% -8%,transparent 0 24px,rgba(244,242,234,0.06) 24px 25px);}
.policies .eyebrow{margin-bottom:12px;position:relative;}
.policies h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--white-pure);margin-bottom:9px;position:relative;}
.policies p{font-size:13.5px;line-height:1.55;color:var(--text-on-dark);flex:1;margin-bottom:16px;position:relative;}
.policies .btn{position:relative;}

/* ---- footer ---- */
.foot-strip{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:22px clamp(20px,4vw,44px) 40px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);}
.foot-strip .l{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.foot-strip .r{font-size:12.5px;color:var(--muted);font-weight:300;}
.foot-strip .fine{flex-basis:100%;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);}

/* ============================================================
   SUB-PAGE SCAFFOLDING (Policies · Activities · Calendar)
   ============================================================ */
.crumb{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px clamp(20px,4vw,44px) 0;
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--ink);}
.page-head{margin-bottom:30px;}
.page-head .eyebrow{display:inline-block;margin-bottom:12px;}
.page-head h1{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(30px,4.4vw,46px);line-height:1.04;letter-spacing:-0.014em;color:var(--ink);margin-bottom:14px;max-width:18ch;}
.page-head .lead{font-size:clamp(15px,1.6vw,18px);font-weight:300;line-height:1.55;color:var(--charcoal);max-width:58ch;}
.section{margin-bottom:34px;}
.sec-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.sec-eyebrow .ln{height:1px;flex:1;background:var(--rule);}
/* Week jump (relay #16): the this-week/next-week flip in the home band header.
   Mechanical scaffolding only; look = Claude Design lane (rule 7). */
.wk-jump{background:none;border:none;cursor:pointer;padding:0;min-height:24px;flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--purple);}
.wk-jump:hover{color:var(--ink);text-decoration:underline;}
.wk-jump:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:2px;}
.page-note{font-weight:300;font-size:13px;color:var(--muted);max-width:60ch;}
.btn-row{margin-top:20px;} /* row after a list or tile (was an inline margin on the old asa page) */

/* search */
.search{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--rule);border-radius:999px;padding:11px 18px;max-width:430px;margin-bottom:28px;}
.search input{border:none;background:none;outline:none;font-family:var(--sans);font-weight:300;font-size:14.5px;color:var(--ink);width:100%;}
.search input::placeholder{color:var(--muted);}
.search svg{width:16px;height:16px;stroke:var(--muted);stroke-width:1.8;fill:none;flex:none;}

/* document rows (policies) */
.doc-list{background:var(--white);border:1px solid var(--rule);border-radius:10px;overflow:hidden;}
.doc-row{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid var(--rule-2);transition:background .15s;text-decoration:none;color:inherit;}
.doc-row:last-child{border-bottom:none;}
.doc-row:hover{background:var(--paper);}
.doc-row .ic{width:38px;height:44px;flex:none;border:1px solid var(--rule);border-radius:4px;background:var(--paper);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.04em;color:var(--muted);}
.doc-row .meta{flex:1;min-width:0;}
.doc-row .nm{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.2;}
.doc-row .sub{font-size:13px;color:var(--muted);margin-top:3px;}
.doc-row .rt{display:flex;align-items:center;gap:14px;flex:none;}
.doc-row .tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.doc-row .dl{width:20px;height:20px;stroke:var(--purple);stroke-width:1.8;fill:none;flex:none;}
.doc-row:hover .dl{stroke:var(--aubergine);}

/* activities grid */
.filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px;}
.filter .f{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;cursor:pointer;background:none;}
.filter .f.on{background:var(--aubergine);border-color:var(--aubergine);color:var(--white-pure);}
.act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.act-card{padding:24px;display:flex;flex-direction:column;}
.act-card .eyebrow{margin-bottom:12px;}
.act-card h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1;margin-bottom:10px;color:var(--ink);}
.act-card p{font-size:14px;line-height:1.55;color:var(--charcoal);margin-bottom:16px;flex:1;}
.act-card .sports{margin:2px 0 16px;}
.act-card .sports .sport-row{padding:9px 0;}
.act-card .sports .sport-row:last-child{border-bottom:none;}
.act-card .sub{margin:0 0 16px;font-size:12.5px;color:var(--muted);font-weight:300;flex:none;} /* mirrors .sport .sub (home note idiom) inside an act-card */
.act-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.chip{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:5px 10px;}
.act-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.act-foot .eyebrow{color:var(--muted);}

/* "how registration works" strip (was inline styles in the package) */
.how{margin-top:20px;padding:20px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.how .ruler{width:40px;}
.how .txt{flex:1;min-width:220px;}
.how .hd{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:3px;}
.how .sub{font-size:13.5px;color:var(--charcoal);font-weight:300;}

/* calendar */
.cal-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start;}
.cal-card{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:22px 24px;}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.cal-top h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink);}
.cal-nav{display:flex;gap:8px;}
.cal-nav button{width:32px;height:32px;border:1px solid var(--rule);border-radius:6px;background:var(--white);color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:14px;}
.cal-nav button:hover{border-color:var(--aubergine);color:var(--ink);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal-dow{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--faint);text-align:center;padding-bottom:8px;}
.cal-cell{aspect-ratio:1/0.92;border-radius:6px;display:flex;align-items:flex-start;justify-content:flex-end;padding:6px 8px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--charcoal);position:relative;border:1px solid transparent;}
.cal-cell.mut{color:var(--faint);}
.cal-cell.has{border-color:var(--rule);background:var(--paper);}
.cal-cell.today{background:var(--red);color:var(--white-pure);font-weight:700;border-color:var(--red);}
.cal-cell .ev{position:absolute;left:8px;bottom:7px;width:7px;height:7px;border-radius:50%;background:var(--purple);}
.cal-cell .ev.gold{background:var(--gold);}
.cal-cell.today .ev{background:var(--white-pure);}
.cal-agenda .wk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);margin:2px 0 8px;}
.cal-agenda .wk.next{color:var(--muted);margin-top:20px;}
.ev-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-2);}
.ev-row:last-child{border-bottom:none;}
.ev-row .dte{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--muted);width:52px;flex:none;padding-top:1px;}
/* Calendar agenda chips carry the month (relay #5: bare day numbers read as nothing
   once the list crosses a month), so they need the extra width. Base 52px elsewhere. */
.cal-agenda .ev-row .dte{width:78px;}
.ev-row .dte.today{color:var(--red);}
.ev-row .ev-main{flex:1;min-width:0;}
.ev-row .et{flex:1;font-size:14px;color:var(--ink);}
.ev-row .es{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase;}
/* issues 0027+0032 add-to-calendar: Google (URL) + Apple (.ics) marks per event.
   Token scaffolding only, Claude Design refines (rule 7). */
.cal-add{display:inline-flex;gap:6px;align-self:center;flex:none;}
.add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;flex:none;
  color:var(--purple);background:transparent;border:1px solid var(--rule);border-radius:5px;padding:0;cursor:pointer;
  text-decoration:none;transition:border-color .15s,color .15s;}
.add-btn:hover{border-color:var(--purple);color:var(--aubergine);}
.add-btn svg{width:12px;height:12px;display:block;}
/* Add/share cluster (0055): desktop shows the three inline (toggle hidden); mobile
   collapses them behind a single toggle (see @720). First-pass CC scaffolding, Claude
   Design refines the expanded control look (rule 7). */
.cal-actions{display:inline-flex;align-items:center;gap:6px;align-self:center;flex:none;}
.cal-actions-menu{display:inline-flex;align-items:center;gap:6px;}
.cal-actions-toggle{display:none;align-items:center;gap:6px;height:26px;padding:0 10px;
  color:var(--purple);background:transparent;border:1px solid var(--rule);border-radius:5px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:0.03em;}
.cal-actions-toggle svg{width:12px;height:12px;flex:none;}
.cal-actions-toggle:hover{border-color:var(--purple);color:var(--aubergine);}
.cal-sub{margin-top:20px;}
.cal-note{font-weight:300;font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center;}
.cal-note.mono{font-family:var(--mono);} /* quiet caption where the subscribe button will live (issue 0004) */
.legend{display:flex;gap:18px;margin-top:16px;font-size:12px;color:var(--muted);}
.legend span{display:inline-flex;align-items:center;gap:7px;}
.legend .d{width:9px;height:9px;border-radius:50%;flex:none;}
.legend .d.today{background:var(--red);}
.legend .d.event{background:var(--purple);}
.legend .d.opens{background:var(--gold);}

/* Calendar event taxonomy (P4 pass A, Trevor 2026-07-19): audience-based dots
   replace the old activity/opens pair. Colours = semantic tokens; supports up to
   3 dots/day via .evs. Type-class + multi-dot assignment = Claude Code lane. */
/* Audience taxonomy = COLOUR + SHAPE (WCAG 1.4.1: never colour alone, so it holds for
   colour-blind parents). parent ● filled circle · child ◆ diamond · holiday ○ ring
   ("school closed" reads as empty). Shapes list every surface a dot appears on (grid,
   popover, home week-strip, legend swatches), so the shape is taught everywhere. The
   home strip's aud class comes from render.js (Claude Code seam, flagged); .dot / .gold
   stay as the mono fallback until then. */
.ev.parent{background:var(--ev-parent);}
.ev.child{background:var(--ev-child);}
.ev.child,.legend .d.child,.day-ev .dot.child{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.ev.holiday,.legend .d.holiday,.day-ev .dot.holiday{background:transparent;border:1.5px solid var(--ev-holiday);}
.legend .d.parent{background:var(--ev-parent);}
.legend .d.child{background:var(--ev-child);}
.day-ev .dot.parent{background:var(--ev-parent);}
.day-ev .dot.child{background:var(--ev-child);}
.legend.wk{margin-top:13px;gap:14px;font-size:11px;}
.legend.wk span{white-space:nowrap;}
.cal-cell .evs{position:absolute;left:8px;bottom:7px;display:flex;gap:3px;}
.cal-cell .evs .ev{position:static;}
.cal-cell.today .ev,.cal-cell.today .evs .ev{background:var(--white-pure);}
.cal-cell.today .ev.holiday,.cal-cell.today .evs .ev.holiday{background:transparent;border-color:var(--white-pure);}
/* Mobile presence marker (0056): neutral dot + count that stands in for the shaped
   taxonomy in a cramped phone cell. Hidden on desktop; the @720 block swaps it in.
   Scaffolding tokens only, Claude Design refines the dot polish (rule 7 CD seam). */
.cal-cell .evs .pdot,.cal-cell .evs .pcount{display:none;}
.cal-cell .evs .pdot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;align-self:center;}
.cal-cell .evs .pcount{font-family:var(--mono);font-size:9px;color:var(--muted);align-self:center;}
.cal-cell.today .evs .pdot{background:var(--white-pure);}
.cal-cell.today .evs .pcount{color:var(--white-pure);}
/* Event-day button states (pass B, seam 5): the cells are real <button>s now, so give
   them the pressed/hover treatment on top of the existing token focus ring. */
.cal-cell.has{cursor:pointer;transition:background .12s,border-color .12s,transform .06s;}
.cal-cell.has:hover{background:var(--purple-tint);border-color:var(--purple);}
.cal-cell.has:active{transform:translateY(1px);background:color-mix(in srgb,var(--purple-tint) 55%,var(--purple));}
.cal-cell.today.has:hover{background:var(--red-lift);border-color:var(--red-lift);}
.cal-cell.today.has:active{transform:translateY(1px);background:var(--red);}
/* P4 pass A integration (Claude Code mechanical a11y, flagged to Claude Design pass B):
   event-day cells are real <button>s now, not tabindex divs. Reset the UA button look
   back to the .cal-cell design, give a token focus ring, style the "+N" overflow, and
   extend the 32px month-nav buttons to a 44px invisible tap target. */
button.cal-cell{-webkit-appearance:none;appearance:none;background:transparent;font:inherit;color:inherit;text-align:inherit;}
.cal-cell.has:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.cal-cell .evs .more{font-family:var(--mono);font-size:9px;color:var(--muted);align-self:center;}
.cal-cell.today .evs .more{color:var(--white-pure);}
.cal-nav button{position:relative;}
.cal-nav button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;}

/* Calendar day popover (P4 pass A): hover/tap reveals a day's events with detail,
   each row a link to its event page. Visual = Claude Design lane; the hover/tap/
   keyboard wiring, content from calendarEvents, positioning + multi-event
   handling = Claude Code lane. */
.cal-pop{position:absolute;z-index:40;min-width:230px;max-width:290px;background:var(--white-pure);border:1px solid var(--rule);border-top:2px solid var(--purple);border-radius:10px;box-shadow:var(--shadow-hard);padding:12px 14px;}
.cal-pop .pop-d{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.cal-pop .pev{display:flex;align-items:flex-start;gap:9px;padding:8px 0;text-decoration:none;color:var(--ink);border-top:1px solid var(--rule-2);}
.cal-pop .pev:first-of-type{border-top:none;}
.cal-pop .pev .ev{position:static;flex:none;width:7px;height:7px;border-radius:50%;margin-top:5px;}
.cal-pop .pev .pt{font-size:13.5px;line-height:1.3;}
.cal-pop .pev .ps{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);margin-top:3px;}
.cal-pop .pev:hover .pt,.cal-pop .pev:focus-visible .pt{color:var(--purple);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:2px;}

/* Mobile calendar: on a phone the day popover becomes a bottom sheet (thumb-reachable,
   full-width) instead of the desktop anchored card. The JS still positions the desktop
   card with inline top/left; !important flips it to a fixed sheet on phones.
   0056 (2026-07-20): the grid now LEADS on mobile (agenda below). Pass-B had put the
   agenda first because the 7-col grid was too cramped to read; the presence marker (one
   neutral dot + a count per multi-event day, above) removes that reason, so grid-first is
   restored and .cal-col-agenda{order:-1} was dropped. */
@media(max-width:720px){
  /* Swap the fine taxonomy dots for the single presence marker on multi-event days only
     (:has(.pdot) => a marker was emitted, i.e. >1 event). Single-event days have no
     .pdot, so their one shaped dot stays visible. */
  .cal-cell .evs:has(.pdot) .ev,.cal-cell .evs:has(.pdot) .more{display:none;}
  .cal-cell .evs .pdot,.cal-cell .evs .pcount{display:inline-flex;}
  /* 0057: the bottom sheet (z-index 40) sits under the fixed feedback FAB, the project-
     window pill and the install pill (all z-index 9998) AND the fixed tabbar
     (z-index 55), so hide all four while a day sheet is open (body.sheet-open is
     toggled by render.js on sheet open/close). #pw-pill is deploy-injected chrome;
     #install-pill (0076) ships in site/ and inherits that slot when the project window
     retires at v1. This selector outweighs #install-pill.on by one element, so the
     sheet wins. Without hiding .tabbar the tabbar paints over the bottom of the sheet
     (issue 0064 QA). */
  body.sheet-open #fb-pill,body.sheet-open #pw-pill,body.sheet-open #install-pill,body.sheet-open .tabbar{display:none;}
  /* 0055: one add/share toggle per agenda row on mobile; tapping reveals the three.
     Row wraps so the revealed controls sit under the event without crushing it. */
  .cal-actions-toggle{display:inline-flex;}
  .cal-actions .cal-actions-menu{display:none;}
  .cal-actions.open .cal-actions-menu{display:inline-flex;}
  .ev-row:has(.cal-actions.open){flex-wrap:wrap;}
  .cal-actions.open{margin-left:auto;}
  /* ponytail: 85dvh cap + scroll so a busy day's sheet never runs off the top unreachable;
     leaves a top strip of page showing for tap-outside-to-close. vh fallback for old engines. */
  .cal-pop{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:85vh;max-height:85dvh;overflow-y:auto;border-radius:16px 16px 0 0;border:none;border-top:3px solid var(--purple);box-shadow:var(--shadow-sheet);padding:16px 18px calc(18px + env(safe-area-inset-bottom));animation:sheet-up .22s ease;}
  .cal-pop::before{content:"";display:block;width:38px;height:4px;border-radius:999px;background:var(--rule);margin:0 auto 12px;}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---- bottom tab bar (mobile) ---- */
.tabbar{display:none;}

/* ---- launch pack (issue 0031): scaffolding only, visual pass = Claude Design ---- */
/* status banner: injected under the header by render.js when PORTAL.status is set */
.status-banner{position:relative;z-index:2;border-bottom:1px solid var(--rule);}
.status-banner.notice{background:var(--gold-tint);border-top:2px solid var(--gold-deep);}
.status-banner.alert{background:var(--red-tint);border-top:2px solid var(--red);}
.sb-inner{max-width:1180px;margin:0 auto;padding:12px clamp(20px,4vw,44px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.sb-inner strong{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);}
.sb-inner span{font-size:13.5px;font-weight:300;color:var(--charcoal);flex:1;min-width:200px;}
.sb-x{border:none;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;flex:none;}
.sb-x:hover{color:var(--ink);}

/* registration windows strip (home + activities) */
.windows{background:var(--white);border:1px solid var(--rule);border-top:2px solid var(--purple);border-radius:10px;overflow:hidden;margin-bottom:22px;}
.win-row{display:flex;align-items:center;gap:16px;padding:13px 20px;border-bottom:1px solid var(--rule-2);}
.win-row:last-child{border-bottom:none;}
.win-date{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--muted);width:56px;flex:none;}
.win-main{flex:1;min-width:0;}
.win-main .wt{font-size:14.5px;color:var(--ink);}
.win-main .ws{font-size:12px;color:var(--muted);margin-top:2px;}
.win-count{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);flex:none;}

/* THIS WEEK strip (P4 pass A): a lateral Sun–Sat row of day cards, replacing
   the retired registration-windows countdown. Extends the .band / .sec-eyebrow
   system; tokens only. render.js fills #week (Claude Code lane). */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.day{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:12px 12px 13px;min-height:120px;}
.day-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--rule-2);}
.day .dow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.day .dnum{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;flex:none;}
.day-evs{display:flex;flex-direction:column;gap:8px;flex:1;}
.day-ev{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.28;color:var(--ink);text-decoration:none;}
.day-ev .dot{width:7px;height:7px;border-radius:50%;background:var(--purple);flex:none;margin-top:4px;}
.day-ev .dot.gold{background:var(--gold);}
.day-ev .lbl{border-bottom:1px solid var(--gold);padding-bottom:1px;transition:color .15s,border-color .15s;}
.day-ev:hover .lbl{color:var(--purple);border-bottom-color:var(--purple);}
.day-ev:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:2px;}
.day-none{font-family:var(--mono);font-size:13px;color:var(--faint);}
/* Empty-day marker (pass C, CD call): keep the em-dash, but own it in CSS as a
   :empty::before so there is no text entity in the JS for the redact gate to miss.
   :empty bridges safely: it stays inert while render.js still emits the &mdash; text,
   and lights up the instant render.js emits an empty <span class="day-none"></span>
   (Code seam, flagged). House-clean, gate-proof, design-owned. */
.day-none:empty::before{content:"\2014";}
.day.today{border-top:2px solid var(--purple);background:var(--purple-tint);}
.day.today .dow{color:var(--purple);}
@media(max-width:820px){
  .weekstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:4px;margin-right:-16px;padding-right:16px;}
  .day{scroll-snap-align:start;flex:0 0 44vw;max-width:170px;}
}

/* Portal search results (P4 pass A, Trevor 2026-07-19): the #q-results dropdown
   had NO styling, so hits flowed inline as one compressed run of words. Render
   each page as its own row in an anchored dropdown column (Google-autocomplete
   feel). render.js already emits one <a> per page into #q-results; this is
   presentation only. Tokens only.
   ---- FLAG · Claude Code lane (optional enrichment, not required) ----
   Each row shows the page TITLE only. To make matches clearer, render.js could
   add a per-row context line (section / breadcrumb from the search index) and
   wrap the title in its own <span> so a two-line row can ellipsis cleanly. */
.nav-search{position:relative;}
#q-results{position:absolute;top:calc(100% + 6px);right:0;left:auto;width:min(320px,80vw);background:var(--white-pure);border:1px solid var(--rule);border-top:2px solid var(--purple);border-radius:10px;box-shadow:var(--shadow-hard);overflow-y:auto;max-height:min(60vh,340px);z-index:60;}
#q-results[hidden]{display:none;}
#q-results a{position:relative;display:block;padding:11px 16px 11px 32px;font-size:14px;line-height:1.3;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--rule-2);}
#q-results a:last-child{border-bottom:none;}
#q-results a::before{content:"";position:absolute;left:15px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--faint);}
#q-results a:hover,#q-results a:focus-visible{background:var(--purple-tint);color:var(--purple);outline:none;}
#q-results a:hover::before,#q-results a:focus-visible::before{background:var(--purple);}
.q-none{padding:11px 16px;font-size:13.5px;color:var(--muted);}

/* quiet footer links row, all pages */
.foot-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:4px;}
.foot-links a{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;}
.foot-links a:hover{color:var(--purple);}

/* prose pages (privacy, verify, what-happens-next): plain readable column */
.prose{max-width:66ch;}
.prose h2{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink);margin:30px 0 10px;}
.prose p{font-size:15px;font-weight:300;line-height:1.65;color:var(--charcoal);margin-bottom:12px;}
.prose ul{margin:0 0 14px 18px;}
.prose li{font-size:15px;font-weight:300;line-height:1.6;color:var(--charcoal);margin-bottom:7px;}
.prose strong{font-weight:600;color:var(--ink);}
.prose a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;}

/* story-figure: mechanical scaffold, visual pass = Claude Design (rule 7) */
.story-figure{margin:18px 0;}
.story-figure img{display:block;max-width:100%;height:auto;border:1px solid var(--rule);border-radius:10px;}
.story-figure figcaption{margin-top:8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}

/* ============ RESPONSIVE ============ */
/* Desktop-only tile fixes (issue 0026, re-commented at the 0050 sweep: the home
   feature tile + joint note it described are gone; 0047 bands + Trevor-solo note).
   .feature align-self still serves armonia/sport; the two-headshot cluster rule is
   dormant standby for the joint/HoS note seam (issue 0007, still open). */
@media(min-width:941px){
  .feature{align-self:start;}
  .note .who .headshot{width:52px;height:52px;}
  .note .who .headshot + .headshot{margin-left:-20px;box-shadow:0 0 0 2px var(--purple),0 0 0 4px var(--paper);}
}
@media(max-width:940px){
  .feature,.note,.sport,.policies{grid-column:span 12;}
  .reg-card{grid-column:span 4;}
}
@media(max-width:820px){
  .act-grid{grid-template-columns:1fr;}
  .cal-wrap{grid-template-columns:1fr;}
}
@media(max-width:720px){
  :root{--nav-h:60px;}
  nav{display:none;}
  .foot-links .m-only{display:inline;}
  .reg-card{grid-column:span 12;}
  .sport .grid{grid-template-columns:1fr;}
  .sport .grid .sport-row:nth-last-child(2){border-bottom:1px solid var(--rule-2);}
  body{padding-bottom:76px;}
  .foot-strip{flex-direction:column;align-items:flex-start;gap:8px;text-align:left;}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:55;justify-content:space-around;align-items:center;
    padding:9px 6px calc(9px + env(safe-area-inset-bottom));background:rgba(251,250,246,0.94);backdrop-filter:blur(10px);border-top:1px solid var(--rule);}
  .tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--mono);font-size:8px;font-weight:700;
    letter-spacing:0.06em;text-transform:uppercase;color:var(--faint);flex:1;cursor:pointer;text-decoration:none;}
  .tab .ic{width:22px;height:22px;stroke:var(--faint);stroke-width:1.6;fill:none;}
  .tab.active{color:var(--red);}
  .tab.active .ic{stroke:var(--red);}
}
@media(max-width:420px){
  .greet h1{font-size:27px;}
  .feature .photo{height:168px;}
}

/* ---- event links + booking rows (plan 2026-07-16 §2b). Dedicated .ev-link
        selector: .ev-row .et pins color to --ink, which defeats
        the global anchor rule; links need their own contract. Tokens only
        (ADR-0002). :visited is the site's first (also the post-booking
        breadcrumb); underline = the non-colour cue. ---- */
.ev-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;}
.ev-link .et,.ev-link .es{text-decoration:none;}
.ev-link:hover{color:var(--purple);}
.ev-link:hover .et{color:var(--purple);}
.ev-link:visited{color:var(--muted);text-decoration-color:var(--rule);}
.ev-link:visited .et{color:var(--muted);}
.ev-link:active{color:var(--aubergine);}
.ev-link:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:2px;}
.ev-main .ev-link{display:block;}

/* Booking strip row (plan 1.4): the whole row is one anchor, min 44px target,
   no add-to-calendar controls. Rides the .win-row layout. */
a.win-row.book-row{color:inherit;min-height:44px;}
a.win-row.book-row .wt{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;}
a.win-row.book-row:hover .wt,a.win-row.book-row:hover .win-count{color:var(--purple);}
a.win-row.book-row:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;}

/* Leadership-note CTA (plan 1.5): one quiet text link after the body. */
.note-cta{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* ---- Hopes and Wishes / PTC team cards (issue 0043): Direction A "Editorial
        index", VISUAL PASS ONLY (Claude Design handback 2026-07-17). Re-skins the
        scaffold's existing contract in place: .team-card (as .doc-row), .tc-faces /
        .headshot / .hs-ph, .meta / .nm, .tname / .role, .tbio / .tbio.none, .rt :
        plus the composed .status / .chip / .btn it already documents. NO new
        required classes, so render.js output converges as-is. Tokens only
        (ADR-0002), zero raw hex. Null states: photo -> .hs-ph initials; no link ->
        .status.soon; no bio -> .tbio.none honest line.
        ONE selector remapped at integration: the handback anchored scroll-margin
        on .sec-eyebrow[id], but render.js puts the jump id on the year-group
        .section wrapper (#y-K1...), so the rule targets that instead. ---- */
#team-cards .section{scroll-margin-top:84px;}        /* group wrapper = jump anchor */
.team-card{align-items:flex-start;gap:16px;}
.team-card .tc-faces{display:inline-flex;flex:none;padding-top:2px;}
.team-card .headshot{width:48px;height:48px;}
.team-card .tc-faces>*+*{margin-left:-16px;box-shadow:0 0 0 2px var(--purple),0 0 0 4px var(--white);}
.hs-ph{width:48px;height:48px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--purple);font-family:var(--serif);font-size:16px;box-shadow:0 0 0 2px var(--purple);}
.team-card .meta{flex:1;min-width:0;}
.team-card .nm{font-family:var(--serif);font-size:18px;line-height:1.2;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.team-card .tname{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.team-card .tname .role{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.team-card .tbio{font-size:13px;line-height:1.55;color:var(--charcoal);margin-top:7px;max-width:60ch;}
.team-card .tbio.none{color:var(--faint);font-style:italic;}
.team-card .chip{font-size:8.5px;padding:2px 8px;white-space:nowrap;}     /* meta + name-to-confirm reuse .chip */
.team-card .rt{align-self:center;flex:none;display:flex;align-items:center;gap:10px;}
.team-card .rt .btn{white-space:nowrap;min-height:44px;}   /* live booking link, >=44px target */
#team-jump{margin:20px 0 28px;}
#team-jump .f{display:inline-flex;align-items:center;min-height:44px;}   /* >=44px tap, .cm-jump precedent */
@media(max-width:560px){
  /* 0059: stack the card (photo · name · role · bio · booking) so the bio gets the full
     card width. In a row, .meta{min-width:0} let the booking button crush it to ~58px =
     a one-word-per-line tower; a column hands the bio the whole width. CD refines the
     card visual (rule 7). */
  .team-card{flex-direction:column;align-items:stretch;gap:12px;}
  .team-card .rt{align-self:flex-start;margin-left:0;margin-top:0;}
}

/* ---- Coffee Mornings (issue 0049): structural scaffold only. Claude Design
        owns the hero/photo and visual handback; these rules keep every state
        readable, targetable and responsive with the existing tokens. ---- */
.cm-intro{margin-bottom:34px;}
.page-hero{position:relative;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  margin-bottom:24px;border-radius:10px;background:var(--aubergine);color:var(--text-on-dark);}
/* 0050 sweep: retired the pre-photo text-hero variant (.page-hero span); its
   line-height:1 moved onto .cap below, which it was silently styling. */
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:center 32%;}
/* photo hero (0051 visual pass): a scrim for depth + a caption in the site's photo
   idiom (mirrors .feature .photo). token-driven, photo-agnostic so the consent-
   cleared Job 3 swap keeps the treatment. */
.page-hero::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  /* fallback first: --aubergine (#33254A) as rgba, for engines without color-mix
     (Safari <=16.1); the color-mix line below wins everywhere else (0050 F2). */
  background:linear-gradient(180deg,rgba(51,37,74,0.30) 0%,transparent 34%,rgba(51,37,74,0.08) 62%,rgba(51,37,74,0.55) 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--aubergine) 30%,transparent) 0%,transparent 34%,color-mix(in srgb,var(--aubergine) 8%,transparent) 62%,color-mix(in srgb,var(--aubergine) 55%,transparent) 100%);}
.page-hero .cap{position:absolute;left:18px;bottom:14px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--paper);line-height:1;}
@media(max-width:759px){.page-hero .cap{left:14px;bottom:12px;font-size:9.5px;}}
.cm-jump{margin:16px 0 0;}
.cm-jump .f{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;}
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:240px;}
.cm-group{min-width:0;scroll-margin-top:calc(var(--nav-h) + 20px);}
.cm-group:target{outline:2px solid var(--purple);outline-offset:6px;border-radius:10px;}
.cm-group h3{margin:0 0 8px;font-family:var(--serif);font-size:25px;color:var(--ink);}
.cm-card{min-width:0;padding:20px;background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--purple);border-radius:10px;}
.cm-card.today{border-left-color:var(--red);}
.cm-card.past{border-left-color:var(--rule);}
.cm-state{display:inline-block;margin-bottom:10px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.cm-card.today .cm-state{color:var(--red);}
.cm-date{font-family:var(--serif);font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);}
.cm-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:18px 0 0;}
.cm-details div{min-width:0;}
.cm-details dt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.cm-details dd{margin:4px 0 0;color:var(--ink);overflow-wrap:anywhere;}
.cm-slides{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule);}
.cm-slide{display:inline-flex;align-items:center;min-height:44px;color:var(--purple);font-weight:700;text-underline-offset:3px;}
.cm-slide-note,.cm-pending,.cm-failure{margin:0;color:var(--muted);}
.cm-url{overflow-wrap:anywhere;}
#coffee-page-url{font-family:var(--mono);font-size:12px;user-select:all;}
.cm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.cm-action{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none;}
.cm-inline-action{display:inline-flex;align-items:center;min-height:44px;}
.cm-jump .f:focus-visible,.cm-slide:focus-visible,.cm-action:focus-visible,.cm-inline-action:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.cm-keep p{max-width:68ch;}
.cm-mornings .sec-eyebrow h2,.cm-keep .sec-eyebrow h2{margin:0;}

@media(min-width:760px){
  .page-hero{height:320px;}
  .cm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 375px-class geometry (plan §2b): calendar-row actions stack beneath the
   date + title; touch targets reach 44px; anchors keep clear of the buttons. */
@media(max-width:420px){
  .ev-row{flex-wrap:wrap;row-gap:6px;}
  .ev-row .ev-main{min-width:calc(100% - 66px);}
  .cal-agenda .ev-row .ev-main{min-width:calc(100% - 92px);}
  .ev-row .cal-add{margin-left:66px;}
  .win-row{flex-wrap:wrap;row-gap:6px;}
  .win-row .win-main{min-width:calc(100% - 150px);}
  .win-row .cal-add{margin-left:72px;}
  .add-btn{min-width:44px;min-height:44px;}
}

/* ---- content visible by default (no blank-on-load); motion kept out for calm ---- */

/* Critical-info callout (pass C sweep 1): a scannable block for the few moments a parent
   is rushed or scared, the emergency hotlines on safeguarding/, the decisive "stop" on
   verify/. Reuses the card language with the red alert accent; numbers are tel: links so a
   phone taps to call. Tokens only. */
.keys{background:var(--white);border:1px solid var(--rule);border-top:2px solid var(--red);border-radius:10px;padding:4px 20px;margin:20px 0;}
.key-row{display:flex;align-items:baseline;gap:16px;padding:13px 2px;border-bottom:1px solid var(--rule-2);}
.key-row:last-child{border-bottom:none;}
.keys .key-num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;font-size:23px;color:var(--red);flex:none;min-width:66px;text-decoration:none;}
a.key-num:hover,a.key-num:focus-visible{text-decoration:underline;text-underline-offset:3px;}
.key-lbl{font-size:14px;line-height:1.4;color:var(--charcoal);}
.keys.stop{background:var(--red-tint);padding:16px 20px;}
.keys.stop p{margin:0;font-size:15px;line-height:1.5;color:var(--ink);}
.keys.stop strong{color:var(--red);}

/* ============================================================
   Year calendar sheet (calendar/print + purple-elephant/*/print, issue 0046).
   The fridge sheet: the whole academic year on one A4, matching the City School
   PDF. <doc-page> (assets/doc-page.js) owns A4 pagination + repeats the masthead
   (slot=header) and footnote (slot=footer) on every page. render.js EMITS the
   month grid (.yc-months) + dated key (.yc-keys) into #print-list; the masthead,
   subscribe strip, legend + footnote are static in the page HTML. All classes are
   yc-* so they never collide with the .cal-* / .ev-row / .legend rules that drive
   /calendar/. Ground = white (official ELC register); ink = charcoal; purple the
   one accent. Design = Claude Design; values reconciled onto the tokens seam. */
.yc{font-family:var(--sans);color:var(--charcoal);print-color-adjust:exact;-webkit-print-color-adjust:exact;}
.yc-stage{margin:22px 0 8px;}
/* On screen the doc-page host is a contained preview band, not the full-viewport
   desk; print leaves the component's own @media print (padding 0, full bleed) alone. */
@media screen{.yc-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;}.yc-stage doc-page.yc{min-height:auto;padding:30px 24px;}}

/* masthead (doc-page header slot) */
.yc-mast{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;padding-bottom:15px;border-bottom:1px solid var(--charcoal);}
.yc-lock{height:64px;width:auto;display:block;}
.yc-titlewrap{display:flex;align-items:center;gap:14px;}
.yc-sublogo{width:auto;display:block;}
.yc-sublogo-cs{height:60px;}
.yc-sublogo-pe{height:56px;}
.yc-title{text-align:right;}
.yc-sub{font-family:var(--wordmark);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1;white-space:nowrap;}
.yc-sub .yc-the{font-size:13px;color:var(--muted);font-weight:500;}
.yc-yr{font-family:var(--sans);font-size:29px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1;margin-top:8px;white-space:nowrap;}
.yc-kicker{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px;}

/* subscribe strip (static; the live calendar beats the static sheet). The button
   mirrors the calendar page's held state (UC-1): disabled + "Coming for launch"
   until the feed goes live, never a fake live link (rule 6). */
.yc-subscribe{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;padding:8px 10px 8px 14px;background:color-mix(in srgb,var(--purple) 8%,var(--white-pure));border:1px solid color-mix(in srgb,var(--purple) 24%,var(--rule));border-radius:8px;break-inside:avoid;}
.yc-sub-msg{font-size:10.5px;line-height:1.42;color:var(--muted);}
.yc-sub-msg b{color:var(--ink);font-weight:700;}
.yc-sub-hold{flex:none;display:inline-flex;align-items:center;gap:9px;}
.yc-sub-btn{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--purple) 10%,var(--white-pure));border:1px solid var(--rule);border-radius:6px;padding:8px 13px;white-space:nowrap;}
.yc-sub-soon{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);white-space:nowrap;}

/* month grid (render.js EMITS into #print-list) */
.yc-months{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px;}
.yc-mini{border:1px solid var(--rule);border-radius:8px;padding:7px 9px 8px;background:var(--white-pure);break-inside:avoid;}
.yc-mn{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px;letter-spacing:-.005em;}
.yc-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.yc-dow{font-family:var(--sans);font-size:7.5px;font-weight:600;letter-spacing:.03em;color:var(--cal-dow);text-align:center;padding-bottom:3px;text-transform:uppercase;font-style:normal;}
.yc-d{font-size:10.5px;font-variant-numeric:tabular-nums;text-align:center;line-height:1.58;color:var(--cal-ink);border-radius:3px;font-style:normal;}
.yc-d.yc-e{color:transparent;}
.yc-c-H{--cc:var(--cal-holiday);} .yc-c-PD{--cc:var(--cal-staff);} .yc-c-PT{--cc:var(--cal-conf);} .yc-c-SE{--cc:var(--cal-event);} .yc-c-SC{--cc:var(--cal-child);}
.yc-d.yc-c{background:color-mix(in srgb,var(--cc) 15%,var(--white-pure));color:color-mix(in srgb,var(--cc) 66%,var(--ink));font-weight:700;}

/* dated key (render.js EMITS into #print-list) */
.yc-keys{column-count:3;column-gap:22px;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule);}
.yc-kgm{break-inside:avoid;margin-bottom:6px;}
.yc-km{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px;letter-spacing:-.005em;}
.yc-kr{display:flex;gap:6px;font-size:10px;line-height:1.34;margin-bottom:1px;align-items:baseline;}
/* density (Trevor 2026-07-21): date shrinks to content so the glyph sits right next to it and the title line runs longer; was min-width:46px (glyphs aligned in a column, wasting title width). nowrap+no-shrink keeps date ranges on one line. CC mechanical pass; CD may refine the rhythm (rule 7). */
.yc-kd{font-family:var(--sans);font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0;font-size:9px;font-variant-numeric:tabular-nums;}
.yc-kgl{font-size:6.5px;line-height:1;position:relative;top:-1px;}
.yc-kt{color:var(--cal-ink);flex:1;}

/* legend + footnote (static) */
.yc-legend{display:flex;flex-wrap:wrap;gap:7px 22px;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule);break-inside:avoid;}
.yc-lg{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.yc-lg .yc-gl{font-size:8.5px;line-height:1;}
.yc-foot{font-family:var(--sans);font-size:8.5px;letter-spacing:.02em;color:var(--cal-foot);}

/* category glyph colours (grayscale-safe: the shape carries meaning without colour) */
.yc-g-H{color:var(--cal-holiday);} .yc-g-PD{color:var(--cal-staff);} .yc-g-PT{color:var(--cal-conf);} .yc-g-SE{color:var(--cal-event);} .yc-g-SC{color:var(--cal-child);}

/* Purple Elephant variant (early years): purple leads the masthead + month heads */
.yc-pe .yc-mast{border-bottom-color:var(--purple);border-bottom-width:2px;}
.yc-pe .yc-sub,.yc-pe .yc-yr,.yc-pe .yc-mn,.yc-pe .yc-km{color:var(--purple);}

/* empty-state fallback (no JS): honest, points at the live calendar */
.yc-empty{font-family:var(--mono);font-size:12px;color:var(--muted);padding:8px 2px;}

.print-only{display:none;}

/* Print fit (Trevor 2026-07-21): on screen the sheet is CD's comfortable design; at
   print the running masthead + footer spacers eat ~48mm per page, so the body has to be
   ~48mm tighter to land on ONE A4. These cuts are PRINT-ONLY: the on-screen preview is
   untouched (rule 7: CD's visual design stands; this only tunes the print mechanics).
   The subscribe strip is dead on paper (the button can't be tapped and the footer already
   carries the "live calendar online" note), so it drops. */
@media print{
  .yc-subscribe{display:none;}
  /* trim the running masthead a touch: the header spacer is the biggest per-page
     overhead (~40mm), so a smaller mast buys bottom buffer for physical printers'
     hardware margins without cramming the calendar grid or key. */
  .yc-mast{padding-bottom:10px;}
  .yc-lock{height:52px;}
  .yc-sublogo-cs{height:50px;}
  .yc-sublogo-pe{height:47px;}
  .yc-sub{font-size:19px;}
  .yc-yr{font-size:25px;margin-top:6px;}
  .yc-months{margin-top:5px;}
  .yc-mini{padding:5px 8px 6px;}
  .yc-d{line-height:1.18;}
  .yc-keys{margin-top:5px;padding-top:6px;}
  .yc-kgm{margin-bottom:2px;}
  .yc-kr{line-height:1.2;}
  .yc-legend{margin-top:5px;padding-top:6px;}
}

/* ---- print / PDF: clean flow, drop the fixed contour field, keep colours ---- */
@media print{
  *,*::before,*::after{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  #topo{display:none;}
  .topline{position:static;}
  header{position:static;background:var(--paper);}
  .tabbar{display:none!important;}
  #fb-pill,#fb-overlay,.cal-add,#ics-all{display:none!important;}
  body{min-height:0;padding-bottom:0;overflow:visible;}
  .tile,.doc-list,.act-card,.cal-card,.policies,.feature,.note,.sport{break-inside:avoid;}
  .tile:hover,.tile.link:hover,.policies:hover{box-shadow:var(--shadow-quiet)!important;transform:none!important;}
  a{color:inherit;}
}

/* ============================================================
   SLICE 2: homepage events bands (issue 0047 · Claude Design).
   "Coming up" (curated editorial event cards) + "Ongoing" (persistent
   quick-links) replace the mixed bento event surfaces. Extends
   .section / .sec-eyebrow / .reg-card / .ev-link: not a new card
   system. Tokens only (ADR-0002): no raw hex/rgba added.
   ============================================================ */
.band{margin-bottom:38px;}
.band .sec-eyebrow .more{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none;transition:color .15s;}
.band .sec-eyebrow .more:hover{color:var(--purple);}
.band .sec-eyebrow .more .arw{font-family:var(--mono);}

/* Coming up: curated editorial event cards. Whole card = one tap target
   (extends .ev-link; the underline cue rides the title, not the whole box). */
.ev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ev-card{padding:20px 20px 18px;display:flex;flex-direction:column;}
.ev-card.ev-link{text-decoration:none;color:var(--ink);}
.ev-card .when{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:11px;}
.ev-card h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.12;margin-bottom:8px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s;}
.ev-card p{font-size:13.5px;line-height:1.55;color:var(--charcoal);flex:1;margin:0;}
.ev-card .go{margin-top:15px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--purple);display:inline-flex;align-items:center;gap:7px;}
/* Coming-soon flag (P4 pass A, Trevor 2026-07-19): honest state for an auto-populated
   Coming up card whose event page is not built yet: shown instead of a live CTA
   (no dead link, rule 6). Amber = the in-progress token. render.js applies it and
   fires the build-alert to trevorc@elc.ac.th (Claude Code lane). */
.ev-card .soon{margin-top:15px;align-self:flex-start;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:999px;padding:4px 11px;}
.ev-card .soon::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;flex:none;}
.ev-card.ev-link:hover{box-shadow:var(--shadow-hard);border-color:var(--purple);transform:translateY(-1px);}
.ev-card.ev-link:hover h3{color:var(--purple);text-decoration-color:var(--purple);}
.ev-card.ev-link:visited h3{color:var(--muted);text-decoration-color:var(--rule);}
.ev-card.ev-link:active h3{color:var(--aubergine);}
.ev-card.ev-link:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
/* P4 pass A integration (Claude Code mechanical, flagged to Claude Design pass B):
   an inert Coming-up card (nopage / holiday / page-owed) is a <div>, not an anchor.
   Strip the link affordance so it does not read as clickable. Full visual treatment
   of the inert state is a CD seam. */
.ev-card.ev-inert h3{text-decoration:none;}
/* JS-off fallback for the This-week strip: one link spanning the strip until render.js
   fills the day cards (plan 1.9 precedent). */
.week-fallback{grid-column:1 / -1;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:0.04em;color:var(--purple);text-decoration:none;padding:8px 0;display:inline-flex;align-items:center;gap:8px;}
.ev-empty{padding:16px 20px;font-weight:300;font-size:14px;color:var(--muted);}
.ev-empty a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;}

/* Ongoing band reuses .bento + existing .reg-card / .sport / .policies; a slim
   calendar quick-link takes the retired Events card's slot. */
.quick-cal{grid-column:span 4;}

/* the leadership note reads as a letter when it spans full width */
.note.home-note{max-width:none;}
/* Home note = the letter moment (0051 visual pass): single voice from Trevor, treated
   as correspondence, not a card. Softer chrome, letter type rhythm, a signed sign-off,
   and the HoS-coming line as a quiet PS. Scoped to .home-note; shared .note untouched. */
.note.home-note{padding:clamp(26px,3.2vw,38px) clamp(24px,3.2vw,38px);box-shadow:none;}
.note.home-note .who{margin-bottom:20px;}
.note.home-note h2{font-size:clamp(23px,2.3vw,27px);line-height:1.26;margin-bottom:15px;letter-spacing:-0.01em;}
.note.home-note p{font-size:15.5px;line-height:1.72;color:var(--charcoal);}
.note.home-note h2,.note.home-note p,.note.home-note .sig,.note.home-note .sig-sub{max-width:64ch;}
.note.home-note .note-cta{margin-top:13px;}
.note.home-note .sig{margin-top:22px;padding-top:0;border-top:none;font-size:15px;color:var(--ink);}
.note.home-note .sig-sub{margin-top:6px;}
.note.home-note .hos-coming{margin-top:26px;padding-top:15px;font-family:var(--serif);font-style:italic;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);}

@media(max-width:940px){.ev-cards{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.ev-cards{grid-template-columns:1fr;}.quick-cal{grid-column:span 12;}}
@media print{.ev-card{break-inside:avoid;}.ev-card.ev-link h3{color:var(--ink)!important;text-decoration-color:var(--gold)!important;}}

/* Kob khun wall (issue 0074): gratitude + celebrations band, below Ongoing. Cards reuse
   the .ev-card shell; this block adds only the 2-up grid, the lead line and the quote
   figure. Mechanical scaffolding: visual treatment = Claude Design (rule 7). */
.kk-lead{font-weight:300;font-size:14.5px;line-height:1.6;color:var(--charcoal);max-width:62ch;margin:-4px 0 16px;}
.kk-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.kk-card p{flex:none;}
.kk-q{margin:14px 0 0;padding-left:14px;border-left:2px solid var(--gold);}
.kk-q blockquote{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--ink);}
.kk-q figcaption{margin-top:6px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);}
.kk-note{margin-top:14px;font-size:13px;color:var(--muted);}
/* Celebration hero: the pair stays ONE row at every width (Trevor 2026-07-26), height-capped
   so a phone never gets a full-bleed photo. Portrait keeps its ratio at the capped height;
   the work fills the rest. */
.kk-hero{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 14px;}
.kk-hero img{height:118px;width:auto;flex:none;border-radius:6px;object-fit:cover;}
.kk-hero img.wide{flex:1;min-width:0;width:100%;}
.kk-hero figcaption{flex-basis:100%;margin-top:7px;font-size:11.5px;font-weight:300;color:var(--muted);}
@media(max-width:820px){.kk-cards{grid-template-columns:1fr;}}
@media(max-width:560px){.kk-hero img{height:88px;}}
@media print{.kk-card{break-inside:avoid;}}

/* ---- 0051 design-language wiring: lockup, icon chips, art layer ----
   Mechanical placement only; visual tuning = Claude Design (rule 7, handoff 0051). */
/* masthead (0051 visual pass): the official lockup crops to a crisp ELC-only mark in
   the chrome. its three sublines (INTERNATIONAL SCHOOLS BANGKOK) are illegible mush at
   42px, so object-fit keeps only the top ELC band; the full lockup moves to the footer
   where it has room to read. The mark stays confident and legible at any DPR. */
/* .brand .lockup (the ELC crest crop) was retired from the masthead 2026-07-20: the CD
   branded lockup is ring + "ELC Portal" wordmark, no crop (the wordmark carries "ELC"). */
/* footer sign-off: the full official lockup, given room to be legible. */
/* ponytail: no align-self here. On desktop .foot-strip is a row (align-items:center),
   so align-self:center was a no-op; below 720px it flips to column/flex-start and
   align-self:center floated the crest dead-centre above flush-left text on all 31 pages. */
.foot-lockup{height:58px;width:auto;flex:none;opacity:0.9;}
/* Portal ring mark in the footer (0063): the Portal's logo leads the footer, ELC lockup
   trails as the parent-brand endorsement (kept, rule 3). Aubergine on the cream footer
   ground; 7-ring at 48px (leading + bigger, Trevor 2026-07-20). CD refines the polish. */
.foot-strip .foot-mark{width:48px;height:48px;flex:none;align-self:center;background:var(--aubergine);
  -webkit-mask:url(img/portal-mark.svg) center/contain no-repeat;
          mask:url(img/portal-mark.svg) center/contain no-repeat;}
/* icon cell (0051 visual pass): drop the box, keep the 38px gutter so icon rows
   line up with the .num date chips. Quiet glyph in --muted, not a button. */
.doc-row .icx{align-items:center;padding:0;border:none;background:none;border-radius:0;}
.icx .ig{width:18px;height:18px;color:var(--muted);stroke-width:1.75;display:block;transition:color .15s;}
.doc-row:hover .icx .ig{color:var(--ink);}
a.doc-row:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;border-radius:6px;}
.hero-art{margin:6px 0 22px;}
.hero-art img{height:112px;width:auto;max-width:100%;}
/* Note-from-Trevor art (P4 pass A, Trevor 2026-07-19): the Thai-houses drawing
   moved OUT of the hero to sit IN LINE with the note: centred beside the note
   text on desktop, reordered ABOVE it as a header on mobile. The note text stays
   render.js's textContent surface (#note-* ids intact inside .note-main).
   Composition = Claude Design lane. */
/* Note card is a <details> (Trevor 2026-07-21 read-state feature): <summary> = who +
   title (always visible, the collapsed face), .note-reveal = body + art (the collapsible
   half), #note-history scrolls past notes. The 2-col text|art grid moved off the card
   onto .note-reveal. Mechanical structure only; the collapsed/expanded look, a custom
   disclosure affordance, and history styling = Claude Design lane (rule 7). */
.note.home-note{margin-bottom:42px;}
.note-summary{cursor:pointer;list-style:none;}
.note-summary::-webkit-details-marker{display:none;}
.note-reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,440px);align-items:center;gap:clamp(24px,3.2vw,38px);}
.note-main{display:flex;flex-direction:column;min-width:0;}
.note-art{width:100%;height:auto;justify-self:end;align-self:center;opacity:0.85;}
@media(max-width:760px){.note-reveal{grid-template-columns:1fr;gap:16px;}.note-art{order:-1;max-width:190px;justify-self:start;}}
/* Past-note history: a light-touch scroll inside the card. Reveals only when expanded
   (native <details>); render.js fills it from data.js notes[] older than the current. */
.note-history{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-2);max-height:230px;overflow-y:auto;}
.nh-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.nh-item{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule-2);}
.nh-item:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.nh-when{font-family:var(--wordmark);font-weight:500;font-size:12px;color:var(--muted);margin-bottom:4px;}
.nh-title{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink);margin-bottom:5px;}
.nh-body{font-size:13.5px;line-height:1.6;color:var(--charcoal);}
/* Collapsed = one thin row (Trevor 2026-07-21): a read note auto-collapses, so its seen
   state must be minimal. Small avatar + the label and headline inline (headline ellipsized),
   the date hidden, and a chevron that rotates open so it reads as expandable. Expanded keeps
   the full masthead (the .home-note rules above). Desktop + mobile. CD may refine (rule 7). */
.note-summary{position:relative;padding-right:26px;}
.note-summary::after{content:"";position:absolute;top:11px;right:3px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;}
.note.home-note[open]>.note-summary::after{transform:rotate(-135deg);top:15px;}
.note.home-note:not([open]){padding:12px 18px;}
.note.home-note:not([open])>.note-summary{display:flex;align-items:center;gap:11px;}
.note.home-note:not([open]) .who{margin-bottom:0;gap:9px;flex:0 0 auto;}
.note.home-note:not([open]) .who .headshot{width:30px;height:30px;}
.note.home-note:not([open]) .when{display:none;}
/* The label lives in a block wrapper whose line box comes from the inherited 16px/1.6
   strut, so its baseline sat ~2px below the flex-centred headline (Trevor 2026-07-26,
   relay #13). Collapsed hides the date, so the wrapper has no job: dissolve it and the
   label centres in the row on its own. */
.note.home-note:not([open]) .who>div{display:contents;}
.note.home-note:not([open]) h2{font-size:15px;margin:0;line-height:1.3;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Narrow screens: the label + headline don't both fit, so drop the label. The avatar
   carries "from Trevor" and the headline is the hook. Full label returns on expand. */
@media(max-width:560px){.note.home-note:not([open]) .who>div{display:none;}}
/* Calendar hero (P4 pass A, Trevor 2026-07-19): Giovanni's ring spiral becomes a
   large, rotated, hero-esque background header. It is bled off the right edge and
   clipped by the band so only a clean semicircle of rings shows: the white text
   notch (right side of the source art) falls off-canvas. Composition = Claude
   Design lane; tokens only. */
.wrap.sub{position:relative;}
.wrap.sub > :not(.spiral-art){position:relative;z-index:1;}
.spiral-art{position:absolute;z-index:0;pointer-events:none;opacity:0.1;width:1400px;height:auto;max-width:none;left:6%;top:-600px;}
/* Responsive (P4 pass A integration, Claude Code lane per the handback flag): the
   spiral placement above is desktop-tuned px. Below 900px the 1400px art overflows
   and the -600px top pulls it off the visible band, so hide it and let the hero
   stand alone. Full responsive composition = a Claude Design pass-B seam. */
@media(max-width:900px){.spiral-art{display:none;}}
@media(max-width:900px){.spiral-art{display:none;}}
.sig-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.hos-coming{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.cm-why{max-width:58ch;margin:-6px 0 30px;}
.cm-why p{font-size:15px;line-height:1.6;color:var(--charcoal);margin-bottom:10px;}
/* ============================================================
   Doc-list rows aligned to the "Portal page" template rhythm
   (Claude Design, 2026-07-18). Tokens only, no new hex.
   Open editorial divider list (no white card frame) · sans
   title · quiet mono icon + label · sage/amber status dot-chips.
   SCOPING (corrected at integration, 0050): the handback said the
   H&W team cards + bare status/rails/dsl rows were untouched, but
   ALL generated rows live inside .doc-list. Utility rows joining
   the treatment matches the handback's own glyph-swap NOTE; the
   H&W team cards (parent-facing booking flow, launch window) are
   excluded below with :not(.team-card) + the #team-cards frame
   re-assert, honouring the handback's stated invariant. Seam
   question filed back to Claude Design.
   ============================================================ */
.doc-list{background:none;border:none;border-radius:0;overflow:visible;border-top:1px solid var(--rule);}
.doc-list .doc-row:not(.team-card){gap:14px;padding:15px 8px;border-bottom:1px solid var(--rule);border-radius:6px;}
.doc-list .doc-row:not(.team-card):last-child{border-bottom:1px solid var(--rule);}
.doc-list .doc-row:not(.team-card):hover{background:var(--white);}
.doc-list .doc-row:not(.team-card) .nm{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.3;color:var(--ink);}
.doc-list .doc-row:not(.team-card) .sub{font-size:13px;line-height:1.5;color:var(--muted);margin-top:3px;}
/* .ic:not(.num): the 0051 handback pins date chips as content that KEEPS its box
   ("dates are content, icons are icons"; the north-star template shows boxed date
   chips); this realignment un-boxes text KINDS only. Second seam noted to CD. */
.doc-list .doc-row:not(.team-card) .ic:not(.num){width:34px;height:auto;flex:none;border:none;background:none;border-radius:0;padding:2px 0 0;
  align-items:flex-start;justify-content:flex-start;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:0.04em;color:var(--faint);}
.doc-list .doc-row:not(.team-card) .icx{width:22px;}
.doc-list .doc-row:not(.team-card) .rt{gap:12px;}
.doc-list .doc-row:not(.team-card) .tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.doc-list .doc-row:not(.team-card) .status{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:none;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.doc-list .doc-row:not(.team-card) .status::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;flex:none;}
.doc-list .doc-row:not(.team-card) .status.open{color:var(--sage);}
.doc-list .doc-row:not(.team-card) .status.soon{color:var(--amber);}
/* H&W team list keeps its framed card (the booking flow ships as reviewed) */
#team-cards .doc-list{background:var(--white);border:1px solid var(--rule);border-radius:10px;overflow:hidden;}

/* ============================================================
   Purple Elephant section skin: issue 0064 (Claude Design).
   Scoped under .pe (the PE <main class="wrap sub pe">). The calendar is
   deliberately NOT restyled: one system; warmth lives in the frame.
   ============================================================ */
.pe .eyebrow::before{color:var(--pe-accent);}

.pe .pe-hero{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:center;margin-bottom:36px;}
.pe .pe-hero .page-head{margin-bottom:0;}
.pe .pe-hero .lead{max-width:52ch;}

/* Reserved hero-art seam: the curated child's purple-elephant drawing lands here via
   the art pipeline (potrace SVG, fill = --pe-art-ink, consent-gated), same class of
   seam as the snail/coffee heroes. Until then a faint concentric-contour motif (the
   site's own ground vocabulary) holds the space; decoration, aria-hidden, claims
   nothing (rule 6). */
.pe .pe-hero-art{position:relative;flex:none;width:clamp(116px,15vw,188px);aspect-ratio:1;border-radius:50%;background:var(--pe-tint);overflow:hidden;}
.pe .pe-hero-art::before{content:"";position:absolute;inset:0;background-image:repeating-radial-gradient(circle at 50% 52%,transparent 0 12px,color-mix(in srgb,var(--pe-accent) var(--pe-ground),transparent) 12px 14.5px);-webkit-mask:radial-gradient(circle at 50% 52%,#000 58%,transparent 76%);mask:radial-gradient(circle at 50% 52%,#000 58%,transparent 76%);}

/* Thong Lor: one identity, three houses named quietly (locator chips). */
.pe .pe-houses{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.pe .pe-houses .chip{white-space:nowrap;color:var(--pe-accent-deep);border-color:color-mix(in srgb,var(--pe-accent) 32%,var(--rule));}

/* "In the making" state: warm, honest, PE-attributed. Replaces the grey page-note lines. */
.pe .pe-coming{position:relative;background:color-mix(in srgb,var(--pe-tint) 52%,var(--white));border:1px solid color-mix(in srgb,var(--pe-accent) 20%,var(--rule));border-radius:12px;padding:22px 24px;}
.pe .pe-coming .txt{margin:0;max-width:60ch;color:var(--charcoal);font-size:14px;line-height:1.55;font-weight:300;}
.pe .pe-coming-note{display:inline-flex;align-items:center;gap:10px;margin-top:15px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--pe-accent-deep);}
.pe .pe-coming-dot{position:relative;width:9px;height:9px;flex:none;border-radius:50%;background:var(--pe-accent);}
.pe .pe-coming-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pe-accent);animation:pe-pulse 2.6s ease-out infinite;}
@keyframes pe-pulse{0%{transform:scale(1);opacity:0.55;}70%,100%{transform:scale(2.8);opacity:0;}}
@media(prefers-reduced-motion:reduce){.pe .pe-coming-dot::after{animation:none;}}

.pe .pe-closing{display:flex;align-items:center;gap:10px;margin-top:8px;}
.pe .pe-closing .pe-coming-dot{width:7px;height:7px;}

.pe .cal-sub a,.pe .pe-coming a{color:var(--pe-accent);text-decoration-color:var(--gold);}

@media(max-width:720px){
  .pe .pe-hero{grid-template-columns:1fr;gap:16px;}
  .pe .pe-hero-art{order:-1;width:92px;}
}