/* The /museums landing page's own styles: brand.css as it was on 21 Oct 2026, frozen (owner, 23 Oct:
   keep the original landing; the look switch in scripts/site/look.json restyles every other page).
   Light only, no dark mode (owner, 23 Oct). */
/* talesof.app — the brand system. Zero external resources, no build step.
   Every rule uses logical properties, so RTL needs only <html dir="rtl">.
   The deployed CSP is style-src 'self', which forbids <style> blocks and
   style="" attributes, so page-scoped rules (see .policy) live here too.
   The one exception is the product page museums.html, which adds
   museums.css on top of these tokens. */

:root {
  /* Colour — the only five. */
  --paper: #F6F2E9;
  --ink:   #241C16;
  --muted: #686057;
  --rule:  #D9D0C2;
  --brass: #A68426;
  --brass-text: #7D6316; /* brass for small text: 5.1:1 on paper (WCAG AA) */

  /* Type */
  --font-serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 20px;
  --s5: 32px;
  --s6: 56px;

  /* Geometry */
  --container-max: 40rem;
  --measure: 66ch;
  --radius: 14px;
  --btn-min-h: 58px;
  --rule-w: 1px;

  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout ---- */

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: start;
}

.container {
  inline-size: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--s4);
  padding-block: var(--s5);
}

/* ---- Type ---- */

.wordmark {
  margin: 0 0 var(--s5) 0;
  font: 400 36px/1.05 var(--font-serif);
  letter-spacing: .01em;
  color: var(--ink);
}

.h1 { margin: 0 0 var(--s4) 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 6vw, 36px); line-height: 1.14; text-wrap: balance; }
.h2 { margin: var(--s5) 0 var(--s3) 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 4.2vw, 25px); line-height: 1.2; text-wrap: balance; }
.h3 { margin: var(--s4) 0 var(--s2) 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(18px, 3.4vw, 20px); line-height: 1.25; text-wrap: balance; }

.body {
  margin: 0 0 var(--s4) 0;
  max-width: var(--measure);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.muted {
  margin: 0 0 var(--s4) 0;
  max-width: var(--measure);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- Structure ---- */

.rule {
  border: 0;
  border-block-start: var(--rule-w) solid var(--rule);
  margin-block: var(--s5);
}

.panel {
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s4);
}

/* ---- Controls ---- */

.btn,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min-h);
  padding-inline: var(--s5);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
}

.btn { background: var(--ink); color: var(--paper); border: var(--rule-w) solid var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border: var(--rule-w) solid var(--rule); }

@media (max-width: 30rem) {
  .btn, .btn-secondary { display: flex; inline-size: 100%; }
}

.btn-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* State. Set by confirmed.html's script only; the no-JS page never dims. */
.is-dim { opacity: .55; }

/* ---- Scoped policy typography ----
   privacy.html drops an authored fragment inside .policy. Its own <h1>/<h2>
   get the .h1/.h2 treatment by element selector, scoped here so no other page
   is affected. */

.policy h1 { margin: 0 0 var(--s4) 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 6vw, 36px); line-height: 1.14; text-wrap: balance; }
.policy h2 { margin: var(--s5) 0 var(--s3) 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 4.2vw, 25px); line-height: 1.2; text-wrap: balance; }
.policy p,
.policy li { max-width: var(--measure); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink); }
.policy p { margin: 0 0 var(--s3) 0; }
.policy ul { margin: 0 0 var(--s3) 0; padding-inline-start: var(--s4); }
.policy li { margin-block-end: var(--s2); }
/* Links follow the theme (browser defaults are blue/purple in both modes). */
.policy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }