/* 01-tokens.css */
/* ── Tokens ─────────────────────────────────────────────────────────────── */
/*
 * anj.am v1.0. Values are the specification's, at the 1440px reference width.
 * Sizes that scale below 1440 use clamp(min, vw, reference) so the vw term
 * lands exactly on the specified pixel value at 1440 and never exceeds it.
 */

:root {
  --bg: #0b0b0c;
  --text: #f2f0eb;        /* primary */
  --text-echo: #b7b5b1;   /* hero second sentence */
  --text-body: #c6c4c0;   /* body and descriptions */
  --text-meta: #a3a19d;   /* dates, footer details */
  --accent: #c9764a;

  --rule: rgba(242, 240, 235, 0.16);
  --rule-strong: rgba(242, 240, 235, 0.28);

  --display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 1216px of content inside 112px margins at 1440. */
  --shell: 90rem;
  --gutter: clamp(1.25rem, 7.78vw, 7rem);

  /* Display sizes. The vw term hits the reference value at 1440px. */
  --size-wordmark: clamp(1.9rem, 3.06vw, 2.75rem);      /* 44 */
  --size-hero: clamp(2.6rem, 6.11vw, 5.5rem);           /* 88 */
  --size-heading: clamp(2.1rem, 4.45vw, 4rem);          /* 64 */
  --size-theme: clamp(1.5rem, 2.36vw, 2.125rem);        /* 34 */
  --size-feature: clamp(1.75rem, 3.06vw, 2.75rem);      /* 44 */
  --size-article: clamp(1.25rem, 1.74vw, 1.5625rem);    /* 25 */

  /* Text sizes are fixed: they are reading sizes, not display sizes. */
  --size-body: 1.0625rem;      /* 17 */
  --size-support: 1.125rem;    /* 18 */
  --size-nav: 0.875rem;        /* 14 */
  --size-link: 0.9375rem;      /* 15 */
  --size-meta: 0.8125rem;      /* 13 */

  --band: clamp(2.25rem, 3.8vw, 3.4rem);
  --ease: cubic-bezier(0.32, 0.72, 0.26, 1);
}

/* 02-base.css */
/* ── Base ───────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.65;
  /* Never fake a weight or a slant; only the loaded faces are used. */
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--text);
  color: var(--bg);
}

.skip:focus { left: 0; }

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Section furniture ──────────────────────────────────────────────────── */

.section { padding-block: var(--band); }

/* The short orange mark above every section heading. */
.mark {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
}

.section .mark { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }

.section__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-heading);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
}

.section__intro {
  margin-top: 0.85rem;
  max-width: 46rem;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

/* ── Article rows, shared by Thinking and Latest ────────────────────────── */

.article + .article { border-top: 1px solid var(--rule); }

.article__link {
  display: block;
  padding-block: 1.15rem;
}

.article:first-child .article__link { padding-top: 0; }

.article__title {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-article);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text);
  text-wrap: balance;
  transition: color 0.25s var(--ease);
}

.article__link:hover .article__title,
.article__link:focus-visible .article__title { color: var(--accent); }

.article__date {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

/* ── The one link style ─────────────────────────────────────────────────── */

.link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--size-link);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  transition: color 0.25s var(--ease);
}

.link:hover,
.link:focus-visible { color: var(--accent); }

/* ── The email field, used twice ────────────────────────────────────────── */

.signup { position: relative; max-width: 40rem; }

.signup__input {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--text);
  padding: 0 0 0.65rem;
  font-family: var(--sans);
  font-size: var(--size-link);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text);
  caret-color: var(--accent);
  transition: border-color 0.25s var(--ease);
}

.signup__input::placeholder { color: var(--text); opacity: 1; }

.signup__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.signup__confirmation {
  margin-top: 0.9rem;
  min-height: 1.2em;
  font-family: var(--sans);
  font-size: var(--size-meta);
  letter-spacing: 0.01em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.signup__confirmation.is-visible { opacity: 1; }

/* 03-masthead-hero.css */
/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-block: clamp(1.25rem, 2.2vw, 2rem);
}

