/* Blurbs on the web: the app's Broadsheet design system (see the readme in the
   app's design/_ds folder, and src/theme/tokens.ts). Newsprint: one serif, paper
   ground, cyan and magenta used small like spot colour. Hierarchy comes from the
   type scale and whitespace, not boxes and dividers. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: rgb(32 30 29 / 16%);
  --color-process-yellow: #edbb00;

  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-400: #62c5ee;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  --tab-bg: #e0dedd;
  --tab-border: rgb(32 30 29 / 14%);
  --tab-ink: #605d5d;
  --tab-ink-on: #006786;
  --tab-on-bg: rgb(32 30 29 / 9%);
  --bezel: #2d2b2b;

  /* The accent is tuned for chrome, not small text: labels on a filled button
     take the deep step so they pass 4.5:1. */
  --btn-bg: var(--color-accent-700);
  --btn-bg-hover: var(--color-accent-800);

  --shadow-lg: 0 12px 32px rgb(45 43 43 / 22%);

  --font: "Source Serif 4", Georgia, "Times New Roman", serif;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;
  --section: 130px;

  --radius-md: 2px;
  --gutter: 40px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141312;
    --color-surface: #211f1e;
    --color-text: #ecebe9;
    --color-accent: #3fb0d8;
    --color-accent-2: #ff4f95;
    --color-divider: rgb(236 235 233 / 16%);

    --color-neutral-200: #262423;
    --color-neutral-300: #3a3736;
    --color-neutral-600: #948f8c;
    --color-neutral-700: #b3aeab;
    --color-neutral-800: #d0cbc8;
    --color-neutral-900: #ebe7e5;

    --color-accent-100: #0a303e;
    --color-accent-200: #004961;
    --color-accent-400: #1186ac;
    --color-accent-700: #8fd6f5;
    --color-accent-800: #cbeeff;
    --color-accent-900: #e9f8ff;

    --color-accent-2-100: #3a1222;
    --color-accent-2-200: #5a1533;
    --color-accent-2-400: #aa0b56;
    --color-accent-2-700: #ff90b1;
    --color-accent-2-800: #ffc0d0;
    --color-accent-2-900: #ffdee6;

    --tab-bg: #2a2827;
    --tab-border: rgb(236 235 233 / 12%);
    --tab-ink: #b3aeab;
    --tab-ink-on: #8fd6f5;
    --tab-on-bg: rgb(236 235 233 / 10%);
    --bezel: #3a3736;

    --btn-bg: var(--color-accent);
    --btn-bg-hover: var(--color-accent-700);

    --shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

h2 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 em { font-weight: 400; }

h3 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

