/* The Harrelsons — antique celestial atlas. (v29: v28 + desktop 44px tabs/mark, Today card layout)
   Midnight indigo ground, aged parchment ink, oxidised brass accent. */
:root{
  --ink:#0A0E23; --ink-2:#111838; --ink-3:#1A2350;
  --brass:#C9A227; --brass-dim:#7E6A22;
  --parchment:#EFE7D4; --haze:#98A1C6; --ember:#A6402C;
  /* body copy sits a shade under the headings; it MUST be a variable,
     not a literal, or it stays cream on a cream page. */
  --text:#DCD4C0;
  /* card/panel surface and the ember used for warnings - both need to
     flip with the theme, so both are variables rather than literals. */
  --surface:rgba(17,24,56,.35); --ember-text:#E8927C;
  --rule:rgba(201,162,39,.22);
  --display:'Cinzel',Georgia,serif;
  --body:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(1.15rem,5vw,2.5rem);
  --measure:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--ink);color:var(--parchment);
  font-family:var(--body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased}
#stars-bg{position:fixed;inset:0;z-index:-2;display:block}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(10,14,35,.85) 100%)}
a{color:var(--brass);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:center;padding:.85rem var(--pad);
  background:rgba(10,14,35,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
/* Installed to the Home Screen, iOS draws the status bar OVER the web view
   (black-translucent + viewport-fit=cover). Pad the bar by the safe area so the
   chip and burger are reachable, and let the bar's own translucent surface run
   up behind the clock so the two read as one piece of glass. */
.bar{padding-top:calc(.85rem + env(safe-area-inset-top))}
html{background:var(--ink)}
.mark{font-family:var(--display);font-weight:600;letter-spacing:.22em;
  font-size:.82rem;text-transform:uppercase;color:var(--parchment);text-decoration:none}
.mark span{color:var(--brass)}

main{max-width:var(--measure);margin:0 auto;padding:0 var(--pad) 7rem}
section{padding-block:clamp(2.75rem,9vw,4.5rem);border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass);margin:0 0 1.1rem}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.18;
  margin:0 0 .9rem;letter-spacing:.01em}
h1{font-size:clamp(2rem,9vw,3rem)}
h2{font-size:clamp(1.4rem,6vw,1.9rem)}
h3{font-size:1.02rem;letter-spacing:.05em}
p{margin:0 0 1.15rem;color:var(--text)}
.lede{font-size:1.15rem;color:var(--parchment)}
.dim{color:var(--haze)}
.small{font-size:.95rem}

.hero{padding-block:clamp(2.5rem,10vw,4rem) clamp(2rem,7vw,3rem);text-align:center}
.hero h1{margin-bottom:.5rem}
.motto{font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brass);margin:0 0 .35rem}
.motto-en{font-size:.9rem;color:var(--haze);font-style:italic;margin:0}
.roles{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--haze);margin:.9rem 0 0}

.constellation{margin:2.25rem 0 .5rem;position:relative}
.constellation svg{width:100%;height:auto;display:block;overflow:visible}
.cn-line{stroke:var(--brass);stroke-width:.6;opacity:.34}
.cn-star{cursor:pointer}
.cn-star circle.glow{fill:var(--brass);opacity:.14;transition:opacity .2s ease}
.cn-star circle.core{fill:var(--parchment)}
.cn-star:hover circle.glow,.cn-star[data-on] circle.glow{opacity:.45}
.cn-star text{font-family:var(--mono);font-size:3.1px;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--haze);transition:fill .2s ease}
.cn-star:hover text,.cn-star[data-on] text{fill:var(--brass)}
.cn-readout{min-height:3.6rem;margin-top:.5rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center}
.cn-readout .v{font-family:var(--display);font-size:1.05rem;color:var(--brass);letter-spacing:.06em}
.cn-readout .d{font-size:.95rem;color:var(--haze);margin:.15rem 0 0}

.panel{background:linear-gradient(180deg,rgba(26,35,80,.5),rgba(17,24,56,.35));
  border:1px solid var(--rule);border-radius:3px;padding:1.15rem 1.25rem}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid rgba(151,160,196,.13)}
.row:last-child{border-bottom:0}
.row .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze)}
.row .v{font-family:var(--mono);font-size:1rem;color:var(--parchment)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.tags li{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--haze);border:1px solid var(--rule);border-radius:2px;padding:.4rem .6rem}
blockquote{margin:0;padding-left:1.1rem;border-left:2px solid var(--brass);
  font-style:italic;color:var(--text)}

.actions{display:grid;gap:.6rem;margin-top:1.4rem}
@media(min-width:30rem){.actions{grid-auto-flow:column;justify-content:start}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:0 1.35rem;border-radius:2px;text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--brass);color:var(--brass);background:transparent;
  transition:background .18s ease,color .18s ease;cursor:pointer}
.btn:hover{background:var(--brass);color:var(--ink)}
.btn-solid{background:var(--brass);color:var(--ink)}
.btn-solid:hover{background:var(--parchment);border-color:var(--parchment)}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;
  /* The tab count is decided at runtime from what this person may open,
     so the columns must follow it. A fixed repeat(6,1fr) left four tabs
     bunched to the left with two empty columns of dead space. */
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:rgba(10,14,35,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.28rem;min-height:3.65rem;text-decoration:none;color:var(--haze);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase}
.tabs a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4}
.tabs a[aria-current="page"]{color:var(--brass)}
@media(min-width:52rem){
  .tabs{position:static;grid-template-columns:none;grid-auto-flow:column;
    justify-content:center;gap:1.5rem;background:none;border-top:0;backdrop-filter:none}
  .tabs a{flex-direction:row;min-height:2.2rem;font-size:.66rem}
  .tabs a svg{width:15px;height:15px}
  main{padding-bottom:3rem}
}

