/* Palet uit scripts/ui/Style.gd (wereld Salon); tools/check_site.py bewaakt dat ze gelijk blijven. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/AtkinsonHyperlegible-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root {
  --bg: #F4ECDC; --panel: #E8DCC4; --ink: #2A2420; --soft: #5B5148; --accent: #7A4F08; --fill: #D9A441; --mult: #9A3B22; --line: #7A6E5C;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 72px; --max: 1080px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 18px; line-height: 1.55; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); max-width: var(--max); margin: 0 auto; padding: var(--s2); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--s1); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.brand img { border: 0; border-radius: 6px; background: none; }
nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
nav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
nav a[aria-current="page"], nav a:hover { border-bottom-color: var(--accent); }
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--s2) var(--s5); }
section { margin-top: var(--s5); }
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s4); align-items: center; margin-top: var(--s4); }
.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s4); align-items: center; }
.split.flip { grid-template-columns: 1.2fr 0.8fr; }
.hero img, .split img { max-height: 640px; width: auto; margin: 0 auto; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.12; margin: 0 0 var(--s2); }
h2 { font-size: 1.6rem; margin: 0 0 var(--s1); }
h3 { font-size: 1.1rem; margin: var(--s3) 0 4px; }
.kicker { color: var(--accent); font-weight: 600; margin: 0 0 var(--s1); }
.lead { font-size: 1.2rem; color: var(--soft); }
.status { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 0.95rem; }
.button { display: inline-block; padding: 12px 22px; background: var(--fill); color: var(--ink); border: 2px solid var(--accent); border-radius: 12px; text-decoration: none; font-weight: 600; }
.plain { padding-left: 1.2em; }
.plain li { margin: 8px 0; }
.prose { max-width: 720px; }
.prose ul { padding-left: 1.2em; }
table.relics { width: 100%; border-collapse: collapse; margin: var(--s2) 0; }
table.relics th, table.relics td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.relics thead th { background: var(--panel); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); }
footer { max-width: var(--max); margin: 0 auto; padding: var(--s3) var(--s2) var(--s4); border-top: 1px solid var(--line); color: var(--soft); font-size: 0.95rem; }
@media (max-width: 760px) {
  html { font-size: 17px; }
  .hero, .split, .split.flip { grid-template-columns: 1fr; gap: var(--s3); }
  .hero img, .split img { max-height: 520px; }
  .split.flip > div { order: 1; }
  section { margin-top: var(--s4); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    section { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes rise { from { opacity: 0.2; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  }
}
nav a.lang { margin-left: var(--s2); padding-left: var(--s2); border-left: 1px solid var(--line); color: var(--soft); }
h2 small { font-size: 0.7em; color: var(--soft); font-weight: 400; }
table.relics th, table.relics td { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  table.relics, table.relics tbody, table.relics tr, table.relics th, table.relics td { display: block; width: 100%; }
  table.relics thead { display: none; }
  table.relics tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.relics th, table.relics td { border-bottom: 0; padding: 2px 12px; }
}