/* ============================================================================
   Porchlight — "The Family Almanac"
   "Every story deserves a light left on."
   A letterpress family newspaper. The reference is print: hairline and double
   rules, a masthead, datelines, drop caps, tabular figures, small-caps labels,
   and hard offset-shadow buttons that feel like wood type. Zero pills, zero
   soft shadows. Warm paper, ink, and one oxblood accent — because the product
   prints heirloom books, and this is what fine printing looks like.
   Plain CSS, served by Propshaft, linked from every layout.
   ========================================================================== */

/* ---- Typefaces (self-hosted variable fonts, /public/fonts) ----
   Newsreader      — an editorial serif with a true italic cut; every headline,
                     number, quote and story is set in it.
   Libre Franklin  — the workhorse newspaper sans for UI, labels, controls.  */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/librefranklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Almanac palette — paper, ink, oxblood, bookcloth */
  --paper:      #f7f2e6;   /* the page */
  --paper-2:    #efe7d2;   /* tinted section */
  --plate:      #fbf8ef;   /* framed plates (cards) */
  --ink:        #1d1a14;
  --ink-soft:   #5c5344;
  --ink-faint:  #6d6455;
  --oxblood:      #872e21; /* the accent — one, and committed */
  --oxblood-deep: #6b2318;
  --oxblood-wash: #f0e0d6;
  --cloth:      #3e6e4e;   /* bookcloth green — good standing, success */
  --cloth-deep: #315a3f;
  --signal:     #bf3b2b;   /* recording / urgent — brighter than oxblood */
  --hairline:   #d9cdb2;
  --hairline-2: #c9bda3;
  --good: #3e6e4e;
  --warn: #872e21;

  /* Legacy aliases — inline styles in views reference these names. */
  --cream:      var(--paper);
  --cream-2:    var(--paper-2);
  --honey:      var(--oxblood);
  --honey-deep: var(--oxblood-deep);
  --honey-glow: var(--oxblood-wash);
  --sage:       var(--cloth);
  --sage-deep:  var(--cloth-deep);
  --rose:       #a8503f;
  --line:       var(--hairline);
  --line-2:     var(--hairline-2);

  /* Print doesn't float. Depth = hard offsets or nothing. */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: 10px 10px 0 rgba(29, 26, 20, .10);
  --shadow-honey: none;
  --press:     4px 4px 0 var(--ink);        /* the wood-type button shadow */
  --ring: 0 0 0 3px rgba(135, 46, 33, .22);

  /* The whole concept in one line. */
  --radius:    0;
  --radius-lg: 0;
  --radius-sm: 0;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Make the [hidden] attribute win over component display rules so JS-toggled
   elements stay hidden until shown. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 500;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 400; line-height: 1.04; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.35rem; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--oxblood); }
p  { margin: 0 0 1rem; }
a  { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
small { color: var(--ink-faint); }
blockquote { font-family: var(--font-display); font-optical-sizing: auto; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.wrap-narrow { max-width: 720px; margin-inline: auto; padding-inline: 22px; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 700; color: var(--oxblood); }
.stack > * + * { margin-top: 1rem; }

/* ---- Buttons: wood type. Square, inked border, hard offset shadow. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-ui); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  padding: .78em 1.5em; border-radius: 0; border: 1.5px solid var(--ink);
  background: var(--plate); color: var(--ink);
  box-shadow: var(--press);
  cursor: pointer; transition: transform .07s ease, box-shadow .07s ease, background .15s ease;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.btn-primary { background: var(--oxblood); color: var(--paper); }
.btn-primary:hover { background: var(--oxblood-deep); }
.btn-ghost { background: transparent; border-color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--plate); transform: none; box-shadow: none; }
.btn-ghost:active { transform: none; }
.btn-sage { background: var(--cloth); color: var(--paper); }
.btn-sage:hover { background: var(--cloth-deep); }
.btn-lg { font-size: 1.1rem; padding: .95em 1.9em; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); }

/* ---- Cards → framed plates. Ink border, inner hairline, no float. ---- */
.card { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 22px; position: relative; }
.card-pad { padding: 26px; }
.panel { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; position: relative; }

/* ---- Forms: small-caps labels, serifed entries ---- */
label { display: block; font-weight: 700; margin-bottom: .4em; color: var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], input[type=date], select, textarea {
  width: 100%; padding: .6em .75em; font-size: 1.08rem; font-family: var(--font-display); font-optical-sizing: auto;
  border: 1px solid var(--ink); border-radius: 0; background: var(--plate); color: var(--ink);
}
select { font-family: var(--font-ui); font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: inset 0 -2px 0 var(--oxblood); }
.field + .field { margin-top: 1.1rem; }
.check { display: flex; align-items: center; gap: .6em; font-weight: 500; }
.check input { width: auto; }
.consent .consent-row { display: flex; align-items: flex-start; gap: .6em; font-size: .9rem; line-height: 1.45; cursor: pointer; text-transform: none; letter-spacing: 0; }
.consent .consent-row input[type="checkbox"] { width: auto; margin-top: .15em; flex: 0 0 auto; }

/* ---- Flash: a printed notice, not a tinted pill ---- */
.flash { padding: .85em 1.1em; border-radius: 0; margin-bottom: 1.2rem; font-weight: 600; font-size: .95rem; border: 1px solid; background: transparent; }
.flash-notice { border-color: var(--cloth); color: var(--cloth-deep); }
.flash-notice::before { content: "✓"; margin-right: .7em; }
.flash-alert  { border-color: var(--oxblood); color: var(--oxblood); }

/* ---- Badges → letterpress tags: bordered small caps, zero pills ---- */
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .32em .75em .26em; border-radius: 0; font-size: .66rem; font-weight: 700; border: 1px solid currentColor; background: transparent; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }
.pill-honey { color: var(--oxblood); }
.pill-sage  { color: var(--cloth); }
.pill-rose  { color: var(--rose); }

/* ---- Marketing layout: the masthead ---- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 3px double var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .lamp { width: 26px; height: 26px; flex: 0 0 auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.nav a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.site-footer { background: var(--ink); color: #cfc4ab; margin-top: 80px; padding: 56px 0 40px; border-top: 3px double var(--ink); }
.site-footer a { color: #ede5d3; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: var(--paper); font-family: var(--font-ui); font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5em; }

.hero { padding: 72px 0 60px; position: relative; overflow: hidden; }
.hero-glow { display: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.hero h1 { margin-bottom: .3em; max-width: 16ch; }
.hero .lede { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.hero-card { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; box-shadow: var(--shadow-lg); padding: 30px; position: relative; }
.hero-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none; }
.hero-card > * { position: relative; }

.section { padding: 64px 0; }
.section-tint { background: var(--paper-2); border-top: 1px solid var(--hairline-2); border-bottom: 1px solid var(--hairline-2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
.feature { text-align: left; }
.feature .ic { width: 46px; height: 46px; border-radius: 0; background: var(--plate); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--hairline-2); color: var(--oxblood); display: grid; place-items: center; margin-bottom: 14px; font-size: 1.4rem; }
/* The icon chip is inline by default (used in buttons, tags). Inside a feature card
   it must sit as its own block ABOVE the heading, or the h3 collides with it. */
.feature > .ic-chip { display: grid; margin-bottom: 16px; }

.price-card { text-align: center; padding: 40px 30px; }
.price-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none; }
.price-card > * { position: relative; }
.price-amt { font-family: var(--font-display); font-weight: 300; font-size: 3.6rem; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.price-amt span { font-size: 1.05rem; color: var(--ink-faint); font-family: var(--font-ui); font-weight: 500; }

.cta-band { background: var(--ink); color: var(--paper); border-radius: 0; padding: 56px 50px; text-align: center; position: relative; }
.cta-band::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(247,242,230,.28); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--paper); }
.cta-band h2 em { color: #e8b389; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--oxblood); }
.cta-band .btn-primary:hover { background: #fff; box-shadow: 5px 5px 0 var(--oxblood); }
.cta-band .btn-primary:active { box-shadow: 1px 1px 0 var(--oxblood); }

/* prose for legal/marketing copy */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* ============================================================================
   COORDINATOR DASHBOARD — the newsroom
   ========================================================================== */
.dash { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; background: var(--paper); }
.dash-side { background: var(--ink); color: #cfc4ab; padding: 24px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 3px double #3a342a; }
.dash-side .brand { color: var(--paper); font-size: 1.25rem; margin-bottom: 28px; }
.dash-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-nav a { display: flex; align-items: center; gap: 11px; padding: .68em .8em; border-radius: 0; border-left: 3px solid transparent; color: #b8ad95; font-weight: 600; font-size: .95rem; transition: background .15s, color .15s; }
.dash-nav a .ic-svg { width: 19px; height: 19px; opacity: .85; }
.dash-nav a:hover { background: rgba(247,242,230,.07); color: var(--paper); text-decoration: none; }
.dash-nav a.is-active { background: var(--oxblood); border-left-color: var(--paper); color: var(--paper); }
.dash-nav a.is-active .ic-svg { opacity: 1; }
.dash-side-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(247,242,230,.14); font-size: .85rem; }
.dash-side-foot a { color: #e5dcc7; }
.dash-main { padding: 34px 40px; min-width: 0; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.dash-head h1 { font-size: 2.15rem; font-weight: 450; margin: 0; }

/* ---- Stats: the statline. Rules, not boxes. ---- */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-bottom: 30px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat { background: transparent; border: 0; border-left: 1px solid var(--hairline-2); border-radius: 0; padding: 20px 22px; display: flex; align-items: center; gap: 14px; }
.stat:first-child { border-left: 0; padding-left: 2px; }
.stat .stat-body { min-width: 0; }
.stat .n { font-family: var(--font-display); font-weight: 300; font-size: 2.7rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .l { font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; margin-top: 7px; }

.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }

/* ---- Section heads: the double rule ---- */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 3px double var(--ink); padding-bottom: .55em; }
.section-title h2 { font-family: var(--font-ui); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--ink); margin: 0; }
.section-title a { color: var(--oxblood); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

/* ---- The featured story: a framed plate with a drop cap ---- */
.story-feature { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 28px 30px; position: relative; }
.story-feature::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.story-feature > * { position: relative; }
.story-feature .pill { margin-bottom: 14px; }
.story-feature blockquote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.4; color: var(--ink); margin: 0 0 14px; }
.story-feature blockquote::first-letter { font-size: 2.9em; float: left; line-height: .82; padding: .04em .12em 0 0; color: var(--oxblood); font-weight: 500; }

.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.list-row:last-child { border-bottom: 0; }
.avatar { width: 42px; height: 42px; border-radius: 0; background: var(--cloth); color: var(--paper); display: grid; place-items: center; font-weight: 500; flex: 0 0 auto; font-family: var(--font-display); font-size: 1.15rem; }
.list-row .meta { min-width: 0; flex: 1; }
.list-row .meta .nm { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.list-row .meta .sb { font-size: .87rem; color: var(--ink-faint); }

/* ---- The register: hairline table, inked header rule ---- */
.data-table { width: 100%; border-collapse: collapse; background: transparent; border-radius: 0; overflow: visible; border: 0; }
.data-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 700; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ink); background: transparent; }
.data-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hairline); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--plate); }