.masthead__inner {
  display: flex;
  /* Centred against the wordmark, as drawn, not sitting on its baseline. */
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-wordmark);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.wordmark__suffix { color: var(--accent); }

.nav ul {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 3.34vw, 3rem);
}

.nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--size-nav);
  line-height: 1.4;
  color: var(--text);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/*
 * Capped and centred at the same width as the shell above it (which the
 * masthead and every section below already use). Below that width this has
 * no effect at all — the hero already fills the viewport. Past it, the
 * whole band — portrait included, since the figure is inset to this box,
 * not the viewport — freezes at exactly what it looks like at 90rem and
 * centres on the page, instead of the portrait chasing the raw window edge
 * while the text stays shell-centred: two reference frames pulling apart
 * the wider the window gets, which is what made the whole hero read as
 * shoved to one side.
 */
.hero {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  min-height: clamp(30rem, 61.4vw, 55.25rem);
  display: flex;
  align-items: center;
  padding-block: clamp(8rem, 12.2vw, 11rem) clamp(2rem, 4vw, 3.5rem);
}

/*
 * The portrait runs past the bottom of the hero, as it does in the approved
 * composition, so the hand and watch sit beside the Thinking heading.
 */
.hero__figure {
  position: absolute;
  inset: 0 0 -7rem 0;
  z-index: 0;
  overflow: hidden;
}

.hero__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

/* The photograph's ground is already the page's ground; this only softens the
   four frame edges so the figure has no boundary. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(11, 11, 12, 0.97) 34%, rgba(11, 11, 12, 0) 62%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(11, 11, 12, 0) 14%),
    linear-gradient(to top, var(--bg) 0%, rgba(11, 11, 12, 0.75) 7%, rgba(11, 11, 12, 0) 26%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.hero__sentence { display: block; }
.hero__line { display: block; }

.hero__sentence--lead { color: var(--text); }
.hero__sentence--echo { color: var(--text-echo); }

.hero .mark { margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 clamp(1.1rem, 1.9vw, 1.6rem); }

.hero__supporting {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--size-support);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* 04-sections.css */
/* ── Thinking ───────────────────────────────────────────────────────────── */

.thinking { position: relative; z-index: 1; padding-top: clamp(2rem, 3.5vw, 3rem); }

.themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 4.2vw, 3.75rem);
}

.theme { padding-right: clamp(1.5rem, 3.4vw, 3rem); }

.theme + .theme {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 3.4vw, 3rem);
}

.theme__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-theme);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}

