/*
  tm.css: shared styles for Technological Metamodernism pages.
  The rules behind these values are in design-guide.html.

  Link it with <link rel="stylesheet" href="tm.css"> (adjust the path).
  Everything is prefixed tm- so it sits alongside a page's own styles.
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Spectral:ital,wght@0,400;0,600;1,400&family=Silkscreen&display=swap");

/* The pixel face is licensed and installed locally; Silkscreen stands in elsewhere. */
@font-face {
  font-family: "TwentyFourNinetyOne";
  src: local("TwentyFourNinetyOne"), local("TwentyFourNinetyOne-Regular");
}

:root {
  /* Brand */
  --tm-sunset: linear-gradient(to bottom left, #4252fa 0%, #a15efb 48%, #fc79c8 76%, #ffc46b 100%);
  --tm-violet: #3d00f6;      /* cool violet: links, small text, hover and pressed states (8.3:1 on white) */
  --tm-heliotrope: #ce55f6;  /* buttons, highlights, large elements (3.36:1 on white) */
  --tm-white: #ffffff;       /* the mark's letters, all type on sunset and artwork, surfaces */
  --tm-off-white: #f9f7fb;   /* page background behind white surfaces such as tables and panels */
  --tm-black: #000000;       /* the cut-out shadow */
  --tm-cutout-shadow: 0 0 10px rgba(0, 0, 0, 0.8);

  /* Neutrals for interfaces */
  --tm-ink: #1f1a22;
  --tm-muted: #5d5562;
  --tm-line: #ece6ee;
  --tm-tint: #fbf5fc;

  /* Type */
  --tm-ui: "Roboto Mono", ui-monospace, Menlo, monospace;      /* headings, labels, tabs, buttons (Substack's mono preset) */
  --tm-serif: "Spectral", Georgia, serif;                       /* reading text and tables (Substack's body font) */
  --tm-pixel: "TwentyFourNinetyOne", "Silkscreen", "Roboto Mono", monospace; /* titles on sunset and artwork */
}

/* ---------- Surfaces ---------- */

/* Sunset, full-bleed. Type on it is white; never put the tm mark on it. */
.tm-sunset {
  background: var(--tm-sunset);
  color: var(--tm-white);
}

/* A page header band on sunset with the name in the pixel face. */
.tm-masthead {
  background: var(--tm-sunset);
  color: var(--tm-white);
}
.tm-masthead > .tm-wrap {
  padding-block: 22px;
}

/* Centred content column with the standard side gutter. */
.tm-wrap {
  max-width: 1480px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

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

/* Lowercase pixel title on sunset or artwork, with the cut-out shadow. */
.tm-pixel-title {
  margin: 0;
  font: 400 clamp(20px, 2.6vw, 30px) / 1.25 var(--tm-pixel);
  color: var(--tm-white);
  text-shadow: var(--tm-cutout-shadow);
  text-transform: lowercase;
}

.tm-eyebrow {
  margin: 0 0 6px;
  font: 400 12px / 1.4 var(--tm-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-muted);
}

.tm-heading {
  margin: 0 0 8px;
  font: 700 clamp(22px, 2.6vw, 30px) / 1.2 var(--tm-ui);
  color: var(--tm-ink);
  text-wrap: balance;
}

.tm-prose {
  font: 400 17px / 1.6 var(--tm-serif);
  color: var(--tm-ink);
}

.tm-link,
.tm-prose a {
  color: var(--tm-violet);
}

/* ---------- Controls ---------- */

/* Primary button: cool violet with white label (8.3:1). */
.tm-button {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  font: 700 15px / 1.2 var(--tm-ui);
  color: var(--tm-white);
  background: var(--tm-violet);
  text-decoration: none;
  cursor: pointer;
}

/* Heliotrope button: only with large bold labels (19px+), where 3.36:1 passes. */
.tm-button--heliotrope {
  background: var(--tm-heliotrope);
  font-size: 19px;
}
.tm-button--heliotrope:hover,
.tm-button--heliotrope:focus-visible {
  background: var(--tm-violet);
}

.tm-button:focus-visible,
.tm-link:focus-visible {
  outline: 3px solid var(--tm-violet);
  outline-offset: 2px;
}

/* ---------- The mark ---------- */

/* The tm mark on a flat ground (white, or any plain colour). Never on sunset, artwork or another gradient. */
.tm-mark {
  display: block;
  width: 48px;
  height: 48px;
}

/* Dense interface text: tables, lists, controls with lots of words. */
.tm-ui-text {
  font: 400 15px / 1.5 var(--tm-serif);
  color: var(--tm-ink);
}