/* layout.css — Squid Ink / Technical.
   One centred axis. Prose sits in a 680px column; figures and media are
   wider, at 920px, centred on the same axis, so nothing hangs off a left
   rail. `.doc` is the page body; every direct child gets a width by class. */

:root {
  --col: 680px;   /* prose */
  --wide: 920px;  /* figures, media, tables that need the room */
  --bar-w: 1040px; /* header/footer row */
}

.doc { padding-inline: var(--pad); padding-bottom: var(--s-6); }
.doc > * { max-width: var(--col); margin-inline: auto; }
.doc > .u-wide,
.doc > .u-page,
.doc > .rowfig,
.doc > .rowmedia {
  max-width: var(--wide);
}
.doc > .u-screen { max-width: none; margin-inline: 0; }

.bar { width: min(100% - var(--pad) * 2, var(--bar-w)); margin-inline: auto; }

/* ---------- header bar: solid, always dark, in both themes ---------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar); color: var(--bar-ink);
  border-bottom: var(--hair) solid var(--rule);
}
.top__in { display: flex; align-items: center; gap: var(--s-3); height: 56px; }
.mark {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; font-family: var(--font-head);
  font-weight: 600; font-size: var(--t--1); letter-spacing: -.005em;
  color: var(--bar-ink);
}
.mark img { width: 24px; height: 24px; border-radius: 50%; }
.top nav { margin-left: auto; display: flex; gap: var(--s-3); }
.top nav a {
  text-decoration: none; color: var(--bar-ink); opacity: .78;
  font-family: var(--font-body); font-weight: 500; font-size: var(--t--1);
}
.top nav a:hover, .top nav a[aria-current="page"] {
  opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px;
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: var(--s-2);
  background: transparent; color: var(--bar-ink);
  border: var(--hair) solid color-mix(in srgb, var(--bar-ink) 30%, transparent);
  border-radius: 999px; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--bar-ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}

/* ---------- eyebrow / rule label ---------- */

.lbl {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.lbl--accent { color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--t--2);
  color: var(--ink-dim); letter-spacing: .06em;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  margin-block: var(--s-3) .9rem;
}
.eyebrow b { color: var(--accent); font-weight: 500; }

.dek {
  font-size: var(--t-1); line-height: 1.5; color: var(--ink-dim);
  margin-block: 0 var(--s-3); max-width: 54ch;
}

/* the run ledger: provenance strip above a figure */
.ledger {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--t--2);
  color: var(--ink-faint); letter-spacing: .04em;
  padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: var(--hair) solid var(--rule);
}
.ledger b { color: var(--ink-dim); font-weight: 400; }

/* ---------- hero (home / about) ---------- */

.hero { padding-block: var(--s-5) var(--s-4); max-width: var(--wide); margin-inline: auto; }
.hero h1 {
  font-family: var(--font-display); font-size: var(--t-4);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  font-weight: var(--w-display); margin-block: var(--s-3) var(--s-3);
  max-width: 20ch; color: var(--ink-hi);
}
.hero p { color: var(--ink-dim); font-size: var(--t-1); max-width: 52ch; margin-block: 0 var(--s-3); }

.who { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.who img {
  width: 62px; height: 62px; border-radius: 50%;
  border: var(--hair) solid var(--rule);
}
.who__txt { font-family: var(--font-mono); font-size: var(--t--1); color: var(--ink-dim); line-height: 1.55; }
.who__txt b { color: var(--ink); font-weight: 500; }

.links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-family: var(--font-mono); font-size: var(--t--1); }
.links a { color: var(--ink-dim); text-decoration: none; }
.links a:hover { color: var(--accent); }
.links a::before { content: "↗ "; color: var(--ink-faint); }

/* ---------- rowfig / rowmedia: the meta line sits above the payload ---------- */

.rowfig, .rowmedia { margin-block: var(--s-5); }
.rowfig .rail, .rowmedia .rail {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: var(--hair) solid var(--rule);
}
.rail__n {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.rail__m {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--t--2);
  color: var(--ink-faint); letter-spacing: .04em;
}
.rail__m span { display: inline; }
.rail__m b { color: var(--ink-dim); font-weight: 400; }
.rowfig .plot-hint, .rowmedia .plot-hint { display: none !important; }

/* ---------- article head ---------- */

.head { padding-block: var(--s-5) var(--s-4); }
.head h1 {
  font-family: var(--font-display); font-size: var(--t-3);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  font-weight: var(--w-display); margin-block: 0 var(--s-3); color: var(--ink-hi);
}