a { color: var(--color-accent-700); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.sheet {
  width: min(1180px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

section { scroll-margin-top: var(--space-6); }

.muted { color: var(--color-neutral-700); }

.rail {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ph {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* — masthead — */

.nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.nav a:not(.brand) {
  color: inherit;
  font-size: 15px;
  text-decoration: none;
}

.nav a:not(.brand):hover { color: var(--color-accent-700); }

.brand {
  margin-right: auto;
  color: inherit;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand span,
.logo span,
.feed-title span { color: var(--color-accent); }

/* The one place rules print: the thick-thin head pair around the dateline. */
.dateline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block: 3px solid var(--color-text);
  border-bottom-width: 1px;
  color: var(--color-text);
}

/* — hero — */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8) calc(var(--section) * 0.8);
}

.hero-copy { padding-top: var(--space-8); }

h1.logo {
  font-size: clamp(120px, 15.5vw, 190px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.tagline {
  margin-top: var(--space-6);
  font-size: clamp(30px, 3.6vw, 44px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lede {
  max-width: 30em;
  margin-top: var(--space-3);
  color: var(--color-neutral-700);
  font-size: 19px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.btn .ph { font-size: 20px; }
.btn-primary { background: var(--btn-bg); color: var(--color-bg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* — the plates: display type printed as misregistered C, M and Y. The three
     multiply to a true black core, with colour fringing only at the edges. They
     need a light sheet under them, so at night the type prints plain. — */

.plates {
  position: relative;
  display: block;
  width: fit-content;
}

.plates .paper { color: var(--color-bg); }

.plate {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.plate-c { color: var(--color-accent); }

.plate-m {
  color: var(--color-accent-2);
  translate: calc(var(--spread, 0.018em) + 0.009em * var(--press-nx, 0)) calc(var(--spread, 0.018em) * 0.7 + 0.006em * var(--press-ny, 0));
}

.plate-y {
  color: var(--color-process-yellow);
  translate: calc(var(--spread, 0.018em) * -0.86 + 0.009em * var(--press-nx, 0)) calc(var(--spread, 0.018em) * -0.64 + 0.006em * var(--press-ny, 0));
}

@media (prefers-color-scheme: dark), (forced-colors: active) {
  .plate { display: none; }
  .plates .paper { color: var(--color-text); }
}

/* — the phone: the app's feed, drawn in the same tokens — */

.phone {
  --blurb-size: 15px;
  --cover-w: 48px;
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 760px;
  margin: 0;
  overflow: hidden;
  border: 9px solid var(--bezel);
  border-radius: 46px;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.screen {
  position: relative;
  height: 100%;
  padding-top: var(--space-8);
  overflow: hidden;
  font-size: 15px;
}

.feed-head { padding: 0 16px 8px; }
.feed-head .rail { display: block; font-size: 10px; }

.feed-title {
  display: block;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.feed-rail {
  display: block;
  padding: 8px 16px 10px;
  font-size: 10px;
}

.trending {
  display: flex;
  gap: 14px;
  padding-inline: 16px;
  overflow: hidden;
}

.trending > div { flex: none; width: 80px; }
.trending .cover { width: 80px; font-size: 34px; }

.trending-name {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feed {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) 16px;
}

.tabbar {
  position: absolute;
  inset: auto 14px 18px;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* The feed fades out under the bar, so text doesn't run behind it. */
.tabbar::before {
  position: absolute;
  inset: -40px -14px -18px;
  z-index: -1;
  background: linear-gradient(transparent, var(--color-bg) 45%);
  content: "";
}

.tabs {
  display: flex;
  flex: 1;
  gap: 2px;
  height: 56px;
  padding: 4px;
  border: 1px solid var(--tab-border);
  border-radius: 999px;
  background: var(--tab-bg);
  color: var(--tab-ink);
  box-shadow: var(--shadow-lg);
}

.tabs span {
  display: grid;
  flex: 1;
  place-items: center;
  border-radius: 999px;
  font-size: 25px;
}

.tabs .on { background: var(--tab-on-bg); color: var(--tab-ink-on); }

.write {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 25px;
  box-shadow: var(--shadow-lg);
}

/* — a blurb: the same article in the phone and on the page — */

.blurb {
  display: grid;
  gap: 8px;
  align-content: start;
}

.blurb-author {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-left: 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 13px;
  line-height: 1.3;
}

.blurb-author strong { font-weight: 600; }
.blurb-author .muted { font-size: 12px; }

.avatar {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.tint-cyan { background: var(--color-accent-200); color: var(--color-accent-800); }
.tint-magenta { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.tint-deep { background: var(--color-accent-400); color: var(--color-accent-900); }
.tint-rose { background: var(--color-accent-2-400); color: var(--color-accent-2-900); }

.title-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.title-line > div { min-width: 0; }

.cover {
  display: grid;
  flex: none;
  width: var(--cover-w, 56px);
  aspect-ratio: 2 / 3;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: calc(var(--cover-w, 56px) * 0.43);
  font-weight: 600;
  line-height: 1;
}

.cover-book { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.cover-music { background: var(--color-accent-100); color: var(--color-accent-800); }
.cover-movie { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* On the book cover's tint against the page, a hairline keeps the edge. */
.cover { box-shadow: inset 0 0 0 1px var(--color-divider); }

.kicker,
.title-name,
.byline { display: block; }

.kicker {
  color: var(--color-accent-700);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.title-name {
  margin-block: 2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.byline {
  color: var(--color-neutral-700);
  font-size: 13px;
  line-height: 1.4;
}

.blurb p {
  font-size: var(--blurb-size, 18px);
  line-height: 1.5;
}

.blurb-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-neutral-700);
  font-size: 21px;
}

.likes {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.2;
}

.likes .ph { font-size: 21px; }

/* — how it works — */

.how { padding-bottom: var(--section); }

.statement {
  font-size: clamp(38px, 6.4vw, 76px);
  letter-spacing: -0.03em;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: calc(var(--space-8) * 1.75) 0 0;
  padding: 0;
  list-style: none;
}

.numeral {
  --spread: 0.036em;
  margin-bottom: var(--space-4);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
}

.steps h3 { margin-bottom: var(--space-2); }
.steps p { max-width: 24em; color: var(--color-neutral-700); }

/* — try it — */

.try {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(var(--space-8) * 1.5);
  padding-bottom: var(--section);
}

.try .rail,
.read > .rail { margin-bottom: var(--space-3); }

.try h2 { margin-bottom: var(--space-3); }

.compose textarea {
  display: block;
  width: 100%;
  min-height: 250px;
  padding: var(--space-4);
  resize: vertical;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  caret-color: var(--color-accent);
  font: inherit;
  font-size: 24px;
  line-height: 1.5;
}

.compose textarea::placeholder { color: var(--color-neutral-700); opacity: 1; }
.compose textarea:hover { border-color: var(--color-divider); }
.compose textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-accent-700);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  background: var(--color-neutral-300);
}

.bar span {
  display: block;
  width: 0;
  height: 100%;
  background: currentColor;
}

.compose.full .meter { color: var(--color-accent-2-700); }

/* — read a few — */

.read { padding-bottom: var(--section); }

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.column {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 calc(var(--space-2) * -1);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.column-head .ph {
  color: var(--color-accent);
  font-size: 22px;
}

/* — closing — */

.closing { padding-bottom: calc(var(--section) * 0.8); }

.closing h2 {
  max-width: 14em;
  font-size: clamp(44px, 8vw, 104px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.closing .rail { margin-top: var(--space-6); color: var(--color-text); }

.footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  color: var(--color-neutral-700);
}

.footer .brand { color: var(--color-text); }

/* — the email confirmation page — */

.confirm {
  min-height: 55vh;
  padding-block: calc(var(--space-8) * 2) var(--section);
}

.confirm [hidden] { display: none; }

.confirm-icon {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: 56px;
}

.confirm-fail .confirm-icon { color: var(--color-accent-2); }

.confirm h1 {
  max-width: 12em;
  margin-bottom: var(--space-4);
  font-size: clamp(44px, 7.5vw, 88px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.confirm p {
  max-width: 30em;
  color: var(--color-neutral-700);
  font-size: 19px;
}

.confirm .actions { margin-top: var(--space-6); }

.confirm .note {
  margin-top: var(--space-4);
  font-size: 15px;
}

/* — narrower sheets — */

@media (max-width: 1000px) {
  :root { --section: 90px; --gutter: 24px; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--space-8) * 1.5);
  }

  h1.logo { font-size: clamp(76px, 23vw, 200px); }

  .hero-copy { padding-top: var(--space-4); }
  .try { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }

  .nav { gap: var(--space-3); flex-wrap: wrap; }
  .nav a:not(.brand) { font-size: 14px; }
  .brand { flex-basis: 100%; }

  .dateline time { display: none; }

  .steps,
  .columns { grid-template-columns: minmax(0, 1fr); }

  .steps { gap: var(--space-8); }
  .columns { gap: calc(var(--space-8) * 1.5); }

  .numeral { font-size: 80px; }
  .compose textarea { font-size: 20px; }
  .lede { font-size: 18px; }
  .phone { height: 720px; }
}

@media (max-width: 400px) {
  .dateline span:last-child { display: none; }
}