/* ==========================================================================
   Gregorio Orlando - portfolio
   Design system: editorial / laboratory notebook
   Type:  Newsreader (display serif) - Inter (UI/body) - IBM Plex Mono (data)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --paper:      #FAF9F7;
  --paper-2:    #F2F0EB;
  --paper-3:    #E9E6DF;
  --ink:        #15171B;
  --ink-2:      #3C424B;
  --ink-3:      #636871;   /* muted text; dark enough for 4.5:1 on every surface */
  --rule:       #DFDAD1;
  --rule-soft:  #EBE7E0;
  --accent:     #B93A1B;
  --accent-ink: #9A2F14;
  --accent-bg:  rgba(185, 58, 27, 0.08);
  --on-accent:  #FFFFFF;   /* text on an accent fill */
  --steel:      #35506E;

  --font-display: "Newsreader", Iowan Old Style, Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 66ch;
  --maxw: 1200px;
  --radius: 3px;

  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(1.0rem, 0.97rem + 0.17vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.3125rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.875rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.45vw, 2.75rem);
  --step-4:  clamp(2.35rem, 1.75rem + 2.90vw, 4.25rem);
  --step-5:  clamp(2.8rem, 1.85rem + 4.60vw, 6rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #101214;
    --paper-2:    #171A1D;
    --paper-3:    #1E2226;
    --ink:        #ECEAE5;
    --ink-2:      #BCC0C6;
    --ink-3:      #868C95;
    --rule:       #282D33;
    --rule-soft:  #1F2429;
    --accent:     #E46A44;
    --accent-ink: #F08963;
    --accent-bg:  rgba(228, 106, 68, 0.12);
    --on-accent:  #19100C;  /* dark ink: the dark-mode accent is too light for white */
    --steel:      #7E9DC2;
  }
}
:root[data-theme="dark"] {
  --paper:      #101214;
  --paper-2:    #171A1D;
  --paper-3:    #1E2226;
  --ink:        #ECEAE5;
  --ink-2:      #BCC0C6;
  --ink-3:      #868C95;
  --rule:       #282D33;
  --rule-soft:  #1F2429;
  --accent:     #E46A44;
  --accent-ink: #F08963;
  --accent-bg:  rgba(228, 106, 68, 0.12);
  --on-accent:  #19100C;  /* dark ink: the dark-mode accent is too light for white */
  --steel:      #7E9DC2;
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }

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

::selection { background: var(--accent); color: var(--paper); }

.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-size: var(--step--1); font-weight: 500;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.prose { max-width: var(--measure); }

section[id], footer[id] { scroll-margin-top: 86px; }

.band { padding-block: clamp(3.75rem, 8vw, 7.5rem); }
.band--tint { background: var(--paper-2); }
.band--rule { border-top: 1px solid var(--rule); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 4. Typographic components ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}
.eyebrow--plain::before { display: none; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--ink);
  padding-top: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 450;
  letter-spacing: -0.02em;
}
.section-head .lede {
  color: var(--ink-2);
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.5;
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.small { font-size: var(--step--1); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }

/* ---------- 5. Header / navigation ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
}
.brand {
  font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  white-space: nowrap;
}
.brand__mark { width: 22px; height: 22px; flex: none; }
.brand__sub { color: var(--ink-3); font-weight: 400; }
@media (max-width: 560px) { .brand__sub { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.18s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.site-head__end {
  display: flex; align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: none; border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.theme-toggle[hidden] { display: none; }  /* an author display rule outranks [hidden] */
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle__icon { width: 17px; height: 17px; }
/* Show the theme being offered, not the one in use. */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.75rem; cursor: pointer;
}
@media (max-width: 880px) {
  .site-head__end { gap: 0.6rem; }
  .nav-toggle { display: inline-block; }
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 0.95rem; border-bottom: 1px solid var(--rule-soft); font-size: 1rem; }
  .nav a::after { display: none; }
}