/* ---- Resident "currently using it" indicator ---- */
.live-tag { display: inline-flex; align-items: center; gap: .45em; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.live-now { color: var(--cloth-deep); }
.live-idle { color: var(--ink-faint); font-weight: 500; }
.live-never { color: var(--ink-faint); font-weight: 500; font-style: italic; }
.live-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--cloth); box-shadow: 0 0 0 0 rgba(62,110,78,.5); animation: live-pulse 1.8s ease-out infinite; flex: none; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62,110,78,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(62,110,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,110,78,0); }
}

.progress-bar { height: 7px; background: var(--paper-2); border: 1px solid var(--hairline-2); border-radius: 0; overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--oxblood); border-radius: 0; }

.highlight-card { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 20px; }
.highlight-card blockquote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; margin: 10px 0 14px; color: var(--ink); }
.audio-player { width: 100%; margin-top: 8px; }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-faint); }
.empty .ic { font-size: 2.4rem; margin-bottom: 8px; display: inline-flex; color: var(--oxblood); }

/* ============================================================================
   RESIDENT ONE-BUTTON APP  (huge type, max contrast, thumb-friendly, on paper)
   ========================================================================== */
.res { --res-fg: #241f16; --res-bg: #f9f4e7; }
body.res-body { background: var(--res-bg); font-size: 20px; }
.res-shell { min-height: 100dvh; display: flex; flex-direction: column; max-width: 760px; margin-inline: auto; padding: 24px; }
.res-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 3px double var(--ink); }
.res-greeting { font-family: var(--font-display); font-size: 1.5rem; color: var(--res-fg); }
.res-progress { font-size: 1rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.res-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: 0; padding: 16px 0; }
.res-question {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: 1.2;
  color: var(--res-fg); text-align: center;
}
.res-chapter { text-align: center; font-size: .95rem; text-transform: uppercase; letter-spacing: .18em; color: var(--oxblood); font-weight: 700; margin-bottom: 4px; }

/* the one big button — wood type at kiosk scale */
.big-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 168px; border-radius: 0; border: 2px solid var(--ink); cursor: pointer;
  font-family: var(--font-ui); font-size: 1.9rem; font-weight: 700; color: var(--paper);
  background: var(--oxblood); box-shadow: 8px 8px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.big-btn:hover { transform: translate(-1px,-1px); box-shadow: 9px 9px 0 var(--ink); }
.big-btn:active { transform: translate(5px,5px); box-shadow: 2px 2px 0 var(--ink); }
.big-btn .big-ic { font-size: 3rem; line-height: 1; }
.big-btn.is-recording { background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.big-btn.is-busy { background: var(--ink-faint); }
@keyframes pulse { 0%,100% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 0 rgba(191,59,43,.35); } 50% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 18px rgba(191,59,43,0); } }

.res-actions { display: flex; gap: 14px; }
.res-actions .btn { flex: 1; font-size: 1.15rem; padding: 1em; min-height: 64px; }
.btn-soft { background: var(--plate); border: 2px solid var(--ink); color: var(--res-fg); border-radius: 0; box-shadow: 4px 4px 0 rgba(29,26,20,.18); }
.res-foot { text-align: center; padding-top: 16px; border-top: 1px solid var(--hairline); }

/* memoir interview — continuous session UI */
.res-emoji { text-align: center; font-size: 3.4rem; line-height: 1; color: var(--oxblood); }
.res-intro-note { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--ink-soft); max-width: 30ch; margin-inline: auto; }
.res-actions-stack { flex-direction: column; }
.res-actions-stack .btn { width: 100%; }
/* "Hear it again" — big and obvious (senior-friendly tap target) */
.btn-hear { font-size: 1.5rem !important; min-height: 84px !important; font-weight: 700; }
.btn-next { font-size: 1.4rem !important; min-height: 84px !important; font-weight: 700; }
/* continuous-recording indicator */
.res-recording { display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); text-align: center; }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(191,59,43,.6); animation: recpulse 1.6s ease-in-out infinite; }
@keyframes recpulse { 0% { box-shadow: 0 0 0 0 rgba(191,59,43,.55); } 70% { box-shadow: 0 0 0 12px rgba(191,59,43,0); } 100% { box-shadow: 0 0 0 0 rgba(191,59,43,0); } }

/* Home action tiles — low-vision scale: one big label, no secondary line. */
.res-tile {
  display: flex; align-items: center; gap: 22px; width: 100%; text-align: left;
  background: var(--plate); border: 2px solid var(--ink); border-radius: 0; padding: 30px 26px;
  min-height: 112px; color: var(--res-fg); cursor: pointer;
  box-shadow: 5px 5px 0 rgba(29,26,20,.20); transition: transform .08s, box-shadow .08s;
}
.res-tile:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(29,26,20,.24); }
.res-tile:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--ink); }
.res-tile .ic { flex: 0 0 auto; display: inline-flex; color: var(--oxblood); }
.res-tile-text {
  font-family: var(--font-display); font-weight: 500; line-height: 1.1;
  font-size: clamp(1.9rem, 6.2vw, 2.5rem); min-width: 0;
}
.res-tile .badge-n { margin-left: auto; align-self: flex-start; background: var(--oxblood); color: var(--paper); border-radius: 0; padding: .05em .55em; font-size: 1.5rem; font-family: var(--font-display); }

/* "Save this page" — add-to-home-screen (the real bookmark). Big, unmistakable. */
.res-save { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.res-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  min-height: 78px; padding: 18px 22px; cursor: pointer;
  background: var(--paper); border: 2px dashed var(--ink); border-radius: 0; color: var(--res-fg);
  font-family: var(--font-ui); font-weight: 700; font-size: 1.4rem;
  transition: transform .08s, box-shadow .08s, background .12s;
}
.res-save-btn:hover { background: var(--plate); transform: translate(-1px,-1px); }
.res-save-btn:active { transform: translate(3px,3px); }
.res-save-btn .ic { display: inline-flex; color: var(--oxblood); }
.res-save-help {
  border: 2px solid var(--ink); background: var(--plate); padding: 20px 22px;
  font-size: 1.25rem; line-height: 1.55; color: var(--res-fg); text-align: center;
}
.res-save-help strong { color: var(--oxblood); }

.toggle-audio { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink-soft); background: var(--plate); border: 1.5px solid var(--ink); border-radius: 0; padding: .5em 1em; cursor: pointer; font-weight: 600; }

.msg-card { background: var(--plate); border: 2px solid var(--ink); border-radius: 0; padding: 22px; margin-bottom: 16px; position: relative; }
.msg-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.msg-card > * { position: relative; }
.msg-card .from { font-family: var(--font-display); font-size: 1.4rem; color: var(--res-fg); margin-bottom: 10px; }
.msg-card audio { width: 100%; }

/* ============================================================================
   FAMILY RELAY — the family's edition
   ========================================================================== */
.fam { background: var(--paper); }
.fam-header { background: var(--ink); color: var(--paper); padding: 22px 0; border-bottom: 3px double #3a342a; }
.fam-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fam-header .brand { color: var(--paper); }
.fam-hero { padding: 40px 0 10px; }
.fam-hero h1 { margin-bottom: .2em; }
.fam-hero .lede { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; }
.fam-recordings { padding: 24px 0 60px; }

/* Family relay layout: single column on phones, two columns on desktop. */
.fam-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 22px; padding-bottom: 60px; }
.fam-stories-head { margin: 0 0 16px; }
.fam-main .stack { margin: 0; }
@media (min-width: 880px) {
  .fam-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    grid-template-areas: "main side";
    align-items: start;
    gap: 32px;
  }
  .fam-main { grid-area: main; }
  .fam-side { grid-area: side; position: sticky; top: 24px; }
}

/* every story is a set piece: framed plate, serif, drop cap */
.story-item { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 24px 26px; margin-bottom: 18px; position: relative; }
.story-item::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.story-item > * { position: relative; }
.story-item .q { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--ink); margin-bottom: 4px; }
.story-item .when { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--ink-faint); margin-bottom: 12px; }
.story-item .transcript { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.65; color: var(--ink); border-left: 0; padding-left: 0; margin: 12px 0; }
.story-item .transcript::first-letter { font-size: 3.1em; float: left; line-height: .82; padding: .05em .12em 0 0; color: var(--oxblood); font-weight: 500; }

.recorder-box { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 28px; text-align: center; position: relative; }
.recorder-box::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.recorder-box > * { position: relative; }
.rec-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; background: var(--signal); color: var(--paper); border: 2px solid var(--ink); border-radius: 0; padding: 22px 40px; font-size: 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.rec-btn:hover { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 var(--ink); }
.rec-btn:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--ink); }
.rec-btn.is-recording { animation: pulse 1.4s ease-in-out infinite; }
.rec-btn .big-ic { font-size: 2.4rem; }

/* --- Family: "Help start the conversation" (seed topics + photos) --- */
.seed-wrap { padding-top: 26px; }
.seed-panel { background: var(--plate); border: 1px solid var(--ink); padding: 26px 28px 24px; position: relative; box-shadow: var(--shadow-lg); }
.seed-panel::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline); pointer-events: none; }
.seed-panel > * { position: relative; }
.seed-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.seed-title { font-family: var(--font-display); font-size: 1.65rem; margin: 0 0 .15em; }
.seed-sub { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.seed-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .seed-cols { grid-template-columns: 1fr 1fr; } }
.seed-card { background: var(--paper); border: 1px solid var(--hairline); padding: 20px; }
.seed-card-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .5em; display: flex; align-items: center; gap: 8px; }
.seed-hint { color: var(--ink-soft); font-size: .95rem; margin: 0 0 12px; }
.seed-textarea, .seed-input, .seed-file { width: 100%; font: inherit; color: var(--ink); background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 12px 14px; box-sizing: border-box; }
.seed-textarea { resize: vertical; min-height: 96px; margin-bottom: 12px; }
.seed-input { margin: 12px 0; }
.seed-file { margin-bottom: 12px; padding: 10px 12px; background: var(--plate); }
.seed-textarea:focus, .seed-input:focus, .seed-file:focus { outline: none; box-shadow: var(--ring); }
.seed-btn { width: 100%; justify-content: center; }
.seed-added { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.seed-added-title { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--ink-faint); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.seed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seed-list-item { display: flex; gap: 12px; align-items: center; font-family: var(--font-display); color: var(--ink); }
.seed-thumb { flex: 0 0 auto; width: 54px; height: 54px; border: 1px solid var(--ink); overflow: hidden; }
.seed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seed-list-text { font-size: 1.02rem; line-height: 1.4; }

/* Family photo shown to the resident above a question. */
.res-photo { margin: 0 auto 18px; max-width: 340px; border: 1px solid var(--ink); background: var(--plate); padding: 6px; }
.res-photo img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain; }

.lock-screen { min-height: 70vh; display: grid; place-items: center; }
.lock-card { background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 40px; max-width: 420px; text-align: center; position: relative; }
.lock-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none; }
.lock-card > * { position: relative; }
.lock-card .ic { font-size: 2.6rem; }

