/* ANKYR+YRD — site layout.
   Colour and type come from tokens.css, which is a COPY of brand\tokens.css and
   must not be edited here. This file adds layout only: header, footer, prose
   measure, project list. Nothing in here is a brand decision.

   Accent budget (spec §7, roughly 5% of a surface): links and the current nav
   item only. Not headings, not rules, not the mark. */

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

@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400;
             font-display:swap; src:url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500;
             font-display:swap; src:url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600;
             font-display:swap; src:url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:700;
             font-display:swap; src:url("/fonts/ibm-plex-sans-700.woff2") format("woff2"); }

:root {
  --measure: 34rem;        /* ~65 characters at this size */
  --gutter: clamp(20px, 5vw, 40px);
  --rule: 1px solid var(--line);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- header ---- */

.site-head { border-block-end: var(--rule); }
/* Home has no brand in the header — the hero carries the lockup — so the nav
   moves left rather than floating alone against an empty gutter. */
.site-head.no-brand .wrap { justify-content: flex-start; }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 18px; flex-wrap: wrap;
}
.site-head a.brand { display: block; color: var(--text); line-height: 0; }
.site-head a.brand svg { width: 152px; height: auto; display: block; }
nav { display: flex; gap: 22px; }
nav a {
  color: var(--muted); text-decoration: none; font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
}
nav a:hover, nav a:focus-visible { color: var(--text); }
nav a[aria-current="page"] { color: var(--accent); }

/* ---- main ---- */

main { flex: 1 0 auto; padding-block: clamp(40px, 7vw, 76px); }
main > .wrap > * + * { margin-block-start: 1.1em; }

h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); line-height: 1.12; font-weight: 600;
     letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h2 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
p  { margin: 0; max-width: var(--measure); }
a  { color: var(--accent); text-underline-offset: 0.18em; }

.lede { font-size: clamp(1.06rem, 2.1vw, 1.24rem); line-height: 1.5; max-width: 32rem; }
.muted { color: var(--muted); }

ul.points { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
ul.points li { padding-block: 0.7em; border-block-end: var(--rule); }
ul.points li:first-child { border-block-start: var(--rule); }

/* ---- a clip ----
   Wider than the prose measure deliberately: the video is the evidence, not an
   illustration beside the text. preload="none" in the markup means the 7.9 MB
   does not download until someone presses play. */

figure.clip { margin: 0; max-width: 46rem; }
/* The generic 1.1em stack gap reads tight under the lede, because the video
   is a solid block rather than a line of text. */
main > .wrap > .lede + figure.clip { margin-block-start: clamp(24px, 3.2vw, 36px); }
figure.clip video {
  display: block; width: 100%; height: auto;
  background: var(--surface); border: var(--rule);
}
figure.clip figcaption {
  margin-block-start: 0.6em; color: var(--muted);
  font-size: 0.92rem; max-width: var(--measure);
}

/* ---- a row of screenshots ----
   Wider than the prose measure, like figure.clip: the pictures are the evidence.
   They are light-background screenshots, so a hairline keeps them from floating
   as bright panels on the dark theme. */

.shots { margin: 0; max-width: 46rem; }
main > .wrap > .lede + .shots,
main > .wrap > p + .shots { margin-block-start: clamp(24px, 3.2vw, 36px); }
.shots .row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 20px); align-items: flex-start; }
.shots .row > * { flex: 1 1 200px; min-width: 0; margin: 0; }
/* The watch face is square and the phone screens are tall. Centred, the
   leftover height splits above and below and reads as deliberate; aligned to
   either end it reads as a gap. Capped on narrow screens, where it would
   otherwise fill the width for very little information. */
.shots .row > .watch { flex: 0 1 210px; align-self: center; }
@media (max-width: 40rem) {
  .shots .row > .watch { flex-basis: 100%; max-width: 280px; }
}
.shots img { display: block; width: 100%; height: auto; border: var(--rule); background: var(--surface); }
.shots figcaption,
.shots .row > figure > figcaption { margin-block-start: 0.5em; color: var(--muted); font-size: 0.88rem; }

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

.hero { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(26px, 4vw, 40px); }
.hero .lockup { width: clamp(180px, 34vw, 268px); color: var(--text); }
.hero .lockup svg { display: block; width: 100%; height: auto; }
.hero h1 { font-size: clamp(2rem, 5.4vw, 3rem); }
.hero h1 + .lede { margin-block-start: 0.55em; }

/* ---- project list: rules, not boxes ----
   Deliberately not carded. The identity is restrained and industrial; boxing
   two items would invent hierarchy that isn't there. Revisit when there are
   five or six. */

.projects { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule); }
.projects li { border-block-end: var(--rule); }
.projects a.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px;
  align-items: baseline; padding-block: clamp(20px, 3vw, 28px);
  text-decoration: none; color: inherit;
}
.projects a.row:hover h2, .projects a.row:focus-visible h2 { color: var(--accent); }
.projects .blurb { grid-column: 1 / -1; color: var(--muted); max-width: var(--measure); }
.status {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--muted); white-space: nowrap;
}

/* Breadcrumb: muted, not accent — the nav item for the same section is already
   accent, and two accents within 100px reads as a mistake. */
.crumb { display: inline-block; color: var(--muted); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.crumb:hover, .crumb:focus-visible { color: var(--text); }

/* ---- aside: the fun fact ---- */

.note {
  max-width: var(--measure); border-inline-start: 2px solid var(--line);
  padding-inline-start: 1.1em; color: var(--muted);
}
.note > * + * { margin-block-start: 0.7em; }

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

.site-foot { border-block-start: var(--rule); font-size: 0.85rem; color: var(--muted); }
.site-foot .wrap {
  display: flex; justify-content: space-between; gap: 16px 28px;
  padding-block: 22px; flex-wrap: wrap;
}
.site-foot .foot-links { display: flex; gap: 20px; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 120ms ease; }
}