/* Páginas legales: misma ónix y cobre de la portada, una columna de lectura. */
:root {
  --onyx: #0B0B0C;
  --ivory: #F2EDE6;
  --muted: #9C948B;
  --line: #2C2724;
  --copper: #C27A48;
  --copper-hi: #D9A07A;
  --display: "Archivo", "SF Pro Display", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--onyx); }
body {
  margin: 0; background: var(--onyx); color: var(--ivory);
  font-family: var(--display); font-weight: 300; font-size: 17px; line-height: 1.65;
  font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased;
}
a { color: var(--copper-hi); text-decoration: none; }
a:hover { color: var(--ivory); }
:focus-visible { outline: 1px solid var(--copper-hi); outline-offset: 4px; }

.wm {
  font-variation-settings: "wdth" 125; font-weight: 250;
  letter-spacing: .42em; margin-right: -.42em; white-space: nowrap; color: var(--ivory);
}
.wm b { font-weight: inherit; color: var(--copper); }

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gutter) 0;
}
header .wm { font-size: 15px; }
.label {
  font-variation-settings: "wdth" 125; font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--muted);
}

main { max-width: 720px; margin: 0 auto; padding: clamp(72px, 12vw, 128px) var(--gutter) 96px; }
h1 {
  font-variation-settings: "wdth" 125; font-weight: 250; font-size: clamp(32px, 6vw, 48px);
  line-height: 1.12; letter-spacing: -.01em; margin: 14px 0 18px; text-wrap: balance;
}
.lede { color: var(--muted); font-size: 19px; margin: 0 0 56px; }
h2 {
  font-variation-settings: "wdth" 125; font-weight: 300; font-size: 19px; letter-spacing: .02em;
  margin: 44px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
}
p, li { color: var(--muted); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 1.2em; }
li { margin-bottom: 6px; }
strong { color: var(--ivory); font-weight: 400; }

footer {
  border-top: 1px solid var(--line); padding: 40px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 40px);
  font-size: 13px; color: var(--muted);
}
footer .in { max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
footer nav a { color: var(--muted); }
footer nav a:hover { color: var(--ivory); }