/* ============================================================
   openroar — inner pages (charter / privacy / impressum)
   calm editorial column. shares the walk DNA from site.css
   (paper, ink, gold, Fraunces + Inter, .chrome, .foot).
   NOT the old immersive legal styling — a simple reading page.
   ============================================================ */

/* the reading column ---------------------------------------- */
.doc {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 132px) clamp(22px, 6vw, 40px) 2rem;
}
.doc-wide { max-width: 48rem; }

/* per-chapter accent hooks kept from the source, quieted to one gold family
   (a single, calm colour walk — no rainbow). */
.a-sage, .a-clay, .a-gold, .a-coral, .a-lav { --accent: var(--gold); --accent-deep: var(--gold); }

/* masthead / hero ------------------------------------------- */
.mast, .hero { padding: 0 0 2rem; }
.eyebrow, .ey, .k, .pk, .ck, .lbl, .an, .who, .pk {
  font-family: var(--body);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin: 0 0 1rem;
}
.doc h1, .mast h1, .hero h1 {
  font-family: var(--display);
  font-weight: 380;
  text-transform: lowercase;
  letter-spacing: -.02em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 8vw, 4rem);
  margin: 0 0 .3em;
}
.mast h1 .sm { display: block; font-size: .62em; }
.mast .vision, .hero h1 .gr {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
}
.mast .vision {
  display: block;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.12;
  margin-top: .35em;
  text-transform: lowercase;
}
.mast .vision .gr { color: var(--gold); }
.mast .place, .mast .by {
  font-family: var(--body);
  font-size: .95rem;
  color: var(--muted);
  margin-top: 1.2rem;
  max-width: 40ch;
  line-height: 1.55;
}
.mast .by { font-size: .86rem; color: var(--dim); }
.hero .lead {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  line-height: 1.35;
  color: var(--muted);
  max-width: 34ch;
  margin: 1.2rem 0 0;
}
.hero .lead b { font-style: normal; font-weight: 560; color: var(--fg); }

/* body prose ------------------------------------------------ */
.doc p { max-width: 40rem; margin: 0 0 1.15rem; color: var(--dim); }
.doc p em, .doc li em { color: var(--fg); font-style: italic; }
.doc a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc a:hover { text-decoration: underline; }

/* standfirst / note callouts -------------------------------- */
.standfirst, .doc__note, .intro-note {
  border-left: 2px solid var(--sage);
  padding-left: 1.1rem;
  margin: 1.4rem 0;
  color: var(--fg);
  max-width: 42rem;
}
.standfirst {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  line-height: 1.42;
}
.standfirst.small { font-size: clamp(1rem, 2.6vw, 1.15rem); }
.standfirst b { font-style: normal; font-weight: 560; }
.intro-note { font-family: var(--body); font-size: .95rem; line-height: 1.6; color: var(--muted); }
.intro-note strong { color: var(--fg); }

/* table of contents ----------------------------------------- */
.toc { margin: 2.4rem 0; }
.toc .lbl { color: var(--gold); }
.toc ol { list-style: none; counter-reset: p; margin: 0; padding: 0; }
.toc li { counter-increment: p; }
.toc a {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--hair);
  color: var(--fg); text-decoration: none; font-family: var(--body); font-size: 1.02rem;
}
.toc a::before { content: counter(p, decimal-leading-zero); color: var(--muted); font-size: .82rem; min-width: 2.2ch; }
.toc a:hover { color: var(--gold); }
.toc a .t { font-weight: 600; }
.toc a .d { display: block; font-size: .86rem; color: var(--muted); margin-top: 2px; font-weight: 400; }

/* part / chapter dividers ----------------------------------- */
.part { padding: 3.6rem 0 .4rem; scroll-margin-top: 72px; }
.part h2, .doc__part h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -.02em;
  line-height: 1.06;
  font-size: clamp(1.9rem, 6vw, 3rem);
  margin: 0;
}
.part .pl { font-size: clamp(1.05rem, 3vw, 1.2rem); color: var(--muted); margin-top: 1rem; max-width: 34ch; }
.prose { padding: 1rem 0 1.5rem; }
.prose .lead-q, .prose blockquote, .close blockquote, .doc__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  line-height: 1.36;
  color: var(--fg);
  margin: 1.6rem 0;
  max-width: 40rem;
}
.prose blockquote, .close blockquote, .doc__quote {
  border-left: 2px solid var(--sage);
  padding-left: 1.1rem;
}
.prose blockquote b, .close blockquote b, .doc__quote b { font-style: normal; font-weight: 560; }

.chapter { padding: 2.8rem 0 .4rem; scroll-margin-top: 72px; }
.chapter h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.15;
  margin: .2rem 0 .4rem;
  max-width: 24ch;
}

/* beliefs --------------------------------------------------- */
.beliefs { counter-reset: b; margin-top: 1rem; }
.belief { counter-increment: b; padding: 2rem 0; border-top: 1px solid var(--hair); }
.belief:first-child { border-top: none; }
.belief .n { display: block; font-family: var(--body); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--gold); letter-spacing: -.03em; margin-bottom: .3rem; }
.belief .n::before { content: counter(b, decimal-leading-zero); }
.belief h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  line-height: 1.14;
  margin: 0 0 .6rem;
  max-width: 24ch;
  text-transform: lowercase;
}
.belief p { color: var(--muted); }

