/* Styling for the imprint and privacy pages. Mirrors index.html. */
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-display:swap;font-weight:400;
  src:url('fonts/dm-mono-latin-400-normal.woff2') format('woff2');
}

:root{
  --paper:#F4F4F1; --ink:#1A1917; --ink-2:#6C6B62; --ink-3:#9A998F;
  --rule:#D8D7CF; --red:#C4231C; --red-wash:rgba(196,35,28,.09);
  --sans:'Archivo',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px;margin:0 auto;padding:0 var(--pad)}
a{color:inherit}

.top{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:22px 0 20px;border-bottom:1px solid var(--rule);
}
.eyebrow{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;font-variation-settings:'wdth' 78;color:var(--ink-3);
}
.top a{text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:1px}

h1{
  font-size:clamp(30px,6vw,50px);line-height:1;letter-spacing:-.03em;
  font-weight:700;font-variation-settings:'wdth' 115;text-transform:uppercase;
  margin:clamp(40px,7vw,70px) 0 6px;
}
.sub{color:var(--ink-2);font-size:15px;margin-bottom:clamp(34px,6vw,52px)}

h2{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  font-variation-settings:'wdth' 80;margin:40px 0 12px;
  padding-top:14px;border-top:1px solid var(--ink);
}
h3{font-size:15px;font-weight:600;margin:22px 0 5px}
p{margin:0 0 12px;max-width:64ch}
ul{margin:0 0 12px 18px;max-width:64ch}
li{margin-bottom:5px}
address{font-style:normal;font-family:var(--mono);font-size:14.5px;line-height:1.75}

.todo{color:var(--red);border-bottom:1px dotted var(--red);font-family:var(--mono);font-size:13.5px}
.note{
  margin:14px 0;padding:12px 14px;background:var(--red-wash);
  border-left:2px solid var(--red);font-size:13.5px;color:var(--ink-2);max-width:64ch;
}
.en{color:var(--ink-2);font-size:14.5px}

footer{
  margin-top:56px;padding:22px 0 56px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-3);
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}