/* ============================================================
   Tim Tikhomirov — personal site
   Palette is warm neutral; the only colour is an amber pulled
   from the autumn larches in the hero photograph.
   ============================================================ */

:root {
  /* Declares that both schemes are handled here, which also stops Chrome's
     auto dark mode from force-inverting the palette on top of ours. */
  color-scheme: light dark;

  --bg:          #faf8f5;
  --surface:     #f2eee7;
  --text:        #1a1815;
  --muted:       #6a6357;
  --border:      #e4ddd2;
  --accent:      #a15c1c;
  --accent-weak: #efe3d3;

  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

  /* One type scale: metadata, body, lead, section title, page title. */
  --text-small:   0.875rem;
  --text-body:    1rem;
  --text-lead:    1.1875rem;
  --text-feature: 2.5rem;
  --text-title:   4rem;

  --container: 64rem;   /* 1024px */
  --prose:     36rem;   /* comfortable reading measure */
  --radius:    0.875rem;
  --gutter:    1.75rem;
}

:root[data-theme='light'] { color-scheme: light; }

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg:          #14130f;
  --surface:     #1c1a15;
  --text:        #ebe6dd;
  --muted:       #a09889;
  --border:      #2f2b23;
  --accent:      #e2a765;
  --accent-weak: #2a2318;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:          #14130f;
    --surface:     #1c1a15;
    --text:        #ebe6dd;
    --muted:       #a09889;
    --border:      #2f2b23;
    --accent:      #e2a765;
    --accent-weak: #2a2318;
  }
}

/* ---------- Reset ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; }
p  { margin: 0 0 1.1em; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.topbar.is-scrolled { border-bottom-color: var(--border); }

.topbar__name {
  font-weight: 600;
  font-size: var(--text-small);
  text-decoration: none;
  margin-right: auto;
}

.topbar__nav {
  display: flex;
  gap: 1.4rem;
  font-size: var(--text-small);
  color: var(--muted);
}

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}
.topbar__nav a:hover { color: var(--accent); }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-weak);
}

.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Show the icon for the theme you would switch *to*. */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

:root[data-theme='dark'] .theme-toggle__sun  { display: block; }
:root[data-theme='dark'] .theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__sun  { display: block; }
  :root:not([data-theme='light']) .theme-toggle__moon { display: none; }
}

/* ---------- Shared layout ---------- */

main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

/* Every section opens the same way: a small amber kicker, a serif headline,
   and an optional lead. This is what ties the page together. */
.section__head { max-width: 44rem; margin-bottom: 2.75rem; }

.section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  max-width: none;
}

.section__head--split > div { max-width: 40rem; }

.kicker {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-feature);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead {
  max-width: var(--prose);
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 3rem 0 1.1rem;
  font-size: var(--text-body);
  font-weight: 600;
}

.section__head + .subhead { margin-top: 0; }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
}

.eyebrow a { font-weight: 600; }
.eyebrow span { margin: 0 0.3em; opacity: 0.5; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 20rem;
  align-items: center;
  gap: 4rem;
  padding: 4rem 0 1rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.hero__pitch {
  max-width: 34rem;
  margin-bottom: 1rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.hero__lede {
  max-width: 32rem;
  color: var(--muted);
  font-size: var(--text-body);
  text-wrap: pretty;
}

.hero__figure { margin: 0; }

.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 28px -12px rgb(0 0 0 / 0.22);
}

/* ---------- Buttons ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn--small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: var(--text-small);
}

.btn--primary {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary:hover {
  color: var(--bg);
  background: color-mix(in srgb, var(--accent) 82%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.btn--ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}

.btn--ghost:hover {
  color: var(--accent);
  background: var(--accent-weak);
  border-color: var(--accent);
}

/* ---------- Link row ---------- */

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.35rem;
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
}

.linkrow li { position: relative; }

.linkrow li + li::before {
  content: '';
  position: absolute;
  left: -0.72rem;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--border);
  border-radius: 50%;
}

/* ---------- Work with me ---------- */

.pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pains li {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-body);
  line-height: 1.5;
}

.fit {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}

.deliverables {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}

.deliverables li {
  padding-top: 1rem;
  border-top: 2px solid var(--accent);
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.5;
}

.deliverables strong,
.steps strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
  font-weight: 600;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 1.75rem;
  margin-top: 1.6rem;
}

/* A timeline: one rule runs through the steps, with a dot marking each one.
   The <ol> already tells assistive tech the order, so no numerals needed. */
.steps li {
  position: relative;
  padding: 1.35rem 1.75rem 0 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.steps li::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg);
}

.steps strong { font-size: var(--text-body); }

.stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 2.25rem;
}

.stack p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
}

.whyme {
  max-width: 46rem;
  margin-top: 2.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.whyme p:last-child {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.55;
}

.offer__price {
  max-width: var(--prose);
  margin: 1.9rem 0 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.offer__price strong { color: var(--text); }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--accent-weak);
  border-radius: var(--radius);
}

.cta-band p {
  max-width: 30rem;
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- Bullets ---------- */

.ticks {
  display: grid;
  gap: 0.5rem;
  max-width: 36rem;
  color: var(--muted);
  font-size: var(--text-body);
}

.ticks li,
.role__body li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--muted);
}

.ticks li::before,
.role__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1.5px;
  background: var(--accent);
}

.ticks strong,
.role__body strong { color: var(--text); font-weight: 600; }

/* ---------- Case study card ---------- */

.casecard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  gap: 2.5rem;
  align-items: start;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.casecard h3 {
  margin: 0 0 0.4rem;
  font-size: var(--text-lead);
  line-height: 1.35;
}

.casecard h3 a { text-decoration: none; }
.casecard h3 a:hover { color: var(--accent); }

.casecard__meta {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: var(--text-small);
}

.casecard__meta span { opacity: 0.5; }

.casecard__text > p:not([class]) { color: var(--muted); }

.casecard .ticks { margin-bottom: 1.4rem; }

.casecard__more { margin: 0; font-weight: 600; }

.beforeafter-wrap { min-width: 0; overflow-x: auto; }

.beforeafter {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border-radius: calc(var(--radius) - 0.25rem);
  font-size: var(--text-small);
  font-variant-numeric: lining-nums tabular-nums;
  overflow: hidden;
}

.beforeafter caption {
  padding: 0 0 0.6rem;
  color: var(--muted);
  font-size: var(--text-small);
  text-align: left;
}

.beforeafter th,
.beforeafter td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.beforeafter thead th {
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.beforeafter tbody th { font-weight: 600; }
.beforeafter tbody td { color: var(--muted); }
.beforeafter tbody td:nth-child(n+3) { color: var(--accent); font-weight: 600; }
.beforeafter tbody tr + tr > * { border-top: 1px solid var(--border); }

/* ---------- Pull quote ---------- */

.quote {
  max-width: 44rem;
  margin: 3.5rem 0 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--accent);
}

.quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.quote figcaption {
  max-width: var(--prose);
  color: var(--muted);
  font-size: var(--text-small);
}

.quote__link {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Experience ---------- */

.roles { display: grid; gap: 2.75rem; }

.role {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 2rem;
}

.role__meta { padding-top: 0.2rem; }

.role__dates,
.role__place {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.role__place { opacity: 0.75; }

.role__body h3 {
  margin: 0;
  flex: 1;
  font-size: var(--text-lead);
  transition: color 0.18s ease;
}

/* The one role without a disclosure keeps its own heading spacing. */
.role__body > h3 { margin-bottom: 0.9rem; }

/* Older roles collapse; the current one ships open. */
.role__body > summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
}

.role__body > summary::-webkit-details-marker { display: none; }

.role__body[open] > summary { margin-bottom: 0.9rem; }

.role__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 400;
  transition: color 0.18s ease;
}

.role__more::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}

.role__body[open] .role__more::after {
  margin-top: 0.12rem;
  transform: rotate(-135deg);
}

.role__body > summary:hover h3,
.role__body > summary:hover .role__more {
  color: var(--accent);
}

.role__org {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--text-body);
}

.role__body > p {
  max-width: var(--prose);
  margin-bottom: 0.95rem;
  color: var(--muted);
}

.role__body ul {
  display: grid;
  gap: 0.5rem;
  max-width: 38rem;
}

.role--compact .role__body > p { margin-bottom: 0; }

.role__sub {
  margin: 1.5rem 0 0.7rem;
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Education sits outside the roles list but keeps the same columns and
   bullet styling, so it reads as one more entry rather than a footnote. */
.role--edu {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--border);
}

.role--edu .role__meta { padding-top: 0; }

/* ---------- Off the clock ---------- */

.personal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
}

.card__label {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
}

.card h3 {
  margin-bottom: 0.7rem;
  color: var(--text);
  font-size: var(--text-lead);
}

.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }

.card--music {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.card--music img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: calc(var(--radius) - 0.25rem);
  filter: grayscale(1) contrast(1.04);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tags li {
  padding: 0.2rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
}

/* ---------- Recordings ---------- */

.tracks {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.25rem;
}

.tracks__title {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 600;
}

/* Native controls, which inherit the page's colour-scheme automatically. */
.tracks audio {
  width: 100%;
  height: 2.25rem;
}

/* ---------- Contact ---------- */

.contact {
  padding: 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
}

.contact .section__title { font-size: 3rem; }
.contact .cta-row { margin-top: 1.75rem; }

.contact__email {
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-body);
  overflow-wrap: anywhere;
}

.contact__email a { color: var(--text); font-weight: 600; }

.email-reveal {
  margin-left: 0.4rem;
  padding: 0.45rem 1rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.email-reveal:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-weak);
}

/* ---------- Case study page ---------- */

.article {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 0 0;
}

.backlink {
  margin: 0 0 2.25rem;
  font-size: var(--text-small);
  font-weight: 600;
}

.article h1 {
  max-width: 40rem;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: var(--text-feature);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.article__meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
}

.article__meta span { opacity: 0.5; }

.article section { padding-top: 3rem; }

.article h2 {
  margin: 0 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
}

.article p {
  max-width: var(--prose);
  margin: 0 0 1.1rem;
  color: var(--muted);
}

.article .ticks { max-width: 40rem; }

/* The one-line takeaway of a section, set at full text colour. */
.article .callout {
  max-width: 38rem;
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.5;
}

.article .article__cta {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.article__cta h2 { padding-top: 0; border-top: 0; }
.article__cta .cta-row { margin-top: 1.5rem; }

/* ---------- Data table ---------- */

/* The table can be wider than a phone, so it scrolls inside this box instead of
   making the whole page scroll. tabindex makes it reachable by keyboard. */
.table-scroll {
  max-width: 40rem;
  margin: 0 0 1.75rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

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

.datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: lining-nums tabular-nums;
}

.datatable caption {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-small);
  text-align: left;
}

.datatable th,
.datatable td {
  padding: 0.7rem 1.1rem;
  text-align: left;
  white-space: nowrap;
}

.datatable thead th,
.datatable tbody th {
  color: var(--text);
  font-weight: 600;
}

.datatable tbody td { color: var(--muted); }

.datatable tbody tr + tr th,
.datatable tbody tr + tr td { border-top: 1px solid var(--border); }

.datatable thead tr th { border-bottom: 1px solid var(--border); }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  max-width: var(--container);
  margin: 4rem auto 0;
  padding: 1.75rem var(--gutter) 2.75rem;
  color: var(--muted);
  font-size: var(--text-small);
}

.footer p { margin: 0; }
.footer span[aria-hidden] { margin: 0 0.3em; opacity: 0.5; }

/* ---------- Scroll reveal (opt-in, so no-JS still shows content) ---------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 56rem) {
  :root { --text-title: 3.25rem; --text-feature: 2.1rem; }

  .hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 2.5rem;
  }

  .hero__figure {
    order: -1;
    width: 7rem;
  }

  .hero__pitch, .hero__lede { max-width: none; }

  .pains { grid-template-columns: 1fr; gap: 0.6rem; }
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whyme p:last-child { font-size: var(--text-body); }

  .casecard { grid-template-columns: 1fr; gap: 1.75rem; }

  .role { grid-template-columns: 1fr; gap: 0.75rem; }
  .role__meta { display: flex; gap: 0.4rem; padding-top: 0; }
  .role__place::before { content: '· '; }

  .personal { grid-template-columns: 1fr; }

  .contact { padding: 2rem; }
}

@media (max-width: 40rem) {
  :root { --gutter: 1.25rem; --text-title: 2.75rem; --text-feature: 1.9rem; }

  html { scroll-padding-top: 8rem; }

  .topbar {
    flex-wrap: wrap;
    gap: 0 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .topbar__nav {
    order: 1;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.35rem 1.25rem;
  }

  /* The sticky header must stay two short rows on a phone: the name and theme
     toggle, then three section links (the offer, the proof and the track
     record). Contact and the header booking button are one scroll or one
     hero tap away.
     Needs to out-specify `.topbar__nav a`, which sets display. */
  .topbar__nav a.topbar__nav-wide,
  .topbar__cta { display: none; }

  .hero { padding-top: 1.5rem; }
  .hero__figure { width: 6rem; }
  .hero__pitch { font-size: 1.2rem; }
  .linkrow a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  .section { margin-top: 4rem; padding-top: 2.25rem; }
  .section__head { margin-bottom: 2rem; }
  .lead { font-size: 1.0625rem; }

  .deliverables { grid-template-columns: 1fr; gap: 1.1rem; }

  /* The timeline turns vertical: the rule runs down the left edge. */
  .steps { grid-template-columns: 1fr; row-gap: 0; margin-left: 4px; }
  .steps li { padding: 0 0 1.35rem 1.5rem; border-top: 0; border-left: 1px solid var(--border); }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { top: 0.4em; left: -5px; }

  .whyme { padding: 1.25rem; }

  .cta-band { padding: 1.25rem; }
  .cta-band p { font-size: var(--text-body); }

  .casecard, .card { padding: 1.35rem; }
  .beforeafter th, .beforeafter td { padding: 0.6rem 0.4rem; }
  .beforeafter { font-size: 0.8125rem; }

  .quote { padding-left: 1.1rem; }
  .quote blockquote { font-size: 1.6rem; }

  .card--music { grid-template-columns: 1fr; }
  .card--music img { width: 8rem; }

  .contact { padding: 1.5rem 1.25rem; }
  .contact .section__title { font-size: 2.4rem; }

  .article section { padding-top: 2.25rem; }
  .article .article__cta { padding: 1.35rem; }

  .ticks, .role__body ul { max-width: none; }

  /* Full-width targets are easier to hit, and stop a lone button looking stranded. */
  .cta-row .btn, .cta-band .btn { flex: 1 1 100%; width: 100%; }
  .btn { white-space: normal; }

  .role__body > summary { gap: 0.75rem; }
}

/* ---------- Motion & print ---------- */

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

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

  .js-reveal .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .theme-toggle, .skip-link, .hero__figure, .card--music img,
  .role__more, .email-reveal, .tracks, .cta-band, .cta-row, .whyme { display: none; }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .section { margin-top: 1.5rem; padding-top: 1.5rem; break-inside: avoid; }
  .role { break-inside: avoid; }
  a { text-decoration: none; }
}