/* ---- Auth (login/signup) split screen ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--ink); color: var(--paper); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.auth-art::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(247,242,230,.22); pointer-events: none; }
.auth-art > * { position: relative; }
.auth-art h2 { color: var(--paper); font-size: 2rem; font-weight: 400; }
.auth-art h2 em { color: #e8b389; }
.auth-art .lede { font-family: var(--font-display); font-style: italic; color: rgba(247,242,230,.85); font-size: 1.2rem; max-width: 36ch; }
.auth-form { display: grid; place-items: center; padding: 40px; }
.auth-form .inner { width: 100%; max-width: 400px; }

/* ---- QR print card ---- */
.qr-card { width: 100%; max-width: 4in; margin: 0 auto; padding: .35in; border: 2px dashed #999; border-radius: 0; text-align: center; }
.qr-card svg { width: 100%; max-width: 2.4in; height: auto; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero-grid, .grid-3, .grid-2, .dash-cols, .site-footer .cols, .auth { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat { border-left: 0; border-bottom: 1px solid var(--hairline); padding-left: 2px; }
  .stat:nth-child(2n) { border-left: 1px solid var(--hairline-2); padding-left: 22px; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; border-right: 0; border-bottom: 3px double #3a342a; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; }
  .dash-nav a { border-left: 0; }
  .dash-side-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .dash-side .brand { margin-bottom: 0; }
  .dash-main { padding: 24px 18px; }
  .auth-art { display: none; }
  .nav { display: none; }
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
}
/* Registers scroll inside their own rail on phones — the page never scrolls sideways. */
@media (max-width: 720px) {
  .data-table, .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .qr-sheet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
  .qr-card { break-inside: avoid; border: 1px dashed #bbb; box-shadow: none; width: 4in; max-width: none; }
}

/* ===== "Start a session" guide + printable QR cards ===== */
.dash-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-session { font-size: 1rem; }
.session-guide { display: grid; gap: 20px; margin-top: 8px; }
.runsheet { counter-reset: step; list-style: none; padding: 0; margin: 1em 0 0; }
.runsheet li { position: relative; padding: 0 0 1.1em 3.2em; line-height: 1.6; }
.runsheet li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2.2em; height: 2.2em;
  display: grid; place-items: center; border-radius: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 500; font-size: 1.1rem;
}
.callout-tip { margin-top: 1em; padding: .8em 1em; background: transparent;
  border: 1px solid var(--hairline-2); border-left: 3px solid var(--oxblood); border-radius: 0; font-size: .98rem; }
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.qr-card { text-align: center; background: var(--plate); border: 1px solid var(--ink);
  border-radius: 0; padding: 20px 18px; box-shadow: none; }
.qr-card-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.qr-card-svg svg { width: 160px; height: 160px; }
.qr-card-instr { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }
.qr-card-brand { margin-top: 8px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oxblood); font-weight: 700; }

/* ===== Articles / Resources ===== */
.read{ max-width: 720px; margin: 0 auto; padding: 0 24px; }
.article-head{ background: var(--ink); color: var(--paper); padding: 70px 0 56px; }
.article-head .kicker{ color: var(--hairline); text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 700; }
.article-head h1{ color: var(--paper); margin: .3em 0 0; font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1.1; }
.article-head .sub{ font-family: var(--font-display); font-style: italic; color: #cfc4ab; font-size: 1.2rem; max-width: 60ch; margin-top: .6em; }
.article-body{ padding: 50px 0 30px; font-family: var(--font-display); font-optical-sizing: auto; font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.article-body h2{ font-family: var(--font-display); border-top: 3px double var(--ink); padding-top: 1.1em; margin-top: 1.8em; }
.article-body p{ margin: 1em 0; }
.pull{ font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--oxblood); margin: 1.4em 0; font-weight: 400; border: 0; }
.callout{ background: transparent; border: 1px solid var(--cloth); border-radius: 0; padding: 20px 24px; margin: 1.8em 0; font-family: var(--font-ui); font-size: 1rem; }
.callout h3{ margin-top: 0; color: var(--cloth-deep); }
ul.clean{ list-style: none; padding-left: 0; }
ul.clean li, .article-body ol li{ margin-bottom: .55em; }
.refs{ font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--hairline-2); margin-top: 2.4em; padding-top: 1.4em; }
.refs h3{ font-size: 1rem; color: var(--ink-soft); }
.refs ol{ padding-left: 1.2em; }
.note{ font-size: .86rem; color: var(--ink-faint); font-style: italic; }
.next-reads{ margin: 40px auto; max-width: 720px; padding: 0 24px; }
.next-reads .cards, .article-cards{ display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; margin-top: 18px; }
.article-cards .card, .next-reads .card{ display: block; text-decoration: none; color: inherit; background: var(--plate); border: 1px solid var(--ink); border-radius: 0; padding: 20px 22px; box-shadow: none; transition: box-shadow .12s, transform .12s; }
.article-cards .card:hover, .next-reads .card:hover{ box-shadow: var(--press); transform: translate(-2px,-2px); }
.card .tag{ display: inline-block; color: var(--oxblood); font-weight: 700; text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; }
.card .more{ color: var(--oxblood); font-weight: 600; }

/* ---- HQ admin console ---- */
.admin-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-table th { text-align: left; padding: 10px 18px 10px 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--ink-faint); border-bottom: 1px solid var(--ink); }
.admin-table td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table th.num { text-align: right; }
.impersonation-bar { background: var(--ink); color: var(--paper); padding: .7em 1.1em; border-radius: 0; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; }
.impersonation-bar strong { color: #e8b389; }

/* ============================================================================
   TYPOGRAPHIC FURNITURE — datelines, ornaments, small caps
   ========================================================================== */
.dateline { display: flex; justify-content: space-between; gap: 14px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 0; border-bottom: 1px solid var(--ink); margin-bottom: 28px; }
.ornament { text-align: center; color: var(--oxblood); font-size: 1.1rem; letter-spacing: 1.2em; padding: 1.8em 0; margin-left: 1.2em; }

/* ---- Icon system: printer's blocks ---- */
.ic-svg { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
.ic-accent { color: var(--oxblood); }
.ic-chip {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 0;
  background: var(--plate); color: var(--oxblood);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--hairline-2);
}
.ic-chip-sage { color: var(--cloth-deep); }
.ic-chip-rose { color: var(--rose); }
.ic-chip-lg { width: 58px; height: 58px; }
.ic-chip .ic-svg { width: 22px; height: 22px; }
.ic-chip-lg .ic-svg { width: 28px; height: 28px; }
.btn .ic-svg { width: 1.15em; height: 1.15em; }
.empty .ic-chip { margin: 0 auto 12px; }

/* ============================================================================
   ✦ KNOW YOUR RESIDENT — the AI staff briefing (the invaluable feature)
   A full framed broadsheet plate.
   ========================================================================== */
.briefing {
  position: relative;
  border-radius: 0; border: 1px solid var(--ink);
  background: var(--plate);
  padding: 26px 28px;
}
.briefing::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none; }
.briefing > * { position: relative; }
.briefing-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.briefing-head .eyebrow { display: inline-flex; align-items: center; gap: .5em; margin: 0; }
.briefing-portrait {
  width: 64px; height: 64px; border-radius: 0; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--ink); padding: 3px; background: #fff;
}
.briefing-portrait.is-initials {
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 500; color: var(--paper);
  background: var(--cloth); padding: 0;
}
.briefing h2 { font-size: 1.55rem; font-weight: 500; margin: 0; }
.briefing-summary { font-family: var(--font-display); font-size: 1.14rem; line-height: 1.6; color: var(--ink); margin: 14px 0 18px; }
.briefing-summary .lede-quote { font-style: italic; }
.briefing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .briefing-grid { grid-template-columns: 1fr; } }
.brief-block { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 14px 2px 4px; }
.brief-block h3 { display: flex; align-items: center; gap: .5em; font-family: var(--font-ui); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); font-weight: 700; margin: 0 0 12px; }
.brief-block h3 .ic-svg { width: 16px; height: 16px; color: var(--oxblood); }
.people-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.people-list li { display: flex; gap: 9px; align-items: baseline; line-height: 1.4; }
.people-list .who { font-family: var(--font-display); font-weight: 500; color: var(--ink); white-space: nowrap; }
.people-list .rel { color: var(--ink-soft); font-size: .95rem; }
.starter { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--hairline); line-height: 1.45; font-family: var(--font-display); font-size: 1.02rem; }
.starter:last-child { border-bottom: 0; }
.starter .ic-svg { width: 17px; height: 17px; color: var(--oxblood); margin-top: .18em; }
.spark-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spark-chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .8em; border-radius: 0;
  background: transparent; border: 1px solid var(--hairline-2); font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.spark-chip .ic-svg { width: 14px; height: 14px; color: var(--oxblood); }
