/* Katrina Teresa Analytics. Same palette and type as katrinateresa.com
   (katrina-teresa-site/src/app/globals.css): forest bands, white sections, meadow for contact. */
:root {
  --forest: #2f4a3a;
  --forest-deep: #24392d;
  --espresso: #251c20;
  --white: #ffffff;
  --linen: #f3ede4; /* page ground, same as katrinateresa.com */
  --paper: #fbf8f3; /* raised panels on linen (.com paper) */
  --meadow: #e3eadb;
  --meadow-line: #c5d1b8;
  --accent: var(--forest); /* marks and highlights; dark bands switch it to meadow */
  --cinnamon: #a5582f;
  --cinnamon-ink: #8c4826; /* cinnamon darkened for small text on white (6.8:1) */
  --sage: #a3a584;
  --line: #ddd2c2; /* hairlines on linen (.com border) */
  --ink-soft: #4a4f47; /* secondary text on white and meadow, tinted from forest */
  --on-forest: #f3ede4;
  --on-forest-soft: #cfd6cf; /* secondary text on forest (6.6:1) */
  --error: #9b2c2c;

  --font-heading: "Literata", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 2px;
  --ring: var(--forest);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--sage) var(--linen);
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  caret-color: var(--forest);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}

/* One Literata weight for every heading, at a single optical size, so the
   hero and the small headings read as the same face. */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-optical-sizing: none;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

::selection { background: var(--meadow); color: var(--espresso); }
.band-forest ::selection, .example ::selection { background: var(--accent); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
.band-forest :focus-visible, .band-espresso :focus-visible, .example :focus-visible { outline-color: var(--accent); }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 40rem) {
  .wrap { padding-inline: 2rem; }
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--espresso);
  color: var(--on-forest);
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Bands. Linen: header + hero. Espresso: approach, footer. Forest: contact.
   Dark bands use meadow for marks and highlights. */
.band-linen {
  background: var(--linen);
  color: var(--espresso);
}
.band-linen .header-inner { border-bottom: 1px solid var(--line); }
.band-linen .lede { color: var(--ink-soft); }
.band-linen .text-link { text-decoration-color: rgb(37 28 32 / 0.35); }
.band-linen + .section { border-top: 1px solid var(--line); }
.band-forest {
  --accent: var(--meadow);
  background: var(--forest);
  color: var(--on-forest);
}

/* Header */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
}
.wordmark {
  display: inline-block;
  padding-block: 0.5rem; /* 44px tap height without flex, which would drop the space before "Analytics" */
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark span { color: var(--accent); font-style: italic; }
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* comfortable tap target on tablets too */
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms;
}
.nav-list a:hover { border-bottom-color: var(--accent); }

/* The header is its own bar: it slides away while you scroll down and comes back as soon as you scroll up (main.js). */
.site-header { position: sticky; top: 0; z-index: 20; transition: transform 250ms var(--ease-out); }
.site-header.is-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* Desktop shows "About ▾ · Resources"; phones fold both into one "Menu ▾". */
.nav-narrow { display: none !important; }
@media (max-width: 47.99rem) {
  .nav-wide { display: none !important; }
  span.nav-narrow { display: inline !important; }
  .nav-panel .nav-narrow { display: list-item !important; margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--line); }
  .band-espresso .nav-panel .nav-narrow { border-top-color: rgb(243 237 228 / 0.18); }
}

/* "About" menu: the homepage sections, in a panel under the button. Works as plain <details> without JavaScript. */
.nav-menu { position: relative; }
.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms; }
.nav-menu summary:hover, .nav-menu details[open] summary { border-bottom-color: var(--accent); }
.nav-menu details[open] summary svg { transform: rotate(180deg); }
.nav-menu summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 5;
  display: grid;
  min-width: 12rem;
  padding-block: 0.35rem;
  background: var(--linen);
  border: 1px solid var(--line);
  border-top: 2px solid var(--forest);
}
.nav-list .nav-panel a { display: flex; width: 100%; padding-inline: 1.1rem; border-bottom: 0; }
.nav-list .nav-panel a:hover { color: var(--forest); background: var(--paper); }
.band-espresso .nav-panel { background: var(--espresso); border-color: rgb(243 237 228 / 0.18); border-top-color: var(--accent); }
.band-espresso .nav-list .nav-panel a:hover { color: var(--on-forest); background: rgb(243 237 228 / 0.08); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--on-forest);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.button:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.button:disabled { opacity: 0.6; cursor: progress; }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(243 237 228 / 0.45);
  transition: text-decoration-color 150ms;
}
.text-link:hover { text-decoration-color: currentColor; }