.theme__description {
  margin-top: 0.6rem;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.theme__articles { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* ── Newsletter line ────────────────────────────────────────────────────── */

.nudge { padding-block: clamp(1rem, 2vw, 1.75rem) clamp(3.5rem, 7vw, 6rem); }

/* ── Second Innings ─────────────────────────────────────────────────────── */

.si {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.si__heading { max-width: 7ch; }

.si__body {
  padding-top: 0.4rem;
  max-width: 46ch;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.si__body p + p { margin-top: 1.05em; }
.si__body .link { margin-top: 1.9rem; }

/* ── Latest ─────────────────────────────────────────────────────────────── */

.latest__split {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  column-gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
  margin-top: clamp(2.25rem, 4.2vw, 3.75rem);
}

.entries {
  border-left: 1px solid var(--rule);
  padding-left: clamp(2rem, 4.5vw, 4rem);
}

.feature__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-feature);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 13ch;
}

.feature__title a { transition: color 0.25s var(--ease); }
.feature__title a:hover,
.feature__title a:focus-visible { color: var(--accent); }

.feature__body {
  margin-top: 1.1rem;
  max-width: 42ch;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.feature__date {
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

/* ── About ──────────────────────────────────────────────────────────────── */

/* Capped and centred at the shell's own width, same as the hero above: the
   plate is positioned against this box's edge, not the viewport's, so past
   90rem the whole section freezes and centres instead of the plate chasing
   the raw window edge while the copy stays shell-centred. */
.about {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
}

.about__copy { max-width: 42ch; }

.about__para {
  margin-top: 1.15rem;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.about__copy .link { margin-top: 1.9rem; }

/* The plate bleeds off the right edge of the viewport, as drawn. */
.about__figure {
  position: absolute;
  top: var(--band);
  right: 0;
  width: min(56%, 51rem);
}

.about__figure img {
  width: 100%;
  height: auto;
}

/* ── The Jam ────────────────────────────────────────────────────────────── */

.jam .signup { margin-top: clamp(2rem, 3.6vw, 3.25rem); max-width: 44rem; }

/* ── Colophon ───────────────────────────────────────────────────────────── */

.colophon {
  padding-block: clamp(2rem, 3.4vw, 3rem) clamp(2.5rem, 4vw, 3.5rem);
}

.colophon__inner {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-top: clamp(2rem, 3.4vw, 3rem);
}

/* The rule stops at the content width, as drawn, rather than bleeding off. */
.colophon__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--rule);
}

.wordmark--footer { font-size: clamp(1.6rem, 2.36vw, 2.125rem); }

.colophon__links {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 3.34vw, 3rem);
}

.colophon__links a,
.colophon__legal {
  font-family: var(--sans);
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

.colophon__links a { transition: color 0.25s var(--ease); }
.colophon__links a:hover,
.colophon__links a:focus-visible { color: var(--accent); }

/*
 * The horizontal rules between articles line up across all three columns even
 * when the descriptions above them wrap to different depths. Subgrid shares
 * the row tracks; without it the columns simply flow on their own.
 */
@supports (grid-template-rows: subgrid) {
  .themes { grid-template-rows: auto auto auto auto; }

  .theme {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .theme__articles {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

/* 05-responsive.css */
/* ── Narrower viewports ─────────────────────────────────────────────────── */
/*
 * The mockup is desktop only, so the calls below are mine. The rule followed
 * throughout: the portrait stops competing with the headline for horizontal
 * room, multi-column blocks become one column, and the vertical dividers
 * become horizontal ones so the structure survives the fold.
 */

@media (max-width: 64rem) {
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }

  .theme:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--rule);
    grid-column: 1 / -1;
    max-width: 34rem;
  }

  .hero__figure { inset: 0 0 -5rem 40%; }
}

@media (max-width: 52rem) {
  /*
   * The masthead comes back into the flow here. On desktop it floats over the
   * hero, which means the hero has to reserve space for it by hand — and any
   * hand-picked value is wrong the moment the nav wraps at a narrower width.
   * In flow, the hero simply starts below whatever height the header is.
   */
  .masthead { position: static; }

  /*
   * The copy then rides up directly under the nav instead of sinking to the
   * bottom of the hero. It sits over the unlit side of the face, which is the
   * point: a tall empty gap above the headline reads worse than the overlap.
   */
  .hero {
    min-height: clamp(19rem, 52vh, 30rem);
    align-items: flex-start;
    padding-block: clamp(1.75rem, 6vw, 3rem) clamp(2.5rem, 6vw, 3.5rem);
  }

  /* Behind the words rather than beside them. The figure runs past the right
     edge, so the hero clips sideways (only sideways: the portrait still runs
     on below it) or the whole page would scroll horizontally on a phone. */
  .hero { overflow-x: clip; }
  .hero__figure { inset: 0 -10% 0 18%; }

  /* The right-fade has to clear fully by 62%, same as desktop's: the headline
     only ever overlaps the figure's left (already-unlit) side, so anything
     short of full transparency past that point just washes out the lit side
     of the face and the hand for no legibility gain. */
  .hero__figure::after {
    background:
      linear-gradient(to right, var(--bg) 0%, rgba(11, 11, 12, 0.92) 20%, rgba(11, 11, 12, 0) 62%),
      linear-gradient(to bottom, var(--bg) 0%, rgba(11, 11, 12, 0) 16%),
      linear-gradient(to top, var(--bg) 0%, rgba(11, 11, 12, 0.7) 10%, rgba(11, 11, 12, 0) 34%);
  }

  /* The desktop gutter grows with the viewport, which is right at 1440 and
     too greedy on a phone: it was squeezing the nav onto two lines. */
  :root { --gutter: 1.375rem; }

  .masthead__inner {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.75rem;
  }

  .nav { width: 100%; }
  .nav ul { flex-wrap: wrap; gap: 0.5rem 1.25rem; }

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

  .theme,
  .theme + .theme,
  .theme:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }

  .theme + .theme {
    border-top: 1px solid var(--rule);
    margin-top: clamp(1.75rem, 5vw, 2.5rem);
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
  }

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

  .si__heading { max-width: none; }
  .si__body { padding-top: 1.25rem; }

  .entries {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: clamp(2rem, 6vw, 2.75rem);
    padding-top: clamp(1.5rem, 4vw, 2rem);
  }

  /* The plate stops bleeding and becomes a full-width band. It sits outside
     the shell, so it is already edge to edge: no negative gutter margins,
     which pushed it past both sides of the screen. */
  .about__figure {
    position: static;
    width: auto;
    margin-top: clamp(2rem, 6vw, 2.75rem);
  }

  .about { padding-bottom: clamp(3rem, 8vw, 4rem); }
}

@media (max-width: 26rem) {
  /* Keeps the four nav items on one line on the narrowest handsets. */
  .nav ul { gap: 0.45rem 1rem; }
}

@media (max-width: 34rem) {
  .colophon__inner { flex-direction: column; align-items: flex-start; }
  .colophon__links { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}

/* 06-writing.css */
/* ── Writing: the Thinking page, articles, not found ────────────────────── */
/*
 * Nothing new is introduced here: the same tokens, the same type scale, the
 * homepage's mark, section heading, article rows and link. Only the reading
 * column is new, and it takes its size and colour from the body copy.
 */

/* Pages without a hero: the masthead sits in the flow rather than over it. */
.masthead--flow { position: static; }

/* The homepage Thinking section's way through to everything. */
.thinking__all { margin-top: clamp(2.25rem, 4.2vw, 3.75rem); }

/* ── The Thinking page ──────────────────────────────────────────────────── */

.writing { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Each group borrows the Second Innings split: name and description on the
   left, the pieces on the right. */
.writing__group {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 4.6vw, 4rem);
  padding-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 2rem;
}

.writing__intro { max-width: 30rem; }

/* ── An article ─────────────────────────────────────────────────────────── */

.entry { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  font-family: var(--sans);
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

.entry__meta a { transition: color 0.25s var(--ease); }
.entry__meta a:hover,
.entry__meta a:focus-visible { color: var(--accent); }

.entry__draft {
  margin-top: 0.25rem;
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.entry__title {
  margin-top: 0.9rem;
  max-width: 18ch;
  text-wrap: balance;
}

.entry__back { margin-top: clamp(2.5rem, 4.4vw, 3.5rem); }

/* ── The reading column ─────────────────────────────────────────────────── */

.prose {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  max-width: 40rem;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.prose > * + * { margin-top: 1.1em; }

.prose h2 {
  margin-top: 2.2em;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--size-theme);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}

.prose h2 + * { margin-top: 0.8em; }

.prose strong { font-weight: 500; color: var(--text); }

/* Inter is loaded upright only. A rare inline emphasis is allowed a synthetic
   slant here rather than loading a fourth face for it. */
.prose em { font-synthesis: style; }

.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--accent); }

/* A wholly italic paragraph in the corpus is a dateline, set as metadata. */
.prose__dateline {
  font-size: var(--size-meta);
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

/* ── More from the section ──────────────────────────────────────────────── */

.entry-more { padding-top: 0; }

.entry-more .shell > .theme__name {
  padding-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid var(--rule);
}

.entry-more .writing__list { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 40rem; }

/* ── Narrower viewports ─────────────────────────────────────────────────── */

@media (max-width: 52rem) {
  .writing__group { grid-template-columns: minmax(0, 1fr); }
  .writing__group .writing__list { margin-top: clamp(1.5rem, 4vw, 2rem); }
}

/* 07-garage-guides.css */
/* ── Garage, guides, and the form states they share ─────────────────────── */
/*
 * As with the writing pages: the existing tokens and pieces, nothing new in
 * the type scale or palette.
 */

/* ── Form replies ───────────────────────────────────────────────────────── */

/* Replies come from the server now, so a refusal needs to read differently
   from a thank-you: primary text rather than accent. */
.signup__confirmation.is-error { color: var(--text); }

/* Turnstile stays invisible unless Cloudflare needs a click; when it does,
   it sits under the line it belongs to. */
.signup__challenge:not(:empty) { margin-top: 1rem; }

/* ── /garage/ ───────────────────────────────────────────────────────────── */

.garage { padding-bottom: clamp(3rem, 6vw, 5rem); }

.garage__intro {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-body);
}

.garage__intro p + p { margin-top: 1.05em; }
.garage__intro .link { margin-top: 1.9rem; }

/* The picture sits in the content column, at whatever ratio it arrives in,
   so the new hero can drop in without layout changes. */
.garage__figure {
  max-width: var(--shell);
  margin: clamp(2.5rem, 4.6vw, 4rem) auto 0;
  padding-inline: var(--gutter);
}

.garage__figure img { width: 100%; height: auto; }

.garage-entries { padding-top: 0; }

.garage-entries .shell > .theme__name {
  padding-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid var(--rule);
}

.garage-entries .writing__list { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 40rem; }

/* ── /guides/<id>/ ──────────────────────────────────────────────────────── */

.guide { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.guide__form { margin-top: clamp(2.25rem, 4vw, 3.25rem); max-width: 40rem; }

.guide__optin {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  font-size: var(--size-link);
  line-height: 1.5;
  color: var(--text-body);
  cursor: pointer;
}

.guide__optin input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}

/* The site's one link style, on a button. */
.guide__submit {
  margin-top: 1.75rem;
  background: none;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: var(--accent);
  padding-inline: 0;
  cursor: pointer;
}

.guide__submit:disabled { opacity: 0.6; cursor: progress; }

.guide__related {
  margin-top: clamp(2.5rem, 4.4vw, 3.5rem);
  font-size: var(--size-link);
  color: var(--text-meta);
}

.guide__related a {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  transition: color 0.25s var(--ease);
}

.guide__related a:hover,
.guide__related a:focus-visible { color: var(--accent); }

/* ── Analytics consent ──────────────────────────────────────────────────── */

/* A quiet bar along the bottom: the page's own ground, a rule above, the
   metadata size for the sentence and the one link style for the choices.
   Not a modal: the page stays usable while it is up. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
  padding-block: 1rem 1.1rem;
}

.consent[hidden] { display: none; }

.consent__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  flex-wrap: wrap;
}

.consent__text {
  max-width: 46rem;
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-body);
}

.consent__actions { display: flex; gap: 1.75rem; }

.consent__button {
  background: none;
  border-width: 0 0 2px;
  border-style: solid;
  border-color: var(--accent);
  padding: 0 0 0.35rem;
  cursor: pointer;
}

.consent__button--quiet { border-color: var(--rule-strong); }

/* In the footer, dressed as the footer's other links. */
.colophon__consent {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.colophon__consent:hover,
.colophon__consent:focus-visible { color: var(--accent); }

/* ── Privacy links ──────────────────────────────────────────────────────── */

.consent__more,
.guide__privacy a { color: var(--text); border-bottom: 1px solid var(--accent); transition: color 0.25s var(--ease); }
.consent__more:hover, .consent__more:focus-visible,
.guide__privacy a:hover, .guide__privacy a:focus-visible { color: var(--accent); }
.consent__more { margin-left: 0.35em; }

.guide__privacy {
  margin-top: 1rem;
  font-size: var(--size-meta);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-meta);
}

/* Links in the reading column (the privacy notice uses them). */
.prose a { color: var(--text); border-bottom: 1px solid var(--accent); transition: color 0.25s var(--ease); }
.prose a:hover, .prose a:focus-visible { color: var(--accent); }