/* Shared look for the holding page and the legal pages: Linnet's design
   (tokens and type from linnet-admin/public/css/app.css, which translates the
   iOS app's Tokens.swift / Typography.swift). Big type, warm neutrals, one
   loud accent, a lot of room. Light and dark follow the system. */

/* ---- Faces (OFL, self-hosted, Latin subsets) -------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-roman.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff") format("woff");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-roman.woff") format("woff");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ----------------------------------------------------------------- */

:root {
  --raw-paper: #F6F2EA;
  --raw-ink: 28 25 21;            /* #1C1915 */
  --raw-night: #13110E;
  --raw-moon: 233 225 210;        /* #E9E1D2, text on night */
  --raw-linnet: #DF4529;
  --raw-linnet-bright: #F25D3C;

  --canvas: var(--raw-paper);
  --ink: rgb(var(--raw-ink));
  --ink-2: rgb(var(--raw-ink) / 0.64);
  --ink-3: rgb(var(--raw-ink) / 0.42);
  --line: rgb(var(--raw-ink) / 0.12);
  --accent: var(--raw-linnet);

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 72px;

  --size-caret: 7px;
  --gate-column: 560px;
  --prose-column: 680px;
  --gutter: var(--space-l);

  --serif: "Newsreader", "New York", ui-serif, Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --quick: 0.2s;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: var(--raw-night);
    --ink: rgb(var(--raw-moon));
    --ink-2: rgb(var(--raw-moon) / 0.64);
    --ink-3: rgb(var(--raw-moon) / 0.42);
    --line: rgb(var(--raw-moon) / 0.14);
    --accent: var(--raw-linnet-bright);
  }
}

@media (max-width: 600px) {
  :root { --gutter: var(--space-m); }
}

/* ---- Type styles -------------------------------------------------------------- */

.masthead {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 46px);
  font-weight: 330;
  font-variation-settings: "opsz" 72;
  line-height: 1.04;
  letter-spacing: -0.022em;
  padding-bottom: 0.08em; /* room for descenders under a tight last line */
}
.headline {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 430;
  font-variation-settings: "opsz" 24;
  line-height: 1.22;
  letter-spacing: -0.004em;
}
.serif-body {
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 400;
  line-height: 1.46;
}
.label {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.005em;
}
.dim { color: var(--ink-2); }

/* ---- Base ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.36;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-wrap: break-word;
}
h1, h2, h3, p { margin: 0; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--quick) var(--ease);
}
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---- Wordmark: the name in display italic with the red dot ---------------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xxs);
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 430;
  font-variation-settings: "opsz" 24;
  line-height: 1.22;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.wordmark-dot {
  display: inline-block;
  width: var(--size-caret);
  height: var(--size-caret);
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Holding page: one column, the name on top, the news in the middle ----------- */

.hold {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(var(--space-l) + env(safe-area-inset-top, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    calc(var(--space-l) + env(safe-area-inset-bottom, 0px))
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
}
.hold-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xxl);
  width: 100%;
  max-width: var(--gate-column);
  min-height: min(760px, calc(100vh - 2 * var(--space-l)));
  min-height: min(760px, calc(100dvh - 2 * var(--space-l)));
  padding-top: var(--space-m);
}
.hold-column > .wordmark { align-self: flex-start; }
.hold-copy { display: grid; gap: var(--space-l); }
.hold-copy .headline { margin-top: calc(var(--space-xs) * -1); }
.hold-copy .serif-body { max-width: 26em; }
.hold-foot {
  display: grid;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-m);
  color: var(--ink-3);
}

/* ---- Legal pages: readable long-form prose --------------------------------------- */

.page {
  max-width: calc(var(--prose-column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-xxxl);
}
.home { display: inline-block; margin-bottom: var(--space-xxl); text-decoration: none; }

.legal h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 38px);
  font-weight: 340;
  font-variation-settings: "opsz" 64;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: var(--space-s);
}
.legal .legal-updated {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 620;
  font-stretch: 84%;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-xl);
}
.legal h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 430;
  font-variation-settings: "opsz" 24;
  line-height: 1.22;
  letter-spacing: -0.004em;
  margin: var(--space-xl) 0 var(--space-xs);
}
.legal p, .legal li {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.legal p { margin-bottom: var(--space-s); }
.legal strong { font-weight: 560; color: var(--ink); }
.legal ul { padding-left: 20px; margin: var(--space-xs) 0 var(--space-s); }
.legal li { margin: var(--space-xxs) 0; }
.legal li::marker { color: var(--ink-3); }
/* "In short": the page's gist above the full text. */
.legal .gist {
  margin: 0 0 var(--space-xxl);
  padding: var(--space-xxs) 0 var(--space-xxs) var(--space-l);
  border-left: 2px solid var(--accent);
}
@media (max-width: 600px) {
  .legal .gist { padding-left: var(--space-m); }
}
.legal .gist h2 { margin-top: 0; }
.legal .gist ul { margin-bottom: 0; }
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-m);
}
.foot [aria-current="page"] { color: var(--ink-2); text-decoration: none; }

.foot {
  margin-top: var(--space-xxl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-3);
}