/* ---------- 6. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.btn--quiet { border-color: var(--rule); color: var(--ink-2); }
.btn--quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.arrow-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* The lab photo is a tall portrait; crop it to a landscape band. */
.hero__media .fig.fig--fill > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 32%;
}
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: stretch;
  }
  .hero__media .fig > img { aspect-ratio: 4 / 5; object-fit: cover; }

  /* Beside the text column the media column is stretched to the row height,
     so let the lab photo swallow whatever height is left over. Its caption
     then lands on the same baseline as the button opposite it. */
  .hero__media { display: flex; flex-direction: column; }
  .hero__media > .fig { flex: none; }
  .hero__media > .fig--fill { flex: 1 1 auto; min-height: 0; }
  /* The 3/2 ratio above stays as the starting height: it is what the column
     contributes to the row, and flex-grow then stretches past it. Releasing it
     to auto would make the image offer its intrinsic 1200x1600 height instead,
     which inflates the row and leaves nothing over to grow into. */
  .hero__media > .fig.fig--fill > img { flex: 1 1 auto; min-height: 0; }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: 0.9rem;
}
.hero h1 em { font-style: italic; color: var(--accent); }

/* The name carries the hero; this line says what he does, directly under it. */
.hero__role {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: 1.4rem;
}
.hero__role em { font-style: italic; color: var(--accent); }

.hero__intro { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.hero__intro strong { color: var(--ink); font-weight: 500; }

/* The rest of the bio, set smaller than the lead so the hero still reads
   as an opening rather than a wall of text. */
.hero__bio { margin-top: 1.1rem; max-width: 52ch; color: var(--ink-2); }
.hero__bio p + p { margin-top: 0.85rem; }
.hero__bio strong { color: var(--ink); font-weight: 500; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 2rem;
}
/* Four equal secondary buttons, then the primary action spanning the same
   width directly beneath them. */
.hero__actions { margin-top: 2rem; max-width: 32rem; }
.hero__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.hero__links .btn { justify-content: center; padding-inline: 0.5rem; }
.hero__cta { margin-top: 0.55rem; width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .hero__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* "AIfred" wordmark. In the display serif a capital I is a bare stem, so the
   name reads as "Alfred". Tinting the AI keeps it legible at display sizes and
   shows the wordplay the name is built on. */
.wm { color: var(--accent); }

/* ---------- 8. Figures (real media) ---------- */
.fig { margin: 0; display: flex; flex-direction: column; }
.fig > img,
.fig > .clipwrap {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}
.fig > img { height: auto; }

/* Diagrams and renders: letterbox on a plain ground instead of filling. */
.fig--pad > img { padding: clamp(0.5rem, 1.6vw, 1.1rem); background: #fff; }

/* Fixed-ratio figures crop so a row of cards stays aligned. */
.fig--crop > img { aspect-ratio: var(--ar, 4 / 3); object-fit: cover; }

/* Same, but for diagrams: letterbox rather than crop, so nothing is lost. */
.fig--fit > img { aspect-ratio: var(--ar, 4 / 3); object-fit: contain; }

.clipwrap { position: relative; aspect-ratio: var(--ar, 16 / 9); }
.clipwrap video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--paper-3);
}
.clipwrap video[controls] { object-fit: contain; }

/* Corner marker so a paused poster is not mistaken for a photograph. */
.clipwrap::after {
  content: "Video";
  position: absolute; top: 0.6rem; left: 0.6rem;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(8, 10, 12, 0.6);
  padding: 0.2rem 0.55rem; border-radius: 100px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.clipwrap.is-playing::after { opacity: 0; }

.fig figcaption {
  font-size: 0.8rem; line-height: 1.5;
  color: var(--ink-3);
  margin-top: 0.7rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
}
.fig figcaption b { color: var(--ink-2); font-weight: 500; }

/* ---------- 8b. Project blocks ---------- */
.proj + .proj {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding-top: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--rule);
}
.proj__head { display: grid; gap: 1.25rem clamp(2rem, 5vw, 4.5rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 900px) {
  .proj__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.proj__num {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.proj__num b { color: var(--accent); font-weight: 500; }
.proj__title {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 450;
  letter-spacing: -0.025em; line-height: 1;
  margin-bottom: 0.4rem;
}
.proj__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-1); color: var(--accent);
  line-height: 1.3;
}
.proj__body { color: var(--ink-2); max-width: 60ch; }
.proj__body p + p { margin-top: 0.9rem; }

/* Media grid: a six-column bed the figures span. */
.mgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.15rem); }
.mgrid + .mgrid { margin-top: clamp(0.7rem, 1.6vw, 1.15rem); }
.m2 { grid-column: span 2; }
.m3 { grid-column: span 3; }
.m4 { grid-column: span 4; }
.m6 { grid-column: span 6; }
/* Four-up: method comparisons, where six columns will not divide evenly. */
.mgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mgrid--4 > .fig figcaption {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.mrow-label { margin: 0 0 0.6rem; }
.mgrid + .mrow-label { margin-top: clamp(1.2rem, 2.6vw, 1.9rem); }

@media (max-width: 900px) {
  .m2 { grid-column: span 3; }
  .m4 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .mgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .m2, .m3, .m4 { grid-column: span 6; }
}

/* ---------- 9. Project cards and feature blocks ---------- */
.feature { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 950px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature--flip .feature__media { order: 2; }
}
.feature + .feature,
.feature--sep { margin-top: clamp(3rem, 7vw, 6rem); padding-top: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--rule); }
.feature__index {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 450;
  margin-bottom: 0.4rem;
}
.feature__title a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.feature__title a:hover { background-size: 100% 1px; }
.feature__sub {
  font-size: var(--step-1); color: var(--accent); margin-bottom: 1.1rem;
  font-family: var(--font-display); font-style: italic;
}
.feature__body { color: var(--ink-2); max-width: 56ch; }

