/* ===========================================================================
   Justin Creasy — styles.css
   Direction: Apple-restrained, builder's notebook.
   Neutral and typographic. No shadows. One accent, used sparingly.
   Order: tokens -> themes -> reset -> elements -> layout -> components -> motion
   ======================================================================== */

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* surfaces + ink */
  --canvas: #FBFBFD;
  --surface: #F2F2F4;
  --ink: #1D1D1F;
  --ink-2: #6E6E73;
  --rule: #D9D9DE;

  /* the single accent: signal vermilion.
     --signal is for graphic and large use only (3.6:1 on canvas).
     --signal-text is the text-safe variant (5.0:1 on canvas). */
  --signal: #E8502A;
  --signal-text: #C2410C;

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --max: 1120px;
  --read: 680px;
  --gutter: 24px;

  /* spacing scale */
  --s1: 4px;   --s2: 8px;    --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;   --s8: 72px;  --s9: 112px; --s10: 160px;

  /* radius: two steps, nothing else */
  --r-media: 20px;
  --r-small: 12px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  /* spring, response 0.28 damping 0.88 — bezier fallback, linear() below */
  --spring-settle: cubic-bezier(0.22, 1, 0.30, 1);

  --t-press: 140ms;
  --t-hover: 200ms;
  --t-reveal: 600ms;
  --t-draw: 900ms;
  --stagger: 70ms;
}

/* The real spring: a sampled solution of a second-order system at
   response 0.28s, damping ratio 0.88. Settles in 245ms, no overshoot. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-settle: linear(
      0, 0.0229, 0.0803, 0.1581, 0.2464, 0.3377, 0.4272, 0.5117, 0.5891,
      0.6585, 0.7196, 0.7724, 0.8175, 0.8555, 0.8871, 0.9131, 0.9342,
      0.9511, 0.9645, 0.975, 0.9831, 0.9892, 0.9938, 0.9971, 1
    );
  }
}

/* --------------------------------------------------------------- themes */

/* Dark is composed, not inverted: the surface step stays one tone from the
   canvas, and the accent lightens so it keeps its weight against black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0B0B0C;
    --surface: #161618;
    --ink: #F5F5F7;
    --ink-2: #A1A1A6;
    --rule: #2C2C2E;
    --signal: #FF6A3D;
    --signal-text: #FF7A50;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0B0B0C;
  --surface: #161618;
  --ink: #F5F5F7;
  --ink-2: #A1A1A6;
  --rule: #2C2C2E;
  --signal: #FF6A3D;
  --signal-text: #FF7A50;
}

/* ---------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--rule) transparent;
  overflow-x: clip;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--signal-text);
}

::selection { background: var(--signal); color: #FFFFFF; }

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

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; }

/* ------------------------------------------------------------- elements */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

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

code, kbd, pre { font-family: var(--mono); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

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

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

.read { max-width: var(--read); }

.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s8); }
.section + .section { padding-top: 0; }

.section-head > :first-child { flex: 0 0 auto; max-width: 100%; }
.section-head {
  display: flex;
  flex-wrap: wrap;               /* a long note drops under the heading on a phone */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s8);
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--canvas);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-small);
  text-decoration: none;
  transition: top var(--t-hover) var(--ease-out);
}
.skip-link:focus { top: var(--s4); }

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

/* ----------------------------------------------------------------- type */

.display {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: -0.011em;
  max-width: 34ch;
}

.body { max-width: 62ch; }
.body + .body { margin-top: var(--s5); }

.meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: 0;
}

.dim { color: var(--ink-2); }

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out);
}
.link:hover { color: var(--signal-text); border-bottom-color: var(--signal-text); }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease-out);
  pointer-events: none;
}
.nav.is-stuck::before { opacity: 1; }

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand:hover { color: var(--ink); }

.mark {
  width: 16px;
  height: 31px;
  overflow: visible;
  flex: 0 0 auto;
}
.mark path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 19.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand__name {
  font-weight: 600;
  letter-spacing: -0.017em;
  font-size: 1rem;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s4), 3vw, var(--s6));
  list-style: none;
  padding: 0;
}

.nav__links a {
  position: relative;
  display: block;
  padding-block: var(--s3);
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color var(--t-hover) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }

.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 1px;
  background: currentColor;
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding-top: clamp(var(--s7), 9vh, 120px);
  padding-bottom: var(--s8);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: auto 1fr;
    gap: clamp(var(--s7), 6vw, 104px);
  }
}

/* The hero mark is the signature object. It is laid out in flow, then
   transformed into the nav logo position by the scrubber in site.js. */
.hero__mark {
  height: clamp(124px, 21vh, 176px);
  width: auto;
}

@media (min-width: 860px) {
  .hero__mark { height: clamp(252px, 40vh, 400px); }
}

.mark-lg { height: 100%; width: auto; overflow: visible; }
.mark-lg path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 19.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__title { max-width: 14ch; }

.hero__lede {
  margin-top: var(--s6);
  max-width: 44ch;
}

/* The one drawn line: a nod to a speaking line, and the only place the
   accent is used as a shape on this page. */
.hero__line {
  margin-top: var(--s7);
  height: 2px;
  width: min(100%, 420px);
  background: var(--signal);
  transform-origin: left center;
  border-radius: 2px;
}

/* ------------------------------------------------- masked title rises */
/* The inner span is created by site.js, so without it a heading is just a
   heading. The padding/negative-margin pair keeps descenders off the mask. */

