/* ==========================================================================
   Raman Nafarieh — Research Profile, v2
   Palette follows the project brief: teal, cyan, deep navy, white, subtle gold.
   Every text/background pair below is verified at WCAG AA (>= 4.5:1).

   Signature: the arch. Portrait, process figures and gallery tiles all share
   one silhouette, so the page reads as a single system rather than a stack
   of unrelated blocks.
   ========================================================================== */

:root {
  --navy:       #0A1E2B;
  --navy-soft:  #12303F;

  --paper:      #FBFCFD;
  --paper-dim:  #F1F5F7;
  --line:       #D8E2E7;
  --line-dark:  rgba(251,252,253,0.16);

  --teal:       #0F6E7E;
  --teal-deep:  #0B5462;
  --cyan:       #3FB6C8;   /* on navy only */

  --gold:       #856313;   /* text-safe on paper */
  --gold-lite:  #D4A93C;   /* on navy only */
  --gold-rule:  #B8912F;   /* decorative rules, never text */

  --text:       #10222C;
  --text-dim:   #43606E;
  --text-faint: #566E7A;
  --on-navy:       rgba(251,252,253,0.92);
  --on-navy-dim:   rgba(251,252,253,0.68);
  --on-navy-faint: rgba(251,252,253,0.46);

  --font-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 5rem;

  --radius: 4px;
  --arch: 999px 999px var(--radius) var(--radius) / 46% 46% var(--radius) var(--radius);
  --max: 1180px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. The width/height attributes on every <img>
   reserve layout space, but the height attribute also lands as a presentational
   hint — and a definite width *and* height makes the browser ignore any
   aspect-ratio we set. Without this, the hero portrait renders 1200px tall. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--cyan); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.band-dark :focus-visible,
.contact-section :focus-visible { outline-color: var(--cyan); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 720px) { .container { padding: 0 var(--space-3); } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--paper);
  padding: 0.8em 1.2em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-rule);
  flex-shrink: 0;
}

.section-head { max-width: 660px; margin-bottom: var(--space-4); }
.section-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.1; }
.section-lede {
  margin-top: var(--space-2);
  color: var(--text-dim);
  font-size: 1.04rem;
  max-width: 58ch;
}

section { padding: var(--space-7) 0; }
@media (max-width: 720px) { section { padding: var(--space-4) 0; } }

.section-alt { background: var(--paper-dim); }

/* A dark band. Used where the content benefits from a change of ground:
   the experimental sequence, and the endorsements. */
.band-dark {
  background: var(--navy);
  color: var(--on-navy);
}
.band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark .eyebrow { color: var(--cyan); }
.band-dark .eyebrow::before { background: var(--gold-lite); }
.band-dark .section-lede { color: var(--on-navy-dim); }

@supports (content-visibility: auto) {
  #patents, #recognition, #credentials, #techniques, #gallery {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

/* ==========================================================================
   Evidence tag — the recurring proof affordance
   ========================================================================== */

/* These are the most important controls on the page — each one opens a primary
   document. A bordered chip reads as pressable, where a tinted underline read
   as metadata. It also carries its own touch target, so no overlay hack.
   Wrapping stays on: an unbreakable label inflates the min-content width of
   any card containing it and blows out narrow grids. */
.ev {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  min-height: 38px;
  padding: 0.45em 0.95em;
  font-family: var(--font-mono);
  font-size: 0.79rem;
  letter-spacing: 0.03em;
  color: var(--teal);
  background: rgba(15,110,126,0.06);
  border: 1px solid rgba(15,110,126,0.32);
  border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ev:hover, .ev:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--paper);
}
.ev::before { content: "\2197"; font-size: 0.9em; }

.band-dark .ev {
  color: var(--cyan);
  background: rgba(63,182,200,0.10);
  border-color: rgba(63,182,200,0.38);
}
.band-dark .ev:hover, .band-dark .ev:focus-visible {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy);
}

