/* ════════════════════════════════════════════════════════════════════════
   SeferLink — shared styles for the document pages
   (privacy.html, eth-calendar/privacy/, 404.html)

   Same world as the home page: a dark stage lit in gold. The tokens, the
   header bar and the footer below are kept in step with site.css, so every
   page on the site reads as one place. Set for reading rather than show:
   a contents rail, prose at a comfortable measure, and nothing that moves.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --night:  #0D0A07;
  --umber:  #17120D;
  --edge:   #3A2E20;
  --cream:  #F4ECDD;
  --sand:   #BFB09A;
  --dust:   #8E806C;
  --gold:   #D1A154;
  --gold-2: #E8BD6A;
  --gold-3: #F1D493;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --geez:    "Noto Serif Ethiopic", "Nyala", serif;

  --wrap: min(100% - 2.5rem, 78rem);
  --measure: 38rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(60% 40% at 80% -4%, rgba(232,189,106,.14), transparent 70%),
    var(--night);
  color: var(--cream);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, h1, h2 { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.geez { font-family: var(--geez); }
.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--gold); color: var(--night);
  font-weight: 600; font-size: .8125rem; padding: .6rem 1rem; }
.skip:focus { left: .75rem; top: .75rem; }

/* ── header bar: identical to the home page ─────────────────────────── */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--night) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--edge) 70%, transparent);
}
.bar .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand img { width: 2.1rem; height: 2.1rem; object-fit: contain; filter: invert(1) sepia(.55) saturate(1.8) brightness(.96); }
.brand span { font-weight: 600; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; }
.bar nav { display: flex; gap: clamp(1rem, 2.6vw, 2rem); margin-left: auto; }
.bar nav a { font-size: .8125rem; color: var(--sand); text-decoration: none; padding-block: .4rem; transition: color .2s; }
.bar nav a:hover { color: var(--gold-2); }
@media (max-width: 40rem) { .bar nav a:not(:last-child) { display: none; } }

/* ── the document head ──────────────────────────────────────────────── */
.doc-head {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--edge);
}
.doc-head h1 {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  max-width: 16ch;
}
.doc-head h1 em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.4rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── the document: a contents rail, then the prose ──────────────────── */
.doc {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem);
}
@media (min-width: 58rem) {
  .doc { grid-template-columns: 13rem minmax(0, 1fr); }
  .doc-rail { position: sticky; top: 6rem; align-self: start; }
}
.doc-rail p { margin-bottom: .9rem; }
.doc-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: sec; }
.doc-rail a {
  display: flex;
  gap: .7rem;
  padding: .35rem 0;
  font-size: .875rem;
  color: var(--sand);
  text-decoration: none;
  transition: color .2s;
}
.doc-rail a::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
}
.doc-rail a:hover { color: var(--gold-2); }

.doc-body { min-width: 0; }
.doc-body > p { max-width: var(--measure); color: var(--sand); margin-bottom: 1.1rem; }
.doc-body .standfirst { font-size: 1.25rem; line-height: 1.55; color: var(--cream); margin-bottom: 1.8rem; }
.doc-body h2 {
  max-width: var(--measure);
  margin: clamp(2.5rem, 5vw, 3.25rem) 0 .8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  scroll-margin-top: 6rem;
}
.doc-body a:not(.btn) {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,189,106,.4);
  padding-bottom: 1px;
  transition: border-color .2s;
}
.doc-body a:not(.btn):hover { border-color: var(--gold-2); }
.doc-note {
  max-width: var(--measure);
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--umber), var(--umber)) padding-box,
    linear-gradient(110deg, rgba(232,189,106,.12), rgba(241,212,147,.55), rgba(232,189,106,.12)) border-box;
  color: var(--sand);
  font-size: 1rem;
}

/* ── buttons: identical to the home page ────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(2.25rem, 5vw, 3rem); }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s, color .25s;
}
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1A120A;
  box-shadow: 0 14px 34px -14px rgba(232,189,106,.7); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(232,189,106,.85); }
.btn-ghost { border: 1px solid var(--edge); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }

/* ── the 404: a signpost, not a document ────────────────────────────── */
.lost {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  padding-block: clamp(4rem, 12vw, 8rem);
}
.lost .mark {
  font-family: var(--geez);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 10rem);
  line-height: 1;
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(232,189,106,.25));
}
.lost h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
}
.lost h1 em { font-style: italic; font-weight: 300; color: var(--gold-2); }
.lost p { color: var(--sand); max-width: 40ch; }
.lost .actions { margin-top: .6rem; }

/* ── footer: identical to the home page ─────────────────────────────── */
footer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem 1.8rem;
  padding-block: 1.8rem 2.8rem;
  border-top: 1px solid var(--edge);
  font-size: .75rem; letter-spacing: .08em; color: var(--dust);
}
footer a { color: var(--dust); text-decoration: none; }
footer a:hover { color: var(--gold-2); }
footer .seal { margin-left: auto; font-family: var(--geez); font-size: 1.1rem; letter-spacing: 0; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}