.canvas-wrap{position:relative;border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;background:radial-gradient(circle at 50% 55%,#131C44 0%,#080C1E 70%);
  touch-action:none}
canvas.sky{display:block;width:100%;height:auto}
.hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze);text-align:center;margin:.7rem 0 0}
.status{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--haze)}
footer{border-top:1px solid var(--rule);margin-top:2rem;padding:1.6rem 0 0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haze);text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Quiet secondary entry point — Family lives in the top bar so the
   bottom tab bar stays at four thumb-sized targets. */
.bar{justify-content:space-between}
.bar-link{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--haze);text-decoration:none;border:1px solid var(--rule);
  border-radius:2px;padding:.45rem .7rem;min-height:2rem;display:inline-flex;align-items:center;
}
.bar-link:hover,.bar-link:focus-visible{color:var(--brass);border-color:var(--brass)}

/* --- top bar: profile chip + burger --- */
.barR{display:flex;align-items:center;gap:.5rem}
.pfp{width:2.75rem;height:2.75rem;border:1px solid var(--rule);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,rgba(201,162,39,.20),rgba(17,24,56,.6));
  color:var(--brass);font-family:var(--display);font-size:.92rem;letter-spacing:0;
  text-decoration:none;padding:0;transition:border-color .2s,color .2s}
.pfp:hover,.pfp:focus-visible{border-color:var(--brass);color:var(--parchment)}
.pfp svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.pfp.in{border-color:var(--brass)}
.burger{background:none;border:1px solid var(--rule);border-radius:2px;
  width:2.75rem;height:2.75rem;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;cursor:pointer;padding:0}
.burger span{display:block;width:15px;height:1.4px;background:var(--brass);
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}

/* --- menus: panels that drop from the top bar --- */
.scrim{position:fixed;inset:0;background:rgba(6,9,22,.72);-webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .28s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer,.pmenu{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,#141C46,#0A0E23 78%);
  border-bottom:1px solid var(--rule);box-shadow:0 22px 60px rgba(3,6,18,.66);
  padding:calc(3.9rem + env(safe-area-inset-top)) var(--pad) 1.5rem;
  max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-101%);visibility:hidden;
  transition:transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s}
.drawer.on,.pmenu.on{transform:translateY(0);visibility:visible;transition-delay:0s}
.drawer .dhead,.pmenu .dhead{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid var(--rule)}
.drawer .dtitle,.pmenu .dtitle{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass)}
.dtitle .who{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;
  text-transform:none;color:var(--parchment);margin-top:.35rem}
.drawer .x,.pmenu .x{background:none;border:0;color:var(--haze);font-size:1.6rem;line-height:1;
  cursor:pointer;padding:0 .2rem;margin-top:-.3rem}
.drawer a,.pmenu a,.pmenu button.mi{display:block;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid rgba(151,160,196,.13);text-decoration:none;
  padding:.9rem 0;cursor:pointer;font:inherit}
.drawer a:last-of-type,.pmenu a:last-of-type{border-bottom:0}
.drawer a .l,.pmenu a .l,.pmenu .mi .l{font-family:var(--display);font-size:1.05rem;
  color:var(--parchment);display:block}
.drawer a .s,.pmenu a .s,.pmenu .mi .s{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze);display:block;margin-top:.15rem}
.drawer a:hover .l,.drawer a:focus-visible .l,
.pmenu a:hover .l,.pmenu a:focus-visible .l,.pmenu .mi:hover .l{color:var(--brass)}
.drawer a.on .l,.pmenu a.on .l{color:var(--brass)}
.drawer a.on .s::after{content:' \00B7 here'}
.drawer .grp{font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-dim);margin:1.5rem 0 .1rem}
.drawer .grp:first-of-type{margin-top:1.1rem}
@media(min-width:44rem){
  .drawer .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
  .drawer .grp:first-of-type{margin-top:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .drawer,.pmenu,.scrim,.burger span{transition-duration:.01ms}
}

/* ---- family constellation, tree layout ---- */
.cn-line.tie{stroke:var(--brass);stroke-width:.35;opacity:.5;stroke-dasharray:1.4 1}
.cn-line.parent{stroke-width:.5;opacity:.42}
.cn-star.g0 circle.core{r:.6}
.cn-star.g1 circle.core{r:.85}
.cn-star.g2 circle.core{r:1.05}
.cn-star.founder circle.core{r:1.2}
.cn-star .child{opacity:.7}
#house-svg text{font-size:3.6px;letter-spacing:.15em}
.cn-legend{display:flex;justify-content:center;gap:1.1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--haze);margin:.4rem 0 -.35rem}
.cn-legend span::before{content:"";display:inline-block;width:.55rem;height:.55rem;background:var(--brass);
  border-radius:50%;margin-right:.4rem;vertical-align:middle;opacity:.7}
.cn-legend span.tie::before{width:.9rem;height:1px;border-radius:0;background:linear-gradient(90deg,var(--brass) 40%,transparent 40% 60%,var(--brass) 60%);opacity:.6}

/* ---- 2D / 3D switch on starmap and globe ---- */
.viewswitch{display:inline-flex;background:rgba(17,24,56,.6);border:1px solid var(--rule);
  border-radius:999px;padding:3px;gap:2px;margin:0 auto;position:relative}
.viewswitch a{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--haze);text-decoration:none;padding:.55rem 1.05rem;border-radius:999px;
  transition:color .2s ease}
.viewswitch a.on{color:var(--ink);background:var(--brass);box-shadow:0 0 12px rgba(201,162,39,.35)}
.viewswitch a:hover:not(.on){color:var(--parchment)}
.viewswitch-wrap{display:flex;justify-content:center;margin:.6rem 0 1.1rem}

