/* Podcaster's look, in one file. The website, the documentation pages and the admin portal all
   read it, so a change here changes the whole ecosystem. Served at /style.css: by Caddy from
   site/ in production, by the API from SITE_DIR in development.

   To change the typeface everywhere, change --font (and drop the woff2 files in fonts/). To change
   the colours, change the tokens under :root and the dark block. Nothing below hard-codes either. */

/* MARK: The typeface */

/* Bricolage Grotesque, variable (weight 200 to 800, width 75% to 100%), SIL Open Font License;
   the licence travels with the files in fonts/OFL.txt. Self-hosted, so the site asks nothing of
   any third party and the privacy page stays true. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-latin.woff2) format("woff2-variations");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(/fonts/bricolage-latin-ext.woff2) format("woff2-variations");
  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;
}

/* MARK: The tokens */

:root {
  --font: "Bricolage Grotesque", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --paper: #fbfcfb;
  --raised: #ffffff;
  --ink: #1c2321;
  --muted: #5b6663;
  --line: #dfe7e4;
  --shade: #f2f6f5;

  --accent: #3fa898;
  --accent-ink: #1f6d62;
  --accent-press: #35978a;
  --accent-on: #0c1f1c;
  --tile: #e4f6f3;

  --second: #8473e6;
  --second-ink: #4f3fb8;
  --second-tile: #ece9ff;

  /* The subjects, as the covers use them. */
  --finance: #7ed3b2;
  --economics: #f3cf86;
  --politics: #9fb5ec;
  --law: #e3a2b9;
  --psychology: #cfaee9;
  --science: #8fd8e8;
  --medicine: #f2a7a0;
  --technology: #aab6de;
  --history: #efb894;
  --social: #e6a9c0;
  --general: #9be3d8;
  /* Each subject's deep colour: the ink a cover's banner is set in, and its series pill. */
  --finance-ink: #2f8f6b;
  --economics-ink: #c98a2b;
  --politics-ink: #3d5fb3;
  --law-ink: #9a3d5c;
  --psychology-ink: #8a5bb5;
  --science-ink: #2a8fa8;
  --medicine-ink: #b8483f;
  --technology-ink: #4d5d8f;
  --history-ink: #b9642f;
  --social-ink: #9a4f70;
  --general-ink: #5cbfb1;

  --radius-small: 10px;
  --radius: 17px;
  --column: 940px;

  /* Every page on the site is printed edge to edge. `--gutter` is the margin the print keeps and
     `--band` is the rule between one section and the next. */
  --gutter: max(22px, 4.5vw);
  --band: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131817;
    --raised: #1a201f;
    --ink: #e6ecea;
    --muted: #93a09c;
    --line: #26302d;
    --shade: #1a211f;

    --accent: #7fd6c8;
    --accent-ink: #9fe3d8;
    --accent-press: #93e0d4;
    --accent-on: #08201c;
    --tile: #1f3331;

    --second: #b4a8ff;
    --second-ink: #cdc4ff;
    --second-tile: #2c2944;
  }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #131817;
  --raised: #1a201f;
  --ink: #e6ecea;
  --muted: #93a09c;
  --line: #26302d;
  --shade: #1a211f;

  --accent: #7fd6c8;
  --accent-ink: #9fe3d8;
  --accent-press: #93e0d4;
  --accent-on: #08201c;
  --tile: #1f3331;

  --second: #b4a8ff;
  --second-ink: #cdc4ff;
  --second-tile: #2c2944;
}

/* MARK: The page */

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Headings are the one place the width axis earns its keep: a shade narrow, so the face is
   recognisable at a glance without shouting. */
h1, h2, h3, h4 {
  font-stretch: 92%;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

code, kbd, pre { font-family: var(--mono); font-size: 0.92em; }

/* Anything with digits in a column lines them up. */
.tabular, table { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--column); margin: 0 auto; padding: 26px 24px 72px; }

/* MARK: The page shell

   The masthead, the rules and the footer run the width of the window on every page. Only the
   reading is held to a column, and `.spread` is how a page sets a label beside its content: the
   same three-and-nine the front page's bands use. */

.edge { padding-inline: var(--gutter); }

.masthead { display: flex; align-items: center; gap: 11px; padding-block: 18px; }
.masthead .brand { font-weight: 700; font-size: 18px; font-stretch: 92%; letter-spacing: -0.02em; }
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.masthead nav a {
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px;
  /* A link is a name, not a paragraph: on a narrow screen it moves to the next row whole rather
     than breaking "How it works" over three lines. */
  white-space: nowrap;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.button { color: var(--accent-on); padding: 11px 18px; }

/* On a phone the mark, the name and three links do not share a row. The name keeps the first row
   and the links take the second, with the button held to the right where it is on every other
   screen. */
@media (max-width: 620px) {
  .masthead { flex-wrap: wrap; gap: 6px 10px; padding-block: 14px 10px; }
  .masthead .mark { width: 29px; height: 29px; }
  .masthead .brand { font-size: 17px; }
  .masthead nav { width: 100%; margin-left: 0; gap: 2px; }
  .masthead nav a { font-size: 14.5px; padding: 8px 10px; }
  .masthead nav a:first-child { padding-left: 0; }
  .masthead nav a.button { margin-left: auto; padding: 10px 16px; }
}

.spread { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 48px; align-items: start; }
.spread > .label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding-top: 8px;
}
@media (max-width: 760px) {
  .spread { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spread > .label { padding-top: 0; }
}

/* A column of reading with a standing note beside it, both inside the spread's wide half. */
.beside { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px 56px; }
.beside > .said-aside { flex: 0 1 280px; color: var(--muted); font-size: 15px; }
.beside > .said-aside b { color: var(--ink); font-weight: 600; }
.beside > .said-aside p { margin: 0 0 12px; }
.beside > .said-aside p:last-child { margin-bottom: 0; }
.beside > .said-aside a { color: var(--accent-ink); }

.pagefoot {
  border-top: var(--band); padding-block: 22px 34px; margin-top: 72px;
  color: var(--muted); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.pagefoot a { color: inherit; text-decoration: none; }
.pagefoot a:hover { color: var(--ink); text-decoration: underline; }

/* MARK: The mark

   The ring, and the dot outside it on the right. It stands on its own: no tile, no rounded box.
   `.mark.arriving` plays once, the dot travelling in from the right and settling. */

.mark { display: block; width: 34px; height: 34px; color: var(--accent); }
.mark svg { display: block; width: 100%; height: 100%; }
.mark .ring { fill: none; stroke: currentColor; stroke-width: 2.6; }
.mark .dot { fill: currentColor; }

@keyframes mark-arrive {
  from { transform: translateX(9px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.mark.arriving .dot { animation: mark-arrive 620ms cubic-bezier(.22, 1.2, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .mark.arriving .dot { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* MARK: Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-on);
  transition: background 120ms ease;
}
.button:hover { background: var(--accent-press); }
.button svg { width: 17px; height: 17px; }

/* A button that cannot be pressed has to look it. Without these three lines a disabled button keeps
   the accent, keeps the pointer and still lights up under the cursor, which is a button that says
   it works and does nothing. The hover rule above applies to a disabled button, so it is undone
   here for both kinds. */
.button:disabled { opacity: .45; cursor: default; }
.button:disabled:hover { background: var(--accent); }
.button.quiet:disabled:hover { background: transparent; }

.button.quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.button.quiet:hover { background: var(--shade); }

/* MARK: Pieces the surfaces share */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel {
  background: var(--shade);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* A cover as the system draws it: the subject's colour, the title set in the face. Give the
   element `--c` and it takes that subject's tile. */
.cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-small);
  background: var(--c, var(--general));
  color: #14201e;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin: 0;
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover figcaption {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cover .field { position: relative; font-size: 10.5px; font-weight: 600; opacity: 0.62; letter-spacing: 0.04em; text-transform: uppercase; }