/* ============================================================
   Tabla-World — shared stylesheet for document pages
   (accessibility.html / terms.html / privacy.html)
   Warm espresso + brass "Levantine tavla parlor" look.
   ============================================================ */

:root {
  --brass:#d9a441;
  --brass-hi:#f2cd72;
  --tan:#c0a080;
  --pearl:#f4ecd6;
  --live:#3fca82;

  /* dark = brand default */
  --ink:#160b03;
  --ink-2:#201206;
  --line:rgba(217,164,65,.16);
  --fg:#f2e7d2;
  --fg-dim:#bda587;

  --display:"Cinzel",Georgia,serif;
  --ui:"Heebo",system-ui,Arial,sans-serif;
}

/* Light theme via system preference */
@media (prefers-color-scheme: light) {
  :root {
    --ink:#f1e6d1;
    --ink-2:#f7eddb;
    --line:rgba(120,80,30,.2);
    --fg:#33210f;
    --fg-dim:#7a5c37;
  }
}

/* Explicit theme overrides win in both directions */
:root[data-theme="light"] {
  --ink:#f1e6d1;
  --ink-2:#f7eddb;
  --line:rgba(120,80,30,.2);
  --fg:#33210f;
  --fg-dim:#7a5c37;
}
:root[data-theme="dark"] {
  --ink:#160b03;
  --ink-2:#201206;
  --line:rgba(217,164,65,.16);
  --fg:#f2e7d2;
  --fg-dim:#bda587;
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body,h1,h2,h3,p,ul,ol,li,figure { margin:0; padding:0; }
ul,ol { padding-inline-start:1.4em; }
img { max-width:100%; height:auto; }

body {
  background:var(--ink);
  color:var(--fg);
  font-family:var(--ui);
  font-size:18px;
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- layout ---------- */
.wrap {
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding:32px 22px 56px;
  flex:1 0 auto;
}

/* ---------- topbar ---------- */
.topbar {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 22px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand {
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--brass);
  font-size:1.02rem;
  text-decoration:none;
  white-space:nowrap;
}
.brand .dot { color:var(--brass-hi); }
.topbar .back {
  color:var(--fg-dim);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  padding:4px 8px;
  border-radius:8px;
}
.topbar .back:hover { color:var(--brass); }

/* ---------- skip link ---------- */
.skip-link {
  position:absolute;
  inset-inline-start:12px;
  top:-64px;
  z-index:100;
  background:var(--brass);
  color:#160b03;
  font-weight:700;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus { top:12px; }

/* ---------- document typography ---------- */
h1,h2,h3 {
  font-family:var(--display);
  color:var(--brass);
  line-height:1.25;
  font-weight:700;
}
h1 { font-size:clamp(1.8rem,5vw,2.5rem); margin-bottom:.4em; }
h2 {
  font-size:clamp(1.25rem,3.5vw,1.6rem);
  margin-top:1.8em;
  margin-bottom:.5em;
  padding-bottom:.25em;
  border-bottom:1px solid var(--line);
}
h3 { font-size:1.1rem; margin-top:1.3em; margin-bottom:.4em; color:var(--brass-hi); }
p { margin-bottom:1em; }
ul,ol { margin-bottom:1em; }
li { margin-bottom:.4em; }
strong { color:var(--brass-hi); font-weight:700; }

a {
  color:var(--brass);
  text-decoration:none;
}
a:hover { text-decoration:underline; }

/* ---------- meta line ---------- */
.meta {
  color:var(--fg-dim);
  font-size:.9rem;
  margin-bottom:1.8em;
}

/* ---------- contact callout ---------- */
.contact {
  background:var(--ink-2);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--brass);
  border-radius:12px;
  padding:16px 20px;
  margin:1.6em 0;
}
.contact h2,.contact h3 { margin-top:0; border:0; padding:0; }
.contact a { font-weight:700; }

/* ---------- footer ---------- */
footer {
  flex-shrink:0;
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding:26px 22px 34px;
}
.foot-inner {
  max-width:760px;
  margin-inline:auto;
}
.foot-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-bottom:14px;
  list-style:none;
  padding:0;
}
.foot-links li { margin:0; }
.foot-links a {
  color:var(--fg-dim);
  font-size:.92rem;
  font-weight:600;
}
.foot-links a:hover { color:var(--brass); }
.copy {
  color:var(--fg-dim);
  font-size:.85rem;
}
.copy .brand-sm {
  font-family:var(--display);
  color:var(--brass);
  letter-spacing:.05em;
}

/* ---------- focus ---------- */
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }

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