/* Hero */
.hero {
  display: grid;
  gap: 3.5rem 4rem;
  align-items: center;
  padding-block: 4.5rem 6.5rem;
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.1fr 1fr; padding-block: 5.5rem 7.5rem; }
}
.hero h1 {
  max-width: 17ch;
  font-size: clamp(2.5rem, 1.7rem + 3vw, 4.125rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.lede {
  max-width: 34rem;
  margin-block: 1.75rem 2.5rem;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--on-forest-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.hero-visual {
  container-type: inline-size;
}
/* Desktop: the laptop gets the bigger column and runs off the right edge of the screen */
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hero-visual { margin-right: calc(-1 * (max(0px, (100vw - 72rem) / 2) + 2rem) - 4vw); }
}
.band-linen:has(.hero) { overflow-x: clip; }

/* The laptop the mockup plays on: a dark bezel with a 16:10 screen, and a thin keyboard deck below. Flat colour only. */
.lap { display: flex; flex-direction: column; align-items: center; }
.lap-screen {
  width: 88%;
  padding: 1.6cqw 1.6cqw 2.2cqw;
  background: #1c1a19;
  border: 0.25cqw solid #3a3634;
  border-radius: 2cqw 2cqw 0.6cqw 0.6cqw;
}
.lap-screen .mk { aspect-ratio: 16 / 10; }
.lap-base {
  position: relative;
  width: 100%;
  height: 2.2cqw;
  background: #c9c1b4;
  border-radius: 0 0 2cqw 2cqw / 0 0 1.6cqw 1.6cqw;
  box-shadow: 0 2.4cqw 3cqw -1.6cqw rgb(10 20 14 / 0.65);
}
.lap-base::before { /* the lid hinge */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.5cqw;
  background: #a9a093;
}
.lap-base::after { /* the thumb notch */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 0.9cqw;
  translate: -50% 0;
  background: #b3aa9d;
  border-radius: 0 0 1cqw 1cqw;
}

/* Hero mockup: a small DOS window that a cursor clicks through on a loop (mockup.js).
   Everything is sized in em off a container-relative font size, so it scales with the frame. */
.mk {
  --mk-ink: var(--espresso);
  --mk-soft: #6b6a5f;
  --mk-line: #e6ddcf;
  --mk-panel: #ffffff;
  --mk-move: 1.1s;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Smaller relative to the frame than on phones, so the bigger desktop laptop shows more,
     while each letter still renders larger than before */
  font-size: max(1.3cqw, 6.5px);
  line-height: 1.3;
  color: var(--mk-ink);
  background: var(--paper);
  user-select: none;
  cursor: default;
}
.mk svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mk p, .mk ul { margin: 0; }
.mk b { font-weight: 600; }
.mk em { font-style: normal; }

.mk-brand { font-family: var(--font-heading); font-size: 1.15em; }
.mk-brand span { margin-left: 0.4em; font-family: var(--font-body); font-size: 0.75em; color: var(--mk-soft); }
.mk-search {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: 13em;
  padding: 0.3em 0.7em;
  font-size: 0.85em;
  color: var(--mk-soft);
  background: var(--linen);
  border-radius: 999px;
}
.mk-search svg { width: 1em; height: 1em; }

.mk-body { flex: 1; display: flex; min-height: 0; }
.mk-rail {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  width: 8.2em;
  padding: 0.8em 0.5em;
  background: var(--forest);
  color: var(--on-forest-soft);
}
.mk-nav {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.6em;
  border-radius: 3px;
  font-size: 0.92em;
  transition: background-color 300ms, color 300ms;
}
.mk-nav svg { flex: none; width: 1.15em; height: 1.15em; }
.mk-nav b { font-weight: 600; }
.mk-nav.is-on { background: rgb(243 237 228 / 0.14); color: var(--on-forest); }
.mk-nav.is-on svg { color: var(--copper); }
.mk-nav small {
  margin-left: auto;
  min-width: 1.6em;
  padding: 0 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  color: var(--espresso);
  background: var(--copper);
  border-radius: 999px;
}
.mk-fresh { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8em; color: var(--mk-soft); }
.mk-fresh svg { width: 1.1em; height: 1.1em; }
.mk-tag {
  flex: none;
  padding: 0.1em 0.5em;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--linen);
  border-radius: 3px;
}
.mk-tag--bad { color: var(--cinnamon-ink); background: #f5e6dc; }
.mk-sub span { margin-left: 0.6em; font-weight: 400; letter-spacing: 0; text-transform: none; }
.mk-tiles.mk-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.mk-tile--warn b { color: var(--cinnamon-ink); }
.mk-delta { margin-top: 0.2em; font-size: 0.85em; font-style: normal; color: var(--forest); }
.mk-col-head span { margin-left: 0.3em; font-weight: 400; }
.mk-meter { display: flex; flex-direction: column; gap: 0.45em; padding: 0.7em 0.9em; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 3px; }
.mk-meter p { display: flex; align-items: baseline; gap: 0.5em; font-size: 0.9em; color: var(--mk-soft); }
.mk-meter p span { flex: 1; }
.mk-meter b { font-size: 1.3em; color: var(--forest); }
.mk-meter-bar { height: 0.5em; background: var(--linen); border-radius: 999px; overflow: hidden; }
.mk-meter-bar i { display: block; width: 80.3%; height: 100%; background: var(--sage); border-radius: 999px; transition: width 1.2s var(--ease-out); }
.mk-clean.is-saved .mk-meter-bar i { width: 76.75%; background: var(--forest); }
.mk-split { flex: 1; display: grid; grid-template-columns: 1.7fr 1fr; gap: 0.7em; min-height: 0; }
.mk-top { padding: 0.8em; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 3px; }
.mk-top ol { margin: 0.6em 0 0; padding: 0; list-style: none; counter-reset: top; }
.mk-top li { display: flex; gap: 0.5em; padding: 0.45em 0; font-size: 0.9em; counter-increment: top; }
.mk-top li + li { border-top: 1px solid var(--mk-line); }
.mk-top li::before { content: counter(top); width: 1em; color: var(--mk-soft); }
.mk-top span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-top b { color: var(--forest); }

.mk-main { position: relative; flex: 1; min-width: 0; }
.mk-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1em 1.2em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease, visibility 0s 450ms;
}
.mk-view.is-on { opacity: 1; visibility: visible; transition: opacity 450ms ease 150ms, visibility 0s; }
.mk-title { font-family: var(--font-heading); font-size: 1.45em; line-height: 1.1; }
.mk-title span { margin-left: 0.5em; font-family: var(--font-body); font-size: 0.55em; color: var(--mk-soft); }
.mk-sub { font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mk-soft); }

