/* legal.css — terms, privacy, impressum and 404. Quiet, readable, printable. Needs /shared/base.css. */

:root { --paper: #FBF8F3; --ink: #1D1B18; --ink-2: #5C554D; --ink-3: #6E675F; --line: rgba(29, 27, 24, .12); --gold: #B08555; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-weight: 300; }

.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 22px var(--gutter); }
.lg-brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-latin-display); font-size: 22px; letter-spacing: .22em; text-transform: uppercase; }
.lg-brand small { font-family: var(--font-latin-sans); font-size: 9.5px; letter-spacing: .28em; color: var(--ink-3); }
.lg-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.lg-langs a { color: var(--ink-2); text-decoration: none; padding-block: 10px; }
.lg-langs a[aria-current] { color: var(--ink); border-bottom: 1px solid var(--gold); }

.lg { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 96px; }
.lg h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 6vw, 56px); line-height: 1.05; margin: 28px 0 10px; letter-spacing: -.005em; }
.lg .lg-meta { color: var(--ink-3); font-size: 13.5px; margin: 0 0 28px; }
.lg h2 { font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.2; margin: 56px 0 12px; scroll-margin-top: 24px; overflow-wrap: anywhere; }
.lg :lang(ja) h2, .lg :lang(zh) h2 { word-break: normal; line-break: auto; } /* long CJK headings may break anywhere on phones */
.lg h3 { font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: .02em; margin: 28px 0 6px; }
.lg p, .lg li { color: var(--ink); }
.lg p { margin: 0 0 14px; }
.lg ul, .lg ol { padding-inline-start: 1.3em; margin: 0 0 16px; }
.lg li { margin: 0 0 6px; }
.lg a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.lg strong { font-weight: 500; }
.lg hr { border: 0; border-top: 1px solid var(--line); margin: 56px 0; }

.lg-draft { border: 1px solid var(--gold); background: rgba(176, 133, 85, .07); padding: 14px 18px; font-size: 14px; line-height: 1.55; margin: 0 0 32px; }
.lg-draft strong { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; }
.lg-flag { display: inline-block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8a4b1f; border: 1px solid rgba(138, 75, 31, .35); padding: 0 6px; margin-inline-start: 4px; vertical-align: 1px; line-height: 1.7; }
.lg-todo { background: rgba(176, 133, 85, .16); padding: 0 4px; font-style: normal; }

.lg-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin: 0 0 8px; columns: 2 240px; column-gap: 32px; font-size: 14px; }
.lg-toc a { display: flex; align-items: center; min-height: 44px; padding: 0; text-decoration: none; color: var(--ink-2); break-inside: avoid; line-height: 1.4; }
.lg-toc a:hover { color: var(--ink); }

.lg table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 20px; }
.lg th, .lg td { text-align: start; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.lg th { font-weight: 500; color: var(--ink-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lg-scroll:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; }
.lg-scroll table { min-width: 560px; }

.lg dl { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 0; margin: 0 0 24px; font-size: 15px; }
.lg dt, .lg dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lg dt { color: var(--ink-2); padding-inline-end: 16px; }
@media (max-width: 520px) { .lg dl { grid-template-columns: 1fr; } .lg dt { border-bottom: 0; padding-bottom: 0; font-size: 13px; } }

.lg-sum { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 40px; }
.lg-sum section { margin: 0 0 8px; }
.lg-sum h2 { font-size: 23px; margin-top: 36px; }
.lg-sum [lang="ar"] { direction: rtl; text-align: right; }

.lg-form { border: 1px dashed var(--line); padding: 16px 20px; font-size: 14.5px; }

.lg-foot { border-top: 1px solid var(--line); max-width: 1080px; margin: 0 auto; padding: 28px var(--gutter) 48px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--ink-3); }
.lg-foot a, .lg-foot button { color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 24px; }
.lg-foot a:hover, .lg-foot button:hover { color: var(--ink); text-decoration: underline; }

/* 404: a sunset. The sun has half sunk below the horizon, everything centred on it. */
.nf { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: #0c0a08; color: #efe7db; }
.nf .lg-top { justify-content: center; }
.nf .lg-brand { color: #efe7db; }
.nf .lg-brand small { color: rgba(239, 231, 219, .62); }
.nf main { display: grid; align-content: center; justify-items: center; text-align: center; max-width: 760px; width: 100%; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.nf-horizon { position: relative; width: min(360px, 76%); height: 46px; margin: 0 0 44px; border-bottom: 1px solid rgba(239, 231, 219, .42); }
.nf-sun { position: absolute; left: 50%; bottom: -44px; width: 88px; height: 88px; margin-left: -44px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #f0c07c, #c98a45 72%); box-shadow: 0 0 90px 16px rgba(227, 164, 87, .2); clip-path: inset(-160px -160px 50% -160px); } /* below the horizon: gone, glow included */
@media (prefers-reduced-motion: no-preference) { .nf-sun { animation: nf-set 2.4s cubic-bezier(.16, 1, .3, 1) both; } }
@keyframes nf-set { from { transform: translateY(-26px); } }
.nf h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 7vw, 72px); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
.nf-lede { color: rgba(239, 231, 219, .78); margin: 0 auto; max-width: 44ch; text-wrap: balance; }
.nf-langs { list-style: none; display: grid; gap: 4px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(239, 231, 219, .12); min-width: min(360px, 100%); color: rgba(239, 231, 219, .62); font-size: 14px; }
.nf-langs [lang="ar"] { direction: rtl; font-size: 16px; }
.nf nav { display: grid; justify-items: center; gap: 18px; margin-top: 40px; }
.nf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(520px, 100%); margin: 0; }
.nf-cta a { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid rgba(239, 231, 219, .35); color: #efe7db; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.nf-cta a:first-child { background: #e3a457; border-color: #e3a457; color: #0c0a08; }
.nf-cta a:hover { background: #efe7db; border-color: #efe7db; color: #0c0a08; }
.nf-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 0; font-size: 14px; }
.nf-more a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(239, 231, 219, .78); text-decoration: underline; text-decoration-color: rgba(239, 231, 219, .25); text-underline-offset: 5px; }
.nf-more a:hover { color: #efe7db; text-decoration-color: #e3a457; }
.nf :focus-visible { outline: 1.5px solid #e3a457; outline-offset: 3px; }
.nf .lg-foot { justify-content: center; border-top-color: rgba(239, 231, 219, .12); color: rgba(239, 231, 219, .6); }
.nf .lg-foot a, .nf .lg-foot button { color: rgba(239, 231, 219, .74); }
.nf [lang="ar"] { direction: rtl; }

@media print {
  .lg-top .lg-langs, .lg-foot, .bvc, .lg-toc { display: none !important; }
  body { font-size: 11pt; }
  .lg { padding: 0; max-width: none; }
}

.lg-inline-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; }
.lg code { font-size: .88em; background: rgba(29, 27, 24, .05); padding: 1px 4px; }
/* ---------- tap targets ≥ 44 × 44 px: padding (or a transparent border) grows the hit area and an equal
   negative margin keeps the layout, so nothing moves; boxed controls get 44 px on touch screens ---------- */
.lg-brand { padding-block: 4px; margin-block: -4px; }
.lg-langs a { padding-top: 12px; margin-top: -2px; padding-inline: 9px; margin-inline: -9px; }
.lg-foot a, .lg-foot button { min-height: 44px; padding: 10px 7px; margin: -10px -7px; }
.lg-inline-btn { padding-block: 9px; margin-block: -9px; }
.lg dd a { padding-block: 12px; } /* inline: no layout change */