/* ==========================================================================
   Sam Khalaf — portfolio styles

   A dark, high-technology look: deep blue-black space, glass panels with fine
   luminous edges, one cyan-to-violet accent, and a plant display that glows
   like a screen in a control room.

   1. Fonts            6. Hero + demo story     11. Footer
   2. Design tokens    7. HMI display           12. Image viewer
   3. Base             8. Sections              13. Motion, print
   4. Helpers          9. Experience, work
   5. Header          10. Skills, credentials, education, contact

   Conventions
   - Change colors, type sizes, and spacing in section 2 only.
   - No text is set smaller than 14px (--fs-0 at the page scale set on html). Labels inside the process
     diagrams scale with the drawing and stay at 12px or more.
   - Alarm colors (--p1, --p2, --p3, --bad) are reserved for the HMI display.
   ========================================================================== */

/* 1. FONTS ----------------------------------------------------------------
   Self-hosted subsets; licence notes are in assets/fonts/README.txt.          */

@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* The plant display keeps its own plain instrument face. */
@font-face {
  font-family: "Heros Web";
  src: url("./assets/fonts/heros-web-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heros Web";
  src: url("./assets/fonts/heros-web-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Mono Web";
  src: url("./assets/fonts/dejavu-mono-web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. DESIGN TOKENS -------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Type families */
  --font-text: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-hmi: "Heros Web", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: "DejaVu Mono Web", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale: 14 / 16 / 17 / 19.5 px at the page scale, then fluid display sizes */
  --fs-0: 0.9375rem;
  --fs-1: 1.0625rem;
  --fs-2: 1.125rem;
  --fs-3: 1.3rem;
  --fs-4: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
  --fs-5: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  --fs-6: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 88rem;
  --header-h: 3.2rem;
  --radius: 18px;
  --radius-s: 12px;

  /* Space, glass, and light */
  --bg: #05080f;
  --panel: rgba(17, 26, 43, 0.66);
  --panel-2: rgba(24, 36, 58, 0.6);
  --panel-solid: #0c1422;
  --line: rgba(128, 168, 230, 0.16);
  --line-2: rgba(128, 176, 240, 0.34);
  --ink: #eef4ff;
  --ink-2: #b9c6dc;
  --ink-3: #93a2bc;
  --accent: #46d9ff;
  --accent-2: #5b8cff;
  --accent-3: #9b7bff;
  --accent-ink: #86e4ff;
  --link: #8bdcff;
  --ok: #7ff0bd;
  --grad: linear-gradient(100deg, #46d9ff 0%, #5b8cff 55%, #9b7bff 100%);
  --glow: 0 0 0 1px rgba(70, 217, 255, 0.22), 0 18px 50px -18px rgba(70, 150, 255, 0.55);
  --figure: #ffffff;

  /* HMI palette: a dark graphite screen. Gray when normal, color only for alarms. */
  --h-bg: #101822;
  --h-bar: #0b121b;
  --h-list: #0a1018;
  --h-line: #33414f;
  --h-ink: #e8eef6;
  --h-ink-2: #aab7c9;
  --h-live: #8fd0ff;
  --h-on: #dfe8f2;
  --h-on-ink: #0b121b;
  --h-on-sub: #3c4856;
  --h-on-live: #0b4a8f;
  --h-off: #263342;
  --h-off-ink: #e8eef6;
  --h-btn: #1a2533;
  --h-btn-ink: #e8eef6;
  --h-track: #0a1018;
  --h-band: #3d4d62;

  /* Alarm palette: priority 1, 2, 3 and bad/stale quality */
  --p1: #ff5a67;
  --p1-ink: #14060a;
  --p2: #ffcf33;
  --p2-ink: #171200;
  --p3: #ff8f2e;
  --p3-ink: #180c00;
  --bad: #f08ae0;
  --bad-ink: #1c0619;
}

/* 3. BASE ----------------------------------------------------------------- */

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

html {
  /* the whole page is drawn about 6% smaller than the browser default, so more fits on a screen */
  font-size: 93.75%;
  background: var(--bg);
  scrollbar-color: #2b3b57 #05080f;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.6rem);
}

body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--fs-2)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The sky: three soft lights and a fine grid that fades with distance. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(58rem 40rem at 88% -8%, rgba(70, 140, 255, 0.22), transparent 62%),
    radial-gradient(46rem 34rem at -8% 12%, rgba(70, 217, 255, 0.13), transparent 62%),
    radial-gradient(60rem 46rem at 50% 118%, rgba(155, 123, 255, 0.14), transparent 62%);
}
body::after {
  background-image:
    linear-gradient(rgba(128, 168, 230, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 168, 230, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: #c3efff; text-decoration-thickness: 2px; }

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

::selection { background: var(--accent); color: #04121d; }

/* 4. HELPERS --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

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

/* Controls that only work with JavaScript stay hidden without it. */
.no-js .js-only { display: none !important; }

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: #ffffff;
  color: #05080f;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Reading progress: a hairline of light along the top edge. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: 2px;
  background: var(--grad);
  transform: scaleX(var(--read, 0));
  transform-origin: left;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background-color: rgba(18, 28, 46, 0.7);
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn:hover {
  border-color: var(--accent);
  background-color: rgba(26, 52, 78, 0.85);
  color: var(--ink);
  box-shadow: var(--glow);
}
.btn-solid {
  border-color: transparent;
  background: var(--grad), #5b8cff;
  background-color: #5b8cff;
  color: #04121d;
  font-weight: 700;
  box-shadow: 0 14px 34px -14px rgba(70, 160, 255, 0.85);
}
.btn-solid:hover {
  border-color: transparent;
  background: var(--grad), #5b8cff;
  color: #04121d;
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 2.95rem; padding: 0.35rem 1rem; border-radius: 10px; font-size: var(--fs-0); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cards that light up under the pointer: script.js sets --mx and --my. */
.glow { position: relative; }
.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), rgba(70, 217, 255, 0.11), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
@media (hover: hover) { .glow:hover::after { opacity: 1; } }

/* Tool lists read as one line of text, not as rows of small boxes. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin-top: 0.9rem;
  color: var(--ink-2);
  font-size: var(--fs-1);
}
.tags li:not(:last-child)::after { content: ","; }

.table-scroll { overflow-x: auto; }

/* Small uppercase labels, the page's "instrument lettering". */
.sec-kicker,
.project-kind,
.claims dt,
.attach-title,
.verify-title,
.story-title,
.layer-step,
.method-title,
.sim-label,
.cred-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 5. HEADER ---------------------------------------------------------------- */

/* The header floats: a glass bar the width of the content, a little below the top edge. */
.site-header {
  position: sticky;
  top: 0.4rem;
  z-index: 20;
  margin-top: 0.4rem;
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: var(--header-h);
  padding-inline: 0.7rem 0.45rem;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background-color: rgba(7, 11, 20, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.3rem;
  font-size: var(--fs-1);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-photo {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  padding: 2px;
  border-radius: 50%;
  background: var(--grad);
}
.brand-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 0.15rem; }
.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.65rem;
  color: var(--ink-2);
  font-size: var(--fs-0);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.2s, transform 0.2s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { opacity: 1; transform: none; }
.site-nav a[aria-current="true"] { color: var(--ink); }

.header-tools { display: flex; align-items: center; gap: 0.4rem; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.95rem;
  min-height: 2.95rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background-color: rgba(18, 28, 46, 0.7);
  font-size: var(--fs-0);
  font-weight: 500;
  cursor: pointer;
}
.tool-btn:hover { border-color: var(--accent); }

.header-cta { min-height: 2.3rem; margin-left: 0.5rem; padding-block: 0.2rem; }
.tool-btn { min-height: 2.5rem; }
/* on touch screens the bar's controls keep a full-size target */
@media (pointer: coarse) {
  .brand, .site-nav a, .header-cta, .tool-btn { min-height: 2.95rem; }
}
@media (min-width: 70rem) {
  .header-tools { display: none; }
}
@media (max-width: 69.99rem) {
  .header-cta { display: none; }
  .header-tools { margin-left: auto; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline: 0;
    margin: 0;
    padding: 0.25rem 1.1rem 0.9rem;
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background-color: rgba(6, 10, 18, 0.98);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
  }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a {
    min-height: 3.1rem;
    padding: 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-2);
  }
  .js .site-nav a::after { display: none; }
  .no-js .header-inner { flex-wrap: wrap; padding-block: 0.4rem; }
  .no-js .site-nav { width: 100%; margin: 0; }
  .no-js .site-nav a { padding-left: 0; }
}

/* 6. HERO + DEMO STORY ------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.4rem, 3.2vw, 2.75rem) clamp(1.75rem, 4vw, 3rem);
}
/* a slow field of connected nodes behind the opening; drawn by script.js */
.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.hero .wrap { position: relative; }
.hero { isolation: isolate; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.hero::before { top: -16%; right: -6%; width: 46rem; height: 34rem; background: radial-gradient(closest-side, rgba(70, 150, 255, 0.36), transparent); }
.hero::after { bottom: -26%; left: -10%; width: 44rem; height: 32rem; background: radial-gradient(closest-side, rgba(155, 123, 255, 0.24), transparent); }
.hero-grid { display: grid; gap: 1.75rem 3rem; align-items: center; }
@media (min-width: 48rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}
/* the credential tiles arrange themselves by the width of the text column, not of the screen */
.hero-copy { container: copy / inline-size; min-width: 0; }
.hero-role {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1rem 0.4rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background-color: rgba(18, 28, 46, 0.7);
  color: var(--accent-ink);
  font: 400 var(--fs-0)/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pulse {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(70, 217, 255, 0.7);
}
.hero h1 {
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.lede {
  max-width: 40rem;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 0.8rem;
  margin-top: 1.5rem;
}
.hero-actions .btn { min-height: 3.1rem; padding-inline: 1.5rem; }
.hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.95rem;
  margin-left: 0.5rem;
  font-size: var(--fs-1);
}
/* Credentials at a glance: one large tile for Ignition, where Gold leads, and two
   equal tiles beside it. Every tile is a mark and, where needed, a two-line label. */
.hero-quals { display: grid; gap: 0.6rem; margin-top: 1.4rem; }
.hero-quals li { display: grid; min-width: 0; }
@container copy (min-width: 37rem) {
  .hero-quals { grid-template-columns: auto fit-content(28.5rem); justify-content: start; }
  .hero-quals li:first-child { grid-row: 1 / span 2; }
}
.qual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  min-width: 0;
  padding: 0.5rem 1.1rem 0.5rem 0.55rem;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background-color: rgba(18, 28, 46, 0.62);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qual:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--glow); }
/* marks sit on a light plate, the way the issuers print them, so dark artwork stays visible */
.qual-plate {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: 12px;
  background: #f3f4f6;
}
.qual-plate img { width: auto; height: 2.5rem; }
.qual-plate img:only-child { mix-blend-mode: multiply; }   /* a logo on white takes the plate's tint */
.qual-label { display: grid; flex: 1 1 8.5rem; gap: 0.1rem; min-width: 0; font-size: var(--fs-0); line-height: 1.25; }
.qual-label strong { font-weight: 500; }
.qual-label span { color: var(--ink-3); }
.qual-ignition {
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  padding: 0.75rem clamp(0.9rem, 2vw, 1.3rem);
  border-color: rgba(240, 190, 70, 0.5);
  border-radius: 22px;
  background-image: linear-gradient(135deg, rgba(240, 190, 70, 0.14), rgba(18, 28, 46, 0) 55%);
}
.qual-ignition:hover { border-color: #f0be46; box-shadow: 0 0 0 1px rgba(240, 190, 70, 0.3), 0 18px 50px -18px rgba(240, 190, 70, 0.45); }
.qual-ignition img { width: auto; min-width: 0; }
.qual-ignition .badge-gold { height: clamp(5.25rem, 11vw, 6.75rem); filter: drop-shadow(0 10px 24px rgba(240, 180, 40, 0.38)); }
.qual-ignition .badge-core { height: clamp(3.4rem, 7.2vw, 4.25rem); }
.qual-ignition .badge-83 { height: clamp(3.6rem, 7.6vw, 4.5rem); }

/* The portrait sits in a ring of slowly turning light. */
.hero-visual { display: grid; justify-items: center; }
.portrait {
  position: relative;
  width: min(100%, 18.5rem);
  padding: 3px;
  border-radius: 34px;
  background: conic-gradient(from var(--angle, 0deg), #46d9ff, #5b8cff, #9b7bff, #5b8cff, #46d9ff);
  box-shadow: 0 0 0 10px rgba(70, 217, 255, 0.05), 0 44px 110px -34px rgba(70, 150, 255, 0.9);
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 31px;
  object-fit: cover;
}
@media (max-width: 47.99rem) {
  .hero-visual { justify-items: start; order: -1; }
  .portrait { width: clamp(8rem, 36vw, 12rem); }
}

/* Courses and other training: a quiet strip of issuers under the introduction. */
.hero-training {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.hero-training-label {
  color: var(--accent-ink);
  font: 400 var(--fs-0)/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Four specific accomplishments; each card links to the part of the page that backs it up. */
.highlights {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
}
@media (min-width: 40rem) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.highlight {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  padding: 1.2rem 1.3rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.3), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.highlight:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--glow); transform: translateY(-2px); }
.highlight-arrow { position: absolute; top: 1.15rem; right: 1.15rem; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.highlight:hover .highlight-arrow { color: var(--accent); transform: translate(2px, -2px); }
.highlight-kind { padding-right: 1.75rem; }
.highlight-kind {
  color: var(--accent-ink);
  font: 400 var(--fs-0)/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.highlight strong { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.highlight-text { color: var(--ink-2); font-size: var(--fs-1); line-height: 1.5; }

/* The demo: a story column (what to do, what happened) and the display. */
.demo { display: grid; gap: 1.5rem 2rem; }
.demo-story { display: grid; gap: 1.25rem 2rem; align-content: start; min-width: 0; }
.demo-how { max-width: 44rem; color: var(--ink-2); }
.sim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1.25rem;
}
.sim-label { color: var(--accent-ink); }
.sim-buttons { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sim .btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad), #5b8cff;
  background-color: #5b8cff;
  color: #04121d;
  font-weight: 700;
}
.demo-built { max-width: 44rem; margin-top: 1.1rem; color: var(--ink-3); font-size: var(--fs-0); }

.story {
  min-width: 0;
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.28), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1rem;
}
.story-title { color: var(--accent-ink); }
.story .timeline,
.story .outcome { grid-column: 1 / -1; }
.timeline { display: grid; gap: 0.55rem; margin-top: 0.75rem; font-size: var(--fs-1); line-height: 1.45; }
.timeline li,
.outcome > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.6rem;
}
.timeline .timeline-idle { display: block; color: var(--ink-2); }
.timeline-t { color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--fs-0); line-height: 1.7; }
.outcome {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-1);
  line-height: 1.45;
}
.outcome[hidden] { display: none; }
.outcome dt { font-weight: 700; }
.outcome dd { color: var(--ink-2); }
#demo-expand { grid-column: 2; grid-row: 1; }

@media (min-width: 52rem) {
  .demo-story { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* Compact (the default): the story sits beside a display that shows the alarm
   banner and the process diagram. "Expand demo" adds values, trend, and tags. */
@media (min-width: 78rem) {
  .js .demo[data-expanded="false"] {
    grid-template-columns: 24rem minmax(0, 1fr);
    grid-template-areas: "intro display" "story story";
    align-items: start;
  }
  /* the story column dissolves: its two parts take their own places in the grid */
  .js .demo[data-expanded="false"] .demo-story { display: contents; }
  .js .demo[data-expanded="false"] .demo-intro { grid-area: intro; }
  .js .demo[data-expanded="false"] .hmi { grid-area: display; }
  .js .demo[data-expanded="false"] .story { grid-area: story; }
  /* under the display, the sequence runs left to right */
  .js .demo[data-expanded="false"] .timeline { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.9rem 2rem; }
  .js .demo[data-expanded="false"] .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .js .demo[data-expanded="false"] .outcome { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
  .js .demo[data-expanded="false"] .outcome > div { display: block; }
}
.js .demo[data-expanded="false"] .hmi-group-values,
.js .demo[data-expanded="false"] .hmi-group-trend,
.js .demo[data-expanded="false"] .hmi-tags { display: none; }

/* 7. HMI DISPLAY -----------------------------------------------------------
   Sized by its own width (container queries), not by the viewport:
     under 46rem   equipment tiles, values, trend stacked (phones)
     46rem and up  process diagram on top, values and trend below
     70rem and up  diagram beside values and trend
   A dark graphite screen with a lit edge: gray while normal, color for alarms.  */

.hmi {
  container: hmi / inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(70, 217, 255, 0.45);
  border-radius: var(--radius);
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--font-hmi);
  font-size: var(--fs-1);
  line-height: 1.35;
  box-shadow: 0 0 0 6px rgba(70, 217, 255, 0.05), 0 40px 100px -40px rgba(40, 120, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hmi-sprite { position: absolute; }
.hmi :focus-visible { outline-color: var(--h-live); }

/* Priority symbols: shape, number, and color all carry the priority. */
.pri { flex: none; overflow: visible; }
.hmi-sprite text { font: 700 11px var(--font-hmi); }
#pri-1 rect { fill: var(--p1); }
#pri-1 text { fill: var(--p1-ink); }
#pri-2 path { fill: var(--p2); }
#pri-2 text { fill: var(--p2-ink); }
#pri-3 path { fill: var(--p3); }
#pri-3 text { fill: var(--p3-ink); }

.hmi-btn,
.hmi-tabs button {
  min-height: 2.5rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--h-line);
  border-radius: 0;
  background: var(--h-btn);
  color: var(--h-btn-ink);
  font-family: var(--font-hmi);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.hmi-btn:hover:not(:disabled),
.hmi-tabs button:hover { background: var(--h-ink); color: var(--h-bg); }
.hmi-tabs button[aria-selected="true"] { background: var(--h-ink); color: var(--h-bg); }
.hmi-btn:disabled {
  border-color: var(--h-line);
  background: transparent;
  color: var(--h-ink-2);
  cursor: default;
}
@media (pointer: coarse) {
  .hmi-btn,
  .hmi-tabs button,
  .btn-small { min-height: 2.95rem; }
}

/* Title bar */
.hmi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--h-bar);
  border-bottom: 1px solid var(--h-line);
}
.hmi-title { font: 700 var(--fs-2)/1.2 var(--font-hmi); }
.hmi-sim { margin-left: auto; color: var(--h-ink-2); font-size: var(--fs-0); }
.hmi-tabs { display: flex; flex: 1 1 100%; min-width: 0; order: 3; }
.hmi-tabs button { flex: 1; min-width: 0; padding-inline: 0.4rem; }
.hmi-tabs button + button { border-left-width: 0; }

/* Alarm banner: fixed rows on wide panels, so the display never jumps. */
.hmi-alarms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--h-line);
}
.hmi-counts { display: flex; gap: 0.9rem; }
.hmi-counts li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.hmi-counts .is-zero { color: var(--h-ink-2); }
.hmi-counts .is-zero .pri { filter: grayscale(1); opacity: 0.5; }
.hmi-alarm-rows {
  display: grid;
  gap: 2px;
  grid-column: 1 / -1;
  min-width: 0;
}
.alarm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.6rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.5rem;
  background: var(--h-list);
}
.alarm-none { color: var(--h-ink-2); }
.alarm-blank { display: none; }
.alarm-time { color: var(--h-ink-2); font-variant-numeric: tabular-nums; }
.alarm-tag { font-family: var(--font-mono); font-size: var(--fs-0); font-weight: 400; }
.alarm-text { flex: 1 1 10rem; min-width: 0; font-weight: 700; }
.alarm-state { color: var(--h-ink-2); font-size: var(--fs-0); }
.alarm[data-cleared] .alarm-text { font-weight: 400; color: var(--h-ink-2); }
.alarm[data-unack] .pri { animation: hmi-flash 1s steps(1, end) infinite; }
@keyframes hmi-flash {
  50% { opacity: 0.2; }
}

/* Main area */
.hmi-body {
  display: grid;
  gap: 1px;
  background: var(--h-line);
  border-bottom: 1px solid var(--h-line);
}
.hmi-group {
  min-width: 0;
  padding: 0.7rem 0.9rem 0.95rem;
  background: var(--h-bg);
}
.hmi-group h4 {
  margin-bottom: 0.6rem;
  color: var(--h-ink-2);
  font: 700 var(--fs-0)/1.3 var(--font-hmi);
}

/* Process diagram: pipes and wires are dark when they carry flow or power. */
.mimic { display: none; }
.mimic svg {
  width: 100%;
  max-width: 50rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.mimic text { font: 400 13px var(--font-hmi); fill: var(--h-ink); }
.mimic .m-tag { font-family: var(--font-mono); }
.mimic .m-state { font-size: 15px; font-weight: 700; }
.mimic .m-sub { fill: var(--h-ink-2); }
.mimic .m-val { font-size: 17px; font-weight: 700; fill: var(--h-live); }
.mimic .m-val.is-stale { fill: var(--h-ink-2); }
.mimic .m-unit { font-size: 13px; font-weight: 400; fill: var(--h-ink-2); }
.mimic .m-glyph { font-size: 17px; font-weight: 700; }
.pipe,
.wire { fill: none; stroke: var(--h-line); stroke-width: 3; }
.pipe[data-on="true"],
.wire[data-on="true"] { stroke: var(--h-ink); }
.wire.bus { stroke-width: 7; stroke-linecap: square; }
.wire[data-down] { stroke-dasharray: 7 6; }
.arrow { fill: var(--h-line); }
.arrow[data-on="true"] { fill: var(--h-ink); }
.eq rect,
.eq circle { fill: var(--h-off); stroke: var(--h-ink); stroke-width: 2; }
.eq[data-mode="on"] rect,
.eq[data-mode="on"] circle,
.eq[data-mode="moving"] rect,
.eq[data-mode="moving"] circle { fill: var(--h-on); }
.eq[data-mode="moving"] rect,
.eq[data-mode="moving"] circle { stroke-dasharray: 5 4; }
.glyph { fill: none; stroke: var(--h-ink); stroke-width: 2; stroke-linejoin: round; }
/* lettering and symbols on a lit (running) shape turn dark */
.eq[data-mode="on"] text,
.eq[data-mode="moving"] text { fill: var(--h-on-ink); }
.eq[data-mode="on"] .m-sub,
.eq[data-mode="moving"] .m-sub,
.eq[data-mode="on"] .m-unit { fill: var(--h-on-sub); }
.eq[data-mode="on"] .m-val { fill: var(--h-on-live); }
.eq[data-mode="on"] .glyph,
.eq[data-mode="moving"] .glyph { stroke: var(--h-on-ink); }
.valve { fill: var(--h-bg); stroke: var(--h-ink); stroke-width: 2; stroke-linejoin: round; }
.valve[data-open="false"] { fill: var(--h-ink); }
.leader { fill: none; stroke: var(--h-ink); stroke-width: 1.25; }
.bubble circle { fill: var(--h-bg); stroke: var(--h-ink); stroke-width: 1.5; }
.mimic .bubble text { text-anchor: middle; }
.breaker { fill: var(--h-bg); stroke: var(--h-ink); stroke-width: 2; }
.breaker[data-closed="true"] { fill: var(--h-ink); }
.node { fill: var(--h-ink); }
.arm { fill: none; stroke: var(--h-ink); stroke-width: 3; stroke-linecap: round; }
.eq[data-mode="on"] .arm { stroke: var(--h-on-ink); }
.eq[data-mode="on"] .node { fill: var(--h-on-ink); }
.batt { fill: var(--h-bg); stroke: var(--h-ink); stroke-width: 2; }
.batt-nub,
.batt-level { fill: var(--h-ink-2); }
.port { fill: var(--h-bg); stroke: var(--h-on-ink); stroke-width: 1.25; }
.cross { fill: none; stroke: var(--h-ink); stroke-width: 2.5; }
.m-stale rect { fill: var(--bad); }
.mimic .m-stale text { fill: var(--bad-ink); font-weight: 700; text-anchor: middle; }
.mimic .m-stale-note { fill: var(--bad); font-weight: 700; }

/* Equipment tiles (phones): bright means energized, dark means off. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.tile {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 0.5rem 0.65rem 0.55rem;
  border: 1px solid var(--h-ink);
  border-radius: 6px;
}
.tile[data-mode="on"] { background: var(--h-on); color: var(--h-on-ink); }
.tile[data-mode="off"] { background: var(--h-off); color: var(--h-off-ink); }
.tile[data-mode="moving"] { background: var(--h-on); color: var(--h-on-ink); border-style: dashed; }
.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 1.25rem;
}
.tile-tag { font-family: var(--font-mono); font-size: var(--fs-0); font-weight: 400; }
.tile-name { font-size: var(--fs-0); opacity: 0.85; overflow-wrap: anywhere; }
.tile-state { margin-top: 0.2rem; font-weight: 700; }
.tile-note { font-size: var(--fs-0); opacity: 0.85; }

.stale-flag {
  display: inline-block;
  padding: 0 0.35em;
  background: var(--bad);
  color: var(--bad-ink);
  font-size: var(--fs-0);
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 0.08em;
}

/* Analog indicators: the light band is the normal range, the pointer is the value. */
.inds { display: grid; gap: 0.8rem; }
.ind-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.ind-read {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.ind-value {
  color: var(--h-live);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ind-unit { color: var(--h-ink-2); font-size: var(--fs-0); }
.ind-track {
  position: relative;
  height: 0.7rem;
  margin-top: 0.4rem;
  background: var(--h-track);
}
.ind-band {
  position: absolute;
  inset-block: 0;
  left: var(--from);
  width: var(--span);
  background: var(--h-band);
}
.ind-pointer {
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: var(--at);
  width: 4px;
  margin-left: -2px;
  background: var(--h-ink);
}
.ind-scale {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  color: var(--h-ink-2);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
}
.ind[data-mode="alarm"] .ind-value { color: var(--h-ink); }
.ind[data-mode="alarm"] .ind-pointer { width: 6px; margin-left: -3px; outline: 1px solid var(--h-ink); }
.ind[data-pri="1"] .ind-pointer { background: var(--p1); }
.ind[data-pri="2"] .ind-pointer { background: var(--p2); }
.ind[data-pri="3"] .ind-pointer { background: var(--p3); }
.ind[data-mode="stale"] .ind-value { color: var(--h-ink-2); }
.ind[data-mode="stale"] .ind-pointer { background: transparent; outline: 1px solid var(--h-ink); outline-offset: -1px; }

/* Trend */
.trend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.5rem;
}
.trend-y {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--h-ink-2);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.trend-plot {
  position: relative;
  min-height: 7.75rem;
  background: var(--h-track);
}
.trend-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trend-band { fill: var(--h-band); }
.trend-limit {
  stroke: var(--h-ink);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.trend-line {
  fill: none;
  stroke: var(--h-live);
  stroke-width: 2.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.trend-plot[data-stale] .trend-line { stroke: var(--h-ink-2); stroke-dasharray: 2 4; }
.trend-limit-label {
  position: absolute;
  right: 0.4rem;
  transform: translateY(-115%);
  font-size: var(--fs-0);
  line-height: 1;
}
.trend-x {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--h-ink-2);
  font-size: var(--fs-0);
}

/* Tag table: a native disclosure, so it also works without JavaScript */
.hmi-tags { background: var(--h-bar); }
.hmi-tags summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.95rem;
  padding: 0 0.9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.hmi-tags summary::-webkit-details-marker { display: none; }
.hmi-tags summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid currentColor;
  font-weight: 400;
  line-height: 1;
}
.hmi-tags[open] summary::before { content: "\2212"; }
.hmi-tags .table-scroll { padding: 0 0.9rem 0.9rem; background: var(--h-bg); border-top: 1px solid var(--h-line); }
.hmi-tags table { width: 100%; font-size: var(--fs-0); }
.hmi-tags th {
  padding: 0.35rem 1rem 0.35rem 0;
  border-bottom: 1px solid var(--h-ink);
  text-align: left;
}
.hmi-tags td {
  padding: 0.35rem 1rem 0.35rem 0;
  border-bottom: 1px solid var(--h-line);
  white-space: nowrap;
}
.hmi-tags td:first-child { font-family: var(--font-mono); }
.hmi-tags .is-bad { color: var(--bad); font-weight: 700; }

/* Wider panels */
@container hmi (min-width: 42.7rem) {
  .hmi-tabs { flex: 0 0 auto; order: 0; margin-left: auto; }
  .hmi-tabs button { flex: none; min-width: 6.5rem; padding-inline: 0.9rem; }
  .hmi-sim { margin-left: 0; }
  .hmi-alarms { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hmi-alarm-rows { grid-column: auto; }
  .alarm { flex-wrap: nowrap; }
  .alarm-blank { display: flex; }
  .alarm-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alarm-state { white-space: nowrap; }
}
@container hmi (min-width: 49rem) {
  .mimic { display: block; }
  /* The diagram replaces the tiles on screen; the tiles stay for screen readers. */
  .tiles {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .hmi-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "mimic mimic" "values trend";
  }
  .hmi-group-mimic { grid-area: mimic; }
  .hmi-group-values { grid-area: values; }
  .hmi-group-trend { grid-area: trend; display: flex; flex-direction: column; }
  .trend { flex: 1; grid-template-rows: minmax(0, 1fr) auto; }
}
@container hmi (min-width: 74.7rem) {
  .hmi-body {
    grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
    grid-template-areas: "mimic values" "mimic trend";
    grid-template-rows: auto minmax(0, 1fr);
  }
}

/* 8. SECTIONS ---------------------------------------------------------------- */

.section { padding-block: clamp(2.5rem, 5.5vw, 4.25rem); }

.sec-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.2rem 1.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
/* a short run of light at the start of each section's baseline */
.sec-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 7.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(70, 217, 255, 0.7);
}
.sec-kicker { grid-column: 1 / -1; color: var(--accent-ink); }
.sec-num { margin-right: 0.8rem; color: var(--ink-3); }
.sec-head h2 { font: 700 var(--fs-6)/1.1 var(--font-text); letter-spacing: -0.02em; }
.sec-head { isolation: isolate; }
/* the section number again, very large and only outlined, behind the right end of the header */
.sec-head::before {
  content: attr(data-num);
  position: absolute;
  right: 0;
  bottom: 3.2rem;
  z-index: -1;
  color: transparent;
  font: 700 clamp(4rem, 9vw, 7rem)/0.78 var(--font-text);
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1px rgba(128, 176, 240, 0.22);
  pointer-events: none;
}
.sec-head h2,
.hero h1 {
  padding-bottom: 0.06em;
  background: linear-gradient(180deg, #ffffff 30%, #a9c2f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-note {
  justify-self: end;
  margin-bottom: 0.15rem;
  padding: 0.3rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background-color: rgba(8, 13, 23, 0.85);
  color: var(--ink-2);
  font-size: var(--fs-0);
}
.sec-note strong { color: var(--ink); font-weight: 700; }
@media (max-width: 40rem) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head::before { top: 0; bottom: auto; }
  .sec-note { justify-self: start; margin-top: 0.6rem; }
}

/* Every second section sits on a raised band with a line of light along its top edge. */
.band {
  position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 26, 44, 0.62), rgba(7, 11, 20, 0.22) 72%);
}
.band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(64rem, 76%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(70, 217, 255, 0.8), rgba(155, 123, 255, 0.7), transparent);
  transform: translateX(-50%);
}

.cols { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
  .cols {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.aside > p { color: var(--ink-2); }
.section-lede {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--ink-2);
  font-size: var(--fs-3);
  line-height: 1.5;
}

/* 9. EXPERIENCE, WORK ------------------------------------------------------ */

/* Diagnostic method and the path-to-production list are real sequences, so they are numbered. */
.method { margin-top: 1.75rem; }
.method-title { color: var(--accent-ink); }
.method ol {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  counter-reset: step;
}
.method li,
.steps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 500;
  counter-increment: step;
}
.method li::before,
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--accent-ink);
  font: 400 var(--fs-0)/1 var(--font-mono);
}
.steps { display: grid; gap: 0.45rem; margin-top: 0.8rem; counter-reset: step; }
.steps li { font-weight: 400; }

.roles { position: relative; display: grid; gap: 1.1rem; }
@media (min-width: 62rem) {
  .aside { position: sticky; top: 6.5rem; align-self: start; }
}
.role {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.26), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.role-logo {
  grid-row: 1 / span 3;
  width: 7rem;
  height: 4.25rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-s);
  background: #ffffff;
  object-fit: contain;
}
/* title, employer, then dates with the role's length: the same three lines on every card */
.role-head { display: grid; gap: 0.1rem; }
.role h3 { font: 700 var(--fs-4)/1.2 var(--font-text); letter-spacing: -0.02em; }
.role-org { margin-top: 0.15rem; color: var(--ink-2); }
.role-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.65rem;
  margin-top: 0.35rem;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  white-space: nowrap;
}
.role-length {
  padding: 0.05rem 0.65rem;
  border: 1px solid rgba(70, 217, 255, 0.45);
  border-radius: 999px;
  background-color: rgba(70, 217, 255, 0.09);
  color: var(--ink);
  line-height: 1.6;
}
.role-points {
  grid-column: 2;
  max-width: 46rem;
  margin-top: 0.9rem;
  padding-left: 1.1rem;
  list-style: disc;
  color: var(--ink-2);
}
.role-points li + li { margin-top: 0.4rem; }
.role-points li::marker { color: var(--accent); }
.role .tags { grid-column: 2; color: var(--ink-3); }
/* the line of time down the left, with a lit node at each role */
@media (min-width: 40rem) {
  .roles { padding-left: 2.25rem; }
  .roles::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(#46d9ff, #5b8cff 55%, #9b7bff);
    opacity: 0.75;
  }
  .role::before {
    content: "";
    position: absolute;
    top: 2.1rem;
    left: -2.2rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(70, 217, 255, 0.16), 0 0 18px rgba(70, 217, 255, 0.95);
  }
}
@media (max-width: 34rem) {
  .role { grid-template-columns: 4rem minmax(0, 1fr); gap: 0 1rem; padding: 1.2rem; }
  .role-logo { width: 4rem; height: 3.25rem; }
  .role-points, .role .tags { grid-column: 1 / -1; }
}