.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.mk-tiles p {
  display: flex;
  flex-direction: column;
  padding: 0.6em 0.8em;
  font-size: 0.85em;
  color: var(--mk-soft);
  background: var(--mk-panel);
  border: 1px solid var(--mk-line);
  border-radius: 3px;
}
.mk-tiles b { font-size: 1.6em; line-height: 1.15; color: var(--forest); }

.mk-flag { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--copper); }
.mk-flag--bad { background: var(--cinnamon); }

.mk-list { display: flex; flex-direction: column; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 3px; }
.mk-list li { display: flex; align-items: center; gap: 0.7em; padding: 0.65em 0.8em; }
.mk-list li + li { border-top: 1px solid var(--mk-line); }
.mk-list small { font-size: 0.85em; color: var(--mk-soft); }
.mk-list span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mk-btn {
  flex: none;
  padding: 0.3em 0.75em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--forest);
  border: 1px solid var(--meadow-line);
  border-radius: 3px;
  transition: background-color 250ms, color 250ms, border-color 250ms, transform 120ms;
}
.mk-btn--solid { color: var(--on-forest); background: var(--forest); border-color: var(--forest); }
.mk-btn.is-done { color: var(--forest); background: var(--meadow); border-color: var(--meadow); }
.mk .is-pressed { transform: scale(0.94); }

.mk-cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; min-height: 0; }
.mk-col { display: flex; flex-direction: column; gap: 0.5em; padding: 0.6em; background: var(--linen); border-radius: 3px; }
.mk-col-head { font-size: 0.8em; font-weight: 600; color: var(--mk-soft); }
.mk-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.5em;
  padding: 0.55em 0.65em;
  font-size: 0.88em;
  background: var(--mk-panel);
  border: 1px solid var(--mk-line);
  border-radius: 3px;
  transition: box-shadow 250ms, transform 250ms;
}
.mk-card span { flex: 1; min-width: 0; }
.mk-card small { display: flex; align-items: center; gap: 0.45em; width: 100%; font-size: 0.85em; color: var(--mk-soft); }
.mk-card u, .mk-who {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  font-size: 0.8em;
  font-weight: 600;
  text-decoration: none;
  color: var(--forest);
  background: var(--meadow);
  border-radius: 50%;
}
.mk-card--done { color: var(--mk-soft); }
.mk-card.is-lifted { z-index: 2; box-shadow: 0 0.8em 1.4em -0.6em rgb(37 28 32 / 0.35); }

.mk-rows { display: flex; flex-direction: column; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 3px; }
.mk-rows li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 0.8em;
  transition: opacity 500ms, background-color 300ms;
}
.mk-rows li + li { border-top: 1px solid var(--mk-line); }
.mk-rows span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rows small { font-size: 0.85em; color: var(--mk-soft); }
.mk-rows b { font-size: 0.85em; color: var(--cinnamon-ink); }
.mk-rows li.is-checked { background: #f7f3ea; }
.mk-rows li.is-gone { opacity: 0.35; }
.mk-rows li.is-gone span { text-decoration: line-through; }
.mk-check {
  width: 1em;
  height: 1em;
  border: 1.5px solid var(--sage);
  border-radius: 2px;
  transition: background-color 200ms, border-color 200ms;
}
.is-checked .mk-check { background: var(--forest); border-color: var(--forest); box-shadow: inset 0 0 0 0.18em var(--mk-panel); }
.mk-sum { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: 0.9em; color: var(--mk-soft); }
.mk-sum-some { display: none; color: var(--mk-ink); }
.mk-sum.has-some .mk-sum-none { display: none; }
.mk-sum.has-some .mk-sum-some { display: inline; }

.mk-chart { flex: 1; display: flex; flex-direction: column; gap: 0.6em; min-height: 0; padding: 0.8em; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 3px; }
.mk-bars { flex: 1; display: flex; align-items: flex-end; gap: 0.6em; min-height: 4em; border-bottom: 1px solid var(--mk-line); }
.mk-bars i {
  position: relative;
  flex: 1;
  height: var(--h);
  background: var(--sage);
  border-radius: 3px 3px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 900ms var(--ease-out);
}
.mk-bars i:nth-child(1) { --h: 34%; }
.mk-bars i:nth-child(2) { --h: 40%; transition-delay: 60ms; }
.mk-bars i:nth-child(3) { --h: 38%; transition-delay: 120ms; }
.mk-bars i:nth-child(4) { --h: 52%; transition-delay: 180ms; }
.mk-bars i:nth-child(5) { --h: 60%; transition-delay: 240ms; }
.mk-bars i:nth-child(6) { --h: 71%; transition-delay: 300ms; }
.mk-bars i:nth-child(7) { --h: 80%; transition-delay: 360ms; }
.mk-bars i:nth-child(8) { --h: 92%; transition-delay: 420ms; background: var(--forest); }
.mk-impact.is-grown .mk-bars i { transform: scaleY(1); }
.mk-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5em);
  padding: 0.35em 0.6em;
  font-size: 0.8em;
  font-style: normal;
  white-space: nowrap;
  color: var(--on-forest);
  background: var(--espresso);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 250ms, transform 250ms;
}
.mk-bars i.is-hover { background: var(--forest-deep); }
.mk-bars i.is-hover .mk-tip { opacity: 1; transform: none; }

