/* Ancora's pages. Structure and scale follow wavelength.css; the palette is the
   app's own (design/mockup.html in bkazez/ancora): the dark of an auditorium,
   and the gold that means "this is what plays". */
:root {
  --color-ground:         #1B181D;
  --color-surface:        #27222C;
  --color-border:         #3A3340;
  --color-text-primary:   #F2ECE1;
  --color-text-secondary: #B8B0B6;
  --color-text-tertiary:  #9A9199;
  --color-accent:         #E4B45C;
  --max-width:            720px;
  --reading-width:        680px;
  --fs-label: 0.852rem;
  --fs-small: 1rem;
  --fs-body:  1.174rem;
  --fs-lede:  1.378rem;
  --fs-title: clamp(1.618rem, 5vw, 2.618rem);
}
html { background-color: var(--color-ground); color: var(--color-text-primary);
       font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.masthead { display: flex; align-items: center; gap: 12px; margin: 0 auto;
            max-width: var(--reading-width); padding: 28px 24px 0;
            text-decoration: none; color: inherit; }
.masthead img { border-radius: 9px; }
.masthead .mast-name { font-weight: 700; }
.masthead .mast-tag { color: var(--color-text-tertiary); font-size: var(--fs-label); }
.article { margin: 0 auto; max-width: var(--reading-width); padding: 8px 24px 64px; }
.breadcrumb { color: var(--color-text-tertiary); font-size: var(--fs-label); margin: 24px 0 8px; }
.breadcrumb a { color: var(--color-text-tertiary); }
h1 { font-size: var(--fs-title); line-height: 1.15; margin: 8px 0 16px; }
h2 { font-size: var(--fs-lede); margin: 40px 0 8px; }
p, li { color: var(--color-text-secondary); }
a { color: var(--color-accent); }
a.inline { text-decoration: underline; }
.disclaimer { color: var(--color-text-tertiary); font-size: var(--fs-small); }
.lede { font-size: var(--fs-lede); color: var(--color-text-primary); }
.hero { margin: 0 auto; max-width: var(--reading-width); padding: 40px 24px 8px; }
.hero-shot { display: block; width: 100%; height: auto; border-radius: 18px;
             margin: 32px auto 0; border: 1px solid var(--color-border); }
.points { list-style: none; padding: 0; }
.points li { border-top: 1px solid var(--color-border); padding: 16px 0; }
.points b { color: var(--color-text-primary); font-weight: 700; }
.page-footer { border-top: 1px solid var(--color-border); margin: 0 auto;
               max-width: var(--reading-width); padding: 24px; }
.page-footer p { color: var(--color-text-tertiary); font-size: var(--fs-label); }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0;
                font-size: var(--fs-label); }