/* The two flagship projects: glass panels with a lit edge. */
.flagship {
  position: relative;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--panel-solid);
  background-image: linear-gradient(170deg, rgba(44, 70, 116, 0.34) 0%, rgba(12, 20, 34, 0) 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -50px rgba(40, 110, 255, 0.55);
}
.flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(70, 217, 255, 0.75), rgba(91, 140, 255, 0.25) 30%, rgba(155, 123, 255, 0.1) 60%, rgba(70, 217, 255, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.project-kind { color: var(--accent-ink); }
.project h3 { margin-top: 0.4rem; font: 700 var(--fs-5)/1.15 var(--font-text); letter-spacing: -0.025em; }
.project-media { margin-top: 1.6rem; }
.project-main { margin-top: 2rem; }

/* Lead image with numbered callouts; the legend under it says what each one shows. */
/* Screenshots sit in a window frame, photographs in a plain one. */
.window,
.frame {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: #0a111c;
  box-shadow: 0 34px 80px -44px rgba(0, 0, 0, 0.95);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.window:hover,
.frame:hover,
.window:focus-within,
.frame:focus-within { border-color: var(--accent); box-shadow: var(--glow); }
.window-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 32, 52, 0.95);
  color: var(--ink-3);
  font: 400 var(--fs-0)/1.2 var(--font-mono);
}
.window-bar i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: rgba(150, 180, 230, 0.38); }
.window-bar span { flex: 1 1 0; min-width: 0; margin-left: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot { min-width: 0; }
.window-bar i { flex: none; }
.shot a.zoom { position: relative; display: block; background: #ffffff; cursor: zoom-in; }
.shot img { width: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.shot a.zoom:not(:has(.callout)):hover img { transform: scale(1.03); }
.shot-pair { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .shot-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.callout,
.legend li::before {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #46d9ff;
  color: #04121d;
  font: 700 var(--fs-0)/1 var(--font-text);
}
.callout { position: absolute; box-shadow: 0 0 0 3px rgba(4, 18, 29, 0.85), 0 0 18px rgba(70, 217, 255, 0.9); }
/* smaller markers on small pictures, so they point without covering */
@media (max-width: 40rem) {
  .callout { width: 1.4rem; height: 1.4rem; font-size: 0.875rem; box-shadow: 0 0 0 2px rgba(4, 18, 29, 0.85), 0 0 12px rgba(70, 217, 255, 0.9); }
}
.shot figcaption { margin-top: 0.8rem; color: var(--ink-2); font-size: var(--fs-1); }
.legend { display: grid; gap: 0.5rem; margin-top: 0.8rem; color: var(--ink); counter-reset: callout; }
.legend li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  counter-increment: callout;
}
.legend li::before { content: counter(callout); }
@media (min-width: 62rem) {
  .project-media > .shot .legend { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 2rem; }
}
.shot-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-top: 1.1rem;
}
.shot-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-left: 0.4rem; font-size: var(--fs-1); }
.shot-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.95rem; min-height: 2.95rem; cursor: zoom-in; }