.gentle-note { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.gentle-note .ic-svg { width: 17px; height: 17px; color: var(--rose); margin-top: .15em; flex: 0 0 auto; }
.briefing-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 12px; border-top: 3px double var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.briefing-empty { text-align: center; padding: 14px 8px; }
.briefing.is-loading { background: var(--plate); }
/* While Refresh regenerates, Turbo marks the frame busy — keep the OLD briefing
   visible but gently dimmed/pulsing so it reads as "refreshing", not "gone". */
turbo-frame[busy] .briefing:not(.is-loading), turbo-frame[aria-busy="true"] .briefing:not(.is-loading) {
  opacity: .55; transition: opacity .2s ease; animation: briefing-refreshing 1.1s ease-in-out infinite;
}
turbo-frame[busy] .briefing .btn, turbo-frame[aria-busy="true"] .briefing .btn { pointer-events: none; }
@keyframes briefing-refreshing { 0%,100%{opacity:.55} 50%{opacity:.78} }
@media (prefers-reduced-motion: reduce) {
  turbo-frame[busy] .briefing:not(.is-loading), turbo-frame[aria-busy="true"] .briefing:not(.is-loading) { animation: none; opacity: .6; }
}
.brief-skeleton { height: .9em; border-radius: 0; background: linear-gradient(90deg,#eae2cc,#f3ecd9,#eae2cc);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; margin: .5em 0; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* resident portrait on the profile card + list rows */
.res-portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; border: 1px solid var(--ink); padding: 4px; background: #fff; box-shadow: 5px 5px 0 rgba(29,26,20,.12); }
.avatar.has-photo { padding: 0; overflow: hidden; border: 1px solid var(--ink); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   ✦ LAUNCH A SESSION — full-screen QR kiosk (ink stage, paper card)
   ========================================================================== */
.kiosk {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  color: var(--paper); overflow: hidden;
  background: var(--ink);
}
.kiosk-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; flex: 0 0 auto; border-bottom: 1px solid rgba(247,242,230,.14); }
.kiosk-top .brand { color: var(--paper); }
.kiosk-exit { color: #cfc4ab; display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; background: transparent;
  border: 1px solid rgba(247,242,230,.35); border-radius: 0; padding: .6em 1.2em; cursor: pointer; }
.kiosk-exit:hover { background: rgba(247,242,230,.1); color: var(--paper); text-decoration: none; }
.kiosk-stage { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; padding: 8px 24px; overflow: hidden; }
.kiosk-card {
  background: var(--paper); color: var(--ink); border-radius: 0; padding: 30px 46px 26px; text-align: center;
  box-shadow: 12px 12px 0 rgba(0,0,0,.45); max-width: 480px; width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; position: relative;
  animation: kioskpop .45s cubic-bezier(.2,.9,.25,1);
}
.kiosk-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hairline-2); pointer-events: none; }
.kiosk-card > * { position: relative; }
@keyframes kioskpop { from { opacity: 0; transform: scale(.96) translateY(14px); } to { opacity: 1; transform: none; } }
.kiosk-eyebrow { display: inline-flex; align-items: center; gap: .5em; }
.kiosk-name { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 400; line-height: 1.05; margin: .12em 0 .08em; letter-spacing: -.015em; }
.kiosk-room { color: var(--ink-faint); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.kiosk-qr { width: min(300px, 56vw, 38vh); margin: 4px auto 14px; padding: 14px; background: #fff; border: 1px solid var(--ink); border-radius: 0; box-shadow: none; }
.kiosk-qr svg { width: 100%; height: auto; display: block; }
.kiosk-instr { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); max-width: 28ch; margin: 0 auto; }
.kiosk-portrait { width: 76px; height: 76px; border-radius: 0; object-fit: cover; border: 1px solid var(--ink); padding: 3px; background: #fff; margin: 0 auto 8px; }
.kiosk-portrait.is-initials { display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; color: var(--paper); background: var(--cloth); padding: 0; }
.kiosk-bottom { position: relative; z-index: 3; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 24px 12px; }
.kiosk-top { position: relative; z-index: 3; }
.kiosk-dots { position: relative; z-index: 3; padding-bottom: 14px; }
.kiosk-nav { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(247,242,230,.35); color: var(--paper); transition: background .15s, transform .1s; }
.kiosk-nav:hover { background: rgba(247,242,230,.12); }
.kiosk-nav:active { transform: scale(.94); }
.kiosk-nav[disabled] { opacity: .3; cursor: not-allowed; }
.kiosk-count { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 500; color: #e5dcc7; min-width: 5ch; text-align: center; }
.kiosk-dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 60vw; }
.kiosk-dot { width: 9px; height: 9px; border-radius: 0; background: rgba(247,242,230,.3); transition: all .2s; cursor: pointer; }
.kiosk-dot.is-on { background: var(--paper); width: 24px; }
.kiosk-autoplay { display: inline-flex; align-items: center; gap: .5em; color: #cfc4ab; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  background: transparent; border: 1px solid rgba(247,242,230,.35); border-radius: 0; padding: .6em 1.2em; }
.kiosk-autoplay .ic-svg { width: 17px; height: 17px; }
.kiosk-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(247,242,230,.12); }
.kiosk-progress > i { display: block; height: 100%; width: 0; background: var(--signal); }

/* ---- Considered motion: one gentle rise on load ---- */
@media (prefers-reduced-motion: no-preference) {
  .dash-main .stat, .dash-main > .dash-cols .card, .dash-main > .dash-cols section,
  .dash-main .briefing, .story-feature {
    animation: rise .45s cubic-bezier(.2,.8,.2,1) both;
  }
  .stat-row .stat:nth-child(2) { animation-delay: .05s; }
  .stat-row .stat:nth-child(3) { animation-delay: .1s; }
  .stat-row .stat:nth-child(4) { animation-delay: .15s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==== First-run onboarding walkthrough (req-038) ==== */
.onb-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(29, 26, 20, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.onb-card {
  background: var(--plate); color: var(--ink);
  border: 1px solid var(--hairline-2);
  box-shadow: 6px 6px 0 rgba(29, 26, 20, .22);
  max-width: 560px; width: 100%;
  padding: 36px 40px 28px;
  overflow: hidden;
}
.onb-figure {
  margin: -36px -40px 22px; overflow: hidden;
  border-bottom: 1px solid var(--hairline-2);
  background: var(--sand, #efe9df);
}
.onb-figure img {
  display: block; width: 100%; height: 190px;
  object-fit: cover; object-position: center 38%;
}
.onb-kicker {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oxblood); font-weight: 700; margin-bottom: 10px;
}
.onb-slide h2 { margin: 0 0 12px; }
.onb-slide p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }
.onb-slide .onb-strong { color: var(--ink); font-weight: 600; }
.onb-slide[hidden] { display: none !important; }
.onb-dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.onb-dot {
  width: 10px; height: 10px; border-radius: 0; padding: 0;
  border: 1px solid var(--ink-soft); background: transparent; cursor: pointer;
}
.onb-dot.is-active { background: var(--oxblood); border-color: var(--oxblood); }
.onb-nav { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.onb-nav .onb-skip { margin-right: auto; font-size: .85rem; }
.onb-nav [hidden], .onb-finish[hidden] { display: none !important; }
@media (max-width: 480px) {
  .onb-card { padding: 24px 20px 20px; }
  .onb-figure { margin: -24px -20px 18px; }
  .onb-figure img { height: 150px; }
}

/* ---- Resident topic picker (big print, letterpress) ------------------- */
.topic-intro { text-align: center; margin: 18px 0 6px; }
.topic-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 5.5vw, 2.7rem); line-height: 1.15; color: var(--res-fg, var(--ink)); }
.topic-lead { font-size: 1.3rem; color: var(--ink-soft); max-width: 40ch; margin: 12px auto 0; line-height: 1.5; }

.topic-groups { display: flex; flex-direction: column; gap: 30px; margin-top: 10px; }
.topic-group-title {
  font-family: var(--font-ui); font-size: .95rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .16em; color: var(--oxblood); margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 3px double var(--ink);
}
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* button_to wraps the button in a form; let the button itself be the grid item */
.topic-form { display: contents; }
.topic-form-wide { display: block; margin: 8px 0 4px; }

.topic-card {
  display: flex; align-items: center; gap: 22px; width: 100%; text-align: left;
  background: var(--plate); border: 2px solid var(--ink); border-radius: 0; padding: 26px 26px;
  color: var(--res-fg, var(--ink)); cursor: pointer; font-family: var(--font-ui);
  box-shadow: 5px 5px 0 rgba(29,26,20,.20); transition: transform .08s, box-shadow .08s, background .12s;
  min-height: 120px;
}
.topic-card:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(29,26,20,.24); }
.topic-card:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--ink); }
.topic-card .topic-ic { flex: 0 0 auto; display: inline-flex; color: var(--oxblood); }
.topic-card .topic-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.topic-card .topic-title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 500; line-height: 1.12; }
.topic-card .topic-tag { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.4; }
.topic-card .topic-now { flex: 0 0 auto; margin-left: auto; align-self: center; display: inline-block; background: var(--oxblood); color: var(--paper); font-weight: 700; font-size: 1rem; letter-spacing: .04em; padding: .35em .8em; text-transform: uppercase; white-space: nowrap; }