/* articles -------------------------------------------------- */
.article { padding: 1.7rem 0; border-top: 1px solid var(--hair); }
.article .an { font-family: var(--body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.article h4 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: .35rem 0 .7rem;
  max-width: 28ch;
  text-transform: lowercase;
}
.article p { color: var(--muted); margin: 0 0 .8rem; }
.article p:last-child { margin-bottom: 0; }
.article .status {
  font-family: var(--body);
  font-style: italic;
  color: var(--fg);
  border-left: 2px solid var(--sage);
  padding-left: .9rem;
  margin: .8rem 0;
}
.bar { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--fg); padding: .02em .28em; border-radius: 4px; }

/* invariants / ledger lists --------------------------------- */
.invs, .ledger { list-style: none; margin: 1rem 0; padding: 0; }
.invs li, .ledger li { padding: 1rem 0; border-top: 1px solid var(--hair); color: var(--muted); max-width: 40rem; }
.invs li b, .ledger li b { display: block; font-family: var(--body); font-weight: 700; color: var(--fg); margin-bottom: 4px; font-size: 1rem; }

/* privacy sections ------------------------------------------ */
.section { padding: 2.6rem 0; border-top: 1px solid var(--hair); }
.section h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  line-height: 1.14;
  margin: 0 0 1rem;
  max-width: 24ch;
}
.section p { color: var(--muted); }
.section p em, .section p code { color: var(--fg); }

/* road ------------------------------------------------------ */
.road { position: relative; margin: 1.4rem 0 2rem; padding-left: 1.8rem; }
.road::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--sage); opacity: .5; }
.road .step { position: relative; padding: 0 0 2rem; }
.road .step::before { content: ""; position: absolute; left: -1.8rem; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.road .step h4 { font-family: var(--body); font-weight: 700; font-size: 1.15rem; margin: 0 0 .3rem; text-transform: lowercase; }
.road .step p { color: var(--muted); margin: 0; }

/* pledge ---------------------------------------------------- */
.pledge-block { padding: 1.5rem 0; }
.pledge-block .pp { border-left: 2px solid var(--sage); padding-left: 1.1rem; margin: 0 0 1.8rem; }
.pledge-block .pp .who { color: var(--gold); margin-bottom: .5rem; }
.pledge-block .pp p { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 3vw, 1.3rem); line-height: 1.4; color: var(--fg); max-width: 44ch; }
.pledge-block .pp p b { font-weight: 560; }

/* impressum info cards -------------------------------------- */
.info-card {
  border: 1px solid var(--hair);
  border-radius: 8px 9px 8px 10px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
}
.info-card .field-label { font-family: var(--body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .3rem; }
.info-card p { margin: 0; color: var(--fg); }
.info-card .field-note { display: block; font-style: italic; font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.legal-body h2 {
  font-family: var(--display);
  font-weight: 500;
  text-transform: lowercase;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  margin: 2rem 0 .6rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--muted); }
.legal-body strong { color: var(--fg); font-weight: 600; }
.lang-toggle { display: flex; gap: .5rem; margin: 1.4rem 0 2rem; }
.lang-btn {
  font-family: var(--body); font-size: .82rem;
  border: 1px solid var(--hair); border-radius: 999px;
  padding: .35rem .9rem; color: var(--muted); text-decoration: none;
}
.lang-btn:hover { border-color: var(--gold); color: var(--gold); }

/* horizontal rules ------------------------------------------ */
.doc hr, .rule { border: none; height: 1px; background: var(--hair); margin: 2rem 0; }

/* buttons / cta --------------------------------------------- */
.cta, .doc__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 2.4rem 0 0; }
.btn, .doc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .95rem; text-transform: lowercase;
  padding: .8rem 1.4rem; border-radius: 3px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--fg); color: var(--fg); background: transparent;
}
.btn-p { background: var(--fg); color: var(--bg); }
.btn:hover, .doc__btn:hover { border-color: var(--gold); color: var(--gold); background: transparent; text-decoration: none; }
.btn-p:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* stamp / colophon ------------------------------------------ */
.stamp, .doc__stamp {
  font-family: var(--display); text-transform: lowercase;
  color: var(--fg); font-size: 1.05rem; margin-top: 2rem;
}
.sign { font-family: var(--display); font-style: italic; color: var(--muted); max-width: 46ch; margin-top: 1.6rem; line-height: 1.55; font-size: .95rem; }
.close { padding: 2.4rem 0 1rem; }

/* back-home link -------------------------------------------- */
.doc__back {
  display: inline-block; margin-top: 2.4rem;
  font-family: var(--body); font-size: .95rem; color: var(--gold);
  text-decoration: none;
}
.doc__back:hover { text-decoration: underline; }

/* skip link (reuse of site.css .skip already covers focus) --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }