/* ─────────────────────────────────────────────────────────────
   Tiny Startup Studio — the whole site is one email.
   Gmail-light chrome: white paper, Roboto, blue links,
   a subject line, a sender row, and pill actions at the bottom.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #FFFFFF;
  --ink: #1F1F1F;        /* primary text */
  --ink-soft: #444746;   /* button labels */
  --ink-mute: #5E5E5E;   /* secondary copy, metadata */
  --ink-faint: #9AA0A6;  /* fine print */
  --link: #0B57D0;       /* gmail blue */
  --line: #E1E3E1;
  --pill-border: #DADCE0;
  --pill-hover: #F1F3F4;
  --badge: #0B57D0;
  --alert: #D93025;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Google Sans', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; vertical-align: middle; }
::selection { background: #C2DBFF; }

/* ── The message ── */
.email {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 92px) 24px clamp(56px, 7vw, 88px);
}

.back {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: clamp(28px, 4vw, 44px);
  color: var(--ink-mute);
  font-size: 14px;
  text-decoration: none;
  border-radius: 999px;
}
.back:hover { color: var(--ink); }

.subject {
  font-size: clamp(30px, 5.4vw, 43px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-bottom: clamp(26px, 4vw, 38px);
  overflow-wrap: break-word;
}

/* ── Sender row ── */
.from-row {
  display: flex; align-items: flex-start; gap: 15px;
  margin-bottom: clamp(30px, 4.5vw, 42px);
}
.avatar {
  flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: #1F1F1F; color: #FFFFFF;
  display: grid; place-items: center;
  font-family: Georgia, serif;
  font-size: 25px; line-height: 1;
  user-select: none;
}
.avatar.daemon {
  background: var(--alert);
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 24px;
}
.from-meta { flex: 1; min-width: 0; padding-top: 2px; }
.from-name { font-size: 14.5px; line-height: 1.45; overflow-wrap: break-word; }
.from-name b { font-weight: 700; }
.from-name .addr { color: var(--ink-mute); font-weight: 400; }
.to-line {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-mute);
}
.to-line .caret { font-size: 9px; transform: translateY(1px); }
.date {
  flex: none;
  font-size: 13.5px; color: var(--ink-mute);
  white-space: nowrap; padding-top: 4px;
}

/* ── Body copy ── */
.body > * + * { margin-top: clamp(20px, 3vw, 26px); }
.body a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
}
.body a:hover { text-decoration-thickness: 2px; }
.body ul {
  list-style: disc;
  padding-left: 30px;
  display: grid;
  gap: 13px;
}
.body li { padding-left: 4px; }
.body li::marker { color: var(--ink); }
.body b, .body strong { font-weight: 550; }
.body s { color: var(--ink-mute); }

/* 404: the bounce diagnostic */
.bounce {
  border-left: 3px solid var(--line);
  padding: 6px 4px 6px 18px;
  color: var(--ink-mute);
  font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  overflow-x: auto;
}

/* ── Action pills ── */
.actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 13px;
  margin-top: clamp(38px, 6vw, 60px);
}
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 12px 23px;
  background: var(--paper);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.pill:hover { background: var(--pill-hover); }
.pill svg { flex: none; color: var(--ink-mute); }
.pill.round { width: 47px; height: 47px; padding: 0; }
.pill .new {
  position: absolute; top: -10px; right: -7px;
  background: var(--badge); color: #FFFFFF;
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  line-height: 1;
  padding: 4px 9px 5px;
  border-radius: 999px;
}

/* ── Fine print ── */
.fineprint {
  margin-top: clamp(52px, 8vw, 84px);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Small screens ── */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .date { display: none; }
  .avatar { width: 42px; height: 42px; font-size: 22px; }
  .body ul { padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}