/* The Eulenpinsel app's legal pages (help/purchases, privacy, licences) on eulenpinsel.annico.eu.
   The pages themselves come live from sl-cdn (built from ~/REPOS/gefuehlswellen content/legal); nginx swaps
   their inline style for this sheet and adds the header (deploy/nginx.conf, server eulenpinsel.annico.eu).
   Fonts self-hosted under the SIL OFL 1.1 (fonts/OFL-*.txt). */
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url("fonts/baloo-2-latin-800.woff2") format("woff2"); }

:root {
  --paper: #F3ECDF;
  --paper-2: #EBE1CF;
  --ink: #1D2421;
  --ink-2: #48514C;
  --ink-3: #7B7F76;
  --line: rgba(29, 36, 33, .14);
  --sea: #2C7A86;
  --teal: #22545C;
  --tip: #FBEFC8;
  --night: #0F2B28;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4.2vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper) url("/img/grain.png");
  background-size: 256px;
  background-blend-mode: multiply;
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2.5px solid var(--sea); outline-offset: 3px; border-radius: 6px; }

.eplegal-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gut);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.eplegal-top .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teal); font: 800 25px/1 "Baloo 2", var(--sans); }
.eplegal-top .brand img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(60, 40, 10, .2)); }
.eplegal-top .by { color: var(--ink); opacity: .75; font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: 999px; }
.eplegal-top .by:hover { opacity: 1; background: rgba(29, 36, 33, .07); }

main { flex: 1; width: 100%; max-width: calc(760px + 2 * var(--gut)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gut) 90px; }
main > nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(36px, 5vw, 56px); }
main > nav a { font-size: 14px; font-weight: 620; color: var(--ink-2); text-decoration: none; padding: 7px 14px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); background: rgba(255, 255, 255, .35); transition: background-color .2s, color .2s; }
main > nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
main > nav a.on { background: var(--ink); color: var(--paper); box-shadow: none; }
main > nav a[lang] { margin-left: auto; }
h1 {
  font-family: var(--display);
  font-weight: 480;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  margin: 0 0 22px;
  text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-weight: 540;
  font-size: clamp(21px, 1.4vw + 13px, 26px);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 72;
  margin: 46px 0 10px;
  text-wrap: balance;
}
h3 { font-weight: 680; font-size: 18px; margin: 28px 0 6px; }
h4 { font-weight: 650; font-size: 16px; color: var(--ink-3); margin: 18px 0 4px; }
p, li { color: var(--ink-2); }
p { max-width: 68ch; }
strong { color: var(--ink); font-weight: 650; }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
li::marker { color: var(--sea); }
aside { background: var(--tip); border-radius: 16px; padding: 14px 18px; margin: 16px 0; color: var(--ink); }
hr { border: 0; border-top: 1px dashed rgba(44, 122, 134, .45); margin: 34px 0; }
pre { white-space: pre-wrap; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3); background: rgba(255, 255, 255, .45); border-radius: 12px; padding: 14px 16px; }
main footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.site-note { margin-top: 28px; font-size: 15px; color: var(--ink-3); background: var(--paper-2); border-radius: 12px; padding: 12px 16px; }

.eplegal-foot { background: var(--night); color: #C6D2C4; font-size: 14.5px; }
.eplegal-foot div { max-width: 1240px; margin: 0 auto; padding: 28px var(--gut) 36px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.eplegal-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.eplegal-foot a { color: #C6D2C4; text-decoration: none; }
.eplegal-foot a:hover { color: #F6E27A; }
@media (max-width: 600px) { main > nav a[lang] { margin-left: 0; } }