/* BRAKING.news — v0.1
   Modern editorial. Minimal interface. Premium feel. A late-night writers' room.
   Identity before polish: this is intentionally restrained. Warm paper, real ink,
   one quiet brake-light accent. No banners. No urgency. No tabloid.
*/

:root {
  /* Paper & ink */
  --paper: #faf8f4;
  --paper-edge: #f1ede4;
  --ink: #1c1a17;
  --ink-soft: #5a554c;
  --ink-faint: #938c7f;
  --rule: #e4ded2;

  /* One accent. The brake light. Used sparingly, never as a banner. */
  --brake: #d8422a;

  /* Character voices — quiet name-tag accents, not loud labels */
  --fred: #c07a1e;      /* comedian — warm amber   */
  --kremlin: #4b7d4f;   /* raccoon   — snack green  */
  --bit: #2f6bab;       /* engineer  — steady blue  */
  --synth: #7a5aa6;     /* creative  — soft violet  */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 720px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17150f;
    --paper-edge: #201d16;
    --ink: #f3efe6;
    --ink-soft: #b9b2a4;
    --ink-faint: #837c6e;
    --rule: #2e2a20;
    --brake: #ff6a4d;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Atmosphere: a sense of place, not decoration ----------
   Three quiet layers sit behind everything: the base (the body color), an
   almost-imperceptible paper grain, and a very faint editorial grid. A warm
   desk-lamp glow rests behind the masthead, above those layers. CSS only —
   no JS, no animation, no heavy assets — and none of it touches text contrast:
   the layers are fixed, behind the content, and effectively invisible unless
   you go looking. The room should simply feel a little more inhabited. */

/* Layer 2 — paper grain. A lightweight SVG fractal-noise tile, barely there,
   with no obvious repeat. Overlay blend lets it soften the flat background
   without lightening or darkening it overall. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Layer 3 — editorial grid. Faint column + baseline guides, like newspaper
   layout construction lines. Alpha is baked in at ~3–4% of the ink colour, so
   the lines are never bright; most visitors will never consciously notice it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 119px,
      color-mix(in srgb, var(--ink) 2.6%, transparent) 119px,
      color-mix(in srgb, var(--ink) 2.6%, transparent) 120px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--ink) 1.7%, transparent) 31px,
      color-mix(in srgb, var(--ink) 1.7%, transparent) 32px
    );
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.room {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 96px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Masthead ---------- */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.masthead__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

/* Layer 4 — masthead lighting. A soft, warm radial glow, like a desk lamp
   resting behind the publication name. Warm amber (never blue/sci-fi), sits
   above the atmosphere layers but behind the text, and stays gentle enough to
   read as light rather than an effect. */
.masthead__brand::before {
  content: "";
  position: absolute;
  left: -58px;
  top: -50px;
  width: 404px;
  max-width: 96vw;
  height: 224px;
  background: radial-gradient(
    64% 144% at 24% 32%,
    color-mix(in srgb, var(--fred) 20%, transparent) 0%,
    color-mix(in srgb, var(--fred) 6.5%, transparent) 48%,
    transparent 78%
  );
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}

.wordmark {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.wordmark__dot {
  color: var(--brake);
}

.tagline {
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

.masthead__session {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  padding-bottom: 4px;
}

.session__light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brake);
  box-shadow: 0 0 0 0 rgba(216, 66, 42, 0.5);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(216, 66, 42, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(216, 66, 42, 0);
  }
}

/* ---------- Welcome (first-visit orientation) ---------- */
/* Hospitality, not marketing: a few quiet lines that set the mental model,
   then step aside for returning visitors (JS adds .welcome--returning). */
.welcome {
  padding: 26px 0 2px;
}

.welcome__lede {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.welcome__sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}

/* Returning visitors: the orientation folds away, only the quiet door stays. */
.welcome--returning {
  padding: 16px 0 0;
}

.welcome--returning .welcome__lede,
.welcome--returning .welcome__sub {
  display: none;
}

/* ---------- Meet the Newsroom (optional, inline reveal) ---------- */
.meet {
  margin-top: 16px;
}

.meet__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  width: fit-content;
  padding: 4px 0;
  transition: color 0.16s ease;
}