.doc p, .doc ul, .doc ol { margin-block: 0 1.3em; }
.doc h2 {
  font-family: var(--font-display); font-size: var(--t-2);
  line-height: 1.2; letter-spacing: var(--ls-display);
  font-weight: var(--w-display); margin-block: var(--s-5) var(--s-3); color: var(--ink-hi);
}
.doc h3 { font-family: var(--font-display); font-size: var(--t-1); margin-block: var(--s-4) var(--s-2); color: var(--ink-hi); }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li { margin-bottom: .4em; }
.doc li::marker { color: var(--ink-faint); }
.doc p strong, .doc p b, .doc li strong, .doc li b,
.doc .lede strong, .doc .lede b { color: var(--ink-hi); font-weight: 600; }
.lede { font-size: var(--t-1); color: var(--ink-dim); }

.meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--t--2);
  color: var(--ink-faint); letter-spacing: .06em;
  border-block: var(--hair) solid var(--rule); padding-block: .7rem;
}

/* ---------- breadcrumb and post navigation ---------- */

.crumb {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .1em; color: var(--ink-faint);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
}
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.postnav {
  display: grid; gap: var(--s-2); margin-top: var(--s-5);
  border-top: var(--hair) solid var(--rule); padding-top: var(--s-3);
}
@media (min-width: 700px) { .postnav { grid-template-columns: 1fr 1fr; } }
.postnav a { text-decoration: none; padding: var(--s-2) 0; display: block; color: var(--ink); }
.postnav a:hover .postnav__t { color: var(--accent); }
.postnav__k {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .3rem;
}
.postnav__t { font-family: var(--font-display); font-weight: var(--w-display); line-height: 1.3; color: var(--ink-hi); }
.postnav .next { text-align: right; }

/* ---------- projects (home page) ---------- */

.projects { border-top: var(--hair) solid var(--rule); }
.proj {
  display: grid; gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: var(--hair) solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .proj { grid-template-columns: 1fr 300px; align-items: start; } }
.proj__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.proj h3 {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--t-2); letter-spacing: var(--ls-display);
  line-height: 1.2; margin: 0; color: var(--ink-hi);
}
.proj h3 a { text-decoration: none; color: inherit; }
.proj h3 a:hover { color: var(--accent); }
.proj p { color: var(--ink-dim); margin-block: 0 var(--s-2); max-width: 54ch; }
.proj__vis { border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.proj__vis video, .proj__vis img { width: 100%; display: block; }
/* screen recordings are graded back in dark mode so a bright thumbnail does
   not outshine the writing; light mode leaves them alone. */
.proj__vis video, .proj__vis img { filter: var(--thumb-filter); }
.proj:hover .proj__vis video, .proj:hover .proj__vis img { filter: none; }

.tag {
  font-family: var(--font-mono); font-size: var(--t--2);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 3px;
  border: var(--hair) solid var(--rule-hi); color: var(--ink-faint);
}
.tag--live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* a compact ordered list of the posts inside one project */
.steps { list-style: none; padding: 0; margin-block: 0; border-top: var(--hair) solid var(--rule); }
.steps li { border-bottom: var(--hair) solid var(--rule); }
.steps a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: var(--s-2);
  align-items: baseline; padding-block: .9rem; text-decoration: none; color: var(--ink);
}
.steps a:hover { background: var(--surface); }
.steps .n { font-family: var(--font-mono); font-size: var(--t--2); color: var(--accent); }
.steps .t { font-size: var(--t-0); }
.steps .d { font-family: var(--font-mono); font-size: var(--t--2); color: var(--ink-faint); }

/* ---------- phones: 16px gutters, one column everywhere ---------- */

@media (max-width: 480px) {
  :root { --pad: 1rem; }
  .top__in { height: 52px; gap: var(--s-2); }
  .top nav { gap: var(--s-2); }
  /* the wordmark loses its label first; the avatar and nav stay legible */
  .mark span { display: none; }
  .theme-toggle { width: 28px; height: 28px; margin-left: .25rem; }
}

/* ---------- theme-matched images: day render in light, night render in dark ---------- */
/* !important: these must beat any later rule that sets display on media. */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
}
.rowmedia img, .proj__vis img, .rowmedia > div > video, .proj__vis video { width: 100%; height: auto; display: block; border-radius: var(--radius, 8px); aspect-ratio: 16 / 9; object-fit: cover; }

/* A phone-shaped screen recording: keep it phone-sized and centred. */
.phone-clip { max-width: 360px; margin-inline: auto; }
.phone-clip video { width: 100%; height: auto; display: block; aspect-ratio: 1 / 2; border-radius: 22px;
                    border: 1px solid var(--rule); background: #0a0c10; }

.steps .soon { padding: var(--s-2) 0; color: var(--ink-dim); font-style: italic; border-bottom: var(--hair) solid var(--rule); }

/* A phone screenshot beside prose: phone-sized, framed like the device. */
.app-shot { max-width: 320px; }
.app-shot img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--rule); }