.flagship {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card__kicker {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; margin-bottom: 0.5rem; }
.card__text { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 1rem; }
.card__foot { margin-top: auto; }

/* ---------- 10. Tags and status ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.tags li { margin: 0; }
.tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.22rem 0.65rem;
  white-space: nowrap;
}
.tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-bg); }

.status {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- 11. Metrics ---------- */
.metrics { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .metrics--3, .metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .metrics--2, .metrics--3, .metrics--4 { grid-template-columns: minmax(0, 1fr); } }
.metric { background: var(--paper); padding: 1.35rem 1.25rem; }
.metric__value {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1; display: block; margin-bottom: 0.45rem; letter-spacing: -0.02em;
}
.metric__value small { font-size: 0.5em; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0; }
.metric__label { font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.metric__note { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); margin-top: 0.5rem; display: block; }

/* ---------- 12. Notes and key-value lists ---------- */
.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-bg);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.note strong { color: var(--ink); }
.note--neutral { border-left-color: var(--rule); background: var(--paper-2); }

.keyvals { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.keyvals > div {
  display: grid; gap: 0.25rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 620px) { .keyvals > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }
.keyvals dt {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  padding-top: 0.15rem;
}
.keyvals dd { margin: 0; font-size: 0.925rem; color: var(--ink-2); }
.keyvals dd a { color: var(--ink); }

/* ---------- 13. Timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl-item {
  display: grid; gap: 0.35rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
}
.tl-item:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 820px) { .tl-item { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.tl-date {
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--ink-3);
  padding-top: 0.3rem;
}
.tl-date b { display: block; color: var(--accent); font-weight: 500; }
.tl-role { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; margin-bottom: 0.15rem; }
.tl-org { font-size: 0.925rem; color: var(--ink-2); margin-bottom: 0.9rem; }
.tl-org a { color: inherit; }
.tl-body { color: var(--ink-2); font-size: 0.95rem; max-width: 64ch; }
.tl-body ul { padding-left: 1.1em; }

/* ---------- 14. Skills ---------- */
.skillset { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .skillset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .skillset { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skillgroup { background: var(--paper); padding: 1.5rem 1.4rem; }
.skillgroup h3 {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.9rem;
}
.skillgroup ul { list-style: none; padding: 0; margin: 0; }
.skillgroup li {
  font-size: 0.875rem; color: var(--ink-2);
  padding: 0.3rem 0; border-bottom: 1px dotted var(--rule-soft);
  margin: 0;
}
.skillgroup li:last-child { border-bottom: 0; }

/* ---------- 15. Gallery ---------- */
.gallery { display: grid; gap: clamp(0.6rem, 1.4vw, 1rem); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery .fig { overflow: hidden; }
.gallery .fig > img {
  aspect-ratio: var(--ar, 3 / 4);
  object-fit: cover;
}
.gallery .fig figcaption {
  margin: 0.55rem 0 0; padding: 0; border: 0;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.g-a, .g-b, .g-c { grid-column: span 2; }
.g-d, .g-e { grid-column: span 3; --ar: 16 / 10; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-a, .g-b, .g-c { grid-column: span 1; }
  .g-d, .g-e { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery > * { grid-column: span 1; }
  .g-d, .g-e { --ar: 4 / 3; }
}

/* ---------- 16. Diagrams ---------- */
.diagram {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.diagram svg { width: 100%; height: auto; }
.diagram text { font-family: var(--font-mono); }

/* ---------- 17. Project page chrome ---------- */
.proj-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.proj-hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-4); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1.02;
  margin-bottom: 1rem; max-width: 22ch;
}
.proj-hero .lede { max-width: 60ch; }
.backlink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; margin-bottom: 2rem;
}
.backlink:hover { color: var(--accent); }
.backlink svg { width: 13px; height: 13px; }

.chapter { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.chapter__head { display: grid; gap: 0.75rem; margin-bottom: 2rem; }
.chapter__head h2 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 450; }
.chapter__num {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.next-proj {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink);
}
.next-proj__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.next-proj__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 450; }
.next-proj a { text-decoration: none; }

/* ---------- 18. Footer ---------- */
.site-foot {
  border-top: 1px solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  background: var(--paper);
}
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); } }
.foot-grid h2 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 450; margin-bottom: 0.75rem; }
.foot-col h3 {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 0.5rem; }
.foot-col a { font-size: 0.9rem; color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3);
  letter-spacing: 0.04em;
}
.foot-bottom a { color: inherit; }