.mk-toast {
  position: absolute;
  left: 50%;
  bottom: 1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  font-size: 0.9em;
  white-space: nowrap;
  color: var(--on-forest);
  background: var(--espresso);
  border-radius: 3px;
  opacity: 0;
  transform: translate(-50%, 0.6em);
  transition: opacity 300ms, transform 300ms var(--ease-out);
  pointer-events: none;
}
.mk-toast svg { width: 1.1em; height: 1.1em; color: var(--copper); stroke-width: 2; }
.mk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.mk-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 1.5em;
  height: 1.8em;
  pointer-events: none;
  transition: transform var(--mk-move) cubic-bezier(0.45, 0, 0.25, 1);
}
.mk .mk-cursor path {
  fill: var(--espresso);
  stroke: #fff;
  stroke-width: 1.3;
  /* Press by shrinking the arrow around its tip (2,2 in the viewBox). Scaling the <svg> itself
     would also scale its translate and make the cursor jump toward the corner on every click. */
  transform-origin: 2px 2px;
  transition: transform 120ms ease-out;
}
.mk-cursor.is-down path { transform: scale(0.88); }
.mk-cursor.no-anim { transition: none; }

/* Phones: a bigger base size and an icon-only rail, so the text stays readable. */
@container (max-width: 40rem) {
  .mk { font-size: 1.62cqw; }
}
/* Very small frames only (320px phones): the compact version that hides secondary rows */
@container (max-width: 21.5rem) {
  .mk { font-size: 2.35cqw; }
  .mk-rail { width: auto; }
  .mk-nav b, .mk-nav small, .mk-fresh, .mk-list .mk-tag, .mk-list .mk-who, .mk-sub span, .mk-card .mk-tag { display: none; }
  .mk-search { width: auto; }
  .mk-tiles.mk-tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .mk-tiles--4 p:nth-child(n + 3) { display: none; }
  .mk-delta { display: none; }
  .mk-rows small { display: none; }
  .mk-rows li { grid-template-columns: auto 1fr auto; }
  .mk-split { grid-template-columns: 1fr; }
  .mk-col .mk-card:nth-of-type(3) { display: none; }
  .mk-list li:nth-child(3), .mk-rows li:nth-child(n + 3), .mk-extra { display: none; }
}

/* Task details: slides in over the board when the cursor opens a card, then a comment is typed and posted */
.mk-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  width: 48%;
  padding: 1em 1.1em;
  background: var(--mk-panel);
  border-left: 1px solid var(--mk-line);
  box-shadow: -10px 0 24px -16px rgb(37 28 32 / 0.35);
  transform: translateX(104%);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-detail.is-open { transform: none; }
.mk .mk-toast { z-index: 4; } /* stays in front of the details panel */
@container (max-width: 40rem) {
  .mk-detail { width: 72%; }
}
.mk-detail-head { display: flex; align-items: center; justify-content: space-between; }
.mk-detail-id { display: flex; align-items: center; gap: 0.5em; font-size: 0.85em; color: var(--mk-soft); }
.mk-detail-close { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 4px; color: var(--mk-soft); }
.mk-detail-close svg { width: 1em; height: 1em; }
.mk-detail-close.is-pressed { background: var(--linen); }
.mk-detail-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15em; line-height: 1.2; }
.mk-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45em 1em;
  margin: 0;
  padding: 0.7em 0;
  font-size: 0.85em;
  border-block: 1px solid var(--mk-line);
}
.mk-detail-meta dt { color: var(--mk-soft); }
.mk-detail-meta dd { display: flex; align-items: center; gap: 0.4em; margin: 0; min-width: 0; }
.mk-link { color: var(--forest); text-decoration: underline; text-underline-offset: 0.15em; }
.mk-tag--doing { color: var(--forest); background: var(--meadow); }
.mk-thread { display: flex; flex-direction: column; gap: 0.55em; margin: 0; padding: 0; list-style: none; font-size: 0.85em; }
.mk-thread li { display: flex; align-items: flex-start; gap: 0.5em; line-height: 1.35; }
.mk-thread li b { margin-right: 0.35em; }
.mk-thread li.is-new { animation: mk-pop 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes mk-pop { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
.mk-compose { display: flex; align-items: flex-start; gap: 0.5em; margin-top: auto; }
.mk-input {
  position: relative;
  flex: 1;
  min-height: 2.2em;
  padding: 0.45em 0.6em;
  font-size: 0.85em;
  line-height: 1.35;
  background: var(--mk-panel);
  border: 1px solid #d9cfc1;
  border-radius: 4px;
  transition: border-color 200ms, box-shadow 200ms;
}
.mk-input.is-focus { border-color: var(--forest); box-shadow: 0 0 0 2px rgb(52 85 127 / 0.18); }
.mk-placeholder { position: absolute; left: 0.6em; top: 0.45em; color: var(--mk-soft); pointer-events: none; }
.mk-input.is-focus .mk-placeholder, .mk-input.has-text .mk-placeholder { display: none; }
.mk-caret { display: none; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--mk-ink); animation: mk-blink 1s steps(1) infinite; }
.mk-input.is-focus .mk-caret { display: inline-block; }
@keyframes mk-blink { 50% { opacity: 0; } }

/* Product palette: the mockup wears the web demo's warm theme (domo-ops-os/app/src/brand-web.css, what /demo shows):
   linen ground and dusky blue accent, with a dusky blue rail. The site tokens the rules above use are remapped by role here. */
.hero-visual .mk {
  --mk-rail: #2a3a52;
  --mk-rail-hover: #33465f;
  --mk-rail-active: #3d5373;
  --mk-rail-mark: #a9bfdc;
  --mk-rail-field: #31425a;
  --forest: #34557f;        /* accent: counts, charts, selected, primary action */
  --forest-deep: #284366;
  --on-forest: #ffffff;
  --on-forest-soft: #b6c2d3; /* rail text */
  --copper: #c9922e;        /* at risk */
  --cinnamon: #a33a2a;      /* broken */
  --cinnamon-ink: #a33a2a;
  --espresso: #231c1f;      /* toasts and tooltips, like the app's notices */
  --linen: #efe8dd;         /* sunk surfaces: board columns, tracks, tags */
  --paper: #f3ede4;         /* the app's ground */
  --sage: #aebfd6;          /* lighter chart step */
  --meadow: #e4ebf3;        /* accent-soft */
  --meadow-line: #d4c9b9;
  --ink-soft: #51483f;
  --mk-ink: #2a2422;
  --mk-soft: #6b6158;
  --mk-line: #e7dfd3;
  --mk-panel: #fffcf7;
  --font-heading: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font-body);
}
.hero-visual .mk ::selection { background: #d3deeb; }

/* Rail: brand and search on top, snapshot at the foot, like the app */
.hero-visual .mk-rail {
  width: 9.6em;
  padding: 0.9em 0.6em 0.7em;
  background: var(--mk-rail);
  color: var(--on-forest-soft);
}
.hero-visual .mk-brand {
  display: flex;
  flex-direction: column;
  padding: 0 0.4em 0.7em;
  font-size: 1.15em;
  font-weight: 700;
  color: #f1ebe3;
}
.hero-visual .mk-brand span { margin: 0.1em 0 0; font-size: 0.68em; font-weight: 400; color: var(--on-forest-soft); }
.hero-visual .mk-search {
  width: auto;
  margin-bottom: 0.6em;
  padding: 0.45em 0.6em;
  color: var(--on-forest-soft);
  background: var(--mk-rail-field);
  border: 1px solid #44556d;
  border-radius: 4px;
}
.hero-visual .mk-nav { color: #f1ebe3; border-radius: 4px; }
.hero-visual .mk-nav.is-on { background: var(--mk-rail-active); color: #ffffff; }
.hero-visual .mk-nav.is-on svg { color: #ffffff; }
.hero-visual .mk-nav small { color: #1a1416; background: var(--mk-rail-mark); }
.hero-visual .mk-rail-foot {
  margin-top: auto;
  padding: 0.6em 0.4em 0;
  font-size: 0.78em;
  color: var(--on-forest-soft);
  border-top: 1px solid #44556d;
}

/* Headings in the app's weight */
.hero-visual .mk-title { font-weight: 700; font-size: 1.4em; }
.hero-visual .mk-title span { font-weight: 400; }

/* Stat strip: one joined bar, blue number beside its label */
.hero-visual .mk-tiles { gap: 0; background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 4px; }
.hero-visual .mk-tiles p {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45em;
  border: 0;
  border-left: 1px solid var(--mk-line);
  border-radius: 0;
  color: var(--forest);
}
.hero-visual .mk-tiles p:first-child { border-left: 0; }
.hero-visual .mk-tiles b { font-size: 1.45em; font-weight: 600; }
.hero-visual .mk-tile--warn b { color: var(--forest); }
.hero-visual .mk-delta { flex-basis: 100%; color: #3f6e4f; }

/* States in the app's matched strengths */
.hero-visual .mk-tag--bad { color: #a33a2a; background: #f8e6e0; }
.hero-visual .mk-btn { color: var(--mk-ink); border-color: #d9cfc1; border-radius: 4px; }
.hero-visual .mk-btn--solid { color: #ffffff; }
.hero-visual .mk-btn.is-done { color: #3f6e4f; background: #e7efe5; border-color: #e7efe5; }
.hero-visual .mk-rows li.is-checked { background: #e4ebf3; }
.hero-visual .mk-flag--quiet { background: #bdb2a4; }
.hero-visual .mk-check { border-color: #8a7f73; border-radius: 3px; }

/* Reduced motion: a still Today screen with no cursor (mockup.js doesn't run). */
@media (prefers-reduced-motion: reduce) {
  .mk-cursor { display: none; }
}

/* Sections */
.section { padding-block: 6rem; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: 3.5rem; }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }
h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
h3 { font-size: 1.375rem; }

/* What I Build: a dark forest card (the look the worked example used to have). Heading and promise
   on the left, the kinds of systems as a ruled list on the right. */
.build {
  display: grid;
  gap: 2rem;
  padding: 2rem 1.25rem;
  --accent: var(--meadow);
  color: var(--on-forest);
  background: var(--forest);
  border-radius: 6px;
}
.build h2 { color: var(--on-forest); }
@media (min-width: 48rem) {
  .build { padding: 3rem; }
}
@media (min-width: 56rem) {
  .build { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; padding: 3.5rem; }
}
.build-intro {
  max-width: 30rem;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: #e6ded5;
}
.build-types { border-bottom: 1px solid rgb(243 237 228 / 0.14); }
@media (min-width: 56rem) {
  .build-types { margin-top: 0.6rem; }
}
.build-types > li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-heading);
  font-optical-sizing: none;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.3;
  color: var(--on-forest);
  border-top: 1px solid rgb(243 237 228 / 0.14);
}
.build-types > li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  background: #d98a5c; /* the site's cinnamon, lifted so it reads on forest */
  transform: translateY(-0.15em);
}

/* Featured callout: the worked example stands apart from the list as a contained, dark panel,
   so it reads as a spotlight on the page rather than another section. */
.example {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding: 2rem 1.25rem;
  --accent: var(--meadow);
  color: var(--on-forest);
  background: var(--forest);
  border-radius: 6px;
}
@media (min-width: 48rem) {
  .example { padding: 3rem; }
}
@media (min-width: 56rem) {
  .example { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; margin-top: 5rem; padding: 3.5rem; }
}
.example-label {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.example h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); color: var(--on-forest); }
.example-outcome { max-width: 26rem; margin-top: 1rem; font-size: 1.125rem; line-height: 1.55; color: #e6ded5; }
.example-body { max-width: 28rem; margin-top: 1rem; font-size: 0.9375rem; line-height: 1.6; color: #cfc6bd; }
.example-foot {
  max-width: 26rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-forest-soft);
  border-top: 1px solid rgb(243 237 228 / 0.14);
}

/* The example screen: a small, static slice of the AnalyticsOS app from the hero, in its colors.
   Built like a real detail view: one surface with hairline rows, plain-text status, quiet controls. */
.dx {
  --dx-ink: #2a2422;
  --dx-soft: #6e665d;
  --dx-line: #e7dfd3;
  --dx-accent: #34557f;
  container-type: inline-size;
  overflow: hidden;
  font-family: "Public Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dx-ink);
  background: #efe8dd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 20px 40px -24px rgb(0 0 0 / 0.6);
}
.dx p { margin: 0; }
.dx-bar { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 1.1rem; color: var(--dx-ink); background: #fffcf7; border-bottom: 1px solid var(--dx-line); }
.dx-brand { font-weight: 700; color: var(--dx-accent); }
.dx-place { font-size: 0.9em; color: var(--dx-soft); }
.dx-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 0.9rem; }
.dx-row { padding: 0.9rem 1rem 1rem; background: #fffcf7; border: 1px solid var(--dx-line); border-radius: 3px; }
/* One label role for every panel, same left edge everywhere */
.dx .dx-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--dx-soft); }
.dx-label span { font-weight: 600; color: #3f6e4f; } /* muted "done" green, warmed to sit with the site */
.dx .dx-q { font-size: 0.9375rem; font-weight: 500; line-height: 1.45; }
/* The path: plain names joined by a thin line; the one amber mark is where it broke */
.dx-path { display: flex; align-items: center; gap: 0.6rem; margin: 0.15rem 0 0; }
.dx-path li { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.dx-path li:not(:last-child)::after { content: ""; width: 1.1rem; height: 1px; background: #cbbfae; }
.dx-path li.is-hit { font-weight: 600; color: #7a4a0c; }
.dx-path li.is-hit::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #d9a441; }
/* Narrow screens: the path runs down a thin line instead of across, the amber dot on the line */
@container (max-width: 30rem) {
  .dx-path { flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-left: 0.2rem; border-left: 1px solid #cbbfae; }
  .dx-path li { position: relative; display: block; padding-left: 0.8rem; }
  .dx-path li:not(:last-child)::after { display: none; }
  .dx-path li.is-hit::before { position: absolute; left: -0.27rem; top: 50%; transform: translateY(-50%); }
}
.dx .dx-path + .dx-note { margin-top: 0.6rem; font-size: 0.8125rem; color: #a33a2a; } /* muted "broken" red */
.dx .dx-by { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--dx-soft); }
.dx-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.85rem; }
.dx-btn { padding: 0.3rem 0.75rem; font-size: 0.95em; font-weight: 600; color: var(--dx-ink); border: 1px solid #d9cfc1; border-radius: 3px; }
.dx-btn--go { color: #ffffff; background: var(--dx-accent); border-color: var(--dx-accent); }

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

/* Folding toggles ("How it works", "What's included") */
.more { margin-top: 0.75rem; }
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1rem;
  font-weight: 600;
  color: var(--forest);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms var(--ease-out);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size 200ms var(--ease-out);
}
.more[open] summary::before { background-size: 100% 2px, 2px 0; }
.more summary:hover { background: rgb(226 168 103 / 0.12); }
.more summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.more-body { display: grid; gap: 0.75rem; padding: 1.25rem 0 0.5rem; }
/* Featured: the DOS across the full width, with a strong forest rule instead of a box.
   Heading and promise on the left, detail on the right (stacked on phones). */
.service.service--featured {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.9rem 4rem;
  margin-bottom: 1rem;
  padding: 2.25rem 0 2.5rem;
  border-top: 3px solid var(--forest);
}
.service--featured h3 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); }
/* The promise reads as a subtitle: body font, regular weight, a step up from the detail text */
.service--featured p.service-lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--espresso);
}
.service--featured p { max-width: 36rem; }
@media (min-width: 56rem) {
  .service.service--featured { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .service--featured h3 { grid-column: 1; grid-row: 1; }
  .service--featured p.service-lead { grid-column: 1; grid-row: 2; }
  .service--featured p:not(.service-lead) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Approach */
.band-forest.section, .band-espresso.section { border-top: 0; }
.band-forest .section-head p, .band-espresso .section-head p { color: var(--on-forest-soft); }
.steps {
  display: grid;
  gap: 2.5rem 3rem;
}
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
/* Timeline: a faint track across the steps, a node above each number, and an accent-colored ray
   (bar plus arrowhead) that extends left to right (top to bottom on phones) when the
   section scrolls into view. Drawn by default; main.js only rewinds it when it can play it. */
.timeline {
  --node: 0.875rem;
  --head: 1rem;
  --draw: 1300ms;
  position: relative;
  padding-top: 2.25rem;
}
.timeline::before,
.ray {
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: 0;
  height: 2px;
}
.timeline::before {
  content: "";
  right: 0;
  background: rgb(243 237 228 / 0.2);
}
.ray {
  width: 100%;
  background: var(--accent);
  transition: width var(--draw) linear; /* steady, so each node lights as the tip reaches it */
}
/* Arrowhead riding on the tip */
.ray::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--head) * -0.6);
  width: var(--head);
  height: var(--head);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
}
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  top: -2.25rem;
  left: 0;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--forest);
  transition: transform 450ms var(--ease-out), background-color 300ms;
  transition-delay: calc(var(--at, 0) * var(--draw));
}
/* Where each node sits along the ray, as a share of its length (set by main.js; these are the desktop values) */
.step:nth-child(2) { --at: 0.348; }
.step:nth-child(3) { --at: 0.696; }
.timeline-ready .ray { width: 0; }
.timeline-ready .step::before { transform: scale(0.55); background: rgb(243 237 228 / 0.45); }
.timeline-ready.is-drawn .ray { width: 100%; }
.timeline-ready.is-drawn .step::before { transform: none; background: var(--accent); }

/* Phones: the steps stack, so the ray runs down the left side and points down */
@media (max-width: 51.99rem) {
  .timeline { padding-top: 0; padding-left: 2.25rem; }
  .timeline::before,
  .ray {
    top: 0;
    left: calc(var(--node) / 2 - 1px);
    width: 2px;
    height: auto;
  }
  .timeline::before { right: auto; bottom: 0; }
  .ray { height: 100%; transition-property: height; }
  .ray::after {
    top: auto;
    right: auto;
    bottom: calc(var(--head) * -0.6);
    left: 50%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
  }
  .timeline-ready .ray { width: 2px; height: 0; }
  .timeline-ready.is-drawn .ray { width: 2px; height: 100%; }
  .step::before { top: 0.2rem; left: -2.25rem; }
}
/* Nothing to point with before the ray starts */
.timeline-ready:not(.is-drawn) .ray::after { opacity: 0; }
.step-num {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--on-forest-soft); }
.step p { font-size: 1.0625rem; color: var(--on-forest); }
/* Small secondary line under the steps */
/* The optional Update Plan: set apart under a hairline, lined up with the step columns above */
.plan {
  display: grid;
  gap: 1.25rem 3rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(243 237 228 / 0.16);
}
@media (min-width: 52rem) {
  /* Title across the top, then the description and the list side by side on one baseline */
  .plan { grid-template-columns: repeat(3, 1fr); }
  .plan h3, .plan-note { grid-column: 1 / -1; }
  .plan-body { grid-column: span 2; }
  .plan-items { column-gap: 3rem; }
}
.plan h3 { margin-bottom: -0.4rem; font-size: 1.375rem; color: var(--on-forest); }
.plan-lead { max-width: 22rem; line-height: 1.55; color: var(--on-forest-soft); }
.plan-items { display: grid; gap: 0.9rem 2rem; }
.plan-note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--on-forest-soft); }
@media (min-width: 40rem) {
  .plan-items { grid-template-columns: 1fr 1fr; }
}
.plan-items li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--on-forest);
}
/* A drawn check mark in the accent color */
.plan-items li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.2em;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(40deg);
}

/* About */
.band-forest + .section, .band-espresso + .section { border-top: 0; }
.about {
  display: grid;
  gap: 3rem 5rem;
  align-items: center;
}
@media (min-width: 48rem) {
  .about { grid-template-columns: minmax(14rem, 20rem) 1fr; }
}
/* Always a circle, cropped around the face, so it never changes shape between screen sizes */
.headshot {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  background: var(--meadow);
}
@media (min-width: 48rem) {
  .headshot { width: 100%; max-width: 18rem; }
}
.about-text { max-width: 36rem; }
.about-text h2 { margin-bottom: 1.5rem; }
.about-text p + p { margin-top: 1.25rem; }

/* Contact */
/* Contact sits on the same forest as the featured example */
.band-espresso {
  --accent: var(--meadow);
  --on-forest-soft: #cfc6bd; /* secondary text on espresso */
  color: var(--on-forest);
  background: var(--espresso);
}
.section.band-espresso { border-top: 0; }
.band-espresso ::selection { background: var(--accent); color: var(--espresso); }
.contact {
  display: grid;
  gap: 3rem 5rem;
}
@media (min-width: 56rem) {
  .contact { grid-template-columns: 1fr 1.35fr; align-items: start; }
}
.contact-intro h2 { margin-bottom: 1.25rem; color: var(--on-forest); }
.contact-intro p { color: #cfc6bd; max-width: 28rem; }

.contact-form {
  display: grid;
  gap: 1.35rem;
  color: var(--espresso);
  background: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
/* First and last name side by side, once there's room */
.name-pair { display: grid; gap: 1.35rem; }
@media (min-width: 40rem) { .name-pair { grid-template-columns: 1fr 1fr; } }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.4rem;
}
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--espresso);
  background: var(--white);
  border: 1px solid #8a8f7a; /* 3.4:1 against white, meets non-text contrast */
  border-radius: var(--radius);
  transition: border-color 150ms;
}
.field input:hover, .field textarea:hover { border-color: var(--forest); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--error);
}
.field-error:empty { display: none; }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: 1rem 1.15rem;
  border: 1px solid var(--meadow-line);
  border-radius: var(--radius);
  background: var(--meadow);
}
.form-status > :first-child { font-weight: 600; }
.form-status.is-error { border-color: #e2b5ad; background: #f9ece9; }
.form-status.is-success h3 { font-size: 1.375rem; margin-bottom: 0.35rem; }
.form-status p + p { margin-top: 0.35rem; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 2px solid var(--ring); }

/* Footer */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 2.5rem;
  font-size: 0.9375rem;
}
.footer-inner .wordmark { font-size: 1.125rem; }
.footer-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-forest); font-weight: 600; text-decoration-color: rgb(243 237 228 / 0.45); }
.footer-email:hover { text-decoration-color: currentColor; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-forest-soft); text-decoration-color: rgb(243 237 228 / 0.3); }
.footer-legal a:hover { color: var(--on-forest); text-decoration-color: currentColor; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  color: var(--on-forest-soft);
}

@media (max-width: 40rem) {
  .section { padding-block: 4.5rem; }
  .section-head { margin-bottom: 2.5rem; }
  .lede { font-size: 1.125rem; }
  .footer-inner, .footer-links { flex-direction: column; align-items: flex-start; }
  .footer-links p:has(.footer-email) { order: -1; } /* stacked: email first, then the copyright */
}

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

/* Italic heading phrases: letters lift as the pointer passes (wave.js, same as katrinateresa.com) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* A little extra hover room around the phrase, without moving anything */
.kt-wave-hit {
  padding: 0.35em 0.5em;
  margin-inline: -0.5em;
}
.kt-wave-word {
  position: relative; /* letters measure their offsets from their word */
  display: inline-block;
  white-space: nowrap;
}
.kt-wave-char {
  display: inline-block;
  transform-origin: 50% 85%;
}
.is-waving .kt-wave-char { will-change: transform; }

/* ── Phones (under 768px): designed for the device, not a squeezed desktop ── */
@media (max-width: 47.99rem) {
  /* Header: one row, the wordmark and the same two nav items as desktop */
  .header-inner { flex-wrap: nowrap; gap: 1rem; padding-block: 0.75rem; }
  .wordmark { font-size: 1.15rem; white-space: nowrap; }
  .nav-list { flex-wrap: nowrap; gap: 1.25rem; }

  /* Hero: full-width primary action, a real tap target for the secondary */
  .hero { gap: 3rem; padding-block: 2.5rem 4rem; }
  .lede { margin-block: 1.25rem 1.75rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .hero-actions .button { min-height: 3.25rem; font-size: 1.0625rem; }
  .hero-actions .text-link { justify-content: center; min-height: 48px; }

  /* Mockup: the same desktop app in its laptop, running off the right edge like it does on
     desktop, so it stays big enough to read instead of shrinking to fit the phone */
  .hero-visual { margin-inline: -0.5rem; }
  .lap-screen { width: 100%; padding: 2.2cqw 2.2cqw 2.8cqw; }
  .hero-visual .mk { font-size: 2.3cqw; }
  /* A narrower desktop: same sidebar layout, rows reflow instead of everything shrinking */
  .hero-visual .mk-tiles.mk-tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .hero-visual .mk-tiles--4 p:nth-child(n + 3) { border-top: 1px solid var(--mk-line); }
  .hero-visual .mk-tiles--4 p:nth-child(3) { border-left: 0; }
  .hero-visual .mk-list .mk-tag, .hero-visual .mk-rows small, .hero-visual .mk-search { display: none; }
  /* Impact: keep the desktop arrangement (three numbers in a row, chart full width) and drop
     "Most viewed", which leaves the 16:10 screen too short for the chart when stacked */
  .hero-visual .mk-split { grid-template-columns: 1fr; }
  .hero-visual .mk-top { display: none; }
  /* Cleanup: four datasets so the Archive button stays on screen; Work: two columns with room to breathe */
  .hero-visual .mk-rows .mk-extra { display: none; }
  .hero-visual .mk-today .mk-extra { display: none; } /* Today ends after "Needs you" instead of a half-cut list */
  .hero-visual .mk-cols { grid-template-columns: repeat(2, 1fr); }
  .hero-visual .mk-col[data-col="done"] { display: none; }
  .hero-visual .mk-detail { width: 70%; }

  /* About: a real portrait, greeting on one line, story underneath */
  .about { grid-template-columns: 1fr; gap: 2rem; }
  .about-text h2 { margin-bottom: 1rem; font-size: clamp(2rem, 1.2rem + 3.5vw, 2.5rem); }

  .contact-form { padding: 1.25rem; }
}

/* Moving between pages (homepage ⇄ Library) fades the old page out and the new one in instead of cutting, in browsers that support it. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms ease-in both page-out; }
::view-transition-new(root) { animation: 340ms ease-out 160ms both page-in; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }