/* ============================================================
   Connor Houle — engineering portfolio
   Design language: engineering drawing / CAD, executed quietly.
   ============================================================ */

/* ---------- Fonts (self-hosted, no external requests) ---------- */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Sampled from the intro animation: its dots run hue 252–285°. */
  --paper: #EFEAFB;      /* very light purple — the animation's lightest dots */
  --panel: #FAF8FE;      /* content surfaces sit just above the ground */
  --ink: #241B3D;        /* deep purple-black */
  --graphite: #5F5580;   /* muted purple-grey, secondary text */
  --rule: #DCD3F0;
  --accent: #5433A8;     /* darker purple — titles, links, active states */
  --accent-soft: #E6DEF9;/* lavender wash for quiet emphasis */
  --cover-dark: #1B1233; /* cover plate ground */
  --load: #C96A10;   /* restricted: water state + load/force ideas only */
  --flag: #A8321E;   /* draft warnings only */

  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;
  --display: "Archivo Variable", "Arial Narrow", var(--sans);

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1120px;
  --radius: 8px;      /* cards, panels, images */
  --radius-sm: 5px;   /* buttons, chips */
}

/* ---------- Reset-ish ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Type helpers ---------- */

.display, h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 113%;
  letter-spacing: -0.02em;
}
h1, h2, h3 { color: var(--accent); }
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.12rem; font-weight: 600; }

.eyebrow, .label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--graphite);
}
.eyebrow { display: block; margin-bottom: 0.75rem; }

.lead {
  font-size: 1.13rem;
  line-height: 1.6;
  max-width: var(--measure);
}
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.1em; }

/* Two-column body text — used on project pages so prose fills the
   measure instead of leaving a wide empty gutter on the right. */
.prose.two-col {
  max-width: none;
  column-gap: clamp(1.8rem, 4vw, 3.2rem);
}
@media (min-width: 900px) {
  .prose.two-col { column-count: 2; }
  .prose.two-col p:first-child { margin-top: 0; }
}
.prose.two-col p { break-inside: avoid-column; }

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
main { display: block; }
section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
section + section { border-top: 1px solid var(--rule); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: 0.6rem 1rem;
  z-index: 200; font-family: var(--mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

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

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700; font-stretch: 113%; letter-spacing: -0.01em;
  font-size: 1.05rem; color: var(--accent); text-decoration: none;
}
.site-nav {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.site-nav a { color: var(--graphite); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- Draft banner (injected by JS when draft mode is on) ---------- */

.draft-banner {
  background: var(--flag); color: #fff;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem var(--gutter); text-align: center;
}
.draft-banner strong { font-weight: 500; }
.draft-banner a { color: #fff; }

.badge-pending {
  display: inline-block; vertical-align: middle;
  font-family: var(--mono); font-weight: 500; font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--flag);
  padding: 0.18rem 0.5rem; border-radius: 2px;
  margin-left: 0.55rem; white-space: nowrap;
}

/* ---------- Title block (drawing-style strip of labelled cells) ---------- */

.title-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--ink);
  background: var(--panel);
  margin: 1.8rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.title-block > div {
  padding: 0.55rem 0.8rem 0.6rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.title-block > div:last-child { border-right: 0; }
.title-block dt {
  font-family: var(--mono); font-weight: 500; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--graphite);
  margin: 0 0 0.15rem;
}
.title-block dd {
  margin: 0; font-size: 0.86rem; font-weight: 500; overflow-wrap: break-word;
}
@media (max-width: 720px) {
  .title-block { grid-template-columns: repeat(2, 1fr); }
  .title-block > div { border-top: 1px solid var(--rule); }
  .title-block > div:nth-child(-n+2) { border-top: 0; }
  .title-block > div:nth-child(2n) { border-right: 0; }
}

/* ---------- Hero ---------- */

.hero { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.hero .tagline {
  font-size: 1.13rem; color: var(--graphite);
  max-width: var(--measure); margin-top: 0.4rem;
}

/* Air / water configuration switch */

.config-switch { margin-top: 2.4rem; }
.config-switch .frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: var(--radius);
}
.config-switch .frame img {
  width: 100%; height: auto; display: block;
  transition: opacity 0.55s ease;
}
.config-switch .frame img.water {
  position: absolute; inset: 0; opacity: 0;
}
.config-switch.is-water .frame img.water { opacity: 1; }
.config-switch .controls {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.9rem; flex-wrap: wrap;
}
.config-switch .controls .label { margin-right: 0.3rem; }
.btn-config {
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.5rem 1.1rem; cursor: pointer;
  background: var(--panel); color: var(--graphite);
  border: 1px solid var(--rule); border-radius: 2px;
}
.btn-config[aria-pressed="true"] { color: #fff; }
#btn-air[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
#btn-water[aria-pressed="true"] { background: var(--load); border-color: var(--load); }
.config-caption { margin: 0.7rem 0 0.2rem; font-size: 0.95rem; max-width: var(--measure); }
.config-note {
  font-family: var(--mono); font-size: 0.72rem; color: var(--graphite);
  letter-spacing: 0.02em;
}

/* ---------- Work register (table) ---------- */

.register { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--ink);   border-radius: var(--radius);
  overflow: hidden;
}
.register caption { text-align: left; }
.register th, .register td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.register thead th {
  font-family: var(--mono); font-weight: 500; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--graphite);
  border-bottom: 1px solid var(--ink);
}
.register tbody tr:last-child td { border-bottom: 0; }
.register td.proj { font-weight: 600; }
.register td.proj a { color: var(--accent); text-decoration: none; }
.register td.proj a:hover { text-decoration: underline; }
.register td.meta-col { color: var(--graphite); font-size: 0.9rem; }
.register td.year { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 660px) {
  .register, .register tbody, .register tr, .register td { display: block; }
  .register thead { display: none; }
  .register tr { border-bottom: 1px solid var(--rule); padding: 0.55rem 0; }
  .register tr:last-child { border-bottom: 0; }
  .register td { border: 0; padding: 0.1rem 0.9rem; }
  .register td.meta-col::before {
    content: attr(data-label) "  ";
    font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--graphite);
  }
}