.rise {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.rise__i { display: block; }

.js .rise .rise__i {
  transform: translateY(105%);
  transition: transform var(--t-draw) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .rise.is-in .rise__i { transform: none; }
.js .hero .rise .rise__i { transition-delay: calc(320ms + var(--i, 0) * 90ms); }

/* ------------------------------------------------------- pointer tilt */

[data-tilt] {
  transform:
    perspective(1000px)
    translate3d(var(--tx, 0px), var(--ty, 0px), 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(var(--sc, 1));
}
[data-tilt].is-settling { transition: transform 420ms var(--spring-settle); }

/* -------------------------------------------------------- media + tiles */

.media {
  background: var(--surface);
  border-radius: var(--r-media);
  overflow: hidden;
  position: relative;
}

.media img {
  width: 100%;
  height: auto;
  transform-origin: center;
}

.media--tall img { aspect-ratio: 1 / 1.25; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  a.media img,
  a:hover .media img { transition: transform var(--t-reveal) var(--ease-out); }
  a:hover .media img { transform: scale(1.025); }
}

.media__caption {
  margin-top: var(--s3);
}

/* ---------------------------------------------------------- demo tiles */
/* The screenshot is the real content and defines the box. JS overlays a
   same-origin iframe on top of it at exactly the same aspect ratio, so the
   upgrade cannot shift the layout. Without JS the screenshot simply stays. */

.demo-tile { position: relative; }

.demo-tile__frame {
  position: absolute;
  inset: 0;
  width: 1600px;
  height: 1000px;
  border: 0;
  display: block;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease-out);
  /* the controls inside are a recording, not a UI */
  pointer-events: none;
}
.demo-tile.is-live .demo-tile__frame { opacity: 1; }

.stage__fig { display: block; }
.stage__fig figcaption { margin-top: var(--s3); }

/* ------------------------------------------------------- running blocks */

.run {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}

.run + .run { margin-top: var(--s9); }

@media (min-width: 860px) {
  .run {
    grid-template-columns: 1.45fr 1fr;
    gap: var(--s7);
  }
  /* Flipped: mirror the tracks too, so the media keeps the wide column. */
  .run--flip { grid-template-columns: 1fr 1.45fr; }
  .run--flip .run__media { order: 2; }
  .run--flip .run__text { order: 1; }
}

.run__text > * + * { margin-top: var(--s4); }
.run__text .body { margin-top: var(--s5); }

.run__facts {
  list-style: none;
  padding: 0;
  margin-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.run__facts li {
  display: flex;
  gap: var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.run__facts dt, .run__facts .k {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  flex: 0 0 5.5rem;
  padding-top: 0.2em;
}
.run__facts .v { flex: 1 1 auto; }

/* --------------------------------------------------------------- stage */
/* Default is two stacked blocks, exactly like .run. On a large screen with
   motion allowed, site.js adds .has-stage and the same markup pins for three
   screens while one shot wipes over the other. */

.stage__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}
.stage__panel + .stage__panel { margin-top: var(--s9); }

@media (min-width: 860px) {
  /* 7 of 12 columns to the media, 5 to the copy: the embedded product UI
     needs the width more than the prose does. */
  .stage__panel { grid-template-columns: 7fr 5fr; gap: var(--s6); }
  .stage__panel--b { grid-template-columns: 5fr 7fr; }
  .stage__panel--b .stage__fig,
  .stage__panel--b > .stage__media { order: 2; }
  .stage__panel--b .stage__copy { order: 1; }
}

.stage__copy > * + * { margin-top: var(--s4); }
.stage__copy .body { margin-top: var(--s5); }
.stage__copy .run__facts { margin-top: var(--s5); }

/* pinned mode */
.has-stage .stage-track { height: 300vh; }

.has-stage .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
}

.has-stage .stage__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  grid-template-columns: 7fr 5fr;
  gap: var(--s6);
}
.has-stage .stage__panel--b { grid-template-columns: 7fr 5fr; z-index: 2; }
.has-stage .stage__panel--b .stage__fig,
.has-stage .stage__panel--b > .stage__media { order: 0; }
.has-stage .stage__panel--b .stage__copy  { order: 0; }

/* the first shot settles in */
.has-stage .stage__panel--a .stage__media {
  --sc: calc(0.86 + 0.14 * var(--a, 0));
  border-radius: calc(28px - 8px * var(--a, 0));
}
/* The two copy blocks hand over rather than cross-dissolve: one is gone
   before the other starts, so the stacked text is never readable twice. */
.has-stage .stage__panel--a .stage__copy {
  opacity: min(var(--a, 0), max(0, calc(1 - var(--w, 0) / 0.45)));
  translate: 0 calc(24px * (1 - var(--a, 0)));
}

/* then the second wipes in from the right */
.has-stage .stage__panel--b .stage__media {
  clip-path: inset(0 0 0 calc(100% - 100% * var(--w, 0)));
}
.has-stage .stage__panel--b .stage__copy {
  --b: max(0, calc((var(--w, 0) - 0.45) / 0.55));
  opacity: var(--b);
  translate: 0 calc(16px * (1 - var(--b)));
}

/* Captions sit outside the wiped tile, so they follow their panel's copy
   through the same hand-off instead of stacking on top of each other. */
.has-stage .stage__panel--a figcaption {
  opacity: min(var(--a, 0), max(0, calc(1 - var(--w, 0) / 0.45)));
}
.has-stage .stage__panel--b figcaption {
  opacity: max(0, calc((var(--w, 0) - 0.45) / 0.55));
}

/* only the visible half takes the pointer */
.has-stage .stage__panel--b .stage__copy { pointer-events: none; }
.has-stage .stage.is-b .stage__panel--b .stage__copy { pointer-events: auto; }
.has-stage .stage.is-b .stage__panel--a .stage__copy { pointer-events: none; }

/* ------------------------------------------------- working on: products */
/* Shoptimal and Sayforth, feature by feature, above the menu-bar app below.
   Each feature is paired with a small specimen of the product's own
   interface, re-created from the way the product's public site displays it
   and showing the same example data. The specimens keep their product's
   palette, type scale and radii inside the frame, as the two demo tiles above
   do. The frame itself is this site's: a hairline and the media radius.
   Deviation, on purpose: both product sites put soft shadows under their
   cards, toggle knobs and search results. This site has no shadows anywhere,
   so the specimens have none. Licensed product fonts are not shipped; the
   system stacks stand in, as in the demo tiles. */

.wk-products > .wk-product + .wk-product {
  margin-top: var(--s9);
  padding-top: var(--s8);
  border-top: 1px solid var(--rule);
}

.wk-product__head,
.wk-product__foot {
  display: grid;
  gap: var(--s5) var(--s7);
}
.wk-product__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
}
.wk-product__id .h3 { margin: 0; }
.wk-product__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.wk-more { margin-top: var(--s5); }

@media (min-width: 900px) {
  .wk-product__head,
  .wk-product__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .wk-product__id { flex-direction: column; gap: var(--s2); }
}

/* the grid of specimens. Rows are shared through subgrid so every frame in a
   row is one height and every caption starts on one line. */