/* ---- brass buttons in the base ---- */
footer.foot{margin:2.75rem calc(var(--pad)*-1) 0;padding:2rem var(--pad) 2.4rem;
  border-top:1px solid var(--rule);background:linear-gradient(180deg,transparent,rgba(6,9,22,.5))}
.foot .give{display:flex;flex-direction:column;gap:.6rem;max-width:22rem;margin:0 auto 1.4rem}
.foot .give p{font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-dim);text-align:center;margin:0 0 .3rem}
.brassbtn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.1rem;border-radius:2px;text-decoration:none;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease}
.brassbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.brassbtn.hollow{color:var(--brass);border:1px solid var(--brass);background:transparent}
.brassbtn.hollow:hover{background:rgba(201,162,39,.09);box-shadow:0 0 14px rgba(201,162,39,.15)}
.brassbtn.solid{color:var(--ink);background:linear-gradient(180deg,#E9C766 0%,#C9A227 45%,#8C6D14 100%);
  border:1px solid #7E610F;box-shadow:0 2px 6px rgba(3,6,18,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.brassbtn.solid:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(3,6,18,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.brassbtn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.foot .rule{max-width:12rem;margin:.5rem auto 1.1rem;border:0;border-top:1px solid var(--rule)}
.foot .last{text-align:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--haze);margin:0}
.foot .last b{color:var(--brass);font-weight:400}

/* The admin entry in the profile menu. Brass, because it is the one link in
   there that changes things for everybody else, and it should not look like
   the others. */
.pmenu a.adminlink{border-color:var(--brass);background:rgba(201,162,39,.10)}
.pmenu a.adminlink .l{color:var(--brass)}
.pmenu a.adminlink .l::after{content:"\00a0\00a0\25B8";font-size:.85em;opacity:.8}

/* ---- The Library hub ---- */
.libgrid{display:flex;flex-direction:column;gap:.9rem;margin-top:.4rem}
.libcard{display:block;text-decoration:none;border:1px solid var(--rule);border-radius:3px;
  padding:1.15rem 1.15rem 1.25rem;background:rgba(17,24,56,.45);transition:border-color .2s,background .2s}
.libcard:hover,.libcard:focus{border-color:var(--brass);background:rgba(17,24,56,.72)}
.libcard.brass{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.07)}
.libicon{display:block;margin-bottom:.55rem}
.libicon svg{width:26px;height:26px;fill:none;stroke:var(--brass);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.libname{display:block;font-family:var(--display);font-size:1.22rem;color:var(--parchment);
  letter-spacing:.02em;margin-bottom:.45rem}
.libwhat{display:block;font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--haze)}

/* ---- admin: who someone is, and what they may see ---- */
.rolepill{display:inline-block;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;vertical-align:middle;
  border:1px solid var(--rule);color:var(--haze)}
.rolepill.admin{border-color:var(--brass);color:var(--brass);background:rgba(201,162,39,.10)}
.rolepill.friend{border-color:rgba(152,161,198,.5);color:var(--haze)}
.permform{margin:.2rem 0 0}
.permform select{width:100%}
.fine{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.7rem}
.fine summary{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dim,var(--brass));cursor:pointer;list-style:none}
.fine summary::-webkit-details-marker{display:none}
.fine summary::after{content:"\00a0\00a0+";opacity:.7}
.fine[open] summary::after{content:"\00a0\00a0\2212"}
.capline{display:flex;gap:.7rem;align-items:flex-start;margin:.55rem 0;font-family:var(--body);
  text-transform:none;letter-spacing:0;color:var(--parchment);font-size:.98rem}
.capline input{width:auto;margin-top:.25rem;flex:0 0 auto}
.capwhy{display:block;color:var(--haze);font-size:.84rem;line-height:1.45}

/* ==========================================================================
   LIGHT MODE - the same instrument, drawn on paper instead of on the night.
   Aged cream ground, oxidised brass, dark indigo ink. Deliberately warm: a
   plain white would throw away the whole antique-chart idea.

   Only ONE light palette exists. "Follow my phone" is resolved in JavaScript
   before the first paint, which sets data-theme to a real value - so this
   stylesheet never needs a duplicate copy inside a media query.
   ========================================================================== */
html[data-theme="light"]{
  --ink:#F5EFE1; --ink-2:#EDE4D1; --ink-3:#E0D4B9;
  --brass:#7E6012; --brass-dim:#947A34;
  --parchment:#171C33; --haze:#5D5849; --ember:#8E3120; --text:#2E3352;
  --surface:rgba(255,252,244,.75); --ember-text:#9E3520;
  --rule:rgba(138,106,22,.30);
}
/* The starfield is the night sky itself - on paper there isn't one. */
html[data-theme="light"] #stars-bg{display:none}
html[data-theme="light"] body::after{
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(226,212,185,.55) 100%)}
html[data-theme="light"] .bar{background:rgba(245,239,225,.86)}
html[data-theme="light"] .drawer,
html[data-theme="light"] .pmenu{background:linear-gradient(180deg,#F7F2E6,#EDE4D1 78%)}
html[data-theme="light"] .scrim{background:rgba(70,58,32,.42)}
html[data-theme="light"] .tabs{background:rgba(245,239,225,.94)}
html[data-theme="light"] .card,
html[data-theme="light"] .libcard{background:rgba(255,252,244,.75)}
html[data-theme="light"] .libcard.brass{background:rgba(201,162,39,.13)}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:rgba(255,252,244,.9);color:var(--parchment)}
html[data-theme="light"] .rolepill.admin{background:rgba(138,106,22,.12)}

/* ---- the theme chooser on the account page ---- */
.themepick{display:flex;gap:.5rem;margin:.5rem 0 0}
.themepick label{flex:1;margin:0;text-align:center;cursor:pointer}
.themepick input{position:absolute;opacity:0;pointer-events:none}
.themepick span{display:block;padding:.75rem .4rem;border:1px solid var(--rule);border-radius:3px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);background:rgba(17,24,56,.35);transition:all .18s}
html[data-theme="light"] .themepick span{background:rgba(255,252,244,.7)}
.themepick input:checked+span{border-color:var(--brass);color:var(--brass);
  background:rgba(201,162,39,.12)}