.meet__toggle::-webkit-details-marker {
  display: none;
}

.meet__toggle::after {
  content: "→";
  transition: transform 0.18s ease;
}

.meet__toggle:hover {
  color: var(--brake);
}

.meet[open] .meet__toggle::after {
  transform: rotate(90deg);
}

.meet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 18px;
}

.cast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Portrait placeholder — sized and shaped for real artwork later. Dropping an
   <img> in place of .cast__emoji needs no layout change. */
.cast__portrait {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.cast__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Each name tag carries its quiet character accent. */
.cast--fred .cast__portrait { border-color: color-mix(in srgb, var(--fred) 55%, var(--rule)); }
.cast--bit .cast__portrait { border-color: color-mix(in srgb, var(--bit) 55%, var(--rule)); }
.cast--synth .cast__portrait { border-color: color-mix(in srgb, var(--synth) 55%, var(--rule)); }
.cast--kremlin .cast__portrait { border-color: color-mix(in srgb, var(--kremlin) 55%, var(--rule)); }

.cast__name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 1px 0 3px;
}

.cast--fred .cast__name { color: var(--fred); }
.cast--bit .cast__name { color: var(--bit); }
.cast--synth .cast__name { color: var(--synth); }
.cast--kremlin .cast__name { color: var(--kremlin); }

.cast__line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.4;
}