.wk-grid {
  display: grid;
  gap: var(--s7) var(--s5);
  margin-top: var(--s7);
}
.wk-tile {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--s4);
  min-width: 0;
}
@media (min-width: 700px) {
  .wk-grid--2,
  .wk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-grid--3 .wk-tile--wide { grid-column: span 2; }
  @supports (grid-template-rows: subgrid) {
    .wk-tile { grid-row: span 2; grid-template-rows: subgrid; }
  }
}
@media (min-width: 1000px) {
  .wk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wk-tile__copy { max-width: 54ch; padding-right: var(--s4); }
.wk-tile__h {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.wk-tile__copy p {
  margin-top: var(--s1);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* the frame */
.wk-spec {
  position: relative;
  min-width: 0;
  min-height: 300px;
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  overflow: hidden;
  display: grid;
  align-content: center;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
.wk-spec p { margin: 0; max-width: none; }
.wk-spec b, .wk-spec i, .wk-spec em, .wk-spec small { font-style: normal; }
.wk-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* feature rows that stay as text */
.wk-features {
  list-style: none;
  padding: 0;
  margin-top: var(--s7);
  border-top: 1px solid var(--rule);
}
.wk-features li {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.wk-features b { font-weight: 600; }
.wk-features + .wk-product__foot { margin-top: 0; border-top: 0; }

.wk-now__list {
  list-style: none;
  padding: 0;
  max-width: 62ch;
}
.wk-now__list li {
  position: relative;
  padding-left: var(--s4);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.wk-now__list li + li { margin-top: var(--s2); }
.wk-now__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-2);
}

/* ---- Shoptimal specimens: the product's light palette in both themes ---- */
.wk-sh {
  --paper: #ffffff;
  --mist: #f4f6f7;
  --line: #e3e8ee;
  --line-2: #d4dce2;
  --line-faint: #eef2f5;
  --navy: #0a2836;
  --slate: #5f6f79;
  --slate-2: #8795a0;
  --teal: #14b8a6;
  --teal-600: #0f766e;
  --teal-text: #0e8a7d;
  background: var(--mist);
  color: var(--navy);
  padding: 22px;
  gap: 9px;
  font: 400 13px/1.45 var(--sans);
}
.wk-sh b { font-weight: 500; }

/* Store Health: the ring and its four categories */
.wk-sh--score { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; }
.wk-sh-ring { position: relative; width: 112px; height: 112px; display: grid; place-items: center; align-content: center; }
.wk-sh-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wk-sh-ring circle { fill: none; stroke-width: 9; }
.wk-sh-ring .trk { stroke: var(--line); }
.wk-sh-ring .arc { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 84.82; }
.wk-sh-ring b { font-size: 36px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.wk-sh-ring small { font-size: 11px; color: var(--slate-2); }
.wk-sh-cats { display: grid; gap: 10px; }
.wk-sh-cats div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wk-sh-cats span { color: var(--slate); font-size: 12px; white-space: nowrap; }
.wk-sh-cats em { font-size: 12px; white-space: nowrap; }
.wk-sh-cats em i { color: var(--slate-2); }

/* ranked issues */
.wk-sh-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.wk-sh-row i { width: 8px; height: 8px; border-radius: 50%; }
.wk-sh-row .is-red { background: #f87171; }
.wk-sh-row .is-amb { background: #f59e0b; }
.wk-sh-row span { font-weight: 500; line-height: 1.3; }
.wk-sh-math { padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--line-2); }
.wk-sh-math span { font-size: 11px; color: var(--teal-text); }
.wk-sh-math p { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--slate); }

/* the fix */
.wk-sh-diff { display: grid; gap: 7px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wk-sh-lbl { font-size: 11px; font-weight: 500; color: var(--slate-2); }
.wk-sh-del { color: var(--slate-2); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.7); line-height: 1.45; }
.wk-sh-ins { font-size: 14px; font-weight: 500; line-height: 1.45; padding: 8px 10px; margin: 0 -4px; border-radius: 8px; background: rgba(20, 184, 166, 0.1); }
.wk-sh-actions { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.wk-sh-btn { font-weight: 500; font-size: 12px; padding: 8px 14px; border-radius: 999px; background: var(--teal-600); color: #fff; }
.wk-sh-btn.is-ghost { background: var(--paper); color: var(--navy); border: 1px solid var(--line-2); padding: 7px 13px; }
.wk-sh-bulk { margin-left: auto; font-size: 11px; color: var(--slate); }

/* white cards: autopilot, the ledger, the email */
.wk-sh-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.wk-sh-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.wk-sh-card__head b { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.wk-sh-sw { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: var(--teal); }
.wk-sh-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.wk-sh-sw.is-sm { width: 36px; height: 20px; background: var(--teal-600); }
.wk-sh-sw.is-sm::after { top: 2px; right: 2px; width: 16px; height: 16px; }
.wk-sh-fix { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-faint); background: #f8fafc; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #4a5b66; white-space: nowrap; overflow: hidden; }
.wk-sh-fix b { color: #061a23; font-weight: 700; }
.wk-sh-fix .is-done { color: #067a57; font-weight: 700; }
.wk-sh-fix .is-writing { color: var(--teal-600); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.wk-sh-fix .is-writing i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.wk-sh-next { justify-self: start; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--teal-600); background: rgba(20, 184, 166, 0.08); border-radius: 6px; padding: 5px 10px; }
.wk-sh-badge { display: inline-block; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 8px; line-height: 1.3; white-space: nowrap; background: rgba(6, 26, 35, 0.06); color: #4a5b66; }
.wk-sh-badge.is-ok { background: rgba(16, 185, 129, 0.12); color: #067a57; }

/* two specimens in one wide frame */
.wk-sh--pair { gap: 16px; }
@media (min-width: 700px) {
  .wk-sh--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 22px; }
}

/* cart recovery: the sequence and the email it sends */
.wk-sh-seq { display: grid; gap: 6px; min-width: 0; }
.wk-sh-step { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.wk-sh-step span { grid-row: span 2; align-self: center; font-size: 11px; color: var(--teal-text); }
.wk-sh-step small { font-size: 11px; color: var(--slate-2); }
.wk-sh-toggle { display: flex; align-items: center; justify-content: space-between; font-weight: 500; padding: 6px 4px 0; }
.wk-sh-mail { padding: 0; gap: 0; overflow: hidden; }
.wk-sh-mail__from { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-faint); background: #f8fafc; }
.wk-sh-mail__logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #1f4d3d; color: #fff; font-weight: 800; font-size: 12px; }
.wk-sh-mail__word { font-weight: 800; font-size: 13px; letter-spacing: 0.14em; color: #1f4d3d; }
.wk-sh-mail__from .wk-sh-badge { margin-left: auto; }
.wk-sh-mail__body { padding: 16px; display: grid; gap: 12px; }
.wk-sh-mail__h { font-weight: 700 !important; font-size: 17px; letter-spacing: -0.015em; }
.wk-sh-mail__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
.wk-sh-mail__item b, .wk-sh-mail__item span { font-weight: 700; white-space: nowrap; }
.wk-sh-mail__item b { white-space: normal; }
.wk-sh-mail__btn { text-align: center; background: #1f4d3d; color: #fff; font-weight: 700; font-size: 14px; border-radius: 8px; padding: 11px 16px; }

/* the search result with nothing to show */
.wk-sh-serp { background: #fff; border-radius: 14px; border: 1px solid var(--line); padding: 16px 18px; display: grid; gap: 4px; }
.wk-sh-serp__url { font-size: 10.5px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-sh-serp__title { color: #1a0dab; font-size: 17px; line-height: 1.3; }
.wk-sh-serp__rich { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wk-sh-serp__rich i { font-size: 11.5px; padding: 3px 10px; border: 1.5px dashed var(--line-2); border-radius: 999px; color: var(--slate-2); }
.wk-sh-serp__note { margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 1.4; }

/* the ledger, and the chart that marks the day the fixes went live */
.wk-sh-led { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding-top: 10px; border-top: 1px solid var(--line-faint); }
.wk-sh-led .wk-sh-badge { justify-self: start; }
.wk-sh-led b { font-size: 13px; font-weight: 700; line-height: 1.35; color: #061a23; }
.wk-sh-led small { font-size: 12px; line-height: 1.3; color: var(--slate); text-align: right; max-width: 5.5em; }
.wk-sh-search { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 9px; min-width: 0; align-self: stretch; min-height: 200px; }
.wk-sh-search__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
.wk-sh-search__head .wk-mono { font-size: 11px; color: var(--slate-2); font-weight: 400; }
.wk-sh-search__plot { position: relative; min-height: 0; }
.wk-sh-search__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wk-sh-search__plot path { fill: none; vector-effect: non-scaling-stroke; }
.wk-sh-search__plot .grid { stroke: var(--line); stroke-width: 1; }
.wk-sh-search__plot .line { stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wk-sh-search__plot .marker { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 3 4; }
.wk-sh-search__mark { position: absolute; left: 54.5%; top: 0; transform: translateX(-50%); font-size: 10.5px; background: var(--navy); color: #fff; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.wk-sh-search__foot { font-size: 11px; color: var(--slate-2); }

/* ---- Sayforth specimens: paper and teal, on the product's own light and
   dark values, so they follow this site's theme the way sayforth.app follows
   the system's. The listening ground is dark in both. ---- */
.wk-sf {
  --sf-bg: #F5F3EE;
  --sf-ink: #151515;
  --sf-ink2: #5C5A55;
  --sf-rule: #DAD6CC;
  --sf-teal: #0A7F78;
  --sf-track: #CFC9BB;
  --sf-serif: "New York", ui-serif, "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  background: var(--sf-bg);
  color: var(--sf-ink);
  padding: 26px 28px;
  font: 400 14.5px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}
.wk-sf--dark {
  --sf-bg: #141312;
  --sf-ink: #EDEAE3;
  --sf-ink2: #A09A8F;
  --sf-rule: #2E2C28;
  --sf-teal: #4FD8BE;
  --sf-track: #2E2C28;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wk-sf {
    --sf-bg: #141312; --sf-ink: #EDEAE3; --sf-ink2: #A09A8F; --sf-rule: #2E2C28;
    --sf-teal: #4FD8BE; --sf-track: #35322C;
  }
  :root:not([data-theme="light"]) .wk-sf--dark { --sf-bg: #0B0A09; --sf-rule: #34312B; --sf-track: #34312B; }
}
:root[data-theme="dark"] .wk-sf {
  --sf-bg: #141312; --sf-ink: #EDEAE3; --sf-ink2: #A09A8F; --sf-rule: #2E2C28;
  --sf-teal: #4FD8BE; --sf-track: #35322C;
}
:root[data-theme="dark"] .wk-sf--dark { --sf-bg: #0B0A09; --sf-rule: #34312B; --sf-track: #34312B; }

/* the speaking line */
.wk-sl { display: block; width: 100%; height: auto; overflow: visible; }
.wk-sl path { fill: none; }
.wk-sl-track { stroke: var(--sf-track); }
.wk-sl-speech, .wk-sl-main { stroke: var(--sf-teal); stroke-linecap: butt; }
.wk-sl-hedge { stroke: var(--sf-teal); stroke-linecap: round; }
.wk-sl-zone { stroke: var(--sf-ink2); opacity: 0.55; }
.wk-sl-now { stroke: var(--sf-ink); }

.wk-sf-caps { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sf-ink2); }
.wk-sf-caps.is-ink { color: var(--sf-ink); letter-spacing: 0.16em; }
.wk-sf-caps small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sf-ink2); }
.wk-sf-fine { font-size: 12px; color: var(--sf-ink2); }

.wk-sf-evo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wk-sf-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sf-ink); margin-top: 22px; }
.wk-sf-legend > div { padding: 14px 18px 12px 0; border-right: 1px solid var(--sf-rule); }
.wk-sf-legend > div:nth-child(2n) { border-right: 0; padding-left: 18px; padding-right: 0; }
.wk-sf-legend > div:nth-child(-n+2) { border-bottom: 1px solid var(--sf-rule); }
.wk-sf-legend svg { max-width: 150px; height: 22px; }
.wk-sf-legend b { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.wk-sf-legend span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--sf-ink2); }

/* while it is listening */
.wk-sf-prompt { margin-top: 12px !important; font-family: var(--sf-serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.16; letter-spacing: -0.018em; max-width: 20ch !important; text-wrap: balance; }
.wk-sf-live { position: relative; margin-top: 44px; padding-bottom: 20px; }
.wk-sf-zone { position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 10.5px; letter-spacing: 0.04em; color: var(--sf-ink2); white-space: nowrap; }
.wk-sf-state { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 13.5px; color: var(--sf-ink2); }
.wk-sf-state i { width: 8px; height: 8px; border-radius: 50%; background: #FF6B4D; }
.wk-sf-state b { color: var(--sf-ink); font-weight: 600; }

/* the coaching note, as reading rows */
.wk-sf-rows { border-top: 1px solid var(--sf-ink); }
.wk-sf-rows > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--sf-rule); }
.wk-sf-rows p { font-family: var(--sf-serif); font-size: 19px; line-height: 1.22; letter-spacing: -0.014em; }

/* four chapters, as a ruled list */
.wk-sf-chapters { border-top: 1px solid var(--sf-ink); }
.wk-sf-chapters > div { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--sf-rule); }
.wk-sf-chapters .n { font-family: var(--sf-serif); font-size: 28px; line-height: 1; color: var(--sf-ink2); }
.wk-sf-chapters .t { font-family: var(--sf-serif); font-size: 21px; letter-spacing: -0.016em; line-height: 1.12; }
.wk-sf-chapters .t small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sf-ink2); }
.wk-sf-chapters .e { font-size: 12px; color: var(--sf-ink2); text-align: right; }

/* the Season page, at the size it has on the phone */
.wk-sf-season { width: 100%; max-width: 300px; margin-inline: auto; font-size: 13px; }
.wk-sf-season__top { display: flex; align-items: baseline; justify-content: space-between; }
.wk-sf-season__top .wk-sf-caps { font-size: 0.63em; letter-spacing: 0.2em; }
.wk-sf-season__top .wk-sf-fine, .wk-sf-season__foot { font-size: 0.73em; }
.wk-sf-season__foot { margin-top: 1em !important; }
.wk-sf-chap { font-size: 0.6em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.9em 0 0.35em; }
.wk-sf-chap span { color: var(--sf-ink2); letter-spacing: 0.06em; }
.wk-sf-srow { display: flex; align-items: flex-end; gap: 0.5em; height: 1.32em; border-bottom: 1px solid var(--sf-rule); }
.wk-sf-srow--today { border-bottom-color: var(--sf-ink); }
.wk-sf-sday { flex: 0 0 auto; width: 1.5em; font-size: 0.6em; line-height: 2.1; color: var(--sf-ink2); }
.wk-sf-sline { flex: 1 1 auto; min-width: 0; }
.wk-sf-sline .wk-sl { width: 170px; max-width: 100%; height: 10px; }
.wk-sf-hollow { display: block; width: 0.45em; height: 0.45em; margin-bottom: 0.18em; border-radius: 50%; border: 1px solid var(--sf-ink2); }

/* day 1 and day 30, one shared axis */
.wk-sf-compare { display: grid; gap: 18px; }
.wk-sf-compare > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.wk-sf-kvs { margin-top: 22px; border-top: 1px solid var(--sf-ink); }
.wk-sf-kvs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--sf-rule); }
.wk-sf-kvs > div > span:first-child, .wk-sf-kvs i { color: var(--sf-ink2); }
.wk-sf-kvs > div > span:last-child { display: inline-flex; gap: 0.5em; align-items: baseline; }
.wk-sf-kvs b { font-weight: 600; }

@media (max-width: 699px) {
  .wk-spec { min-height: 0; }
  .wk-sh { padding-block: 28px; }
  .wk-sf { padding-block: 30px; }
  .wk-grid { gap: var(--s6); }
}
@media (max-width: 520px) {
  .wk-sh { padding-inline: 18px; }
  .wk-sf { padding-inline: 20px; }
  .wk-sh--score { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .wk-sh-ring { width: 96px; height: 96px; }
  .wk-sh-ring b { font-size: 31px; }
  .wk-sf-rows > div, .wk-sf-compare > div { grid-template-columns: minmax(0, 1fr); }
  .wk-sf-chapters > div { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .wk-sf-chapters .e { grid-column: 2; text-align: left; }
}

/* One moment each, once, when the specimen comes into view: the Store Health
   ring fills to its score, and the speaking line draws left to right, as each
   does on its own site. working.js arms them only when motion is allowed, so
   without JS, and under reduced motion, both are simply complete. */
.wk-armed .wk-sh-ring .arc { stroke-dashoffset: 314.16; }
.wk-armed.wk-live .wk-sh-ring .arc {
  stroke-dashoffset: 84.82;
  transition: stroke-dashoffset 1200ms var(--ease-out) 200ms;
}
.wk-armed .wk-sl-ink { clip-path: inset(-20% 100% -20% 0); }
.wk-armed.wk-live .wk-sl-ink {
  clip-path: inset(-20% 0 -20% 0);
  transition: clip-path 1400ms var(--ease-in-out) 200ms;
}

/* ------------------------------------------------------ the menu-bar app */
/* "What I'm working on". Three blocks in ordinary document flow. The first two
   put copy on one side and the live thing on the other, sides alternating;
   the third puts its copy above a full width screen for the bar. No pinning, no
   wipe, no media tile: what sits beside the copy is the app's own interface,
   ported from the SwiftUI source and running here.

   Those surfaces keep the app's palette, which is Shoptimal's:
     navy   #0A2836   navy deep #061A23   ink 700 #1F323B
     ink500 #4A5B66   ink 300   #7D8B94   ink 200 #A8B4BC
     line   #E3E8EE   sheet     #FFFFFF   mist    #F5F6FA
     teal   #14B8A6   teal dim  #0F766E   success #10B981
     gold   #D8A94A   danger    #EF4444   amber   #F59E0B
   The app sets all of it in Gotham Rounded, which is not a web font here, so
   the system face stands in. Sizes, spacing and radii are the app's own. */

.av__block { display: grid; gap: var(--s6); }

.av__block + .av__block {
  margin-top: var(--s9);
  padding-top: var(--s8);
  border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .av__block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }
  /* The side the live thing sits on alternates down the section. */
  .av__block--flip .av__text { order: 2; }
  .av__block--flip .av__vis { order: 1; }
}

.av__text .h3 + .body { margin-top: var(--s4); }
.av__vis { margin: 0; }
.av__vis figcaption { margin-top: var(--s4); max-width: 46ch; }

.av__status {
  margin-top: var(--s7);
  font-size: 0.9375rem;
  color: var(--ink-2);
  min-height: 1.6em;
  max-width: 62ch;
}

/* --------------------------------------------------------- 1. the day */

.av__day {
  list-style: none;
  padding: 0;
  margin-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.av__day-row { border-bottom: 1px solid var(--rule); }

.js .av__day-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .av__day.is-in .av__day-row { opacity: 1; transform: none; }

.av__day-l {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3) var(--s4);
  /* Body-size labels on an 18px control, padded out to a 44px row. */
  padding-block: var(--s3);
  min-height: 44px;
  cursor: pointer;
  font-size: 1.0625rem;
}
.av__day-l input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}
.av__day-l input:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 4px; }
.av__day-m { white-space: nowrap; }
.av__day-l input:checked ~ .av__day-t {
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* The glass has room of its own to be moved around in. It rests in the middle
   of it; on my screen it rests bottom right and clear of the Dock. */
.av__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  touch-action: none;
}

.av__glass {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--gsize, 300px);
  height: var(--gsize, 300px);
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  translate: var(--gx, 0px) var(--gy, 0px);
  /* The app's own states: 1.06 lifted, 0.93 pressed, on its spring. */
  transition: scale 280ms var(--spring-settle);
}
.av__glass.is-lifted { scale: 1.06; }
.av__glass.is-held { cursor: grabbing; scale: 0.93; }
.av__glass:focus-visible {
  outline: 2px solid var(--signal-text);
  outline-offset: 2px;
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .av__glass:hover { scale: 1.06; }
  .av__glass.is-held:hover { scale: 0.93; }
}
.av__svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------ 2. voice */

.av__hold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s6);
}

.av__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-small);
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  min-height: 56px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color var(--t-hover) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.av__key-cap {
  font-family: var(--mono);
  font-size: 1.125rem;
  min-width: 3.2em;
  text-align: center;
  border: 1px solid var(--rule);
  border-bottom-width: 3px;
  border-radius: 10px;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  transition: border-bottom-width var(--t-press) var(--ease-out),
              background-color var(--t-hover) var(--ease-out);
}
.av__key-label { color: var(--ink-2); font-size: 0.9375rem; }
.av__key:hover { border-color: var(--ink-2); }
.av__key.is-down { transform: translateY(1px); }
.av__key.is-down .av__key-cap { border-bottom-width: 1px; background: var(--rule); }
.av__key:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }

/* The screen the pill flies up into. The ground and the marked screen edge
   are the app's own preview colours: #E9EDF1 with a 2px #9AA7AF edge. */
.app-screen {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 64px;
  min-height: 280px;
  background: #E9EDF1;
  border-radius: var(--r-small);
  font-family: var(--sans);
  line-height: 1.45;
}
.app-screen::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #9AA7AF;
}

/* The app that happens to be in front. */
.app-win {
  background: #FFFFFF;
  border: 1px solid #E3E8EE;
  border-radius: 10px;
  overflow: hidden;
}
.app-win__bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid #E3E8EE;
}
.app-win__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E3E8EE;
}
.app-win__text {
  padding: 10px;
  font-size: 15px;
  color: #0A2836;
  min-height: 5.2em;
}
.app-win__caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.14em;
  background: #0F766E;
  opacity: 0;
}
.app-screen.is-listening .app-win__caret {
  opacity: 1;
  animation: av-blink 1s steps(1, end) infinite;
}
@keyframes av-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* The listening pill: 44 high, a 7px state dot, nine 3px bars in a 78 by 26
   group, 16 either side, white on a hairline. It rises from below the screen
   edge while the key is held and falls straight back out when it comes up.
   The app gives it a shadow; this site has none anywhere, so it has none. */
.app-pill {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid #E3E8EE;
  border-radius: 22px;
  opacity: 0;
  transform: translate(-50%, 56px) scale(0.92, 1.08);
  transform-origin: 50% 100%;
  transition: opacity 120ms var(--ease-out), transform 240ms var(--ease-exit);
}
.app-screen.is-listening .app-pill {
  opacity: 1;
  transform: translate(-50%, 0) scale(1, 1);
  transition: opacity 120ms var(--ease-out), transform 245ms var(--spring-settle);
}
.app-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  flex: 0 0 auto;
}
.app-pill__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 78px;
  height: 26px;
}
.app-pill__bars i {
  display: block;
  width: 3px;
  height: 3px;                    /* three points tall is silence */
  border-radius: 1.5px;
  background: rgba(10, 40, 54, 0.85);
  transition: height 60ms linear;
}

