/* Legal pages: the homepage's Magic Lantern Show tokens and type, in a single
   reading column. Keep these values in step with src/styles.css. */
@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ground: #0a0909;
  --brass: #b08a4a;
  --brass-bright: #dcb878;
  --brass-dim: #5e4524;
  --screen: #f3e6c8;
  --screen-dim: #bcae90;
  --serif: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--brass-dim) var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--screen);
  font: 400 20px/1.6 var(--serif);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brass); color: var(--ground); }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 4px; }

.legal-page { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* Masthead: the homepage brand, and the language switch in place of the nav. */
.legal-nav { position: relative; border-bottom: 1px solid color-mix(in srgb, var(--brass) 55%, transparent); }
.legal-nav::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3.5px;
  width: 6px; height: 6px;
  border: 1px solid var(--brass-bright);
  background: var(--ground);
  transform: translateX(-50%) rotate(45deg);
}
.legal-nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 28px 0 20px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--brass-bright); text-decoration: none; }
.brand-mark {
  width: auto; height: 56px;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.brand-name {
  display: flex; flex-direction: column; align-items: center;
  font-size: 22px;
  line-height: 1.05;
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
}
.brand-name small { font-size: max(12px, .62em); letter-spacing: .5em; color: var(--brass); padding-left: .5em; }

.legal-main { padding: 64px 0 88px; }
.legal-title {
  font-weight: 600;
  font-size: clamp(36px, 7vw, 72px);
  hyphens: auto;
  line-height: 1;
  letter-spacing: -.005em;
  margin: 0 0 16px;
}
.legal-updated {
  margin: 0 0 56px;
  line-height: 1.4;
  color: var(--brass);
  font-size: 19px;
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
}
.legal-main h2 {
  hyphens: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  margin: 56px 0 16px;
}
.legal-main h3 {
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  color: var(--brass-bright);
  margin: 36px 0 10px;
}
.legal-main p,
.legal-main ul { color: var(--screen-dim); margin: 0 0 1em; }
.legal-main ul { padding-left: 1.2em; }
.legal-main li { margin-bottom: .35em; }
.legal-main li::marker { color: var(--brass); }
.legal-main strong { color: var(--screen); font-weight: 600; }
.legal-main a {
  color: var(--brass-bright);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brass) 55%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-main a:hover { color: var(--screen); text-decoration-color: var(--brass-bright); }

/* Addresses and contact details: a brass-ruled block, like a ledger entry. */
.legal-card {
  margin: 0 0 12px;
  padding: 14px 0 14px 22px;
  border-left: 1px solid var(--brass);
}
.legal-card p { margin: 0 0 .4em; }
.legal-card p:last-child { margin: 0; }
.legal-card .mono { color: var(--screen); }

.legal-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  margin-top: 72px; padding-top: 24px;
  border-top: 1px solid var(--brass-dim);
  color: var(--screen-dim);
  font-size: 17px;
}
.legal-foot a { color: var(--screen); text-decoration: none; }
.legal-foot a:hover { color: var(--brass-bright); }
.legal-foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* Language switch */
.lang-switch { display: flex; gap: 4px; }
.lang-btn {
  min-width: 48px; min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--screen-dim);
  font: 400 19px/1 var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lang-btn:hover { color: var(--brass-bright); }
body[data-lang="de"] .lang-btn[data-set-lang="de"],
body[data-lang="en"] .lang-btn[data-set-lang="en"] {
  color: var(--brass-bright);
  border-color: var(--brass);
}

/* Language visibility */
body[data-lang="de"] .lang-en { display: none; }
body[data-lang="en"] .lang-de { display: none; }
span.lang { display: inline; }

@media (max-width: 600px) {
  body { font-size: 19px; }
  .legal-page { padding: 0 20px; }
  .brand-mark { height: 44px; }
  .brand-name { font-size: 18px; }
  .legal-main { padding-top: 48px; }
}