/* Shared styles for the lighter case studies in /work/<slug>/.
   Same system as the personal site: one narrow reading column, 14px Inter,
   ink and a single muted grey, hairline rules. Figures break out wider. */
:root {
  --ink: rgb(17, 17, 17);
  --ink-2: rgba(0, 0, 0, 0.62);
  --muted: rgba(0, 0, 0, 0.4);
  --hairline: rgb(242, 242, 242);
  --rule: rgb(230, 230, 230);
  --underline: rgb(217, 217, 217);
  --underline-hover: rgb(102, 102, 102);
  --surface: rgb(253, 253, 252);
  --panel: rgb(245, 245, 243);
  --stage: #edecec;
  --paper: #fff;
  --focus: rgb(116, 177, 253);
  --amber: #c98a2c;
  --note: rgb(255, 249, 235);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --col: 36.375rem;
  --wide: 52rem;
  --gutter: 6.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface); scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 460;
  line-height: 1.375rem;
  letter-spacing: -0.00563rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-size: inherit; line-height: inherit; font-weight: 500; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 560; }
button { font: inherit; letter-spacing: inherit; }
::selection { background: rgba(116, 177, 253, 0.25); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.muted { color: var(--muted); }

.basic-link { position: relative; transition: 0.2s; }
.basic-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-radius: 2px; background: var(--underline); transition: inherit; pointer-events: none; }
.basic-link:hover::before { background: var(--underline-hover); }

/* ---------- Page ---------- */
.page { max-width: var(--col); margin: 0 auto; padding: 5rem 1rem 2.5rem; }
.page::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 9; height: 6rem; pointer-events: none;
  background: linear-gradient(rgb(253, 253, 252) 0, rgba(253, 253, 252, 0.74) 20%, rgba(253, 253, 252, 0.38) 47%, rgba(253, 253, 252, 0.13) 73%, transparent 100%);
}
.wide { width: min(var(--wide), 100vw - 2rem); margin-left: 50%; transform: translateX(-50%); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 2.5rem; }
.back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); transition: color 0.2s var(--ease); }
.back:hover { color: var(--ink); }
.back i { width: 0.35rem; height: 0.35rem; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.back:hover i { transform: translateX(-0.15rem) rotate(45deg); }
.notes-toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease); }
.notes-toggle:hover { color: var(--ink); }
.notes-toggle i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
body.hide-notes .notes-toggle { display: none; }

.header { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; }
.lede p { padding-top: 1rem; }

/* ---------- Sections ---------- */
.sec { padding-top: 4rem; }
.sec__kicker { display: flex; gap: 0.75rem; padding-bottom: 0.5rem; color: var(--muted); background: linear-gradient(var(--hairline), var(--hairline)) no-repeat 0 100% / 100% 1px; }
.sec__kicker span:first-child { font-variant-numeric: tabular-nums; }
.sec h2 { padding-top: 1rem; }
.sec p { padding-top: 1rem; }
.sec p.sub { padding-top: 0.25rem; color: var(--ink-2); }
.prose p { color: var(--ink-2); }
.prose p b { color: var(--ink); }

/* Rows: key on the left, text on the right, hairline between. */
.rows { padding-top: 1.5rem; }
.row { position: relative; display: flex; gap: 1rem; padding: 0.735rem 0 0.735rem var(--gutter); }
.row::after { content: ""; position: absolute; left: var(--gutter); right: 0; bottom: 0; border-bottom: 1px solid var(--hairline); }
.row:last-child::after { display: none; }
.row__key { position: absolute; left: 0; color: var(--muted); }
.row__main { min-width: 0; }
.row__main p { padding-top: 0.125rem; color: var(--ink-2); }
@media (max-width: 520px) {
  .row { flex-direction: column; gap: 0.125rem; padding-left: 0; }
  .row::after { left: 0; }
  .row__key { position: static; }
}

/* ---------- Figures ---------- */
figure { padding-top: 2rem; }
figcaption { padding-top: 0.75rem; color: var(--muted); }
figcaption b { display: block; color: var(--ink); font-weight: 500; }
.panel { background: var(--panel); border-radius: 12px; padding: 1.5rem; overflow: hidden; }
.shot { border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -16px rgba(0, 0, 0, 0.18); }
.shot img { width: 100%; }

/* Hero: the project's own board on the darker stage. */
.hero .panel { background: var(--stage); padding: 2rem; }
.hero .shot { box-shadow: none; }
.hero.is-board .panel { padding: 1.5rem; }
.hero.is-board img { border-radius: 8px; }
@media (max-width: 520px) { .hero .panel { padding: 1rem; } }

/* Hero made of a few phone screens side by side, cropped to the first screenful. */
.hero-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.hero-phones img { width: 100%; aspect-ratio: 375 / 812; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 36px -18px rgba(0, 0, 0, 0.3); }
@media (max-width: 520px) { .hero-phones { gap: 0.625rem; } .hero-phones img { border-radius: 10px; } }

/* Screen grids: desktop frames go one per row, phone frames three across. */
.grid { display: grid; gap: 2rem 1.5rem; padding-top: 2rem; }
.grid figure { padding-top: 0; min-width: 0; }
.grid--desk { grid-template-columns: minmax(0, 1fr); }
.grid--phones { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.grid--phones .panel { padding: 1rem; }
.grid--phones .shot { border-radius: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid--2 .panel { padding: 1.25rem; }
@media (max-width: 720px) {
  .grid--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Prep notes (hidden unless toggled with N) ---------- */
.note { margin-top: 1.5rem; padding: 0.75rem 1rem; border-radius: 8px; background: var(--note); color: var(--ink-2); }
.note::before { content: "Prep note"; display: block; color: var(--amber); }
.note ul { padding-left: 1rem; list-style: disc; }
.note li + li { margin-top: 0.25rem; }
body.hide-notes .note { display: none !important; }

/* ---------- Footer ---------- */
.footer { padding: 5rem 0 3rem; }
.footer__row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 0.75rem; color: var(--muted); }
.footer__row:first-child { padding-top: 0.5rem; border-top: 1px solid var(--hairline); }
.footer a:not(.back) { color: var(--ink); }

/* ---------- Motion (only with html.motion, set when reduced motion is off) ---------- */
@keyframes cs-in { from { opacity: 0; transform: translateY(8px); } }
.motion .top, .motion .header, .motion .lede { animation: cs-in 0.5s ease both; }
.motion .header { animation-delay: 0.05s; }
.motion .lede { animation-delay: 0.1s; }
.motion .hero { opacity: 0; translate: 0 8px; transition: opacity 0.6s var(--out) 0.15s, translate 0.7s var(--out) 0.15s; }
.motion .hero.is-in { opacity: 1; translate: none; }

/* translate (not transform) so it stacks with .wide's centring transform. */
.motion main .sec > :not(.grid),
.motion main .grid > *,
.motion .footer {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.6s var(--out) var(--d, 0ms),
    translate 0.7s var(--out) var(--d, 0ms),
    background-size 1s var(--out) 0.1s;
}
.motion main .sec > .is-in,
.motion main .grid > .is-in,
.motion .footer.is-in { opacity: 1; translate: none; }
.motion .sec__kicker { background-size: 0% 1px; }
.motion .sec__kicker.is-in { background-size: 100% 1px; }

.grid .shot { transition: transform 0.35s var(--out), box-shadow 0.35s var(--out); }
@media (hover: hover) {
  .grid figure:hover .shot { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 40px -18px rgba(0, 0, 0, 0.26); }
}

@supports (animation-timeline: scroll()) {
  .motion body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 2px;
    background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
    animation: read-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}