/* Shared navigation additions (site-nav.js, owner 2026-10-05). Loaded last, so these rules settle the older layered header rules.
   Desktop: only the quiet way back to cardassilaris.com is new. ≤ 900px: one compact header row and a full menu panel.
   ≤ 760px: a bottom app bar. Palette: the archive's own cream, ink and wine. */
.site-back-link{opacity:.78}
.site-back-link:hover,.site-back-link:focus-visible{opacity:1}
#navigation .site-back-link{margin-left:6px}
#navigation .site-back-link:before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:14px;background:var(--line,rgba(72,45,42,.22));transform:translateY(-50%)}
.controls .site-back-link{text-decoration:none;white-space:nowrap}
.footer-back-link{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid transparent;font-size:12px;letter-spacing:.02em;white-space:nowrap}
.footer-back-link:hover,.footer-back-link:focus-visible{border-bottom-color:currentColor}
.footer-bottom{flex-wrap:wrap;gap:8px 24px}
.site-menu-button,.site-brand-logo,.site-menu-panel,.site-tabbar{display:none}
[hidden].site-menu-panel{display:none!important}

@media (max-width:900px){
  /* One header row: logo + short name, language, Menu. */
  #site-header header,#site-header header.scrolled{height:auto!important;min-height:0!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;padding:10px 16px!important;gap:12px!important}
  #site-header header>nav#navigation,#site-header header>nav#navigation.open,#site-header header>.motion-toggle,#site-header header>.menu-toggle{display:none!important}
  #site-header .wordmark{height:auto!important;order:0!important;min-width:0;margin-right:auto}
  #site-header .wordmark img{width:42px!important;height:42px!important}
  #site-header .wordmark span{font-size:18px!important}
  #site-header .wordmark small{display:none!important}
  #site-header .language-links{order:0!important;padding:0!important;margin:0!important;font-size:12px!important;gap:10px!important}
  #site-header .language-links a{padding:8px 2px!important;min-height:40px;display:inline-flex;align-items:center}
  body>header{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:12px!important;padding:10px 16px!important}
  body>header .brand{margin-right:auto;display:flex;align-items:center;gap:10px;font-size:18px!important;line-height:1.1}
  body>header .brand span{display:none!important}
  body>header .site-brand-logo{display:block;width:40px;height:40px;object-fit:contain;mix-blend-mode:multiply}
  body>header .controls{gap:10px!important;flex-wrap:nowrap!important}
  body>header .controls>a,body>header .controls .counter,body>header .controls #motion,body>header .controls .site-back-link{display:none!important}
  body>header #lang{min-height:40px;min-width:40px;font-size:12px;letter-spacing:.07em}
  .site-menu-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--line,rgba(72,45,42,.3));border-radius:2px;background:transparent;color:var(--ink,#482d2a);font:13px/1 var(--sans,Fira,Arial,sans-serif);letter-spacing:.02em;white-space:nowrap;cursor:pointer;flex-shrink:0}
  .site-menu-button[aria-expanded=true]{border-color:var(--wine,#753d48);color:var(--wine,#753d48)}
  .site-menu-button:focus-visible{outline:2px solid var(--wine,#753d48);outline-offset:2px}

  /* The menu panel, below the header row. */
  .site-menu-panel{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--site-header-height,64px);z-index:85;overflow:auto;overscroll-behavior:contain;background:var(--cream,#eee5ce);color:var(--ink,#482d2a);border-top:1px solid var(--line,rgba(72,45,42,.22))}
  .site-menu-inner{max-width:560px;margin:0 auto;padding:28px 24px calc(32px + env(safe-area-inset-bottom,0px))}
  .site-menu-kicker{margin:0 0 14px;font:11px/1.4 var(--sans,Fira,Arial,sans-serif);letter-spacing:.2em;color:var(--wine,#753d48)}
  .site-menu-links{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;margin:0!important;padding:0!important;position:static!important;background:none!important;border:0!important}
  .site-menu-links a{display:flex!important;flex-direction:column;gap:3px;padding:14px 0!important;border-bottom:1px solid var(--line,rgba(72,45,42,.22));color:inherit;text-decoration:none;white-space:normal!important}
  .site-menu-links a:after{display:none!important}
  .site-menu-links a span{font:500 clamp(24px,6.4vw,32px)/1.15 var(--serif,Literata),Georgia,serif;letter-spacing:-.01em}
  .site-menu-links a small{font:13px/1.4 var(--sans,Fira,Arial,sans-serif);opacity:.72}
  .site-menu-links a[aria-current] span{color:var(--wine,#753d48);font-style:italic}
  .site-menu-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:26px}
  .site-menu-motion{min-height:44px;padding:9px 16px;border:1px solid var(--line,rgba(72,45,42,.3));border-radius:2px;background:transparent;color:inherit;font:13px/1 var(--sans,Fira,Arial,sans-serif);cursor:pointer}
  .site-menu-motion b{font-weight:600;color:var(--wine,#753d48)}
  .site-menu-back{min-height:44px;display:inline-flex;align-items:center;color:inherit;text-decoration:none;font:14px/1.3 var(--sans,Fira,Arial,sans-serif);border-bottom:1px solid var(--line,rgba(72,45,42,.3))}
  .site-menu-links a:focus-visible,.site-menu-motion:focus-visible,.site-menu-back:focus-visible{outline:2px solid var(--wine,#753d48);outline-offset:3px}
  body.site-menu-open{overflow:hidden}

  /* Sticky bars below the (now shorter) header. */
  .era-nav,.record-tabs{top:var(--site-header-height,64px)!important}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel:not([hidden]){animation:site-menu-in .28s ease-out both}
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel:not([hidden]) .site-menu-links a{animation:site-menu-item .4s ease-out both}
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel .site-menu-links a:nth-child(2){animation-delay:.04s}
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel .site-menu-links a:nth-child(3){animation-delay:.08s}
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel .site-menu-links a:nth-child(4){animation-delay:.12s}
  html:not(.motion-off) body:not(.motion-off) .site-menu-panel .site-menu-links a:nth-child(5){animation-delay:.16s}
}
@keyframes site-menu-in{from{opacity:0}to{opacity:1}}
@keyframes site-menu-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bottom app bar on phones. */
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  /* The bar is a <nav>: undo the older generic «nav» rules (absolute, top:75px, wrapping). */
  .site-tabbar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;height:auto!important;gap:0!important;flex-wrap:nowrap!important;z-index:80;margin:0!important;padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--cream,#eee5ce) 95%,transparent);color:var(--ink,#482d2a);border-top:1px solid var(--line,rgba(72,45,42,.22));box-shadow:0 -5px 24px rgba(72,45,42,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .site-tabbar a,.site-tabbar button{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:4px 2px!important;border:0;border-radius:8px;background:none;color:inherit;text-decoration:none;font:500 11px/1.2 var(--sans,Fira,Arial,sans-serif);letter-spacing:.01em;white-space:nowrap;cursor:pointer}
  .site-tabbar a:after{display:none!important}
  .site-tabbar svg{flex-shrink:0}
  .site-tabbar a[aria-current],.site-tabbar button[aria-expanded=true]{color:var(--wine,#753d48);background:rgba(117,61,72,.07)}
  .site-tabbar a:focus-visible,.site-tabbar button:focus-visible{outline:2px solid var(--wine,#753d48);outline-offset:-2px}
  body.site-menu-open .site-tabbar{visibility:hidden}
  /* Things that sit on the bottom edge of the page move above the bar (the archive viewers open above it, in the top layer). */
  .holdbar{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
}
@media print{.site-tabbar,.site-menu-button,.site-menu-panel{display:none!important}}

/* ── Mobile QA corrections (fableMobileArchiveFix20261005). Loaded last on every page. ─────────────────────────── */
/* Archive viewers (all widths): 44px controls, readable labels, titles that wrap between words only. */
.viewer .viewer-close{width:44px;height:44px;min-width:44px;font-size:26px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.viewer .viewer-controls button{min-height:44px;padding:8px 14px;font-size:14px}
.viewer .viewer-controls span{font-size:13px}
.viewer .document-pages button{min-width:44px;min-height:44px}
.catalog-viewer .viewer-details h2,.catalog-card-copy strong,.viewer-top span{overflow-wrap:break-word;word-break:normal;hyphens:manual}
@media (max-width:760px){
  .viewer .viewer-controls{gap:6px;padding:8px}
  /* Catalog viewer on phones: ← Previous · position · Next → on one row, Zoom on its own full-width row. */
  .catalog-viewer .viewer-controls{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"prev pos next" "zoom zoom zoom";align-items:center}
  .catalog-viewer .viewer-prev{grid-area:prev;justify-self:start}
  .catalog-viewer #viewer-position{grid-area:pos;text-align:center}
  .catalog-viewer .viewer-next{grid-area:next;justify-self:end}
  .catalog-viewer .viewer-zoom{grid-area:zoom;justify-self:center}
  .viewer .viewer-controls button{font-size:13px;padding:8px 10px}
  .catalog-viewer .viewer-details h2{font-size:24px}
}
/* Fonts: map labels and step numerals use the site's own serif, not a Georgia fallback; small captions use Fira. */
.roots-places-art svg text{font-family:Literata,Georgia,serif}
.fact-junction span{font-family:Literata,Georgia,serif;font-size:12px}
.meaning-graphic i,.lineage-graphic i,.discovery-chain>i{font-family:Literata,Georgia,serif}
@media (max-width:600px){
  /* The older phone floor set every «small» to 11px (!important); raise it, and give captions and tree roles their sizes. */
  html body main small{font-size:12px!important}
  html body main figcaption small,html body main .relationship-pair strong small{font-size:13px!important}
  html body main small.tree-m-role{font-size:12px!important}
}
/* «Seven trees» labels wrap between words, never inside one. */
.orchard-species .fact-visual-node{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (max-width:480px){
  .orchard-species{gap:.5rem}
  .orchard-species .fact-visual-node{padding:1rem .15rem}
  .orchard-species .fact-visual-node strong{font-size:13px}
}
/* Family tree: readable kickers, labels and notes; a full-size search button. */
@media (max-width:1024px){
  .scene-generation-label{font-size:12px;letter-spacing:.2em}
  .scene-source-note{font-size:14px;line-height:1.6;opacity:.8}
  .scene-story-kicker,.scene-related-title{font-size:12px;letter-spacing:.14em}
}
@media (max-width:900px){
  .scene-search-button{min-height:44px;font-size:14px;padding:8px 14px}
  .tree-m-heading{font-size:12px;letter-spacing:.14em}
  .tree-m-role{font-size:12px;letter-spacing:.1em}
  .tree-m-dates{font-size:14px}
  .scene-foot,.scene-foot span{font-size:13px}
  .scene-trail button{min-height:44px}
}
@media (max-width:900px){
  /* Header row: language links and Menu at least 44px. */
  .site-menu-button{min-height:44px;font-size:14px}
  #site-header .language-links a{min-height:44px!important;min-width:44px;justify-content:center;font-size:13px}
}
@media (max-width:420px){
  /* Narrow phones: only the other language is offered (44px), so the header row fits without sideways scrolling. */
  #site-header .language-links a[aria-current]{display:none!important}
  body>header #lang{min-height:44px;min-width:44px;font-size:13px}
  /* Section-fact headers are ordinary headings here: they no longer stick under the site header and cover the lists. */
}
/* Section-fact headers are ordinary headings: the generic «header» rule made them sticky at top:0, under the site header,
   where they covered the lists (phones) or poked out below it (desktop). */
.family-facts>header,.family-facts header{position:static;top:auto;z-index:auto}
@media (max-width:900px){.family-facts>header,.family-facts header{height:auto}}
@media (max-width:760px){
  /* Breadcrumbs: readable, tappable, and without the large empty bands above and below. */
  main>div.breadcrumbs.wrap{padding-top:10px;padding-bottom:0;font-size:13px;gap:2px 8px}
  main>div.breadcrumbs.wrap+:is(section,div).wrap{padding-top:24px}
  .breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
  .breadcrumbs,.breadcrumbs a,.breadcrumb-back{font-size:13px}
  /* Footer and other links: 44px hit areas, 14px text. */
  .footer-col a{display:inline-flex;align-items:center;min-height:44px}
  .footer-back-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;white-space:normal}
  .record-tabs a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .era-nav a{display:inline-flex;align-items:center;min-height:44px}
  .person-sequence a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .dossier-biography summary{min-height:44px;padding-top:10px;padding-bottom:10px;box-sizing:border-box}
  .story-continue,.story-photo-size{display:inline-flex;align-items:center;min-height:44px}
  /* Secondary text 13–14px. */
  .photo-place,.home-archive-credit,.story-photo-note,.section-open-label,.section-close-label{font-size:13px!important}
  .section-description{font-size:14px!important}
  main figcaption{font-size:13px!important;line-height:1.55}
  .ink-scene figcaption{font-size:13px!important}
  /* Sources: a 44px link to the people citing each source, 14px notes, addresses wrapping at their joints. */
  .source-catalog-item{overflow-wrap:break-word}
  .source-catalog-item>*{min-width:0}
  .source-catalog-item h3{overflow-wrap:break-word;word-break:normal}
  .source-catalog-item p{font-size:14px;line-height:1.6}
  .source-catalog-item a{display:inline-flex;align-items:center;min-height:44px}
}
/* Timeline: the era illustration's year label and its «linked record» link each get their own row. */
@media (max-width:900px){
  .era-art.archival-art:has(>.ink-scene){height:auto;min-height:0;grid-template-rows:auto auto;row-gap:14px;padding-top:24px;padding-bottom:24px;overflow:visible}
  .era-art.archival-art:has(>.ink-scene) .link{display:inline-flex;align-items:center;min-height:44px}
}

/* Cookie choice (site-analytics.js, owner 2026-10-05): a quiet card in the archive's own paper, ink and wine.
   Desktop: bottom left. Phones: full width, above the bottom app bar; never over the header or the menu panel. */
.family-consent{position:fixed;left:24px;bottom:24px;z-index:82;width:min(452px,calc(100vw - 48px));max-height:calc(100dvh - var(--site-header-height,76px) - 40px);overflow:auto;overscroll-behavior:contain;display:grid;gap:18px;padding:24px 26px 22px;background:var(--cream,#eee5ce);color:var(--ink,#482d2a);border:1px solid var(--line,rgba(72,45,42,.22));border-radius:4px;box-shadow:0 24px 60px rgba(72,45,42,.20),0 2px 0 rgba(255,255,255,.35) inset;font:400 14px/1.6 var(--sans,Fira,Arial,sans-serif);letter-spacing:normal;text-align:left}
.family-consent[hidden]{display:none!important}
.family-consent:before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;background:linear-gradient(90deg,var(--wine,#753d48),var(--gold,#d5bd91));opacity:.85}
.family-consent-copy{display:grid;gap:8px;padding-right:22px}
.family-consent-kicker{margin:0;font:600 10px/1.4 var(--sans,Fira,Arial,sans-serif);letter-spacing:.2em;color:var(--wine,#753d48)}
.family-consent-title{margin:0;font:500 24px/1.18 Literata,Georgia,serif;letter-spacing:-.01em;color:var(--ink,#482d2a);text-transform:none}
.family-consent-text{margin:0;font-size:14px;line-height:1.62;color:var(--ink,#482d2a)}
.family-consent-text a{color:var(--wine,#753d48);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.family-consent-status{margin:2px 0 0;font-size:12.5px;opacity:.82}
.family-consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.family-consent-actions button{min-height:46px;padding:10px 14px;border-radius:3px;font:500 14px/1.2 var(--sans,Fira,Arial,sans-serif);letter-spacing:.03em;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.family-consent-accept{background:var(--wine,#753d48)!important;color:var(--cream,#eee5ce)!important;border:1px solid var(--wine,#753d48)!important}
.family-consent-accept:hover{background:var(--dark,#633d49)!important}
.family-consent-necessary{background:transparent!important;color:var(--ink,#482d2a)!important;border:1px solid rgba(72,45,42,.45)!important}
.family-consent-necessary:hover{border-color:var(--ink,#482d2a)!important;background:rgba(72,45,42,.05)!important}
.family-consent button:focus-visible,.family-consent a:focus-visible{outline:2px solid var(--wine,#753d48);outline-offset:3px}
.family-consent-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--ink,#482d2a);font:300 26px/1 Literata,Georgia,serif;cursor:pointer}
.family-consent-close:hover{background:rgba(72,45,42,.07)}
body.family-consent-open{padding-bottom:var(--family-consent-space,0px)}
.footer-cookie-link{display:inline-block;margin:0;padding:0;border:0;border-bottom:1px solid transparent;background:none;color:inherit;font:inherit;font-size:12px;letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.footer-cookie-link:hover,.footer-cookie-link:focus-visible{border-bottom-color:currentColor}
@media (prefers-reduced-motion:no-preference){
  html:not(.motion-off) body:not(.motion-off) .family-consent:not([hidden]){animation:family-consent-in .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes family-consent-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){.footer-cookie-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px}}
@media (max-width:760px){
  .family-consent{left:10px;right:10px;width:auto;bottom:calc(64px + 10px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - var(--site-header-height,64px) - 64px - 30px - env(safe-area-inset-bottom,0px));padding:20px 18px 16px;gap:14px}
  .family-consent:before{left:18px;right:18px}
  .family-consent-title{font-size:21px}
  .family-consent-text{font-size:13.5px}
  body.family-consent-open{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + var(--family-consent-space,0px))}
}
body.site-menu-open .family-consent{visibility:hidden}
@media (max-width:360px){.family-consent-actions{grid-template-columns:1fr}}
.rights-cookie-button{min-height:44px;padding:10px 18px;border:1px solid var(--wine,#753d48)!important;border-radius:3px;background:transparent;color:var(--wine,#753d48);font:500 14px/1.2 var(--sans,Fira,Arial,sans-serif);letter-spacing:.03em;cursor:pointer}
.rights-cookie-button:hover{background:var(--wine,#753d48);color:var(--cream,#eee5ce)}
#cookies{scroll-margin-top:calc(var(--site-header-height,76px) + 16px)}
@media print{.family-consent,.footer-cookie-link{display:none!important}}