.themepick input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}

/* ---- the account page ----
   Folded sections, so the page can be read at a glance instead of scrolled
   through. Every heading is a real button: big tap target, obvious state. */
.acchero{padding-bottom:.4rem}
.accme{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.accinitial{flex:0 0 auto;width:3.1rem;height:3.1rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:1.35rem;
  color:var(--brass);border:1px solid var(--brass);background:rgba(201,162,39,.10)}
.accwho{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.accwho strong{font-family:var(--display);font-size:1.22rem;color:var(--parchment);
  letter-spacing:.02em;line-height:1.2}
.accwho .rolepill{align-self:flex-start}
.accmail{font-family:var(--mono);font-size:.72rem;color:var(--haze);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.accsec{border-top:1px solid var(--rule);margin:0}
.accsec:last-of-type{border-bottom:1px solid var(--rule)}
.accsec>summary{list-style:none;cursor:pointer;padding:1.05rem .2rem;
  display:flex;flex-direction:column;gap:.18rem;position:relative}
.accsec>summary::-webkit-details-marker{display:none}
.accsec>summary::after{content:"+";position:absolute;right:.35rem;top:50%;
  transform:translateY(-50%);font-family:var(--mono);font-size:1.15rem;
  color:var(--brass);opacity:.75;line-height:1}
.accsec[open]>summary::after{content:"\2212"}
.accsec>summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:2px}
.accE{font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-dim)}
.accL{font-family:var(--display);font-size:1.06rem;color:var(--parchment);padding-right:2rem}
.accbody{padding:.1rem .2rem 1.5rem}
.accbody>*:first-child{margin-top:0}
html[data-theme="light"] .accinitial{background:rgba(126,96,18,.12)}

/* Light-mode gaps found on review: these three carried hardcoded midnight
   values rather than variables, so they stayed dark on a cream page. */
html[data-theme="light"] .panel{
  background:linear-gradient(180deg,rgba(224,212,185,.55),rgba(237,228,209,.4))}
html[data-theme="light"] .viewswitch{background:rgba(237,228,209,.75)}
html[data-theme="light"] .viewswitch a.on{color:#F7F2E6}
html[data-theme="light"] .tabs a[aria-current="page"]{color:var(--brass)}

/* Two more found by a systematic sweep rather than by eye: the profile chip
   and the Library card's hover state both carried midnight values directly. */
html[data-theme="light"] .pfp{background:rgba(237,228,209,.85);border-color:var(--rule)}
html[data-theme="light"] .pfp.in{background:rgba(201,162,39,.14);color:var(--brass)}
html[data-theme="light"] .libcard:hover,
html[data-theme="light"] .libcard:focus{background:rgba(255,252,244,.95)}

/* ---- numbered steps (movies setup) ----
   A three-step job should look like three steps, not three unrelated
   sections. The numeral carries the sequence so the headings don't have to. */
.step{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 0;
  border-top:1px solid var(--rule)}
.step:first-of-type{border-top:0;padding-top:.4rem}
.stepnum{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;margin-top:.15rem;
  display:grid;place-items:center;font-family:var(--mono);font-size:.82rem;
  color:var(--brass);border:1px solid var(--brass);background:rgba(201,162,39,.10)}
.stepbody{min-width:0;flex:1}
.stepbody h2{margin:.1rem 0 .5rem}
.stepbody>*:last-child{margin-bottom:0}
html[data-theme="light"] .stepnum{background:rgba(138,106,22,.12)}
@media(max-width:26rem){
  .step{gap:.75rem}
  .stepnum{width:1.85rem;height:1.85rem;font-size:.75rem}
}

/* ---- the family tree on a phone ----
   The tree is drawn in a 280-unit viewBox. Fitted to a phone that renders the
   names at about 5px, which is not reading, it is guessing. So on narrow
   screens it keeps a real size and the tree pans sideways instead. */
.cnscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none}
.cnscroll::-webkit-scrollbar{display:none}
.cnscroll #house-svg{display:block;width:100%}
.cnhint{display:none}
@media(max-width:46rem){
  .cnscroll{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .cnscroll #house-svg{width:780px;max-width:none}
  .cnhint{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--haze);text-align:center;margin:.55rem 0 0}
}

/* ---- the feed's floating post button and its sheet ----
   The feed should open on the pictures, not on a form. Posting is one thumb
   reach from the bottom-right instead. */
.feedmark{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass);margin:0 0 1.1rem;padding-top:1.1rem}
.fab{position:fixed;right:1.05rem;z-index:35;
  bottom:calc(4.6rem + env(safe-area-inset-bottom));
  width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--brass);
  background:var(--brass);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .16s}
.fab:active{transform:scale(.93)}
.fab svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sheetscrim{position:fixed;inset:0;z-index:45;background:rgba(6,9,22,.66)}
html[data-theme="light"] .sheetscrim{background:rgba(70,58,32,.45)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:46;max-height:88svh;overflow-y:auto;
  background:linear-gradient(180deg,#141C46,#0A0E23 78%);
  border-top:1px solid var(--rule);border-radius:14px 14px 0 0;
  padding:.5rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom))}
html[data-theme="light"] .sheet{background:linear-gradient(180deg,#F7F2E6,#EDE4D1 78%)}
.sheetgrip{width:2.4rem;height:.24rem;border-radius:999px;background:var(--rule);margin:.35rem auto .9rem}
.sheethead{display:flex;align-items:center;justify-content:space-between;margin:0 0 .9rem}
.sheethead span{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass)}
.sheetx{background:none;border:0;color:var(--haze);font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem}
.geoline{display:flex;gap:.6rem;align-items:center;text-transform:none;letter-spacing:0;
  color:var(--parchment);font-size:.95rem;margin-top:.9rem}
.geoline input{width:auto}
.sheetnote{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);text-align:center;margin:1rem 0 0}
@media(prefers-reduced-motion:reduce){.fab{transition:none}}

/* ---- video in the feed ----
   Silent autoplay in view, with an obvious speaker to bring the sound in.
   The speaker sits top-right where a thumb is not already resting. */
.fvid{position:relative;background:#000}
.fvid video{display:block;width:100%;height:auto;object-fit:cover}
.vopen{position:absolute;inset:0;z-index:1}
.vsound{position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:2.3rem;height:2.3rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(239,231,212,.35);background:rgba(6,9,22,.55);
  color:#EFE7D4;display:grid;place-items:center;backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px)}
.vsound svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.vsound .isloud{display:none}
.fvid.on .vsound{border-color:var(--brass);color:var(--brass)}
.fvid.on .vsound .isloud{display:block}
.fvid.on .vsound .ismute{display:none}

/* while ffmpeg is still working on it */
.vproc{display:grid;place-items:center;min-height:14rem;background:var(--surface);
  border:1px solid var(--rule)}
.vprocmsg{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.vsub{font-family:var(--body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--haze)}
.vspin{width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid var(--rule);
  border-top-color:var(--brass);animation:vspin 1s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vspin{animation-duration:3s}}

/* ---- comments in place, on the feed ----
   The count line is a button; the thread opens underneath the card. */
.cwrap{margin:.35rem 0 0}
button.fcomments.cbtn{display:block;width:100%;text-align:left;background:none;border:0;
  padding:.35rem 0;cursor:pointer;font:inherit;color:inherit}
button.fcomments.cbtn .clabel{pointer-events:none}
button.fcomments.cbtn::after{content:"\00a0\00a0\203A";display:inline-block;color:var(--brass);
  transition:transform .18s;transform-origin:center}
button.fcomments.cbtn[aria-expanded="true"]::after{transform:rotate(90deg)}
.cpanel{padding:.2rem 0 .5rem}
.cpanel .clist{list-style:none;margin:.2rem 0 .8rem;padding:0}
.cpanel .clist li{padding:.55rem 0;border-top:1px solid var(--rule)}
.cpanel .cn{font-family:var(--display);font-size:.95rem;color:var(--parchment);margin-right:.5rem}
.cpanel .ct{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze)}
.cpanel .cb{margin:.2rem 0 0;color:var(--text);font-size:.97rem;line-height:1.5}
.cempty{margin:.3rem 0 .8rem}
.crow{display:flex;gap:.5rem;align-items:center}
.crow .cinput{flex:1;margin:0;min-width:0}
.crow .csend{flex:0 0 auto;padding:.6rem 1rem;border:1px solid var(--brass);border-radius:3px;
  background:rgba(201,162,39,.12);color:var(--brass);cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.crow .csend[disabled]{opacity:.55;cursor:default}

/* ==========================================================================
   v22 POLISH LAYER (2026-09-24 design audit)
   One layer for every property: the site, the house, feed, shelf, vault,
   kitchen, plans. Motion is quiet and short, and all of it stops under
   prefers-reduced-motion. Colours come from variables only.
   ========================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* page-to-page: one origin, so the browser cross-fades between pages itself
   (Safari 18.2+, Chrome 126+). The bar and tab bar are named so they hold
   still while the page under them changes. Older browsers navigate as before. */
@view-transition{navigation:auto}
.bar{view-transition-name:hh-bar}
.tabs{view-transition-name:hh-tabs}
::view-transition-old(root){animation:hh-vt-out .18s var(--ease) both}
::view-transition-new(root){animation:hh-vt-in .32s var(--ease-out) both}
@keyframes hh-vt-out{to{opacity:0}}
@keyframes hh-vt-in{from{opacity:0;transform:translateY(6px)}}

/* arrival: the first screen settles in, top to bottom */
@keyframes hh-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* fixed layers (feed pull-to-refresh, the + button, the upload sheet) are
   excluded: a transform animation with fill would override the transform
   that keeps them tucked away, which is exactly what surfaced #ptr. */
main>*:not(#ptr):not(.fab):not(.sheet):not(.sheetscrim),.kwrap>*,.wrap>*{animation:hh-rise .55s var(--ease-out) both}
main>*:nth-child(2),.kwrap>*:nth-child(2),.wrap>*:nth-child(2){animation-delay:.05s}
main>*:nth-child(3),.kwrap>*:nth-child(3),.wrap>*:nth-child(3){animation-delay:.1s}
main>*:nth-child(4),.kwrap>*:nth-child(4),.wrap>*:nth-child(4){animation-delay:.15s}
main>*:nth-child(n+5),.kwrap>*:nth-child(n+5),.wrap>*:nth-child(n+5){animation-delay:.2s}
.kwrap>.ksub{animation:none}

/* further down: cards drift in as they scroll into view. chrome.js adds
   .hh-rv only when IntersectionObserver exists, so without JS nothing hides. */
.hh-rv{opacity:0;transform:translateY(14px);animation:none!important;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hh-rv.in{opacity:1;transform:none}

/* touch: everything you can press answers the press */
.btn,.brassbtn,.libcard,.ktile,.kslot,.ksubi,.tabs a,.pfp,.burger,.fab{
  transition:transform .18s var(--ease),background-color .2s var(--ease),
    border-color .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease),opacity .2s}
.btn:active,.brassbtn:active,.libcard:active,.ktile:active,.pfp:active,.burger:active{transform:scale(.975)}
.tabs a svg{transition:transform .18s var(--ease)}
.tabs a:active svg{transform:scale(.88)}
@media(hover:hover){
  .libcard:hover,.ktile:hover{transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(0,0,0,.55)}
}
.tabs a.cur:not(.tabplus){position:relative}
.tabs a.cur:not(.tabplus)::after{content:'';position:absolute;bottom:.28rem;left:50%;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--brass);animation:hh-bead .35s var(--ease-out)}
@keyframes hh-bead{from{transform:scale(0)}}

/* menu items arrive one after another when a panel opens */
.drawer.on a,.pmenu.on a,.pmenu.on button.mi{animation:hh-slide .38s var(--ease-out) both}
.drawer.on a:nth-of-type(2),.pmenu.on a:nth-of-type(2){animation-delay:.03s}
.drawer.on a:nth-of-type(3),.pmenu.on a:nth-of-type(3){animation-delay:.06s}
.drawer.on a:nth-of-type(4),.pmenu.on a:nth-of-type(4){animation-delay:.09s}
.drawer.on a:nth-of-type(n+5),.pmenu.on a:nth-of-type(n+5){animation-delay:.12s}
@keyframes hh-slide{from{opacity:0;transform:translateY(-6px)}}

/* folded sections open smoothly where the browser can animate height */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;
    transition:height .35s var(--ease-out),content-visibility .35s allow-discrete}
  details[open]::details-content{height:auto}
}

/* BUG: account page rendered 708px wide on a phone - the theme radios were
   absolute with the site-wide input width:100% and no positioned parent. */
.themepick label{position:relative}
.themepick input{width:1px;height:1px;margin:0;left:0;top:0}

/* BUG: the support footer faded to a midnight gradient in light mode */
html[data-theme="light"] footer.foot{background:linear-gradient(180deg,transparent,rgba(138,106,22,.06))}

/* Feed: the per-card comment prompt was 17px spaced capitals, the loudest
   line on every card. It is a quiet affordance. */
button.fcomments.cbtn{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze);background:none;border:0;padding:.55rem 0;
  min-height:2.75rem;cursor:pointer;text-align:left;line-height:1.4}