/* ------------------------------------------------- 3. the Chief of Staff */
/* One surface, from the app: a plain white panel
   with a #E3E8EE hairline that comes up out of the bottom edge of the screen,
   centred, 28 above it, min(760, screen - 80) wide. Compact it is 76 high and
   a true stadium; taller, its corner eases to 24. The app gives it a window
   shadow; this site has none anywhere, so it has none.

   The shape is a clip over content that always sits at its full size, pinned
   to the foot, which is how the app does it too: nothing inside is redrawn,
   it is revealed. The hairline is the outer box showing one pixel around the
   inner one, so it follows the clip. */

.av__block--wide { grid-template-columns: minmax(0, 1fr); }
.av__block--wide .av__text { max-width: 62ch; }
.av__block--wide .av__vis figcaption { max-width: 62ch; }

.app-desk {
  container-type: inline-size;
  padding: 0;
  min-height: 580px;
}

/* The glass rests bottom right on the desktop, clear of the bar. */
.app-desk__glass {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: scale 280ms var(--spring-settle);
}
.app-desk__glass:active { scale: 0.93; }
.app-desk__glass:focus-visible { outline: 2px solid #0F766E; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .app-desk__glass:hover { scale: 1.06; }
  .app-desk__glass:active:hover { scale: 0.93; }
}

.app-bar {
  --clip: 0px;
  --rad: 24px;
  --rise: 0px;
  --morph: 0s;
  --curve: cubic-bezier(0.16, 1, 0.30, 1);
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 28px;
  max-width: 760px;
  margin-inline: auto;
  padding: 1px;
  background: #E3E8EE;
  color: #0A2836;
  font-family: var(--sans);
  line-height: 1.3;
  transform: translateY(var(--rise));
  clip-path: inset(var(--clip) 0 0 0 round var(--rad));
  transition: clip-path var(--morph) var(--curve),
              transform var(--morph) var(--curve),
              opacity var(--morph) var(--curve);
}
.app-bar__in {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #FFFFFF;
  clip-path: inset(var(--clip) 0 0 0 round calc(var(--rad) - 1px));
  transition: clip-path var(--morph) var(--curve);
}
.app-bar__in > * { flex: 0 0 auto; }
.app-bar [hidden] { display: none !important; }

.js .app-bar:not(.is-up) { visibility: hidden; }
/* The content acknowledges the arrival a beat after the shape has landed. */
.app-bar__in > * { transition: opacity 260ms var(--ease-out); }
.app-bar.is-arriving .app-bar__in > * { opacity: 0; transition: none; }

.app-bar__rule { height: 1px; background: #E3E8EE; }
.app-bar__gap { flex: 1 1 auto; }

.app-bar button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.app-bar button:focus-visible { outline: 2px solid #0F766E; outline-offset: 2px; }

/* Header: only once there is a conversation. */
.app-bar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.app-bar__dot {
  position: relative;
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #10B981;
  transition: scale 200ms var(--spring-settle);
}
.app-bar__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F59E0B;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.app-bar.is-busy .app-bar__dot::after { opacity: 1; }
.app-bar__dot.is-beat { scale: 1.16; }
.app-bar__who { font-weight: 500; }
.app-bar__clock { font-family: var(--mono); font-size: 11px; color: #7D8B94; }
.app-bar__hist,
.app-bar .app-bar__new { color: #7D8B94; }
.app-bar .app-bar__new { position: relative; }
.app-bar .app-bar__new:hover { color: #0A2836; }
.app-bar .app-bar__x {
  position: relative;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #F5F6FA;
  color: #7D8B94;
}
.app-bar__x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* The app's controls are small. The hit areas here are not. */
.app-bar__new::after,
.app-bar__x::after,
.app-day__refresh::after,
.app-day__disc::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  top: 50%;
  height: 40px;
  transform: translateY(-50%);
}

/* Transcript. */
.app-bar__log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-height: 330px;
  overflow-y: auto;
  padding: 8px 20px;
  scrollbar-width: thin;
}
.app-bar__log > * { flex: 0 0 auto; }
/* With the day asked back mid-conversation, the transcript gives it the room. */
.app-bar.is-pinned .app-bar__log { max-height: 88px; }
.app-msg { max-width: 100%; font-size: 14px; }
.app-msg--me {
  align-self: flex-end;
  padding: 9px 14px;
  border-radius: 18px;
  background: #0A2836;
  color: #FFFFFF;
}
.app-msg--chief { line-height: 1.45; }
.app-msg--receipt {
  margin-top: -8px;
  font-family: var(--mono);
  font-size: 11px;
  color: #7D8B94;
}
.app-msg--note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: #4A5B66;
}
.app-msg--note i {
  width: 6px; height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #F59E0B;
  translate: 0 -1px;
}

.app-steps {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: #F5F6FA;
}
.app-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #0A2836;
  min-width: 0;
}
.app-step.is-in { padding-left: 18px; }
.app-step.is-done { color: #7D8B94; }
.app-step__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-step__i {
  width: 10px; height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid #A8B4BC;
  border-top-color: transparent;
  animation: av-spin 0.8s linear infinite;
}
.app-step.is-done .app-step__i {
  border: 0;
  border-radius: 0;
  animation: none;
  background: none;
  position: relative;
}
.app-step.is-done .app-step__i::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 3px; height: 7px;
  border: solid #10B981;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
@keyframes av-spin { to { transform: rotate(360deg); } }

/* Something that needs me arrives with more weight than a message, states its
   border once, and goes quiet. */
.app-ask {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(245, 158, 11, 0.55);
}
.app-ask.is-answered { border-color: #E3E8EE; }
.app-ask::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  border: 1.8px solid rgba(245, 158, 11, 0.95);
  opacity: 0;
  pointer-events: none;
}
.app-ask.is-new::after { animation: av-mark 460ms 220ms var(--ease-out) 1 both; }
@keyframes av-mark { 0% { opacity: 0; } 39% { opacity: 1; } 100% { opacity: 0; } }
.app-ask__top { display: flex; align-items: center; gap: 7px; }
.app-ask__top svg { width: 11px; height: 13px; flex: 0 0 auto; fill: #B45309; }
.app-ask__title { font-size: 12px; font-weight: 600; }
.app-ask__src { font-size: 10.5px; color: #7D8B94; }
.app-ask__why { font-size: 12.5px; color: #4A5B66; }
.app-ask__what {
  padding: 8px 10px;
  border-radius: 10px;
  background: #F5F6FA;
  font-family: var(--mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.app-ask__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-bar .app-ask__yes,
.app-bar .app-ask__no {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  transition: transform var(--t-press) var(--ease-out);
}
.app-bar .app-ask__yes { font-weight: 600; color: #FFFFFF; background: #0F766E; }
.app-bar .app-ask__no { font-weight: 500; background: #F5F6FA; }
.app-ask__yes:active, .app-ask__no:active { transform: scale(0.97); }
.app-ask__hint, .app-ask__done { font-size: 10.5px; color: #7D8B94; }
.app-ask__done { font-size: 11.5px; }

.app-bar__log > .is-new { animation: av-msg 170ms var(--ease-out) both; }
.app-bar__log > .app-ask.is-new { animation: av-ask 220ms cubic-bezier(0.16, 1, 0.30, 1) both; }
@keyframes av-msg { from { opacity: 0; transform: translateY(5px); } }
@keyframes av-ask { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes av-fade { from { opacity: 0; } }

/* The day at a glance. */
.app-day {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px 4px;
}
.app-day__top { display: flex; align-items: flex-start; gap: 16px; }
.app-day__today { flex: 1 1 0; min-width: 0; }
.app-day__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #7D8B94;
}
.app-day__tasks { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.app-bar .app-day__task {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  text-align: left;
}
.app-bar .app-day__task.is-auto { cursor: default; }
.app-day__circle {
  position: relative;
  width: 13px; height: 13px;
  margin-top: 1.5px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.3px solid #7D8B94;
}
.app-day__task.is-auto .app-day__circle { border-color: #A8B4BC; }
.app-day__task[aria-checked="true"] .app-day__circle { border-color: #10B981; background: #10B981; }
.app-day__task[aria-checked="true"] .app-day__circle::after {
  content: "";
  position: absolute;
  left: 3.4px; top: 1.2px;
  width: 3px; height: 6px;
  border: solid #FFFFFF;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.app-day__words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-day__title,
.app-day__evi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-day__title { font-size: 12.5px; font-weight: 500; color: #1F323B; }
.app-day__evi { font-size: 10.5px; color: #7D8B94; }
.app-day__task[aria-checked="true"] .app-day__title {
  font-weight: 400;
  color: #7D8B94;
  text-decoration: line-through;
}

.app-star {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border: 1px solid #E3E8EE;
  border-radius: 11px;
  background: #FFFFFF;
}
.app-star__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.app-star__pace { font-size: 10px; font-weight: 600; color: #10B981; }
.app-star__num { font-size: 12px; color: #7D8B94; }
.app-star__num b { margin-right: 2px; font-size: 24px; font-weight: 700; color: #1F323B; }
.app-star__track { display: block; height: 5px; border-radius: 999px; background: #E3E8EE; overflow: hidden; }
.app-star__track i { display: block; height: 100%; border-radius: 999px; background: #10B981; }
.app-star__foot { font-size: 10.5px; color: #7D8B94; }

.app-day__attn,
.app-day__rest { display: flex; flex-direction: column; gap: 5px; }
.app-day__rest { gap: 10px; }
.app-day__bullet {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: #4A5B66;
}
.app-day__bullet i {
  width: 5px; height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #D8A94A;
  translate: 0 -2px;
}
.app-day__bullet.is-critical i { background: #EF4444; }
.app-day__bullet.is-ok i { background: #10B981; }
.app-day__bullet.is-quiet i { background: #7D8B94; }
.app-day__streak { font-size: 10.5px; color: #7D8B94; }

.app-day__more { display: flex; align-items: center; gap: 10px; min-height: 18px; white-space: nowrap; }
.app-bar .app-day__disc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: #7D8B94;
}
.app-day__disc span { overflow: hidden; text-overflow: ellipsis; }
.app-day__disc svg {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 170ms var(--ease-out);
}
.app-day__disc[aria-expanded="true"] svg { transform: rotate(90deg); }
.app-day__updated { font-size: 10.5px; color: #7D8B94; }
.app-bar .app-day__refresh { position: relative; font-size: 11px; color: #0F766E; }

/* Folded to a line while I am typing or mid-conversation. */
.app-bar .app-dayline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 9px 20px;
  font-size: 11.5px;
  color: #4A5B66;
  text-align: left;
  white-space: nowrap;
}
.app-bar .app-dayline:focus-visible { outline-offset: -3px; }
.app-dayline > span:first-child { font-weight: 500; }
.app-dayline__attn { color: #D8A94A; }
.app-dayline svg {
  width: 10px; height: 6px;
  flex: 0 0 auto;
  fill: none;
  stroke: #7D8B94;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The input row. */
.app-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 0 18px;
}
.app-bar__circle,
.app-bar .app-bar__circle,
.app-bar__send {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.app-bar__circle,
.app-bar .app-bar__circle { background: #F5F6FA; color: #0A2836; }
.app-bar__send { background: #A8B4BC; color: #FFFFFF; transition: opacity var(--t-hover) var(--ease-out); }
.app-bar__row.is-ready .app-bar__send { background: #0F766E; }
.app-bar__circle svg,
.app-bar__send svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-bar__team svg { width: 18px; height: 14px; fill: currentColor; stroke: none; }
.app-bar__stop svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.app-bar__team, .app-bar__stop { transition: transform var(--t-press) var(--ease-out); }
.app-bar__team:active, .app-bar__stop:active { transform: scale(0.93); }
.app-bar .app-bar__field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 15px;
  color: #7D8B94;
}
.app-bar .app-bar__field.is-asked { color: #0A2836; }
.app-bar.is-busy .app-bar__field { cursor: default; }

/* Narrower than the app ever is: the north star goes under TODAY, and the
   glass moves up out of the bar's way. */
@container (max-width: 980px) {
  .app-desk__glass { bottom: auto; top: 14px; right: 14px; width: 72px; height: 72px; }
}
@container (max-width: 700px) {
  .app-bar { left: 12px; right: 12px; bottom: 20px; }
  .app-day__top { flex-direction: column; align-items: stretch; gap: 12px; }
  .app-star { flex: 0 0 auto; }
  .app-bar__hist { display: none; }
  .app-bar__log { max-height: 300px; }
  .app-bar.is-pinned .app-bar__log { max-height: 48px; }
}
@container (max-width: 460px) {
  .app-bar { left: 8px; right: 8px; bottom: 14px; }
  .app-bar__head, .app-bar__log, .app-day, .app-bar .app-dayline { padding-left: 14px; padding-right: 14px; }
  .app-bar__row { padding: 0 12px; gap: 8px; }
  .app-bar .app-bar__circle--shot { display: none; }
  .app-bar__new span { display: none; }
  .app-day__updated { display: none; }
  .app-ask__hint { flex-basis: 100%; }
}

/* ------------------------------------------------------ shared controls */

.av__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s5);
}

.av__btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-small);
  padding: var(--s3) var(--s4);
  min-height: 44px;
  cursor: pointer;
  transition: color var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
.av__btn:hover { color: var(--ink); border-color: var(--ink-2); }
.av__btn:active { transform: scale(0.97); }
.av__btn:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }

/* Without JavaScript nothing here can run, so nothing that needs it is
   offered. The three blocks and the app's surfaces stay, because they are
   the point. */
html:not(.js) .av__controls,
html:not(.js) .av__hold,
html:not(.js) .av__status,
html:not(.js) .av__day-l input { display: none; }
html:not(.js) .app-bar button,
html:not(.js) .app-desk__glass { pointer-events: none; cursor: default; }
html:not(.js) .av__day-l { cursor: default; }
html:not(.js) .av__glass { cursor: default; }
html:not(.js) .app-win__text [data-av-heard]::after {
  content: "Add a task: check the order confirmation email";
}

@media (prefers-reduced-motion: reduce) {
  .js .av__day-row { opacity: 1; transform: none; }
  .app-step__i { animation: none; }
  .app-bar__log > .is-new,
  .app-bar__log > .app-ask.is-new { animation: av-fade 140ms var(--ease-out) both; }
  .app-ask.is-new::after { animation: none; }
  .app-pill__bars i { transition: none; }
  .app-win__caret { animation: none; }
}

@media (max-width: 900px) {
  .av__stage { max-width: 420px; }
}

@media (max-width: 700px) {
  :root { --gsize: 220px; }
  .av__stage { min-height: 240px; }
  .app-screen { padding: 14px 14px 62px; min-height: 250px; }
  .app-desk { padding: 0; min-height: 660px; }
}

/* --------------------------------------------------------- lead project */

.lead__media { margin-bottom: var(--s7); }

.lead__grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 860px) {
  .lead__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s8); }
}

/* Numbers as sentences on hairlines, not tiles. */
.results {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.results li {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  max-width: 54ch;
}
.results b { font-weight: 600; }

/* --------------------------------------------------------- pair of shots */

.pair {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .pair { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .pair--lean { grid-template-columns: 1.8fr 1fr; align-items: start; }
}

/* The phone shot is cropped to sit close to the height of its neighbour. */
.media--phone img { aspect-ratio: 480 / 760; object-fit: cover; object-position: 50% 0; }

/* -------------------------------------------------------------- rows */

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

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}

.row--media {
  grid-template-columns: 96px 1fr auto;
}

.row__thumb {
  width: 96px;
  border-radius: var(--r-small);
  overflow: hidden;
  background: var(--surface);
}
.row__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.row__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color var(--t-hover) var(--ease-out);
}
.row__note { color: var(--ink-2); font-size: 0.9375rem; }

.row__chev {
  width: 7px; height: 12px;
  color: var(--ink-2);
  flex: 0 0 auto;
}
.row__chev path {
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .row__chev { transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
  .rows:hover .row { transition: opacity var(--t-hover) var(--ease-out); }
  .rows:hover .row:not(:hover) { opacity: 0.55; }
  .row:hover .row__chev {
    transform: translateX(4px);
    transition-timing-function: var(--spring-settle);
    color: var(--signal-text);
  }
  .row:hover .row__title { color: var(--signal-text); }
}

/* ------------------------------------------------------------- writing */

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

.post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.post-row .row__title { max-width: 40ch; }
.post-row time { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
  .posts:hover .post-row { transition: opacity var(--t-hover) var(--ease-out); }
  .posts:hover .post-row:not(:hover) { opacity: 0.55; }
  .post-row:hover .row__title { color: var(--signal-text); }
}

/* ----------------------------------------------------------------- post */

.post { padding-block: var(--s8) var(--s9); }
.post__head { margin-bottom: var(--s8); padding-bottom: var(--s6); border-bottom: 1px solid var(--rule); }
.post__title { margin-top: var(--s4); max-width: 22ch; }

.post__body { font-size: 1.0625rem; }
.post__body > * + * { margin-top: var(--s5); }
.post__body h2 {
  font-size: 1.375rem;
  letter-spacing: -0.018em;
  margin-top: var(--s8);
}
.post__body ul, .post__body ol { padding-left: 1.25em; }
.post__body li + li { margin-top: var(--s2); }
.post__body strong { font-weight: 600; }

.post__body pre {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-small);
  padding: var(--s4) var(--s5);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.65;
  tab-size: 4;
}
.post__body pre code { color: var(--ink); white-space: pre; }

/* Code runs a little wider than the prose measure so real lines fit. */
@media (min-width: 780px) {
  .post__body pre { margin-inline: calc(var(--s5) * -1); }
}
.post__body :not(pre) > code {
  background: var(--surface);
  border-radius: 4px;
  padding: 0.12em 0.34em;
  font-size: 0.875em;
}

.post__body blockquote {
  border-left: 2px solid var(--signal);
  padding-left: var(--s5);
  color: var(--ink-2);
}

.post__body h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.014em;
  margin-top: var(--s7);
}
.post__body h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin-top: var(--s6);
}

.post__body a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out);
}
.post__body a:hover { color: var(--signal-text); border-bottom-color: var(--signal-text); }

.post__body ul ul, .post__body ol ul, .post__body ul ol, .post__body ol ol {
  margin-top: var(--s2);
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.post__body th, .post__body td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.post__body th { font-weight: 600; }
@media (max-width: 640px) {
  .post__body table { display: block; overflow-x: auto; }
}

/* Featured image on a migrated blog post: real size, never upscaled past its
   native pixel width, centered in the reading column. No surface fill - the
   photo carries its own edges, per BRAND.md's "hairlines, not cards". */
.post__media {
  text-align: center;
  margin-bottom: var(--s6);
}
.post__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-media);
  display: inline-block;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.pager a { text-decoration: none; max-width: 22ch; }
.pager .meta { display: block; margin-bottom: var(--s1); }
.pager__next { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------- about */

.about-teaser {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 720px) {
  .about-teaser { grid-template-columns: 260px 1fr; gap: var(--s8); }
}

.portrait {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--surface);
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }

.cv { border-top: 1px solid var(--rule); }
.cv li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .cv li { grid-template-columns: 9.5rem 1fr; gap: var(--s5); align-items: baseline; }
}
.cv ul, .cv { list-style: none; padding: 0; }
.cv .role { font-weight: 600; letter-spacing: -0.012em; }
.cv .where { color: var(--ink-2); font-size: 0.9375rem; }

/* --------------------------------------------------------------- button */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--ink);
  color: var(--canvas);
  border-radius: var(--r-small);
  padding: var(--s3) var(--s5);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out),
              opacity var(--t-hover) var(--ease-out);
}
.btn:hover { color: var(--canvas); opacity: 0.86; }
.btn:active { transform: scale(0.97); }

/* --------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s8);
  margin-top: var(--s7);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s8);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  list-style: none;
  padding: 0;
}
.footer__links a { font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); transition: color var(--t-hover) var(--ease-out); }
.footer__links a:hover { color: var(--signal-text); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  font-family: var(--mono);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-small);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              color var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle:active { transform: scale(0.97); }
html:not(.js) .theme-toggle { display: none; }

/* ------------------------------------------------------- brand page bits */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s5);
  list-style: none;
  padding: 0;
}
.swatch__chip {
  height: 78px;
  border-radius: var(--r-small);
  border: 1px solid var(--rule);
}
.swatch__name { margin-top: var(--s3); font-weight: 600; font-size: 0.9375rem; }

.specimen { border-top: 1px solid var(--rule); }
.specimen > li {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .specimen > li { grid-template-columns: 11rem 1fr; gap: var(--s6); align-items: baseline; }
}
.specimen { list-style: none; padding: 0; }

.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border-radius: var(--r-media);
}

.demo__box {
  width: 56px; height: 56px;
  border-radius: var(--r-small);
  background: var(--ink);
}

.demo__track {
  flex: 1 1 200px;
  min-width: 160px;
  height: 56px;
  position: relative;
  border-radius: var(--r-small);
  border: 1px dashed var(--rule);
}
.demo__track .demo__box {
  position: absolute;
  top: 50%;
  left: var(--s2);
  margin-top: -28px;
  transition-property: transform;
  transition-duration: var(--t-reveal);
}
.demo__track:hover .demo__box { transform: translateX(calc(100% + var(--s5))); }

.demo--eo .demo__box { transition-timing-function: var(--ease-out); }
.demo--eio .demo__box { transition-timing-function: var(--ease-in-out); }
.demo--exit .demo__box { transition-timing-function: var(--ease-exit); }
.demo--spring .demo__box { transition-timing-function: var(--spring-settle); transition-duration: 400ms; }

.radius-demo { display: flex; gap: var(--s5); flex-wrap: wrap; }
.radius-demo div {
  width: 110px; height: 78px;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2);
}

.token-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.token-table th, .token-table td {
  text-align: left;
  padding: var(--s3) var(--s5) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.token-table th { font-weight: 600; }
.token-table code { font-size: 0.8125rem; color: var(--ink-2); }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ 404 */

.notfound {
  min-height: 62vh;
  display: grid;
  align-content: center;
  padding-block: var(--s9);
}

/* --------------------------------------------------------------- motion */

/* 1. Signature moment. The mark draws itself once on the home page: the
      upper chevron on a curve, the lower one 180ms later, settling on the
      spring. Pure CSS, so it still runs with JS switched off. */
@keyframes draw {
  from { stroke-dashoffset: 96; }
  to   { stroke-dashoffset: 0; }
}

/* The second chevron lands and swings itself out, the way the avatar's
   completion beat does: a decaying oscillation, not a bounce. */
@keyframes swing {
  0%   { rotate: 0deg; }
  12%  { rotate: -5.5deg; }
  26%  { rotate: 3.3deg; }
  40%  { rotate: -1.9deg; }
  54%  { rotate: 1.1deg; }
  68%  { rotate: -0.6deg; }
  82%  { rotate: 0.25deg; }
  100% { rotate: 0deg; }
}

.mark-lg path { stroke-dasharray: 96; }
.mark-lg .a { animation: draw var(--t-draw) var(--ease-out) both; }
.mark-lg .b {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation:
    draw var(--t-draw) var(--spring-settle) 180ms both,
    swing 900ms linear 1040ms both;
}

/* Nav mark: the two chevrons ease apart and settle back. */
@media (hover: hover) and (pointer: fine) {
  .brand .mark path { transition: translate var(--t-hover) var(--spring-settle); }
  .brand:hover .mark .a { translate: -13px -13px; }
  .brand:hover .mark .b { translate: 13px 13px; }
}

/* Footer: a very large outlined mark that draws once, behind the links. */
.footer { position: relative; overflow: hidden; }
.footer .wrap { position: relative; z-index: 1; }

.footer__mark {
  position: absolute;
  right: clamp(-48px, -2vw, 0px);
  bottom: -52px;
  height: clamp(190px, 26vw, 300px);
  width: auto;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.footer__mark path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 19.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
}
.footer__mark.is-in .a { animation: draw var(--t-draw) var(--ease-out) both; }
.footer__mark.is-in .b { animation: draw var(--t-draw) var(--ease-out) 180ms both; }
html:not(.js) .footer__mark path { stroke-dashoffset: 0; }

@keyframes draw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero__line { animation: draw-line var(--t-draw) var(--ease-out) 560ms both; }

/* 2. Scroll arrival. Gated on .js so nothing is ever hidden without it. */
.js [data-arrive] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-arrive].is-in { opacity: 1; transform: none; }

/* 5. Cross-page: a short crossfade where the browser supports it. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--t-hover);
  animation-timing-function: var(--ease-out);
}

/* One reduced-motion block. Everything collapses to a 200ms opacity fade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--t-hover) !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--t-hover) !important;
    transition-delay: 0ms !important;
    transition-property: opacity !important;
    transition-timing-function: linear !important;
  }
  .mark-lg path,
  .footer__mark path {
    animation-name: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .hero__line { animation-name: none; }
  .js [data-arrive] { transform: none; }
  .js .rise .rise__i { transform: none !important; }
  .brand:hover .mark .a, .brand:hover .mark .b { translate: 0 0; }
  [data-tilt] { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-name: fade; }
  html { scroll-behavior: auto; }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------- narrow */

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
    --s9: 72px;
    --s10: 112px;
  }
  .section { padding-block: var(--s8); }
  .lede { font-size: 1.1875rem; }
  .section-head { margin-bottom: var(--s6); }
  .run + .run { margin-top: var(--s8); }
}

@media (max-width: 420px) {
  .brand__name { display: none; }
  .row--media { grid-template-columns: 64px 1fr auto; }
  .row__thumb { width: 64px; }
}