/* the guided "a little of everything" card, and the selected card */
.topic-card-any .topic-title { font-size: 2rem; }
.topic-card.is-current { background: var(--oxblood-wash); border-color: var(--oxblood); box-shadow: 5px 5px 0 var(--oxblood-deep); }
.topic-card.is-current .topic-title { color: var(--oxblood-deep); }

@media (max-width: 560px) {
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card .topic-title { font-size: 1.65rem; }
  .topic-card-any .topic-title { font-size: 1.75rem; }
}

/* a "change topic" chip that sits above the interview question */
.topic-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.topic-banner .topic-here { font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; color: var(--oxblood); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.topic-banner .topic-switch { font-size: 1rem; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft); }

/* ============================================================================
   req-047..052 — marketing imagery, forms, memory-book page
   ========================================================================== */

/* A generic centred column (some views reference `.container`; it was undefined,
   which pinned the support/contact page flush against the left edge). */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* ---- Marketing "figure" — a framed plate holding a real photograph ---- */
.figure-plate { border: 1px solid var(--ink); background: var(--plate); padding: 8px; position: relative; box-shadow: var(--shadow-lg); }
.figure-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figure-plate figcaption { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 700; padding: 10px 4px 4px; }
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.media-row.reverse .media-copy { order: 2; }
.media-row .figure-plate img { aspect-ratio: 16 / 11; }
@media (max-width: 820px) { .media-row, .media-row.reverse { grid-template-columns: 1fr; gap: 26px; } .media-row.reverse .media-copy { order: 0; } }

/* small photo strip inside a step card */
.card-photo { margin: -26px -26px 18px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.card-photo img { display: block; width: 100%; height: 150px; object-fit: cover; }

/* ---- Two-column form (add-resident) ---- */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 820px) { .form-2col { grid-template-columns: 1fr; gap: 22px; } }
.form-col { min-width: 0; }
.form-col > .field:first-child { margin-top: 0; }
/* let the audio-toggle label wrap instead of forcing the column wider than the phone */
.check label { text-transform: none; letter-spacing: normal; font-size: .95rem; }

/* photo upload well — a framed drop zone with a preview + legible hint */
.photo-well { display: flex; align-items: center; gap: 16px; border: 1px solid var(--hairline-2); background: var(--paper-2); padding: 16px; }
.photo-well .pw-figure { position: relative; width: 88px; height: 88px; flex: 0 0 auto; border: 1px solid var(--ink); padding: 3px; background: #fff; }
.photo-well .pw-preview { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; }
.photo-well .pw-empty { position: absolute; inset: 3px; display: grid; place-items: center; color: var(--ink-faint); }
.photo-well .pw-empty .ic-svg { width: 32px; height: 32px; }
.photo-well .pw-body { flex: 1; min-width: 0; }
.photo-well input[type=file] { font-size: .95rem; max-width: 100%; }
@media (max-width: 520px) { .photo-well { flex-direction: column; align-items: flex-start; } }
.photo-well .pw-hint { margin: .5em 0 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }
.field-spaced { margin-top: 1.3rem; }

/* ---- Memory-book page: sell the book, then a tidy order list ---- */
.book-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; border: 1px solid var(--ink); background: var(--plate); padding: 30px 34px; position: relative; }
.book-hero::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none; }
.book-hero > * { position: relative; }
.book-hero h2 { font-size: 1.9rem; margin: 6px 0 10px; }
.book-hero .book-lede { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); line-height: 1.5; }
.book-formats { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 12px; }
.book-formats li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
.book-formats .bf-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.book-formats .bf-sub { display: block; font-family: var(--font-ui); font-size: .82rem; color: var(--ink-faint); }
.book-formats .bf-price { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--oxblood); font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-cover { aspect-ratio: 3 / 4; border: 1px solid var(--ink); background: linear-gradient(160deg, #7a2a1e, var(--oxblood-deep)); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: 26px 22px; box-shadow: var(--shadow-lg); position: relative; }
.book-cover::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: rgba(247,242,230,.25); }
.book-cover .bc-kicker { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.book-cover .bc-title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; }
.book-cover .bc-foot { font-family: var(--font-display); font-style: italic; font-size: .95rem; opacity: .9; }
@media (max-width: 720px) { .book-hero { grid-template-columns: 1fr; } .book-cover { max-width: 220px; } }

.order-list { display: flex; flex-direction: column; gap: 14px; }
.order-card { display: flex; align-items: center; gap: 18px; border: 1px solid var(--hairline-2); background: var(--plate); padding: 16px 20px; }
.order-card .oc-main { flex: 1; min-width: 0; }
.order-card .oc-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.order-card .oc-sub { font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.order-card .oc-price { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-card .oc-status { flex: 0 0 auto; }
@media (max-width: 640px) { .order-card { flex-wrap: wrap; gap: 10px 14px; } .order-card .oc-price { order: 3; } }

/* ---- Demo tour + sample-resident furnishing (req-054/056) ---- */
.demo-bar { background: var(--ink); color: var(--paper); padding: .7em 1.1em; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 500; }
.demo-bar strong { color: #e8b389; }
.demo-bar .demo-bar-cta { background: var(--paper); color: var(--ink); padding: .35em 1em; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.sample-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--hairline-2); background: var(--oxblood-wash); padding: 12px 18px; margin-bottom: 1.2rem; font-size: .92rem; color: var(--ink-soft); }
.sample-banner > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill-sample { color: var(--ink-faint); border-style: dashed; }

/* Ghosted "example" empty states: a promise of what will be there, not a ledger of zeros. */
.ghost-example { position: relative; border: 1.5px dashed var(--hairline-2); background: transparent; }
.ghost-example > *:not(.ghost-tag):not(.ghost-cta) { opacity: .55; }
.ghost-example .ghost-tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--hairline-2); padding: .3em .7em; margin-bottom: 12px; background: var(--paper); }
.ghost-example .ghost-cta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: .92rem; color: var(--ink-soft); }
.ghost-example .ghost-cta a { font-weight: 700; }