button.fcomments.cbtn:hover{color:var(--brass)}

/* Kitchen + Plans sub-navigation: a calm pill row. Still wraps (nothing hides
   off the edge) but reads as one control. */
.ksub{gap:.35rem;padding:.2rem 0 .9rem;border-bottom:1px solid var(--rule)}
.ksubi{border:1px solid transparent;border-radius:999px;padding:0 .85rem;min-height:2.4rem;opacity:.8}
.ksubi.on{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,transparent)}
@media(max-width:48rem){
  .ksub{gap:.3rem .25rem}
  .ksubi{padding:0 .7rem;min-height:2.3rem}
  /* one solid action on its own line, the rest paired beneath it */
  /* .kwrap prefix: the apps' inline <style> loads after this file and would
     otherwise win the tie with its own .kact{display:flex} */
  .kwrap .kact{display:grid;grid-template-columns:1fr 1fr}
  .kwrap .kact>.btn-solid,.kwrap .kact>:only-child{grid-column:1/-1}
  .kwrap .kact>form{display:contents}
  .kwrap .kact .btn{width:100%;padding-inline:.6rem}
}
/* Plans week: empty days were 150px boxes holding a dash */
.kweek:not([style]) .kday{grid-template-rows:auto auto}
.kweek:not([style]) .kslot:has(.empty:only-child){padding:.2rem 0;border:0}
/* app headlines in the house display face, like everywhere else */
.khead h1{font-family:var(--display);letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){
  main>*,.kwrap>*,.wrap>*,.drawer.on a,.pmenu.on a,.tabs a.cur::after{animation:none!important}
  .hh-rv{opacity:1;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==========================================================================
   v24 OVERHAUL LAYER (2026-09-24, second pass)
   ========================================================================== */

/* ---- the sky: one engine in chrome.v34 draws #hh-sky on every page ------ */
#stars-bg{display:none!important}
#hh-sky{position:fixed;left:0;top:0;z-index:-2;pointer-events:none;display:block}
html[data-theme="light"] #hh-sky{display:none}

/* ---- native controls, dressed for the house ----------------------------- */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
input[type=checkbox],input[type=radio]{accent-color:var(--brass);width:1.15rem;height:1.15rem;
  vertical-align:-.15em;cursor:pointer}
select{appearance:none;-webkit-appearance:none;font:inherit;font-size:1rem;color:var(--parchment);
  background:var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center/1rem;
  border:1px solid var(--rule);border-radius:.4rem;padding:.7rem 2.4rem .7rem .8rem;min-height:2.9rem;
  max-width:100%;cursor:pointer;transition:border-color .2s}
select:focus{border-color:var(--brass);outline:none}
input[type=file]{font:inherit;font-size:.9rem;color:var(--haze);max-width:100%}
input[type=file]::file-selector-button{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);background:transparent;border:1px solid var(--brass);
  border-radius:.35rem;padding:.7rem 1rem;margin-right:.8rem;cursor:pointer;transition:background .2s,color .2s}
input[type=file]::file-selector-button:hover{background:var(--brass);color:var(--ink)}
input[type=date],input[type=time]{min-height:2.9rem;font-size:1rem}

/* ---- menus: icons, tidy rhythm ------------------------------------------ */
.drawer a.hasico{display:grid;grid-template-columns:1.5rem minmax(0,1fr);column-gap:.9rem;align-items:center}
.drawer a.hasico .l,.drawer a.hasico .s{grid-column:2}
.drawer a.hasico .dico{grid-row:1/3;grid-column:1;width:1.35rem;height:1.35rem;fill:none;
  stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85;
  transition:transform .25s var(--ease-out)}
.drawer a.hasico:hover .dico,.drawer a.hasico:focus-visible .dico{transform:scale(1.12)}
.drawer a.on .l{color:var(--brass)}

/* ---- feed: a run of films is one card ----------------------------------- */
.pghead{margin:.1rem 0 0}
.pgstrip{display:flex;gap:.6rem;overflow-x:auto;padding:.7rem 0 .4rem;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pgstrip::-webkit-scrollbar{display:none}
.pgitem{flex:0 0 5.75rem;scroll-snap-align:start;text-decoration:none;color:var(--haze)}
.pgitem img,.pgitem .pgfill{display:block;width:5.75rem;height:8.6rem;object-fit:cover;border-radius:.4rem;
  background:var(--ink-2);border:1px solid var(--rule);transition:transform .25s var(--ease-out),border-color .2s}
.pgitem:hover img{transform:translateY(-3px);border-color:var(--brass)}
.pgt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.74rem;line-height:1.3;margin-top:.4rem}

/* ---- profile: a header and a grid, like every photo app people know ------ */
.phead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;
  padding:1.6rem 0 1.4rem;border-bottom:1px solid var(--rule);margin-bottom:1.1rem}