.ev-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}

.ev-static {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

/* Touch screens: the link is ~21px tall. Extend the hit area to 44px with a
   transparent overlay so the underline stays tight to the text. */
@media (pointer: coarse) { .ev { min-height: 44px; } }

.status-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28em 0.7em;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.status-filed { color: var(--teal); }
.status-registered { color: var(--teal-deep); }
.status-pending { color: var(--gold); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,252,253,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-3);
}

.nav-mark {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  white-space: nowrap;
  min-height: 44px;
}
.nav-mark img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--paper-dim);
  border: 1px solid var(--line);
}
.nav-mark span { color: var(--teal); }

.nav-links {
  display: flex;
  gap: var(--space-4);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.nav-links a { position: relative; padding: 4px 0; transition: color 0.15s ease; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a[aria-current="true"] { color: var(--navy); }
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy);
  border: 1px solid var(--navy);
  padding: 0.7em 1.2em;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover { background: transparent; color: var(--navy); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-links, .nav-cta.desktop-only { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--paper);
    z-index: 49;
    padding: var(--space-4);
    overflow-y: auto;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
  }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 941px) { .mobile-menu { display: none !important; } }

/* ==========================================================================
   Hero — the name at display scale, the researcher in an arch beside it
   ========================================================================== */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-5);
}
.hero .container { position: relative; z-index: 2; }

.network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.hero-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-lite);
  flex-shrink: 0;
}

.hero h1 {
  color: var(--paper);
  font-size: clamp(2.7rem, 7.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.hero h1 .surname { display: block; color: var(--cyan); }

.hero-role {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  margin-bottom: var(--space-3);
}

.hero-desc {
  max-width: 46ch;
  color: var(--on-navy-dim);
  font-size: 1.06rem;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.95em 1.6em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--cyan); color: var(--navy); font-weight: 500; }
.btn-primary:hover { background: var(--paper); transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(251,252,253,0.4); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(251,252,253,0.07); }

/* The arch. Repeated later on process figures and gallery tiles.
   Kept deliberately modest so the name, role and description stay the
   first thing read, with the portrait supporting rather than dominating. */
.hero-portrait { position: relative; justify-self: center; width: 100%; max-width: 310px; }
.hero-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--arch);
  border: 1px solid rgba(63,182,200,0.35);
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(63,182,200,0.18);
  border-radius: var(--arch);
  pointer-events: none;
}
@media (max-width: 940px) {
  .hero-portrait { justify-self: start; max-width: 230px; }
}

/* ==========================================================================
   Metric band — counts of things that actually exist and are linked below
   ========================================================================== */

.metrics {
  background: var(--navy-soft);
  border-top: 1px solid var(--line-dark);
}
.metrics .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
@media (max-width: 780px) { .metrics .container { grid-template-columns: repeat(2, 1fr); } }

.metric { display: flex; flex-direction: column; gap: 0.15em; }
.metric strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--paper);
  font-weight: 600;
  line-height: 1;
}
.metric span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--on-navy-faint);
  letter-spacing: 0.04em;
  max-width: 22ch;
}

/* ==========================================================================
   About
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 940px) { .about-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.about-body p:not(.eyebrow) { font-size: 1.06rem; color: var(--text); max-width: 62ch; }
.about-body p:not(.eyebrow) + p { margin-top: 1.1em; }

.about-figure { margin: 0; }
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.about-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-top: var(--space-1);
}

.interest-list { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0.55em; }
.interest-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--teal-deep);
  border: 1px solid rgba(15,110,126,0.3);
  padding: 0.45em 0.85em;
  border-radius: 2px;
}

.fact-strip {
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .fact-strip { grid-template-columns: 1fr; } }
.fact { padding: var(--space-3) var(--space-2) var(--space-3) 0; border-bottom: 1px solid var(--line); }
.fact dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 0.4em;
}
.fact dd { margin: 0; font-family: var(--font-display); font-size: 1.12rem; color: var(--navy); }

/* ==========================================================================
   Featured research
   ========================================================================== */

.research-feature { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-6); }
@media (max-width: 940px) { .research-feature { grid-template-columns: 1fr; gap: var(--space-4); } }

.research-title { font-size: clamp(1.5rem, 2.7vw, 2.05rem); line-height: 1.2; margin-bottom: var(--space-3); }

.research-byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.95;
  margin-bottom: var(--space-4);
}
.research-byline b { color: var(--navy); font-weight: 600; }
.research-lede { color: var(--text-dim); max-width: 54ch; }

.method-list { list-style: none; margin: 0; padding: 0; }
.method-list li {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.method-list li:first-child { padding-top: 0; }
.method-list li:last-child { border-bottom: none; }
.method-list .m-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--teal);
  min-width: 7.5em;
  padding-top: 0.15em;
  flex-shrink: 0;
}
.method-list .m-body strong { display: block; color: var(--navy); margin-bottom: 0.2em; }
.method-list .m-body span:not(.ev-group):not(.ev) { color: var(--text-dim); font-size: 0.96rem; }
@media (max-width: 520px) { .method-list li { flex-direction: column; gap: 0.2em; } }

/* ==========================================================================
   Process — a real experimental order, so the numbering carries information
   ========================================================================== */

.process-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
@media (max-width: 1080px) { .process-track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .process-track { grid-template-columns: repeat(2, 1fr); } }


.process-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin: 0 0 0.7em;
  padding-bottom: 0.55em;
  border-bottom: 1px solid var(--line-dark);
}

.process-figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--navy-soft);
  border: 1px solid var(--line-dark);
}
.process-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.process-step:hover .process-figure img { transform: scale(1.05); }

.process-step h3 { font-size: 1rem; margin-top: var(--space-2); margin-bottom: 0.3em; }
.process-step p:not(.process-num) { font-size: 0.86rem; color: var(--on-navy-dim); line-height: 1.55; }

/* ==========================================================================
   Evidence cards — patents & IP
   ========================================================================== */

.ip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 820px) { .ip-grid { grid-template-columns: 1fr; } }

.ip-card {
  /* Grid items default to min-width:auto and refuse to shrink below their
     content; this lets the card track the column instead. */
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (max-width: 520px) { .ip-card { padding: var(--space-3); } }
.ip-card:hover { box-shadow: 0 8px 28px rgba(10,30,43,0.09); transform: translateY(-2px); }

.ip-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.ip-kind {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0;
}
.ip-title { font-family: var(--font-display); font-size: 1.12rem; color: var(--navy); margin: 0; }
.ip-fields { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-dim); line-height: 1.95; margin: 0; }
.ip-fields b { color: var(--text); font-weight: 500; }
.ip-card .ev-group { margin-top: auto; padding-top: var(--space-1); }

/* ==========================================================================
   Award cards
   ========================================================================== */

.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--space-3); }

.award-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.award-card:hover { box-shadow: 0 8px 28px rgba(10,30,43,0.10); transform: translateY(-2px); }

.award-thumb { aspect-ratio: 16/11; overflow: hidden; background: var(--paper-dim); border-bottom: 1px solid var(--line); }
.award-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.award-body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.award-level {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  margin: 0 0 0.5em;
}
.award-body h3 { font-size: 1.03rem; line-height: 1.32; margin-bottom: 0.5em; }
.award-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); margin-bottom: var(--space-2); line-height: 1.6; }
.award-body .ev { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Document rows
   ========================================================================== */

.doc-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--paper);
}
@media (max-width: 640px) { .doc-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); } }
.doc-thumb {
  width: 148px;
  height: 102px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--paper-dim);
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-info h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.doc-info p { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 0.6em; }

/* ==========================================================================
   Experience & education
   ========================================================================== */