/* ---------- Project blocks on the index ---------- */

.project-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(1.2rem, 3.5vw, 2.6rem);
  padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.project-block:first-of-type { border-top: 0; }
.project-block .media { background: var(--panel); border: 1px solid var(--rule);   border-radius: var(--radius);
  overflow: hidden;
}
.project-block .media img { width: 100%; }
.project-block h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.project-block h3 a { color: inherit; text-decoration: none; }
.project-block h3 a:hover { text-decoration: underline; }
.project-block .tags {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--graphite); margin-top: 0.7rem;
}
.project-block .more {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .project-block { grid-template-columns: 1fr; }
  .project-block .media { order: -1; max-width: 480px; }
}

/* ---------- Project page furniture ---------- */

.backlink {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  display: inline-block; margin-bottom: 1.6rem;
}
.page-hero { margin: 2rem 0 0; background: var(--panel); border: 1px solid var(--rule);   border-radius: var(--radius);
  overflow: hidden;
}

/* Spec strip */
.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); margin: 2rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.specs > div { background: var(--panel); padding: 0.7rem 0.9rem; min-width: 0; }
.specs dt {
  font-family: var(--mono); font-weight: 500; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--graphite);
  margin-bottom: 0.2rem;
}
.specs dd { margin: 0; font-size: 0.88rem; font-weight: 500; overflow-wrap: break-word; }

/* Decisions: Considered → Chose → Why */
.decision { border: 1px solid var(--rule); background: var(--panel); margin: 1.4rem 0;   border-radius: var(--radius);
  overflow: hidden;
}
.decision h4 {
  margin: 0; padding: 0.75rem 1rem;
  font-size: 0.98rem; font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.decision .cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; }
.decision .col { padding: 0.8rem 1rem 0.9rem; min-width: 0; }
.decision .col + .col { border-left: 1px solid var(--rule); }
.decision .col .label { display: block; margin-bottom: 0.4rem; }
.decision .col.chose { background: var(--accent-soft); }
.decision .col.chose .label { color: var(--accent); }
.decision ul { margin: 0; padding-left: 1.1rem; }
.decision li { margin-bottom: 0.45rem; font-size: 0.92rem; }
.decision p { margin: 0 0 0.6em; font-size: 0.92rem; }
.decision p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .decision .cols { grid-template-columns: 1fr; }
  .decision .col + .col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* "What went wrong" log block — amber left border (load/force palette) */
.log {
  border-left: 3px solid var(--load);
  background: var(--panel);
  border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.2rem 1.4rem 0.4rem;
  max-width: var(--measure); margin: 1.2rem 0;
  border-radius: var(--radius);
}
.log .label { display: block; margin-bottom: 0.6rem; color: var(--load); }