.pava{width:104px;height:104px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--brass),0 12px 34px -12px rgba(0,0,0,.7)}
.pname{font-size:clamp(1.5rem,6vw,2rem);margin:.4rem 0 0}
.pstats{display:flex;gap:1.8rem;margin:.5rem 0 .2rem}
.pstats span{display:flex;flex-direction:column;align-items:center;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--haze)}
.pstats b{font-family:var(--display);font-size:1.25rem;letter-spacing:0;color:var(--parchment);font-weight:600}
.pact{margin-top:.5rem}
.pact form{margin:0}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 calc(var(--pad)*-1) 1.5rem}
@media(min-width:40rem){.pgrid{margin-inline:0;gap:6px}}
.ptile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--ink-2)}
.ptile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out),opacity .3s}
.ptile:hover img{transform:scale(1.05)}
.ptile.poster img{object-position:50% 20%}
.ptcap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem .5rem .35rem;font-family:var(--mono);
  font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:#EFE7D4;
  background:linear-gradient(transparent,rgba(6,9,22,.8))}
.pttext{display:flex;align-items:center;justify-content:center;height:100%;padding:.6rem;text-align:center;
  font-size:.8rem;color:var(--haze)}
.ptbadge{position:absolute;top:.4rem;right:.4rem;width:1.3rem;height:1.3rem}
.ptbadge svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.pwords .fstream{list-style:none;padding:0}
.pempty{text-align:center;padding:2rem 0}
.fstream{list-style:none;padding-left:0}

/* ---- calendar ------------------------------------------------------------ */
.caladd{margin-top:.9rem}
.caladd>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;
  min-height:3rem;border:1px dashed var(--rule);border-radius:.5rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);transition:border-color .2s,background .2s}
.caladd>summary::-webkit-details-marker{display:none}
.caladd>summary:hover{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 7%,transparent)}
.caladd-plus{font-size:1.2rem;line-height:1;transition:transform .3s var(--ease-out)}
.caladd[open] .caladd-plus{transform:rotate(45deg)}
.caladd[open]>summary{border-style:solid;border-color:var(--brass)}
.caladd .panel{margin-top:.7rem}
.calmore{margin-top:2rem;border-top:1px solid var(--rule)}
.calmore>summary{list-style:none;cursor:pointer;min-height:3.2rem;display:flex;align-items:center;
  justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze)}
.calmore>summary::-webkit-details-marker{display:none}
.calmore>summary::after{content:'+';color:var(--brass);font-size:1.1rem;transition:transform .3s}
.calmore[open]>summary::after{transform:rotate(45deg)}
.calmore>section{border-top:0;padding-block:1rem}
.agenda-src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem;display:inline-block;vertical-align:middle}
.agenda-x{flex:none;align-self:center;margin-left:auto;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid transparent;background:none;color:var(--haze);font-size:1.25rem;line-height:1;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.agenda-x:hover,.agenda-x:focus-visible{color:var(--ember,#A6402C);border-color:currentColor}
.calnote{padding-top:.6rem}
.agenda-day{position:sticky;top:calc(3.6rem + env(safe-area-inset-top));z-index:2;
  background:linear-gradient(var(--ink) 70%,transparent)}

/* ---- admin -------------------------------------------------------------- */
.admintiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:1.4rem;text-align:left}
@media(min-width:48rem){.admintiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.admintiles a{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;padding:1rem;
  border:1px solid var(--rule);border-radius:.5rem;background:color-mix(in srgb,var(--ink-2) 70%,transparent);
  transition:transform .2s var(--ease),border-color .2s}
.admintiles a:hover{border-color:var(--brass);transform:translateY(-2px)}
.admintiles b{font-family:var(--display);font-size:1rem;color:var(--parchment);font-weight:600}
.admintiles span{font-size:.82rem;color:var(--haze);line-height:1.35}

/* ---- cards and panels lift gently on hover (desktop) ---------------------- */
@media(hover:hover){
  .card,.panel{transition:border-color .25s,box-shadow .3s}
  .fphoto-frame img{transition:transform .6s var(--ease-out)}
  .fphoto:hover .fphoto-frame img{transform:scale(1.02)}
}

/* ---- v25: admin people list ------------------------------------------- */
.accard{padding:.9rem 1rem}
.achead{display:flex;align-items:center;gap:.8rem}
.achead img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.acmanage{margin-top:.6rem;border-top:1px solid var(--rule)}
.acmanage>summary{list-style:none;cursor:pointer;min-height:2.6rem;display:flex;align-items:center;
  justify-content:space-between;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass)}
.acmanage>summary::-webkit-details-marker{display:none}
.acmanage>summary::after{content:'+';font-size:1.1rem;transition:transform .3s var(--ease-out)}
.acmanage[open]>summary::after{transform:rotate(45deg)}
.acbtns{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 .2rem}
.acbtns form{margin:0}
.acbtns .btn{min-height:2.6rem;padding:.55rem .9rem;font-size:.62rem}
.btn.danger{border-color:color-mix(in srgb,var(--ember,#A6402C) 70%,transparent);color:#D2765F}
.btn.danger:hover{background:var(--ember,#A6402C);border-color:var(--ember,#A6402C);color:#fff}

/* ---- v26: THE STARS WERE HIDDEN, not missing ------------------------------
   Line ~41 gave <html> its own background (for the iOS safe-area strip). Once
   html has a background, body's background no longer propagates to the canvas
   - it paints on the body box, which sits ABOVE a z-index:-2 fixed canvas. So
   the sky drew every frame behind an opaque body on every page. html keeps the
   colour; body goes clear so the sky shows through. */
body{background:transparent}


/* ==========================================================================
   v28 (2026-10-15 slim-down)
   ========================================================================== */
/* Two faces of the same page. chrome.v35 puts .hh-in on <html> for a signed-in
   member (and the front page sets it early from a localStorage hint). */
.signed-only{display:none}
html.hh-in .signed-only{display:block}
html.hh-in .visitor-only{display:none!important}
html.hh-in footer.foot{display:none}

/* The sky switch: one control, three views, real thumb-sized targets. */
.viewswitch a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.05rem}
.viewswitch-wrap{margin:.2rem 0 1.4rem}

/* ---- Today (front page, members) ---- */
.today{padding-top:clamp(1.6rem,6vw,2.6rem)}
.today h2{margin-bottom:1.1rem}
.tgrid{display:grid;gap:.9rem}
@media(min-width:46rem){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tcard{display:block;border:1px solid var(--rule);border-radius:3px;padding:1rem 1.1rem 1.1rem;
  background:rgba(17,24,56,.45);text-decoration:none;color:inherit;min-height:2.75rem;
  transition:border-color .2s,background .2s,transform .2s}
a.tcard:hover,a.tcard:focus-visible{border-color:var(--brass);background:rgba(17,24,56,.72)}
a.tcard:active{transform:scale(.985)}
.tk{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 .55rem}
.tk svg{width:16px;height:16px;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tv{display:block;font-family:var(--display);font-size:1.15rem;line-height:1.35;color:var(--parchment)}
.ts{display:block;font-size:.92rem;line-height:1.5;color:var(--haze);margin-top:.3rem}
.tlist{list-style:none;margin:0;padding:0}
.tlist li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.5rem 0;border-bottom:1px solid rgba(151,160,196,.13)}
.tlist li:last-child{border-bottom:0}
.tlist .w{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--haze);white-space:nowrap}
.tlist li.done span:first-child{text-decoration:line-through;opacity:.6}
.tmovie{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.9rem;align-items:start}
.tmovie img{width:72px;height:108px;object-fit:cover;border-radius:3px;border:1px solid var(--rule);background:var(--ink-2)}
.tmovie .actions{margin-top:.8rem}
.tcard.wait{opacity:.55}
html[data-theme="light"] .tcard{background:rgba(255,252,244,.75)}

/* ---- Me (/house/me) ---- */
.mehead{display:flex;align-items:center;gap:1.1rem;text-align:left}
.mehead img{width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;border:1px solid var(--brass)}
.mehead h1{margin:.1rem 0 .2rem;font-size:clamp(1.6rem,7vw,2.3rem)}
.mehead .motto{margin:0}
.melist a{display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;column-gap:.9rem;align-items:center;
  min-height:3.25rem;padding:.7rem 0;border-bottom:1px solid rgba(151,160,196,.13);
  text-decoration:none;color:inherit}
.melist a:last-child{border-bottom:0}
.melist .mi{width:1.35rem;height:1.35rem;fill:none;stroke:var(--brass);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.melist .l{display:block;font-family:var(--display);font-size:1.05rem;color:var(--parchment)}
.melist .s{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze);margin-top:.15rem}
.melist .n{font-family:var(--mono);font-size:.62rem;font-weight:600;background:var(--brass);color:var(--ink);
  border-radius:.7rem;padding:.12rem .5rem;min-width:1.4rem;text-align:center}
.melist a:hover .l,.melist a:focus-visible .l{color:var(--brass)}
.melist a:hover .mi,.melist a:focus-visible .mi{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){.tcard,.melist .mi{transition:none}}

/* ---- v29 (2026-10-15): verification fixes ---- */
.mark{display:inline-flex;align-items:center;min-height:2.75rem}
.tgrid{align-items:start}
.tlist li{flex-wrap:wrap}
.tlist li>span:first-child{flex:1 1 9rem;min-width:0}
.tmovie .actions .btn{white-space:nowrap;padding-left:1rem;padding-right:1rem}
@media(min-width:52rem){
  .tabs a{min-height:2.75rem}
  /* the unread badge sits beside the label when the tabs lie flat */
  html .tabs a .tbadge{position:static;margin:0 0 0 .1rem;top:auto;left:auto}
}