/* ---------- Contact form (footer) ---------- */
.foot-contact { max-width: 34rem; }
.cform { margin-top: 1.1rem; }
.cform__row { display: grid; gap: 0 0.7rem; }
@media (min-width: 520px) { .cform__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.field { display: block; margin-bottom: 0.75rem; }
.field__l {
  display: block;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.field__i {
  width: 100%;
  font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.58rem 0.7rem;
  transition: border-color 0.18s ease;
}
.field__i::placeholder { color: var(--ink-3); }
.field__i:hover { border-color: var(--ink-3); }
.field__i:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea.field__i { resize: vertical; min-height: 6.5rem; display: block; }

.cform__foot { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.35rem; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.cform__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cform__status {
  font-size: 0.82rem; line-height: 1.5; margin: 0.8rem 0 0;
  padding-left: 0.7rem; border-left: 2px solid var(--rule); color: var(--ink-2);
}
.cform__status[data-state="ok"] { border-left-color: var(--accent); color: var(--ink); }
.cform__status[data-state="error"] { border-left-color: var(--accent); color: var(--ink-2); }
.cform__status[data-state="busy"] { color: var(--ink-3); }
.cform button[disabled] { opacity: 0.55; cursor: progress; }
.cform__note { font-size: 0.78rem; line-height: 1.5; color: var(--ink-3); margin: 0.9rem 0 0; }
.cform__note a { color: var(--ink-2); }

/* ---------- 19. Motion ---------- */
/* Scoped to .js: without JavaScript the content must still be visible, so the
   hidden starting state is only applied once the inline head script runs. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  a.card:hover { transform: none; }
  /* !important is required here: the universal selector has zero specificity and
     would otherwise lose to every component rule that sets a transition. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. Utilities ---------- */
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.stack-sm { --stack: 0.75rem; }
.stack-lg { --stack: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  .site-head, .nav-toggle, .fig__ph, .next-proj { display: none; }
  body { background: #fff; color: #000; }
}