/* Project videos. Each frame holds a link to YouTube until script.js swaps in the
   player; it keeps a 16:9 shape so nothing moves when the player arrives. */
.videos { margin-top: 2rem; }
.videos .attach-title { margin-top: 0; }
.video-grid { display: grid; gap: 1.6rem 1.25rem; margin-top: 0.7rem; }
@media (min-width: 56rem) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-lead { grid-column: 1 / -1; }
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 80% at 50% 45%, rgba(70, 150, 255, 0.22), transparent 70%),
    linear-gradient(rgba(128, 168, 230, 0.06) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    #060a12;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the preview picture fills the frame; a light shade keeps the Play button readable on any picture */
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-poster .video-link { background: linear-gradient(180deg, rgba(4, 8, 15, 0.08) 40%, rgba(4, 8, 15, 0.5)); }
.has-poster .video-cta { padding: 0.3rem 0.95rem; border-radius: 999px; background-color: rgba(4, 8, 15, 0.78); }
.video-link {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  background: none;
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.video-play {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 7vw, 5rem);
  height: clamp(3.75rem, 7vw, 5rem);
  border-radius: 50%;
  background: var(--grad), #5b8cff;
  color: #04121d;
  box-shadow: 0 0 0 10px rgba(70, 217, 255, 0.12), 0 22px 50px -14px rgba(70, 160, 255, 0.95);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.video-play svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.video-link:hover .video-play { transform: scale(1.07); }
.video figcaption { margin-top: 0.35rem; }
.video figcaption a { display: inline-flex; align-items: center; min-height: 2.95rem; }
.video-note { margin-top: 1rem; color: var(--ink-3); font-size: var(--fs-0); }

/* Problem, contribution, verification: readable without opening anything. */
.claims { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.claims > div {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-s);
  background-color: rgba(8, 13, 23, 0.6);
}
.claims dt { color: var(--accent-ink); }
.claims dd { margin-top: 0.4rem; }

/* Original documents: the files behind a project, each with its first page. */
.attach-title { margin-top: 1.75rem; color: var(--accent-ink); }
.attachments { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
@media (min-width: 46rem) { .flagship .attachments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.attachments a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0 0.95rem;
  min-height: 4.4rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background-color: rgba(8, 13, 23, 0.7);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.attachments a:hover { border-color: var(--accent); box-shadow: var(--glow); }
.file-cover {
  grid-row: 1 / span 2;
  width: 4.5rem;
  height: 3.3rem;
  border-radius: 7px;
  background: #ffffff;
  object-fit: cover;
  object-position: center top;
}
.file-type {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(70, 217, 255, 0.08);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
}
.file-name { align-self: end; font-weight: 500; line-height: 1.3; }
.file-meta { align-self: start; color: var(--ink-3); font-size: var(--fs-0); }
@media (min-width: 40rem) {
  .attachments-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Verification record: condition, expected, observed, evidence. */
.verify { margin-top: 2rem; }
.verify-title { color: var(--accent-ink); }
.verify-table { width: 100%; margin-top: 0.7rem; font-size: var(--fs-1); line-height: 1.45; }
.verify-table th {
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-3);
  font: 400 var(--fs-0)/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}
.verify-table td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.verify-table td:first-child { color: var(--ink-2); }
.verify-table a { display: inline-flex; align-items: center; min-height: 2.95rem; margin-block: -0.6rem; white-space: nowrap; }
.pass {
  display: inline-block;
  margin-right: 0.55rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(127, 240, 189, 0.55);
  border-radius: 999px;
  color: var(--ok);
  font-size: var(--fs-0);
  font-weight: 500;
}
.verify-note { margin-top: 0.8rem; color: var(--ink-3); font-size: var(--fs-0); }
/* on a phone each test becomes a small card with its labels */
@media (max-width: 46rem) {
  .verify-table thead { display: none; }
  .verify-table tr { display: block; padding-block: 0.85rem; border-bottom: 1px solid var(--line); }
  .verify-table td { display: block; padding: 0.15rem 0; border: 0; }
  .verify-table td::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.45rem;
    color: var(--ink-3);
    font: 400 var(--fs-0)/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .verify-table a { margin-block: 0; }
}

/* Case study: opened on request. */
.case { margin-top: 1.9rem; border-top: 1px solid var(--line); }
.case summary,
.archive > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3rem;
  margin-top: 1.4rem;
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background-color: rgba(18, 28, 46, 0.7);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.case summary::-webkit-details-marker,
.archive > summary::-webkit-details-marker { display: none; }
.case summary::before,
.archive > summary::before { content: "+"; color: var(--accent-ink); font-family: var(--font-mono); }
.case[open] summary::before,
.archive[open] > summary::before { content: "\2212"; }
.case summary:hover,
.archive > summary:hover { border-color: var(--accent); box-shadow: var(--glow); }
.case-grid {
  display: grid;
  gap: 1.75rem clamp(1.75rem, 4vw, 3.25rem);
  padding-top: 1.6rem;
}
@media (min-width: 52rem) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-grid h4 { font-size: var(--fs-2); font-weight: 700; }
.case-grid p { max-width: 38rem; margin-top: 0.4rem; color: var(--ink-2); }

/* Supporting work and the concept study: plain rows, no panel, a smaller picture. */
.subhead {
  margin-top: clamp(2.5rem, 5.5vw, 3.5rem);
  color: var(--ink-2);
  font: 500 var(--fs-3)/1.25 var(--font-text);
}
.minor {
  display: grid;
  gap: 1.4rem clamp(1.5rem, 3.5vw, 3rem);
  margin-top: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 62rem) {
  .minor { grid-template-columns: 26rem minmax(0, 1fr); align-items: start; }
}
.minor h3 { font-size: var(--fs-4); }
.minor-media { display: grid; gap: 1.1rem; min-width: 0; }
.minor.minor-wide { grid-template-columns: minmax(0, 1fr); }
.topo-grid { display: grid; gap: 1.6rem 1.25rem; }
@media (min-width: 56rem) { .topo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topo-grid .shot img { aspect-ratio: 3 / 2; object-fit: contain; background: #ffffff; }
.topo-grid figcaption strong { color: var(--ink); }
.shot-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; max-width: 40rem; margin-top: 1.4rem; }
.shot-duo .shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.shot-duo .shot figcaption { font-size: var(--fs-0); }
.minor-text > p:not(.project-kind) { max-width: 46rem; margin-top: 0.55rem; color: var(--ink-2); }
.results { display: grid; gap: 0.7rem; max-width: 48rem; margin-top: 1.2rem; }
.results > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
.results dt { font-weight: 700; }
.results dd { color: var(--ink-2); }
@media (max-width: 32rem) { .results > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* 10. SKILLS, CREDENTIALS, EDUCATION, CONTACT ------------------------------ */

/* The signal path, field to screen: four panels joined by arrows of light. */
.stack { display: grid; gap: 1.25rem; }
.layer {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.26), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.layer-icon {
  width: 4rem;
  height: 4rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(70, 217, 255, 0.45));
}
.layer-icon text { fill: var(--accent); stroke: none; font: 700 13px var(--font-text); text-anchor: middle; }
.layer-step { color: var(--accent-ink); }
.layer h3 { margin-top: 0.15rem; font: 700 var(--fs-3)/1.2 var(--font-text); letter-spacing: -0.02em; }
.layer h3 + p { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-1); }
.layer .tags { font-size: var(--fs-0); color: var(--ink-3); }
/* each layer points at the place on the page that shows it */
.layer-proof { margin-top: 0.8rem; color: var(--ink-3); font-size: var(--fs-0); }
.layer-proof a { display: inline-flex; align-items: center; min-height: 2.95rem; font-size: var(--fs-1); font-weight: 500; }
@media (min-width: 62rem) {
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
  .layer { display: block; }
  .layer-icon { margin-bottom: 1rem; }
  /* the arrow between one panel and the next */
  .layer:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.3rem;
    right: -1.75rem;
    width: 1.75rem;
    height: 2px;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(70, 217, 255, 0.7);
  }
}

/* Credentials in three tiers: controls and automation largest and lit,
   then project delivery and safety, then the other issuers as a row of logos. */
.cred-tier {
  margin: clamp(1.9rem, 4vw, 2.6rem) 0 0.9rem;
  color: var(--ink-2);
  font: 500 var(--fs-2)/1.3 var(--font-text);
}
.cred-tier:first-of-type { margin-top: 0; }
.creds { display: grid; gap: 0.9rem; }
@media (min-width: 62rem) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds-lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.cred {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.26), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cred-logo {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.3rem;
  border-radius: var(--radius-s);
  background: #ffffff;
  object-fit: contain;
}
.cred-mark {
  display: grid;
  place-items: center;
  color: #0b121b;
  font: 700 var(--fs-0)/1 var(--font-text);
}
.cred h4 { font-size: var(--fs-3); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.cred-issuer { color: var(--ink-2); font-size: var(--fs-1); }
.cred-meta { margin-top: 0.4rem; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.6; }
.cred-kind { display: block; color: var(--accent-ink); }
.cred-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }

/* the lead tier: a lit edge, larger marks, larger titles */
.creds-lead .cred {
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-color: rgba(70, 217, 255, 0.5);
  background-image: linear-gradient(150deg, rgba(70, 217, 255, 0.13), rgba(91, 140, 255, 0.05) 45%, rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -44px rgba(40, 120, 255, 0.8);
}
.creds-lead .cred h4 { font-size: var(--fs-4); }
.creds-lead .cred-logo { width: 5rem; height: 5rem; }
.creds-lead .cred-meta { font-size: var(--fs-1); }
.cred-ignition { display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.cred-ignition img { width: auto; }
.cred-ignition .badge-gold { height: clamp(6rem, 12vw, 7.75rem); filter: drop-shadow(0 10px 24px rgba(240, 180, 40, 0.35)); }
.cred-ignition .badge-core { height: clamp(3.9rem, 8vw, 5rem); }
.cred-ignition .badge-83 { height: clamp(4.1rem, 8.4vw, 5.25rem); }
.cred-trio { display: flex; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 14px; background: #f3f4f6; }
.cred-trio img { width: auto; height: clamp(2.6rem, 5vw, 3.1rem); }
.cred-hero { gap: 1rem clamp(1.25rem, 3vw, 2.25rem); }
@media (max-width: 46rem) {
  .cred-hero { grid-template-columns: minmax(0, 1fr); }
}

/* the other issuers: logo, name, and how many courses, each opening its records */
.issuer-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.issuer-chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.4rem 1.1rem 0.4rem 0.45rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background-color: rgba(18, 28, 46, 0.7);
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.issuer-chips a:hover { border-color: var(--accent); box-shadow: var(--glow); }
.issuer-chip-logo { width: 2.4rem; height: 2.4rem; padding: 3px; border-radius: 50%; background: #ffffff; object-fit: contain; }
.issuer-chip-count { color: var(--ink-3); font-size: var(--fs-0); font-weight: 400; }

.archive { margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--line); }
.archive > .cred-tier { margin-top: 0; color: var(--ink); font: 700 var(--fs-4)/1.2 var(--font-text); letter-spacing: -0.02em; }
.archive-part { margin-top: clamp(1.9rem, 4vw, 2.6rem); }
.archive-title { color: var(--accent-ink); font: 400 var(--fs-0)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.archive-note { margin-top: 0.25rem; color: var(--ink-2); }
.issuer { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.issuer-head {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
}
.issuer-logo {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.25rem;
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
}
.issuer-name { font-size: var(--fs-3); font-weight: 700; line-height: 1.2; }
.issuer-topics {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-2);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.4;
}
.issuer-count { color: var(--ink-3); font-size: var(--fs-0); white-space: nowrap; }
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1rem;
  margin-top: 1.1rem;
}
.cert-card > a,
.cert-noimage {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #ffffff;
}
.cert-card > a { cursor: zoom-in; transition: border-color 0.2s, box-shadow 0.2s; }
.cert-card > a:hover,
.cert-card > a:focus-visible { border-color: var(--accent); box-shadow: var(--glow); }
.cert-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
.cert-noimage img { object-fit: contain; padding: 22%; }
.cert-name { margin-top: 0.6rem; font-size: var(--fs-1); font-weight: 500; line-height: 1.35; }
.cert-date { margin-top: 0.15rem; color: var(--ink-3); font-size: var(--fs-0); }
.cert-also { font-size: var(--fs-0); }
.cert-also a { display: inline-flex; align-items: center; min-height: 2.95rem; cursor: zoom-in; }
/* each issuer shows its first four; the tile after them says how many more there are */
.js .issuer:not(.is-open) .cert-extra { display: none; }
.issuer.is-open .cert-more { display: none; }
.cert-more button {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background-color: rgba(18, 28, 46, 0.6);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cert-more button:hover { border-color: var(--accent); box-shadow: var(--glow); }
.cert-more strong { color: var(--accent-ink); font-size: var(--fs-5); line-height: 1; }
.cert-more span { color: var(--ink-2); font-size: var(--fs-0); }
@media (min-width: 40rem) {
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .cert-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-left: 4.25rem; }
}
@media (max-width: 30rem) {
  .issuer-head { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .issuer-count { grid-column: 2; }
}

.edu { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.edu-top { display: grid; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56rem) { .edu-top { grid-template-columns: minmax(0, 1fr) auto; } }
.edu-text { display: grid; gap: 1.4rem; align-items: start; }
.edu-school { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.edu-seal {
  width: clamp(4.75rem, 11vw, 6.5rem);
  height: auto;
  aspect-ratio: 1;
  padding: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(70, 217, 255, 0.06), 0 20px 50px -22px rgba(70, 150, 255, 0.7);
}
.edu-school h3 { font: 700 var(--fs-4)/1.2 var(--font-text); letter-spacing: -0.02em; }
.edu-school p { margin-top: 0.2rem; color: var(--ink-2); }
.edu-school .edu-dates { margin-top: 0.4rem; color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--fs-0); }
.edu-text .results { margin-top: 0; }
.edu-subhead { margin-top: clamp(0.75rem, 2vw, 1.25rem); }
/* coursework and projects: the senior design leads, four smaller pieces follow */
.edu-work { display: grid; gap: 1.5rem 1.25rem; }
@media (min-width: 46rem) { .edu-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.edu-card { display: grid; align-content: start; gap: 0.9rem; min-width: 0; }
.edu-card h4 { margin-top: 0.2rem; font-size: var(--fs-3); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.edu-card-text > p:last-child { margin-top: 0.35rem; color: var(--ink-2); font-size: var(--fs-1); }
.edu-card:not(.edu-card-lead) .shot img { aspect-ratio: 16 / 10; object-fit: cover; }
.edu-card-left .shot img { object-position: left center; }
.edu-card-lead { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  .edu-card-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3.5vw, 3rem); }
  .edu-card-lead h4 { font-size: var(--fs-4); }
  .edu-card-lead .edu-card-text > p:last-child { font-size: var(--fs-2); }
}
/* the campus: two small pictures, deliberately smaller than the project pictures below */
.edu-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 0.75rem; }
.edu-photos .shot img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Endorsements: what teachers and mentors wrote, quoted as written. */
.quotes { display: grid; gap: 1rem; }
@media (min-width: 62rem) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--panel-solid);
  background-image: linear-gradient(180deg, rgba(40, 62, 100, 0.26), rgba(12, 20, 34, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.quote blockquote { position: relative; margin: 0; padding-top: 2.4rem; }
.quote-lead { font-size: var(--fs-3); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; }
.quote-full { margin-top: 0.9rem; }
.quote-full summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.95rem;
  color: var(--link);
  font-size: var(--fs-1);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.quote-full summary::-webkit-details-marker { display: none; }
.quote-full summary::before { content: "+"; font-family: var(--font-mono); }
.quote-full[open] summary::before { content: "\2212"; }
.quote-full summary:hover { color: #c3efff; }
.quote-text { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-1); line-height: 1.65; }
.quote-text p + p { margin-top: 0.8rem; }
.quote-note { color: var(--ink-3); font-size: var(--fs-0); }
.quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: -0.15rem;
  color: var(--accent);
  font: 700 4.25rem/1 Georgia, "Times New Roman", serif;
}
.quote figcaption { display: grid; gap: 0.1rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote-name { font-weight: 700; }
.quote-role { color: var(--ink-2); font-size: var(--fs-1); }
.quote-rel { margin-top: 0.2rem; color: var(--ink-3); font-size: var(--fs-0); }
.quotes-more { margin-top: 1.4rem; }
.quotes-more a { display: inline-flex; align-items: center; min-height: 2.95rem; font-weight: 500; }

/* Contact: one lit panel. */
.contact {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--panel-solid);
  background-image: linear-gradient(120deg, rgba(70, 217, 255, 0.14), rgba(91, 140, 255, 0.06) 40%, rgba(155, 123, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px -50px rgba(40, 110, 255, 0.6);
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(70, 217, 255, 0.8), rgba(91, 140, 255, 0.25) 40%, rgba(155, 123, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.contact { display: grid; gap: 1.5rem clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; }
@media (min-width: 40rem) { .contact { grid-template-columns: auto minmax(0, 1fr); } }
.contact-photo {
  position: relative;
  width: clamp(6.5rem, 14vw, 9.5rem);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(70, 217, 255, 0.55);
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 0 0 7px rgba(70, 217, 255, 0.07), 0 26px 60px -22px rgba(70, 150, 255, 0.75);
}
.contact-body { position: relative; min-width: 0; }
.contact-email {
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.contact-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* 11. FOOTER --------------------------------------------------------------- */

.site-footer { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem); }
.footer-grid { display: grid; gap: 1.25rem 2rem; align-items: center; }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: auto minmax(0, 1fr); } }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
@media (min-width: 62rem) { .footer-links { justify-content: flex-end; } }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-width: 2.95rem;
  min-height: 2.95rem;
  color: var(--ink-2);
  font-size: var(--fs-0);
  font-weight: 500;
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-legal { grid-column: 1 / -1; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-0); }
/* keep the last line clear of the back-to-top button */
@media (max-width: 90rem) { .footer-legal { padding-right: 4rem; } }

.to-top {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 1.75rem);
  bottom: clamp(0.9rem, 2.5vw, 1.75rem);
  z-index: 25;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background-color: rgba(10, 16, 28, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, border-color 0.2s, box-shadow 0.2s;
}
.to-top:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--glow); }
.is-scrolled .to-top { opacity: 1; visibility: visible; transform: none; }

/* 12. IMAGE VIEWER --------------------------------------------------------- */

.viewer {
  width: min(96vw, 92rem);
  max-height: 94vh;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel-solid);
  color: var(--ink);
  box-shadow: 0 40px 120px -30px rgba(40, 110, 255, 0.6);
}
.viewer::backdrop { background: rgba(3, 5, 10, 0.86); }
.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.viewer-count { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-0); }
.viewer-controls { display: flex; gap: 0.4rem; margin-left: auto; }
.viewer-stage { background: #ffffff; }
.viewer-image {
  /* never stretch a picture past its own size: enlarging is what blurs it */
  width: auto;
  max-width: 100%;
  max-height: calc(94vh - 9.5rem);
  max-height: calc(94dvh - 9.5rem);
  object-fit: contain;
  margin-inline: auto;
}
.viewer.is-loading .viewer-image { opacity: 0.35; }
.viewer-caption { padding: 0.8rem 1rem 1rem; color: var(--ink-2); font-size: var(--fs-1); }
body:has(.viewer[open]) { overflow: hidden; }

/* 13. MOTION, PRINT -------------------------------------------------------- */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .portrait { animation: turn 10s linear infinite; }
  .hero::before { animation: drift 18s ease-in-out infinite alternate; }
  .hero::after { animation: drift 23s ease-in-out infinite alternate-reverse; }
  .pulse { animation: pulse 2.4s ease-out infinite; }
  .viewer[open] { animation: viewer-in 0.18s ease-out; }
  /* script.js marks blocks .reveal and adds .is-in as they scroll into view;
     without JavaScript nothing is ever hidden. */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .flagship:hover::before {
    background: conic-gradient(from var(--angle), rgba(70, 217, 255, 0.95), rgba(91, 140, 255, 0.25) 22%, rgba(155, 123, 255, 0.2) 50%, rgba(70, 217, 255, 0.3) 78%, rgba(70, 217, 255, 0.95));
    animation: turn 7s linear infinite;
  }
}
@keyframes drift {
  to { transform: translate3d(-4rem, 2.5rem, 0) scale(1.08); }
}
@keyframes turn {
  to { --angle: 360deg; }
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 0.6rem rgba(70, 217, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 217, 255, 0); }
}
@keyframes viewer-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .alarm[data-unack] .pri { animation: none; }
  .btn, .window, .frame, .attachments a, .glow::after { transition: none; }
}

@media print {
  :root {
    --bg: #ffffff; --panel-solid: #ffffff; --ink: #000000; --ink-2: #222222; --ink-3: #444444;
    --line: #bbbbbb; --line-2: #777777; --link: #000000; --accent-ink: #000000; --accent: #000000; --ok: #000000;
  }
  body::before, body::after, .progress, .hero-net, .hero::before, .hero::after, .to-top { display: none; }
  .site-header { position: static; }
  .header-inner { border: 0; background: none; box-shadow: none; }
  .site-header { position: static; background: none; }
  .site-nav, .header-tools, .hero-actions, .sim, .story, .hmi-tabs, #hmi-ack, .viewer, .btn-small, .video-frame, .video-note { display: none !important; }
  .flagship, .layer, .cred, .contact { background: none; box-shadow: none; border: 1px solid #999999; }
  .flagship::before, .contact::before { display: none; }
  .hmi { box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .section, .project, .role, .cred, .cert-card, .quote, .edu-photos .shot { break-inside: avoid-page; }
  .cert-more { display: none; }
  .js .issuer:not(.is-open) .cert-extra { display: block; }
  a { text-decoration: none; }
}