/* Resident interview upload heartbeat (req-057). Large, calm, unmissable. */
.res-save-status { margin: 14px auto 0; max-width: 34ch; text-align: center; font-size: 1.15rem; font-weight: 600; color: var(--cloth-deep); background: var(--paper-2); border: 1px solid var(--hairline-2); padding: .55em 1em; }

/* "This month" engagement strip (req-060) — value made legible. */
.month-strip { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border: 1px solid var(--hairline-2); background: var(--plate); padding: 10px 16px; margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }
.month-strip .month-strip-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--oxblood); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
.month-strip strong { color: var(--ink); }
.stories-pager { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Wellbeing check-in (req-061): five big warm words, elder-sized targets. */
.mood-check { text-align: center; }
.mood-options { display: flex; flex-direction: column; gap: 12px; max-width: 24rem; margin: 22px auto 14px; }
.mood-options .mood-btn { font-size: 1.35rem; padding: .8em 1em; justify-content: center; width: 100%; border: 2px solid var(--hairline-2); background: var(--plate); color: var(--ink); font-weight: 600; }
.mood-options .mood-btn:hover { border-color: var(--oxblood); }
.mood-options form { width: 100%; }
.mood-skip { margin-top: 6px; }
.mood-check form { display: inline-block; width: auto; }
.mood-check .mood-options form { display: block; }

/* Subprocessors table (req-063) */
.prose-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 18px 0; }
.prose-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); border-bottom: 1.5px solid var(--ink); padding: 8px 10px; }
.prose-table td { border-bottom: 1px solid var(--hairline); padding: 9px 10px; vertical-align: top; }

/* Memory-book order form — tidy radio-card options (req-094) */
.book-form fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.book-form legend { font-weight: 600; margin-bottom: .55rem; font-size: 1rem; color: var(--ink);
  text-transform: none; letter-spacing: normal; }
/* .book-opt is a <label>; the global label rule uppercases/shrinks everything, so
   reset it here and let the title/description read like normal prose. */
.book-opt { display: block; padding: .85em 1em; border: 1px solid var(--hairline); margin-bottom: .5em;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
  font-weight: 400; font-size: 1rem; color: var(--ink);
  text-transform: none; letter-spacing: normal; }
.book-opt:last-child { margin-bottom: 0; }
.book-opt:hover { border-color: var(--ink); }
.book-opt:has(input:checked) { border-color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); }
.book-opt input { margin-right: .5em; }
.book-opt .opt-title { font-weight: 600; }
.book-opt .opt-price { float: right; font-weight: 600; }
.book-opt .opt-price .was { text-decoration: line-through; color: var(--ink-faint); font-weight: 400; margin-right: .35rem; }
.book-opt .opt-desc { display: block; color: var(--ink-faint); font-size: .9rem; margin-top: .3rem; line-height: 1.5; }

/* ============================================================================
   FAMILY RELAY v2 — "the light left on"
   This is the page that has to make a family FEEL something, so it gets more
   care than any other surface: an engraved porch scene at the top, warmer paper,
   a hand-set masthead instead of a dark app bar, and stories staged as plates.
   Loaded last, so it refines the base Almanac rules above.
   ========================================================================== */

.fam {
  background:
    radial-gradient(120% 60% at 50% 0%, #fbf5e8 0%, rgba(251,245,232,0) 62%),
    var(--paper);
}

/* ---- Masthead: a printed nameplate, not a navbar ---- */
.fam-header {
  background: transparent;
  color: var(--ink);
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 var(--hairline);
}
.fam-header .brand { color: var(--ink); font-size: 1.35rem; letter-spacing: -.01em; }
.fam-header .brand svg { color: var(--oxblood); }
.fam-header-note {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700; color: var(--ink-faint);
}

/* ---- Hero: the engraved plate ---- */
.fam-hero {
  position: relative;
  padding: 0 0 8px;
  isolation: isolate;
  overflow: hidden;
}
.porch-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(150px, 24vw, 300px);
  z-index: -1;
  display: block;
}
.fam-hero-inner {
  padding-top: clamp(38px, 6vw, 72px);
  padding-bottom: clamp(150px, 22vw, 250px);
  max-width: min(var(--maxw), 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (min-width: 900px) {
  .fam-hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 46px; align-items: center; }
}

/* Their own portrait, set like a plate in an almanac — never stock imagery. */
.fam-portrait { margin: 0; text-align: center; }
.fam-portrait img {
  display: block;
  width: clamp(112px, 26vw, 210px);
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--plate);
  border: 1px solid var(--ink);
  padding: 7px;
  box-shadow: var(--shadow-lg);
}
.fam-portrait figcaption {
  margin-top: 10px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--ink-faint);
}
@media (max-width: 899px) {
  .fam-hero-inner { grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
  .fam-hero-text { grid-column: 1 / -1; order: 2; }
  .fam-portrait { order: 1; grid-column: 1 / -1; text-align: left; }
  .fam-portrait figcaption { text-align: left; }
}
.fam-hero .eyebrow { margin-bottom: .5em; }
.fam-hero h1 { margin-bottom: .18em; max-width: 18ch; }
.fam-hero .lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 1.4rem;
}
.fam-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fam-hero-actions .btn { display: inline-flex; align-items: center; gap: .5em; }
.fam-hero-actions .btn-ghost { background: rgba(251,248,239,.72); backdrop-filter: blur(2px); }

/* ---- Section heads: a title with a rule running off to the margin ---- */
.fam-sec-head { display: flex; align-items: baseline; gap: 16px; margin: 34px 0 18px; }
.fam-sec-head h2 { margin: 0; white-space: nowrap; }
.fam-rule { flex: 1; height: 0; border-top: 1px solid var(--ink); border-bottom: 3px double transparent;
  box-shadow: 0 3px 0 -1px var(--hairline); }

