/* legal.css: the plain pages, privacy.html and imprint.html (js/pages/legal.js; SPEC.md "Contact, privacy, imprint").
   Loaded after hero.css (tokens, the mark, the menu, the seam's ground colours). DIRECTION.md: /privacy is plain. Readable
   text on the seam: one reading column on the line, on the seam's neutral ground, its left edge an ink rule and its right
   edge a cyan light (the two worlds only as a quiet frame: the Architect's paper left of the line, the Ghostwriter's night
   right of it). No fly-ins: the column fades in as it comes (the router's unfold when routed); Reduce Motion: placed. */

html[data-page="legal"] {
  --gutter: 24px;
  --lg-w: min(42rem, calc(100vw - 2 * var(--gutter) - 2.4rem));
  --lg-ink: #1a1917;
  --lg-dim: #55524b;
  --lg-accent: #b23a00;          /* the paint accent as text on the reading ground (4.5:1) */
}
@media (max-width: 719.98px) {
  html[data-page="legal"] { --gutter: 16px; --lg-w: calc(100vw - 2 * var(--gutter)); }
}
html[data-page="legal"] body { touch-action: auto; }
html[data-page="legal"] ::selection { background: rgba(0, 229, 255, 0.28); color: #0b0b0c; }

/* ---------------------------------------------------------------- the seam before (or without) WebGL */
.lg-ground { position: fixed; inset: 0; z-index: 0; background: linear-gradient(90deg, #ece7da 0 50%, #070708 50% 100%); transition: opacity 700ms var(--breath); }
.lg-ground i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(90deg, #0b0b0c 0 50%, #00e5ff 50% 100%); box-shadow: 6px 0 14px rgba(0, 229, 255, 0.45); }
html[data-gl="1"] .lg-ground { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the top bar: the mark and the way back (the shell's,
   hero.css "the way back"), on the paper half */
html[data-page="legal"] .top { left: var(--gutter); right: auto; }

/* ---------------------------------------------------------------- the reading column on the line */
.lg { position: relative; overflow-x: clip; padding: clamp(5.4rem, 13vh, 8rem) 0 0; }
.lg-col {
  position: relative; width: var(--lg-w); margin: 0 auto;
  padding: clamp(2.2rem, 5vh, 3.2rem) clamp(1.35rem, 4.5vw, 3.2rem) clamp(2.4rem, 6vh, 3.4rem);
  color: var(--lg-ink); background: var(--seam-ground) var(--grain);
  box-shadow: -2px 0 0 #0b0b0c, 2px 0 0 #00e5ff, 7px 0 18px -5px rgba(0, 229, 255, 0.5), 0 34px 60px -34px rgba(0, 0, 0, 0.5);
  font-family: var(--body); font-size: 1.02rem; line-height: 1.68;
}
/* the words fade in as they come (a legal page never waits on a script to be readable; Reduce Motion: there at once) */
.lg-col, .lg-foot { animation: lgIn 420ms var(--breath) both; }
.lg-foot { animation-delay: 120ms; }
@keyframes lgIn { from { opacity: 0; } }

.lg-head { padding-bottom: 1.6rem; border-bottom: 1px solid rgba(26, 25, 23, 0.16); }
.lg-kicker { font: 600 0.6rem/1.4 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--lg-accent); }
.lg-title { margin: 0.5rem 0 0.9rem; font-family: var(--display); font-weight: 400; font-size: clamp(3.6rem, 8vw, 6.2rem); line-height: 0.86; letter-spacing: 0.01em; color: #0b0b0c; }
.lg-lead { font-size: 1.14rem; line-height: 1.6; color: var(--lg-ink); text-wrap: pretty; }
.lg-lead p + p { margin-top: 0.8em; }

.lg-sec { padding: 1.9rem 0 0.2rem; scroll-margin-top: 5rem; }
.lg-sec + .lg-sec { border-top: 1px solid rgba(26, 25, 23, 0.1); margin-top: 1.4rem; }
.lg-h2 { margin-bottom: 0.7rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.1rem); line-height: 1; letter-spacing: 0.02em; color: #0b0b0c; }
.lg-text, .lg-who, .lg-imprint { color: #2b2924; text-wrap: pretty; }
.lg-text p + p, .lg-extra p + p { margin-top: 0.75em; }
.lg-sec .draft-tag { margin: 0.9rem 0 0; color: #9a3300; }
.lg-head .draft-tag { margin: 1rem 0 0; color: #9a3300; }
.lg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.1rem; }
.lg-act .draft-tag { margin: 0; }
.lg-btn {
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem 0.65rem;
  font: 600 0.6rem/1.2 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: #0b0b0c;
  border: 1px solid #0b0b0c; background: transparent; transition: background-color var(--d-hit) linear, color var(--d-hit) linear;
}
.lg-btn i { position: relative; display: block; flex: none; width: 1.6rem; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
.lg-btn i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.lg-btn:hover, .lg-btn:focus-visible { background: #0b0b0c; color: #f4f4f0; }
.lg-btn:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 3px; }
.lg-col a:not(.lg-btn) { color: #0b0b0c; text-decoration: underline 1px; text-underline-offset: 0.25em; }
.lg-col a:not(.lg-btn):focus-visible { outline: 2px solid #0b0b0c; outline-offset: 2px; }

/* the owner's legal facts (the imprint, the controller); until they are saved, one neutral line */
.lg-who .lg-text-lead { margin-bottom: 0.7rem; }
.lg-card { display: grid; gap: 0.1rem; font-style: normal; }
.lg-card-name { font-weight: 600; color: #0b0b0c; }
.lg-card-contact { margin-top: 0.5rem; }
.lg-pending { color: var(--lg-dim); font-style: italic; }
.lg-imprint { padding-top: 1.8rem; }
.lg-imprint .lg-card-name { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.lg-extra { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(26, 25, 23, 0.1); font-size: 0.95rem; }
[aria-busy="true"]:empty { min-height: 1.7em; }

/* ---------------------------------------------------------------- the foot: paper half, night half (as the press page's) */
.lg-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: start;
  padding: clamp(5rem, 14vh, 8rem) var(--gutter) max(2.6rem, env(safe-area-inset-bottom));
  font: 500 0.58rem/1.6 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
}
.lg-foot-l { justify-self: end; display: grid; justify-items: end; gap: 1.1rem; text-align: right; }
.lg-foot-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.4rem; }
.lg-foot-nav a { color: #0b0b0c; border-bottom: 1px solid transparent; transition: border-color var(--d-hit) linear; }
.lg-foot-nav a:hover { border-bottom-color: #0b0b0c; }
.lg-foot-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.2rem; max-width: 26rem; }
.lg-foot-socials a { color: #46443f; transition: color var(--d-hit) linear; }
.lg-foot-socials a:hover { color: #0b0b0c; }
.lg-foot-r { justify-self: start; display: grid; justify-items: start; gap: 1.1rem; }
.lg-shot { font-size: 0.8rem; letter-spacing: 0.34em; color: var(--gw-fg); }
.lg-made { color: var(--gw-dim); transition: color var(--d-hit) linear; }
.lg-made:hover { color: var(--gw-fg); }
.lg-foot-l a:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 3px; }
.lg-foot-r a:focus-visible, .lg-foot-r button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.lg-foot-r .foot-legal { --legal: var(--gw-dim); --legal-hi: var(--gw-fg); }

@media (max-width: 719.98px) {
  .lg-col { font-size: 0.98rem; line-height: 1.64; }
  .lg-lead { font-size: 1.06rem; }
  .lg-foot { column-gap: 2.2rem; font-size: 0.52rem; letter-spacing: 0.16em; }
  .lg-foot-nav, .lg-foot-socials { gap: 0.3rem 0.9rem; }
  .lg-shot { font-size: 0.68rem; letter-spacing: 0.26em; }
}