/* Halo · the brand shell for the informational pages (privacy, reservation
   terms, patents, contact, how it works). The same header and one-line footer
   as Home and About, on pure paper or night, with the 18 October type roles:
   LL Catalogue tells the story (headlines, editorial copy), Aeonik Pro runs
   the interface (navigation, labels, buttons, forms). Markup: brand-shell.mjs. */
:root {
  --shell-paper:#fff; --shell-ink:#181818; --shell-ink-2:#4a4a4a; --shell-muted:#666;
  --shell-rule:#00000016; --shell-line:#00000026;
  --shell-serif:"LL Catalogue",Georgia,"Times New Roman",serif;
  --shell-ui:"Aeonik Pro",Arial,sans-serif;
}
:root[data-theme="dark"] {
  --shell-paper:#000; --shell-ink:#f1f2f5; --shell-ink-2:#c8cdd3; --shell-muted:#a5aeb7;
  --shell-rule:#ffffff1f; --shell-line:#ffffff30;
}
html:has(body.brand-page), body.brand-page { background:var(--shell-paper); color:var(--shell-ink); }
body.brand-page { margin:0; min-height:100svh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
body.brand-page > main { flex:1; }

/* Header: wordmark, About at the centre, theme toggle. */
.shell-header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  height:76px; padding:0 5.5vw; background:var(--shell-paper); color:var(--shell-ink); font-family:var(--shell-ui);
}
.shell-brand { display:flex; align-items:center; min-height:44px; color:inherit; }
.shell-brand img { display:block; width:70px; height:auto; filter:brightness(0); }
:root[data-theme="dark"] .shell-brand img { filter:brightness(0) invert(1); }
.shell-theme {
  display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--shell-line);
  border-radius:50%; color:inherit; background:transparent; cursor:pointer;
  transition:transform 150ms cubic-bezier(.23,1,.32,1),border-color 180ms ease;
}
.shell-theme:active { transform:scale(.97); }
.shell-theme[hidden] { display:none; }
.shell-theme .theme-sun,:root[data-theme="dark"] .shell-theme .theme-moon { display:none; }
:root[data-theme="dark"] .shell-theme .theme-sun { display:block; }
.shell-header :is(a,button):focus-visible,.shell-footer :is(a,button):focus-visible { outline:2px solid var(--shell-muted); outline-offset:4px; }

/* Footer: one quiet line, as on Home and About. */
.shell-footer {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 5.5vw; border-top:1px solid var(--shell-rule); background:var(--shell-paper);
  color:var(--shell-muted); font-family:var(--shell-ui); font-size:11px;
}
.shell-footer .shell-brand { min-height:0; }
.shell-footer .shell-brand img { width:52px; }
/* Pinned to one line against older stylesheets' generic footer and footer p rules. */
.shell-footer { flex-wrap:nowrap; }
.shell-footer .shell-copyright { margin:0; width:auto; max-width:none; order:0; line-height:1.5; text-align:right; }
.shell-footer .footer-moon { display:flex; align-items:center; gap:8px; letter-spacing:.02em; }
.shell-footer .footer-moon[hidden] { display:none; }
.shell-footer .footer-moon svg { display:block; width:18px; height:18px; }
.shell-footer .footer-moon small { margin-left:8px; font-size:11px; opacity:.7; }

/* Editorial type roles for page content. */
.brand-page :is(h1,h2,h3) { font-family:var(--shell-serif); font-weight:400; letter-spacing:-.01em; font-synthesis:none; }
.brand-page h1 { letter-spacing:-.025em; }
.brand-page :is(.eyebrow,.kicker,label,button,input,select,textarea,nav,[data-type-role="ui"]) { font-family:var(--shell-ui); }

@media (max-width:700px) {
  .shell-header { height:66px; padding-inline:24px; }
  .shell-brand img { width:61.6px; }
  .shell-theme { width:40px; height:40px; }
  .shell-footer { padding:12px 24px; gap:14px; }
  .shell-footer .shell-brand img { width:46px; }
  .shell-copyright { margin-left:auto; font-size:10px; }
  .shell-footer .footer-moon > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) { .shell-theme { transition:none; } }