/* ---- "Their story so far" — the opening plate ---- */
.fam-main > .panel,
.fam-main turbo-frame > .panel {
  background: var(--plate);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.fam-main turbo-frame > .panel::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid var(--hairline); pointer-events: none;
}
.fam-main turbo-frame > .panel > * { position: relative; }
.fam-main turbo-frame > .panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.fam-main turbo-frame > .panel p:not(.faint) {
  font-family: var(--font-display); font-size: 1.08rem; line-height: 1.72;
}

/* ---- Stories ---- */
.fam-grid { padding-bottom: 12px; }
.story-item { box-shadow: var(--shadow-lg); }
.story-item .q { line-height: 1.25; }
.story-listen {
  margin: 14px 0 4px; padding: 12px 14px;
  background: var(--paper-2); border: 1px solid var(--hairline);
}
.story-listen-label {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--oxblood); margin-bottom: 8px;
}
.story-listen .audio-player { width: 100%; display: block; }
/* Player + "Save" sit on one line; the button never squeezes the transport (req-100). */
.story-listen-row { display: flex; align-items: center; gap: 10px; }
.story-listen-row .audio-player { flex: 1 1 auto; min-width: 0; }
.story-dl {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4em;
  padding: 8px 12px; border: 1px solid var(--hairline); background: var(--plate);
  color: var(--oxblood); text-decoration: none; border-radius: 3px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.story-dl:hover { background: var(--paper); border-color: var(--oxblood); transform: translateY(-1px); }
.story-dl:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
/* "Save all stories" lives on the section rule, so it must not stretch it. */
.fam-sec-head .story-dl-all { flex: 0 0 auto; white-space: nowrap; }
.btn-sm { padding: 8px 13px; font-size: .78rem; }
.fam-empty { background: var(--plate); border: 1px solid var(--hairline); padding: 46px 24px; }

/* ---- Side rail ---- */
.fam-book { text-align: center; box-shadow: var(--shadow-lg); margin-top: 18px; }
.fam-book .ic-chip { margin: 0 auto 10px; }
.fam-book h3 { margin: .3em 0; }
.fam-book .muted { max-width: 40ch; margin: .4em auto 1.1em; }
.recorder-box { box-shadow: var(--shadow-lg); }

/* ---- The ask, moved below the payoff ---- */
.seed-wrap { padding: 10px 0 54px; }

/* ---- Footer: a colophon ---- */
.fam-footer {
  margin-top: 10px; padding: 40px 0 46px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(239,231,210,.5) 0%, rgba(239,231,210,0) 100%);
  text-align: center;
}
.fam-footer-mark { display: inline-flex; color: var(--oxblood); margin-bottom: 6px; }
.fam-footer-mark svg { width: 26px; height: 26px; }
.fam-footer-line {
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem;
  color: var(--ink-soft); margin: 0 0 .3rem;
}
.fam-footer-sub { font-size: .85rem; color: var(--ink-faint); margin: 0; }
.fam-footer-sub a { color: var(--ink-faint); }

/* ---- Care-team preview chrome (staff only, never the family's page) ---- */
.fam-preview-bar { background: var(--ink); color: #e7dfcd; padding: 10px 0; font-size: .88rem; }
.fam-preview-bar a { color: #f0d7a8; }
.fpb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fpb-tag {
  display: inline-flex; align-items: center; gap: .4em;
  text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700;
  color: #f0d7a8; border: 1px solid #5a5140; padding: 3px 8px;
}
.fpb-note { color: #c8bca8; }
.fpb-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.fpb-quiet { color: #8c8271; }
.fpb-details { margin-top: 10px; border-top: 1px solid #3a342a; padding-top: 8px; }
.fpb-details summary { cursor: pointer; color: #f0d7a8; }
.fpb-details h4 { color: #e7dfcd; font-size: .95rem; margin: 14px 0 6px; }
.fpb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fpb-list li { border: 1px solid #3a342a; padding: 10px 12px; }
.fpb-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; color: #c8bca8; font-size: .85rem; }
.fpb-meta strong { color: #f4ecdb; font-weight: 600; }
.fpb-state { color: #8c8271; }
.fpb-list audio { width: 100%; margin-top: 8px; }

/* ---- Phones ---- */
@media (max-width: 879px) {
  .fam-hero-inner { padding-top: clamp(40px, 16vw, 90px); }
  .fam-hero h1 { max-width: 14ch; }
  .fam-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .fam-sec-head { margin: 26px 0 14px; flex-wrap: wrap; }
  .fam-sec-head h2 { white-space: normal; }
  /* On a phone the transport needs the full width — stack the Save button under it. */
  .story-listen-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .story-dl { justify-content: center; padding: 11px 12px; }
  .story-item { padding: 20px 18px; }
  .fpb-links { margin-left: 0; width: 100%; }
}

/* ---- Guided demo tour (req-101) ------------------------------------------
   A fixed narration rail pinned to the bottom of every surface the tour visits.
   It follows the letterpress language: ink plate, oxblood accent, display serif
   for the step title. The body gets .has-demo-tour so page content is padded
   clear of it instead of hiding underneath. */
body.has-demo-tour { padding-bottom: 188px; }

.demo-tour {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  background: var(--ink); color: var(--paper);
  border-top: 3px solid var(--oxblood);
  box-shadow: 0 -14px 34px rgba(29,26,20,.30), 0 -3px 10px rgba(29,26,20,.18);
}
.demo-tour-inner {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.demo-tour-copy { flex: 1 1 460px; min-width: 0; }

.demo-tour-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.demo-tour-persona {
  font-size: .64rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  background: var(--oxblood); color: #fbeee6; padding: .34em .8em;
}
.demo-tour-count,
.demo-tour-live {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(247,242,230,.58);
}
.demo-tour-live::before { content: "●"; color: #e8b389; margin-right: 6px; font-size: .7em; vertical-align: middle; }

.demo-tour h3 {
  font-family: var(--font-display); font-size: 1.42rem; line-height: 1.15;
  margin: 0 0 5px; color: var(--paper);
}
.demo-tour p {
  margin: 0; font-size: .93rem; line-height: 1.5; color: rgba(247,242,230,.80); max-width: 66ch;
}

.demo-tour-nav { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.demo-tour-dots { display: flex; gap: 6px; }
.demo-tour-dot { width: 22px; height: 3px; background: rgba(247,242,230,.22); }
.demo-tour-dot.is-on { background: #e8b389; }

.demo-tour-btns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.demo-tour-btns form { margin: 0; }
.demo-tour-btn { padding: .5em 1.15em; font-size: .87rem; white-space: nowrap; }
.demo-tour .btn-ghost {
  background: transparent; color: rgba(247,242,230,.85); border: 1px solid rgba(247,242,230,.32);
}
.demo-tour .btn-ghost:hover { background: rgba(247,242,230,.10); color: var(--paper); }
.demo-tour .btn-primary { background: #e8b389; color: var(--ink); border-color: #e8b389; font-weight: 700; }
.demo-tour .btn-primary:hover { background: #f0c6a4; }
.demo-tour-exit { opacity: .72; }

@media (max-width: 820px) {
  body.has-demo-tour { padding-bottom: 252px; }
  .demo-tour-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px 16px; }
  .demo-tour h3 { font-size: 1.2rem; }
  .demo-tour p { font-size: .87rem; }
  .demo-tour-nav { align-items: stretch; }
  .demo-tour-btns { justify-content: space-between; }
  .demo-tour-btn { flex: 1 1 auto; text-align: center; }
}