/* The Harrelsons — antique celestial atlas.
   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.3rem;height:2.3rem;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.6rem;height:2.3rem;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}