/* Labelled term/description list */
.deflist { border: 1px solid var(--rule); background: var(--panel); margin: 1.4rem 0;   border-radius: var(--radius);
  overflow: hidden;
}
.deflist > div { display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid var(--rule); }
.deflist > div:first-child { border-top: 0; }
.deflist dt {
  font-family: var(--mono); font-weight: 500; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--graphite);
  padding: 0.8rem 1rem;
}
.deflist dd { margin: 0; padding: 0.8rem 1rem 0.8rem 0; font-size: 0.92rem; }
@media (max-width: 620px) {
  .deflist > div { grid-template-columns: 1fr; }
  .deflist dd { padding: 0 1rem 0.8rem; }
}

/* Seeking callout — petrol left border */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 1.3rem; max-width: var(--measure); margin: 1.6rem 0;
  border-radius: var(--radius);
}
.callout p { margin: 0; font-weight: 500; }

/* TODO note (draft mode only) */
.todo {
  border: 1px dashed var(--flag);
  background: var(--panel);
  padding: 0.9rem 1.2rem; max-width: var(--measure); margin: 1.2rem 0;
  font-size: 0.92rem;
  border-radius: var(--radius);
}
.todo .label { display: block; color: var(--flag); margin-bottom: 0.4rem; }
.todo p { margin: 0 0 0.5em; }
.todo p:last-child { margin-bottom: 0; }

/* ---------- Gallery + lightbox ---------- */

.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem; margin-top: 1.6rem;
}
.gallery.small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gallery figure { margin: 0; }
.gallery button.thumb {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--rule); background: var(--panel); cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery button.thumb img { width: 100%; }
.gallery figcaption {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5;
  color: var(--graphite); margin-top: 0.45rem; letter-spacing: 0.02em;
}

.video-figure { margin: 1.6rem 0 0; max-width: 720px; }
.video-figure.portrait { max-width: 420px; }
.video-figure video { width: 100%; border: 1px solid var(--rule); background: var(--panel);   border-radius: var(--radius);
}
.video-figure figcaption {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5;
  color: var(--graphite); margin-top: 0.45rem; letter-spacing: 0.02em;
}
.video-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.video-row .video-figure { flex: 1 1 260px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(27, 18, 51, 0.93);
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem; flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(1400px, 100%); max-height: calc(100vh - 8rem);
  width: auto; height: auto; background: var(--panel);
  border-radius: var(--radius);
}
.lightbox figcaption {
  color: #CFC5E8; font-family: var(--mono); font-size: 0.75rem;
  margin-top: 0.9rem; text-align: center; max-width: 70ch; letter-spacing: 0.02em;
}
.lightbox .close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; color: #fff; border: 1px solid #6E6294;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.45rem 0.9rem; cursor: pointer;
}
.lightbox .close:hover { border-color: #fff; }

/* ---------- Seasons (FTC cards) ---------- */

.season { border: 1px solid var(--rule); background: var(--panel); margin: 1.6rem 0; padding: 1.4rem 1.5rem 1.5rem;   border-radius: var(--radius);
}
.season .eyebrow { margin-bottom: 0.35rem; }
.season h3 { margin-bottom: 0.2rem; }
.season .meta { font-family: var(--mono); font-size: 0.7rem; color: var(--graphite); letter-spacing: 0.06em; margin-bottom: 0.9rem; }
.season .prose { max-width: none; }
.season .gallery { margin-top: 1.2rem; }

/* ---------- Skills table ---------- */

.skills { border: 1px solid var(--rule); background: var(--panel); margin-top: 1.6rem;   border-radius: var(--radius);
  overflow: hidden;
}
.skills > div { display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid var(--rule); }
.skills > div:first-child { border-top: 0; }
.skills dt {
  font-family: var(--mono); font-weight: 500; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--graphite);
  padding: 0.8rem 1rem;
}
.skills dd { margin: 0; padding: 0.8rem 1rem 0.8rem 0; font-size: 0.92rem; }
@media (max-width: 620px) {
  .skills > div { grid-template-columns: 1fr; }
  .skills dd { padding: 0 1rem 0.8rem; }
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); padding: 2.2rem 0 3rem; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.site-footer .contacts { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.92rem; }
.site-footer .colophon { font-family: var(--mono); font-size: 0.65rem; color: var(--graphite); letter-spacing: 0.08em; }

/* ---------- Section headers ---------- */

.section-head { margin-bottom: 1.8rem; }
.section-head h2 { margin-bottom: 0.2rem; }
.subsection { margin-top: 2.6rem; }
.subsection h3 { margin-bottom: 0.7rem; }

/* ---------- Cover page (home) ----------
   One viewport tall, no scrolling: a video stage on top and a solid dark
   plate beneath carrying the name, section links and contact details. */

/* The cover is the whole page. Body is the flex column so anything stacked
   above it (the draft banner) takes its height out of the cover rather than
   pushing the plate off-screen. */
body.is-cover {
  height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
body.is-cover > main {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

.cover {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--cover-dark);
  color: #F1EDFC;
  overflow: hidden;
}

.cover-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;                              /* lets the stage shrink, not the plate */
  overflow: hidden;
}
.cover-stage .cover-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* Fills the stage edge to edge. The clip carries the name in its lower
     left, so the crop is biased downward (65%) to keep the wordmark inside
     the visible band even on short, very wide windows. */
  object-fit: cover; object-position: center 65%;
}
/* Portrait screens are narrower than the clip, where `cover` would slice the
   name off horizontally — letterbox there instead. */
@media (max-aspect-ratio: 5/4) {
  .cover-stage .cover-bg { object-fit: contain; object-position: center; }
}

/* No scrim: nothing is overlaid on the animation any more. */
.cover-top { position: relative; z-index: 2; }
.cover-top .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.3rem; padding-bottom: 1.1rem;
}
.cover-top .wordmark { color: #F1EDFC; }
.cover-plate h1, .cover-plate h2, .cover-plate h3 { color: #F1EDFC; }
.cover-top .site-nav a { color: rgba(241, 237, 252, 0.8); }
.cover-top .site-nav a:hover { color: #fff; }

/* --- the dark plate --- */

.cover-plate {
  flex: 0 0 auto;
  background: var(--cover-dark);
  border-top: 1px solid rgba(241, 237, 252, 0.14);
  padding: clamp(0.6rem, 1.2vh, 0.95rem) 0 clamp(0.45rem, 0.9vh, 0.7rem);
}
.plate-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap;
}
.cover-blurb {
  font-size: clamp(0.98rem, 1.25vw, 1.14rem);
  line-height: 1.5;
  max-width: 54ch;
  margin: 0;
  flex: 1 1 360px; min-width: 0;
  color: rgba(241, 237, 252, 0.84);
}
.cover-blurb strong { font-weight: 600; color: #fff; }

.plate-links { display: flex; gap: 0.6rem; flex-wrap: wrap; flex: 0 0 auto; }
.plate-links a {
  display: flex; align-items: baseline; gap: 0.5rem;
  text-decoration: none; color: #F1EDFC;
  font-family: var(--display); font-weight: 700; font-stretch: 113%;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem); letter-spacing: -0.01em;
  border: 1px solid rgba(241, 237, 252, 0.32);
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem 0.65rem;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.plate-links a .label { color: rgba(241, 237, 252, 0.45); }
.plate-links a::after { content: "→"; font-family: var(--sans); font-weight: 400; }
.plate-links a:hover, .plate-links a:focus-visible {
  background: rgba(84, 51, 168, 0.65);
  border-color: rgba(241, 237, 252, 0.7);
}

.plate-contact {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  margin-top: clamp(0.4rem, 0.9vh, 0.65rem);
  padding-top: clamp(0.35rem, 0.8vh, 0.55rem);
  border-top: 1px solid rgba(241, 237, 252, 0.12);
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.plate-contact a { color: rgba(241, 237, 252, 0.78); text-decoration: none; }
.plate-contact a:hover { color: #fff; text-decoration: underline; }
.plate-contact span { color: rgba(241, 237, 252, 0.45); }

@media (max-width: 860px) {
  .plate-main { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  /* the row basis would become a height once the plate stacks */
  .cover-blurb { flex: 0 0 auto; }
  .plate-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .plate-links a { justify-content: center; padding: 0.65rem 0.5rem; font-size: 1.05rem; }
  .plate-links a .label, .plate-links a::after { display: none; }
  .cover-blurb { font-size: 0.92rem; }
}
@media (max-width: 560px) {
  .cover-blurb { font-size: 0.95rem; }
  .plate-contact { gap: 0.9rem; font-size: 0.7rem; }
}
/* Very short windows: tighten the plate rather than hiding anything. */
@media (max-height: 620px) {
  .cover-blurb { font-size: 0.92rem; line-height: 1.42; }
  .plate-links a { padding: 0.45rem 0.85rem 0.5rem; }
}

/* ---------- AUV state cycle (projects register) ----------
   Steps through the aligned hull renders, then the prop renders when those
   exist, so the cover reads: arms out -> arms in -> props out -> props folded.
   JS drives it; prop frames are skipped if their files are absent. */

.auv-anim { position: relative; overflow: hidden; background: var(--panel); }
.auv-anim img { width: 100%; display: block; }
.auv-anim img.frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; background: var(--panel);
  opacity: 0; transition: opacity 0.6s ease;
}
.auv-anim img.frame.is-on { opacity: 1; }
.auv-anim .anim-note {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite);
  background: rgba(255, 255, 255, 0.88);
  padding: 0.25rem 0.55rem;
  border-top-right-radius: var(--radius);
}

/* ---------- AUV configuration switch (project page) ----------
   One control drives every panel: chassis and props change together. */

.config-panels {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
}
.config-panels.has-props { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 820px) {
  .config-panels.has-props { grid-template-columns: 1fr; }
}
.config-panel { margin: 0; min-width: 0; }
.config-panel .frame { position: relative; overflow: hidden; }
.config-panel figcaption {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.5;
  color: var(--graphite); margin-top: 0.45rem; letter-spacing: 0.04em;
}

/* ---------- Fabrication grid ----------
   Row 1: the milling clip, with CAM and the finished part stacked beside it.
   Row 2: waterjet and bandsaw side by side underneath. */

.fab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  margin-top: 1.6rem;
  align-items: start;
}
.fab-grid figure { margin: 0; }
.fab-grid figcaption {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.45;
  color: var(--graphite); margin-top: 0.4rem; letter-spacing: 0.02em;
}
.fab-grid .fab-clip video {
  width: 100%; max-width: 300px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel);
}
.fab-grid .fab-stack { display: grid; gap: 1.1rem; align-content: start; }
.fab-grid button.thumb {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel); cursor: zoom-in; overflow: hidden;
}
.fab-grid button.thumb img { width: 100%; }
@media (max-width: 720px) {
  .fab-grid { grid-template-columns: 1fr; }
  .fab-grid .fab-clip video { max-width: 100%; }
}

/* ---------- About page ---------- */

.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.about-grid .portrait-figure { margin: 0; }
.about-grid .portrait-figure img { border: 1px solid var(--rule); background: var(--panel);   border-radius: var(--radius);
}
.about-grid .portrait-figure figcaption {
  font-family: var(--mono); font-size: 0.68rem; color: var(--graphite);
  margin-top: 0.45rem; letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .portrait-figure { order: -1; max-width: 260px; }
}
.about-list { margin: 0 0 1.2em; padding-left: 1.15rem; max-width: var(--measure); }
.about-list li { margin-bottom: 0.55rem; }
.about-h {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  margin: 1.6rem 0 0.6rem;
}

/* ---------- Resume page ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 0.7rem 1.3rem; border-radius: 2px;
}
.btn:hover { background: #452A8C; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }
.resume-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

.resume-sheet {
  background: var(--panel); border: 1px solid var(--rule);
  padding: clamp(1.4rem, 4vw, 2.8rem);
  max-width: 820px; margin-top: 2rem;
  border-radius: var(--radius);
}
.resume-sheet header { border-bottom: 2px solid var(--ink); padding-bottom: 0.9rem; margin-bottom: 1.4rem; }
.resume-sheet header h2 { margin: 0 0 0.15em; font-size: 1.7rem; }
.resume-contact {
  font-family: var(--mono); font-size: 0.7rem; color: var(--graphite);
  letter-spacing: 0.05em; display: flex; gap: 0.9rem; flex-wrap: wrap;
}
.resume-section { margin-top: 1.5rem; }
.resume-section > h3 {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem; margin-bottom: 0.9rem;
}
.resume-item { margin-bottom: 1.05rem; }
.resume-item .row {
  display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; flex-wrap: wrap;
}
.resume-item .role { font-weight: 600; font-size: 0.97rem; }
.resume-item .role .org { font-weight: 400; color: var(--graphite); }
.resume-item .dates { font-family: var(--mono); font-size: 0.7rem; color: var(--graphite); letter-spacing: 0.06em; white-space: nowrap; }
.resume-item ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.resume-item li { font-size: 0.9rem; margin-bottom: 0.3rem; }
.resume-kv { display: grid; grid-template-columns: 150px 1fr; gap: 0.25rem 1rem; }
.resume-kv dt { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--graphite); }
.resume-kv dd { margin: 0; font-size: 0.9rem; }
@media (max-width: 560px) { .resume-kv { grid-template-columns: 1fr; } .resume-kv dd { margin-bottom: 0.4rem; } }

@media print {
  .site-header, .site-footer, .draft-banner, .todo, .resume-actions, .backlink, .skip-link { display: none !important; }
  body { background: #fff; }
  section { padding: 0; }
  section + section { border: 0; }
  .hero { padding-top: 0; }
  .resume-sheet { border: 0; padding: 0; max-width: none; margin-top: 0; }
  a { color: inherit; text-decoration: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}