.cast__bio {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 560px) {
  .meet__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- The desk (input) ---------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.desk {
  padding: 40px 0 8px;
}

.desk__prompt {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.desk__form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.desk__input {
  flex: 1 1 320px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-edge);
  /* A slightly firmer resting border + a whisper of inset shadow so the field
     reads as "start here" at a glance — without going brighter. */
  border: 1px solid color-mix(in srgb, var(--ink) 15%, var(--rule));
  box-shadow: inset 0 1px 2px rgba(28, 26, 23, 0.05);
  border-radius: var(--radius);
  padding: 14px 16px;
  resize: none;
  /* The auto-grow script sizes the box to its content, so an internal
     scrollbar is never needed (and looks broken on a single line). */
  overflow: hidden;
  /* Tall enough that a two-line placeholder/prompt fits at rest without
     clipping; the auto-grow script still expands from here. */
  min-height: 80px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.desk__input::placeholder {
  color: var(--ink-faint);
}

.desk__input:focus {
  outline: none;
  border-color: var(--brake);
  box-shadow: 0 0 0 3px rgba(216, 66, 42, 0.14);
}

.desk__submit {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: var(--radius);
  /* Slightly trimmer than the input so it reads as the action, not a second
     panel — sits naturally beside the field it belongs to. */
  padding: 15px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, opacity 0.18s ease, background 0.18s ease;
}

.desk__submit:hover {
  transform: translateY(-1px);
}

.desk__submit:active {
  transform: translateY(0);
}

.desk__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Once there's something to ask, the button lifts into a quiet ready state —
   a soft brake-toned glow, nothing flashy. */
.desk__submit--ready:not(:disabled) {
  box-shadow: 0 2px 12px rgba(216, 66, 42, 0.18);
}

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

.desk__hint {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin: 18px 2px 6px;
  min-height: 22px;
  transition: color 0.2s ease;
}

.desk__hint--error {
  color: var(--brake);
}

/* Quiet text control to leave the current thread and start something new. */
.desk__newtopic {
  display: none;
  margin: 12px 2px 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.desk__newtopic:hover {
  color: var(--brake);
}

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

.desk__newtopic--show {
  display: inline-block;
}

/* ---------- Continue rail (bottom conversation input) ---------- */
/* Conversation-flow decision: after the room speaks, the next reply box lives
   right where the reader's eyes already are — no scrolling back to the top desk.
   The top desk starts a NEW meeting; this rail continues the CURRENT one.
   Intentional, not duplicate UI. See docs/PROJECT_DECISIONS.md (017). */
.continue {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.continue--show {
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.continue__label {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* The reply box's playful placeholders run a little long; 16px lets them read
   comfortably on one line (and avoids iOS zoom on the follow-up field). */
#continue-input {
  font-size: 16px;
}

.continue .desk__newtopic {
  display: inline-block;
  margin-top: 14px;
}

/* ---------- On the Wire (suggested stories) ---------- */
.wire {
  padding: 18px 0 4px;
}

.wire__label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 2px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wire__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brake);
  flex: 0 0 auto;
}

.wire__list {
  display: flex;
  flex-direction: column;
}

/* Not a button — a story pinned to the whiteboard. Each row reads as an
   editorial headline (Apple News / NYT / The Atlantic), the whole row is
   clickable, and hover is a soft highlight, not a UI press. */
.wire__story {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 10px 15px 4px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.16s ease, padding-left 0.16s ease;
}

/* Close the board with a rule top and bottom, so it reads as a bounded list. */
.wire__list .wire__story:last-child {
  border-bottom: 1px solid var(--rule);
}

.wire__emoji {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.45;
}

.wire__headline {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-decoration-color: color-mix(in srgb, var(--brake) 55%, transparent);
  text-underline-offset: 3px;
}

.wire__story:hover,
.wire__story:focus-visible {
  background: color-mix(in srgb, var(--paper-edge) 70%, transparent);
  /* A whisper of shift toward the reader — "this is today's story," not a lift */
  padding-left: 10px;
}

.wire__story:hover .wire__headline,
.wire__story:focus-visible .wire__headline {
  text-decoration: underline;
}

.wire__story:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--brake);
}

/* The finished board fades in — one intentional set of headlines, revealed once
   after the board overlay lifts. */
.wire__story--enter {
  animation: wireStoryIn 0.5s ease both;
}

@keyframes wireStoryIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Transcript ---------- */
.transcript {
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.turn {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px);
  animation: rise 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.turn__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  user-select: none;
}

.turn__body {
  flex: 1;
  min-width: 0;
}

.turn__name {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--speaker, var(--ink-soft));
}

.turn__line {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  margin: 0;
}

.turn--fred {
  --speaker: var(--fred);
}
.turn--kremlin {
  --speaker: var(--kremlin);
}
.turn--bit {
  --speaker: var(--bit);
}
.turn--synth {
  --speaker: var(--synth);
}

.turn--fred .turn__avatar {
  border-color: color-mix(in srgb, var(--fred) 40%, var(--rule));
}
.turn--kremlin .turn__avatar {
  border-color: color-mix(in srgb, var(--kremlin) 40%, var(--rule));
}
.turn--bit .turn__avatar {
  border-color: color-mix(in srgb, var(--bit) 40%, var(--rule));
}
.turn--synth .turn__avatar {
  border-color: color-mix(in srgb, var(--synth) 40%, var(--rule));
}

/* The submitted reality, sitting at the top of the transcript like a memo */
.memo {
  border-left: 3px solid var(--brake);
  padding: 4px 0 4px 16px;
  margin-bottom: 6px;
  opacity: 0;
  animation: rise 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.memo__label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 4px;
}

.memo__text {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

/* The room "reacting" indicator */
.reacting {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14.5px;
  padding: 4px 0;
}

/* The rotating newsroom moment cross-fades as it changes — a whisper, not a
   ticker. (JS skips the fade under reduced motion.) */
.reacting__label {
  transition: opacity 0.24s ease;
}

.reacting__dots {
  display: inline-flex;
  gap: 5px;
}

.reacting__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: blink 1.3s ease-in-out infinite;
}

.reacting__dots span:nth-child(2) {
  animation-delay: 0.18s;
}
.reacting__dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ---------- Editorial overlay (the room is preparing) ---------- */
/* Not a modal — a cinematic newsroom state. It dims the page (still visible
   underneath) and holds a confident, slightly theatrical "the room is working"
   moment until the first reply is ready, then fades away like a rising curtain.
   Under reduced motion it snaps on/off with no fade or movement. */

/* While a full-viewport overlay is up, freeze the page behind it so it can't
   drift or scroll (belt-and-suspenders with the fixed overlay on touch). */
.no-scroll {
  overflow: hidden;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.overlay--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlay__card {
  width: min(440px, 100%);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 34px 30px 30px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45);
}

.overlay--show .overlay__card {
  animation: overlayRise 0.5s ease both;
}

.overlay__emoji {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 14px;
}

.overlay__title {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--brake);
  margin: 0 0 10px;
}

.overlay__sub {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.overlay__rule {
  border: none;
  border-top: 1px solid var(--rule);
  width: 70%;
  margin: 20px auto;
}

/* The rotating newsroom moment. A reserved min-height keeps the card from
   twitching as lines of different lengths cycle through. */
.overlay__moment {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  min-height: 1.5em;
  transition: opacity 0.22s ease;
}

.overlay__dots {
  display: inline-flex;
  gap: 6px;
}

.overlay__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: blink 1.3s ease-in-out infinite;
}
.overlay__dots span:nth-child(2) {
  animation-delay: 0.18s;
}
.overlay__dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes overlayRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* A quiet line under a researched exchange: "the room checked the wires." */
.deskcheck {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 2px 2px 0;
  padding-left: 14px;
  position: relative;
  opacity: 0;
  animation: rise 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.deskcheck::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brake) 70%, transparent);
}

/* "📖 Read the reporting →" call to action + the clickable publication-name links. */
.deskcheck__cta {
  color: var(--brake);
  font-weight: 600;
}

.deskcheck__source {
  color: var(--brake);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brake) 35%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.deskcheck__source:hover,
.deskcheck__source:focus-visible {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* ---------- Colophon ---------- */
.colophon {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.colophon__dot {
  opacity: 0.5;
}

/* ---------- Mobile ---------- */
/* Keep the first screen clean: tighter chrome so the input is reachable fast,
   without losing the "room already in session" feeling below it. */
@media (max-width: 600px) {
  .room {
    padding: 0 18px 64px;
  }
  .wordmark {
    font-size: 26px;
  }
  .tagline {
    font-size: 12.5px;
  }
  .masthead {
    padding: 22px 0 16px;
  }
  .desk {
    padding: 22px 0 4px;
  }
  .desk__prompt {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .desk__input {
    /* 16px keeps iOS from auto-zooming the page when the field is focused. */
    font-size: 16px;
    flex-basis: 100%;
  }
  .desk__submit {
    flex: 1 1 100%;
  }
  .desk__hint {
    font-size: 14.5px;
  }
  .wire {
    padding: 14px 0 2px;
  }
  .wire__story {
    padding: 14px 6px 14px 4px;
    gap: 10px;
  }
  .wire__headline {
    font-size: 16.5px;
  }
  .wire__emoji {
    font-size: 15px;
  }
  .continue {
    margin-top: 22px;
    padding-top: 18px;
  }
  .continue__label {
    font-size: 17px;
  }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .turn,
  .memo {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .deskcheck {
    animation: none;
    opacity: 1;
  }
  .deskcheck__source {
    transition: none;
  }
  .continue--show {
    animation: none;
  }
  .session__light,
  .reacting__dots span {
    animation: none;
  }
  .wire__story--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .overlay {
    transition: none;
  }
  .overlay--show .overlay__card {
    animation: none;
  }
  .overlay__moment {
    transition: none;
  }
  .overlay__dots span {
    animation: none;
  }
}