.role-item, .edu-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.role-item:first-child, .edu-item:first-child { padding-top: 0; }
.edu-list .edu-item:last-child { border-bottom: none; }
@media (max-width: 620px) {
  .role-item, .edu-item { grid-template-columns: 1fr; gap: 0.3em; }
}

.role-year, .edu-year { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); margin: 0; }
.role-item h3, .edu-item h3 { font-size: 1.12rem; margin-bottom: 0.2em; }
.role-org { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.8em; }
.edu-item p:not(.edu-year) { color: var(--text-dim); font-size: 0.92rem; }
.role-item ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 0.4em; }
.role-item li { color: var(--text-dim); font-size: 0.97rem; line-height: 1.6; }

.edu-list, .role-list { display: flex; flex-direction: column; }

/* ==========================================================================
   Technique grid — what he can actually do at the bench
   ========================================================================== */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.tech {
  padding: var(--space-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.tech b { font-family: var(--font-display); font-size: 1rem; color: var(--navy); font-weight: 600; }
.tech span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); }

/* ==========================================================================
   Gallery — every photograph from the project archive
   ========================================================================== */

.gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
@media (max-width: 1080px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }


.gal { margin: 0; display: flex; flex-direction: column; gap: 0.6em; }
.gal a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--paper-dim);
  border: 1px solid var(--line);
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gal a:hover img { transform: scale(1.05); }
.gal figcaption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); line-height: 1.5; text-align: center; }

/* ==========================================================================
   Endorsements — on the dark ground, as a quote band
   ========================================================================== */

.endorse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 820px) { .endorse-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.endorse-card { padding-left: var(--space-3); border-left: 2px solid rgba(212,169,60,0.5); }
.endorse-card blockquote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--paper);
  line-height: 1.55;
}
.endorse-attrib { font-family: var(--font-mono); font-size: 0.79rem; color: var(--on-navy-faint); line-height: 1.8; }
.endorse-attrib b { color: var(--on-navy-dim); font-weight: 500; }
.endorse-kind {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin-bottom: 0.7em;
  display: block;
}

/* ==========================================================================
   Contact / footer
   ========================================================================== */

.contact-section {
  background: var(--navy);
  color: var(--on-navy);
  /* The footer line is the last thing on the page; a full section's worth
     of padding below it just reads as an empty screen. */
  padding-bottom: var(--space-4);
}
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); align-items: end; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-section h2 { color: var(--paper); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; }
.contact-section .eyebrow { color: var(--cyan); }
.contact-section .eyebrow::before { background: var(--gold-lite); }

.contact-links { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 0.95rem; }
.contact-links a, .contact-links span.row {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
  color: var(--on-navy);
  min-height: 44px;
}
.contact-links a:hover { color: var(--cyan); }
.contact-links .k { color: var(--on-navy-faint); font-size: 0.78rem; flex-shrink: 0; }

.site-footer {
  border-top: 1px solid var(--line-dark);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--on-navy-faint);
}

/* ==========================================================================
   Certificate lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10,30,43,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-caption {
  position: absolute;
  bottom: var(--space-3);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-navy-dim);
  padding: 0 var(--space-4);
}
.lightbox-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 2px;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(251,252,253,0.1); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

/* Hidden only once script.js has confirmed it is running and able to reveal
   again — see the .js-reveal opt-in there. Styling .reveal directly would
   leave the entire page invisible whenever the script or the observer fails. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-nav, .mobile-menu, .hero-actions, .network-canvas,
  .lightbox, .nav-toggle, .gallery-grid { display: none !important; }
  body { font-size: 10.5pt; background: #fff; }
  .hero, .contact-section, .band-dark, .metrics { background: #fff !important; color: #000 !important; }
  .hero h1, .contact-section h2, .band-dark h2, .band-dark h3 { color: #000 !important; }
  .hero h1 .surname { color: #000 !important; }
  .hero-desc, .metric span, .contact-links a, .endorse-card blockquote { color: #333 !important; }
  section { padding: 1.2rem 0; break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}