/*==================================================================
  doyenkaba.com — "Operator's Console"
  Christian M. Kaba, Platform Administrator

  Display : Archivo (grotesk, expanded axis)
  Body    : Source Serif 4
  Utility : IBM Plex Mono (labels, dates, telemetry rows)
==================================================================*/

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,400..800;1,75..125,400..800&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400&display=swap");

/*=============== TOKENS ===============*/
:root {
  /* Light is the authored default; every colour is defined here. */
  --bg:            #EDE9E1;
  --bg-deep:       #E3DED4;
  --surface:       #F6F3EE;
  --surface-2:     #FFFFFF;
  --line:          #D6CFC4;
  --line-strong:   #BDB3A4;
  --heading:       #14181E;
  --text:          #2A2E35;
  --text-dim:      #5C6470;
  --accent:        #B23A1E;
  --accent-soft:   #C9552B;
  --navy:          #1F2C48;
  --on-accent:     #FFFFFF;

  /* Strength of the hero atmosphere washes. Light needs far less
     before the navy layer reads as a grey smudge. */
  --wash-accent: 9%;
  --wash-navy: 7%;

  /* Layered, colour-tinted shadows. Base -> elevated -> floating. */
  --shadow-1:
    0 1px 2px hsl(28 20% 30% / 0.06),
    0 2px 6px hsl(28 20% 30% / 0.05);
  --shadow-2:
    0 2px 4px hsl(28 20% 30% / 0.07),
    0 8px 20px hsl(28 20% 30% / 0.08),
    0 1px 0 hsl(40 30% 100% / 0.6) inset;
  --shadow-3:
    0 4px 10px hsl(28 20% 25% / 0.10),
    0 18px 44px hsl(28 20% 25% / 0.12);

  /* Spacing scale. Sections pin to the large end on purpose. */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 2.75rem;
  --sp-7: 3.5rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 9rem;
  --sp-12: 10rem;

  /* Type */
  --font-display: "Archivo", "Segoe UI", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-mono:    0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.1875rem;
  --fs-h3:      1.25rem;
  --fs-h2:      1.875rem;
  --fs-h1:      2.75rem;
  --fs-display: 3.5rem;

  --header-h: 4.25rem;
  --maxw: 74rem;
  --maxw-text: 40rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  --z-header: 100;
  --z-overlay: 200;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:            #101318;
  --bg-deep:       #0B0E12;
  --surface:       #171C24;
  --surface-2:     #1E252F;
  --line:          #2A323E;
  --line-strong:   #3B4553;
  --heading:       #F2F4F7;
  --text:          #D7DBE0;
  --text-dim:      #98A1AD;
  --accent:        #E4593E;
  --accent-soft:   #F0765C;
  --navy:          #2B4570;
  --on-accent:     #12161B;

  --wash-accent: 15%;
  --wash-navy: 26%;

  --shadow-1:
    0 1px 2px hsl(220 40% 3% / 0.5),
    0 2px 6px hsl(220 40% 3% / 0.4);
  --shadow-2:
    0 2px 4px hsl(220 40% 3% / 0.5),
    0 8px 20px hsl(220 40% 3% / 0.45),
    0 1px 0 hsl(220 30% 100% / 0.04) inset;
  --shadow-3:
    0 4px 10px hsl(220 40% 2% / 0.55),
    0 18px 44px hsl(220 40% 2% / 0.6);

  color-scheme: dark;
}

@media screen and (min-width: 62em) {
  :root {
    --fs-body:    1.125rem;
    --fs-lead:    1.375rem;
    --fs-h3:      1.375rem;
    --fs-h2:      2.5rem;
    --fs-h1:      4rem;
    --fs-display: 6.25rem;
    --header-h: 5rem;
  }
}

/*=============== BASE ===============*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: hidden;
  /* Keeps the footer at the bottom on short pages like Contact. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Fine grain overlay for depth, so surfaces never read as flat fills. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul { list-style: none; }

input, textarea, button, select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

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

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

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: calc(var(--z-overlay) + 1);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/*=============== LAYOUT PRIMITIVES ===============*/
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media screen and (min-width: 48em) {
  .wrap { padding-inline: var(--sp-6); }
}

/* Vertical rhythm lives on .band only, so nothing fights it for specificity.
   Two adjacent bands stack their padding, so these stay moderate: the gap
   between sections is double whatever is set here. */
.band {
  padding-block: var(--sp-8);
}

@media screen and (min-width: 62em) {
  .band { padding-block: var(--sp-9); }
}

.band--tight { padding-block: var(--sp-8); }
.band--edge  { border-top: 1px solid var(--line); }

/*=============== UTILITY TYPE ===============*/
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--line);
}

.section-title {
  font-size: var(--fs-h2);
  font-variation-settings: "wdth" 112;
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  max-width: 46ch;
}

.prose {
  max-width: var(--maxw-text);
}
.prose p + p { margin-top: var(--sp-3); }
.prose strong { color: var(--heading); font-weight: 600; }

/*=============== BUTTONS ===============*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--accent);
  background-color: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    background-color 0.2s linear,
    border-color 0.2s linear,
    color 0.2s linear;
}

.btn:hover {
  background-color: var(--accent-soft);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background-color: transparent;
  color: var(--heading);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn svg { width: 1em; height: 1em; flex: none; }

/* Text link with a wipe underline. */
.link {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link svg {
  width: 1em; height: 1em; flex: none;
  transition: transform 0.4s var(--ease);
}
.link:hover svg { transform: translateX(3px); }

/*=============== HEADER / NAV ===============*/
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s linear;
}

/* The blur lives on this layer, never on .header itself. backdrop-filter
   makes an element a containing block for position:fixed descendants, and
   the mobile menu is a fixed descendant: putting it on .header collapsed
   the menu into the 68px header box on scroll, where it covered the theme
   toggle and hamburger. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  transition: opacity 0.3s linear;
  pointer-events: none;
}

.header.is-stuck::before { opacity: 1; }
.header.is-stuck { border-bottom-color: var(--line); }

.nav {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 120;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav__logo-mark {
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--accent);
  flex: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  position: relative;
  padding-block: var(--sp-1);
  transition: color 0.25s linear;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav__link:hover { color: var(--heading); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active { color: var(--heading); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color 0.2s linear, border-color 0.2s linear, transform 0.3s var(--ease);
}
.icon-btn:hover {
  color: var(--heading);
  border-color: var(--line);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav__toggle { display: none; }
.nav__close { display: none; }

@media screen and (max-width: 61.99em) {
  .nav__toggle { display: grid; }

  .nav__menu {
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
    z-index: var(--z-overlay);
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease);
  }

  .nav__menu.is-open { transform: translateY(0); }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .nav__link {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--heading);
  }

  .nav__close {
    display: grid;
    position: absolute;
    top: calc((var(--header-h) - 2.25rem) / 2);
    right: var(--sp-4);
  }
}

/*=============== PAGE SHELL ===============*/
/* body is a flex column for the sticky footer, and flex items default to
   min-width:auto, which lets wide content push the whole page past the
   viewport on mobile. Pin them to 0 so they shrink properly. */
body > * { min-width: 0; }

.main {
  padding-top: var(--header-h);
  flex: 1 0 auto;
  min-width: 0;
}

/* Page transition, driven by the router. */
.main.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s linear, transform 0.2s var(--ease);
}
.main.is-entering {
  animation: page-in 0.5s var(--ease) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/*=============== PAGE HEAD (inner pages) ===============*/
.page-head {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: 1px solid var(--line);
}

@media screen and (min-width: 62em) {
  .page-head { padding-block: var(--sp-9) var(--sp-7); }
}

.page-head__title {
  font-size: var(--fs-h1);
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}

/*=============== HERO ===============*/
.hero {
  position: relative;
  padding-block: var(--sp-8) var(--sp-7);
  overflow: hidden;
}

@media screen and (min-width: 62em) {
  .hero { padding-block: var(--sp-9) var(--sp-8); }
}

/* Layered radial washes for atmosphere behind the portrait. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(60% 50% at 72% 22%, color-mix(in srgb, var(--accent) var(--wash-accent), transparent), transparent 70%),
    radial-gradient(58% 48% at 12% 78%, color-mix(in srgb, var(--navy) var(--wash-navy), transparent), transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media screen and (min-width: 62em) {
  .hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-8);
  }
}

.hero__name {
  font-size: var(--fs-display);
  font-variation-settings: "wdth" 108;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin-bottom: var(--sp-4);
}

.hero__name span { display: block; }
.hero__name .is-muted { color: var(--text-dim); }

.hero__role {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 34ch;
  margin-bottom: var(--sp-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Portrait: gradient overlay + colour treatment layer, per house rules. */
.portrait {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.portrait img {
  width: 100%;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(220 40% 4% / 0.55), transparent 55%);
  pointer-events: none;
  z-index: 2;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--navy);
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}

.portrait__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/*=============== TELEMETRY STRIP (signature) ===============*/
.telemetry {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.telemetry__row {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 40em) {
  .telemetry__row { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 62em) {
  .telemetry__row { grid-template-columns: repeat(4, 1fr); }
}

.telemetry__cell {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.telemetry__cell:last-child { border-bottom: none; }

@media screen and (min-width: 40em) {
  .telemetry__cell { border-bottom: 1px solid var(--line); }
  .telemetry__cell:nth-last-child(-n + 2) { border-bottom: none; }
  .telemetry__cell + .telemetry__cell { border-left: 1px solid var(--line); }
  .telemetry__cell:nth-child(odd) { border-left: none; }
}

@media screen and (min-width: 62em) {
  .telemetry__cell { border-bottom: none; padding-block: var(--sp-6); }
  .telemetry__cell + .telemetry__cell { border-left: 1px solid var(--line); }
  .telemetry__cell:nth-child(odd) { border-left: 1px solid var(--line); }
  .telemetry__cell:first-child { border-left: none; }
}

.telemetry__value {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 118;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--heading);
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}

@media screen and (min-width: 62em) {
  .telemetry__value { font-size: 3.25rem; }
}

.telemetry__suffix {
  font-size: 0.45em;
  color: var(--accent);
  font-weight: 700;
}

.telemetry__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-top: var(--sp-2);
}

/*=============== KEY / VALUE RULED ROWS ===============*/
.kv {
  border-top: 1px solid var(--line);
}

.kv__row {
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

@media screen and (min-width: 40em) {
  .kv__row { grid-template-columns: 12rem 1fr; }
}

.kv__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.kv__val { color: var(--text); }
.kv__val strong { color: var(--heading); font-weight: 600; }

/*=============== CARD GRID ===============*/
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--sp-4);
}

@media screen and (min-width: 40em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 62em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .grid-3 { gap: var(--sp-5); }
}

.card {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.3s linear;
}

.card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 0;
  background-color: var(--accent);
  transition: height 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.card:hover::before { height: calc(100% + 2px); }

.card__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.card__title {
  font-size: var(--fs-h3);
  font-variation-settings: "wdth" 108;
  margin-bottom: var(--sp-2);
}

.card__text {
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* Whole-card link target. The title anchor is stretched over the card so
   the entire surface is clickable and there is still only one link in the
   tab order. The "Read the write-up" text below is decoration, not a link. */
.card--link:focus-within {
  border-color: var(--accent);
}

.card--link .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card--link .card__title a { color: inherit; }
.card--link:hover .card__title { color: var(--accent); }
.card--link:hover .link { background-size: 100% 1px; }

/*=============== TECH STACK STRIP ===============*/
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.stack__item {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  padding: 0.4rem 0.7rem;
  background-color: var(--surface);
  transition: color 0.2s linear, border-color 0.2s linear, transform 0.3s var(--ease);
}

.stack__item:hover {
  color: var(--heading);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.stack-group + .stack-group { margin-top: var(--sp-4); }

.stack-group__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/*=============== EXPERIENCE ===============*/
.role {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--sp-4);
}

.role:first-child { padding-top: var(--sp-6); border-top: 1px solid var(--line-strong); }

@media screen and (min-width: 62em) {
  .role {
    grid-template-columns: 18rem 1fr;
    gap: var(--sp-7);
    padding-block: var(--sp-7);
  }
}

.role__meta { position: relative; }

@media screen and (min-width: 62em) {
  .role__meta { position: sticky; top: calc(var(--header-h) + var(--sp-4)); align-self: start; }
}

.role__dates {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
  display: block;
}

.role__company {
  font-size: var(--fs-h3);
  font-variation-settings: "wdth" 106;
  margin-bottom: var(--sp-1);
}

.role__location {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.role__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.role__list { display: grid; gap: var(--sp-3); }

.role__list li {
  position: relative;
  padding-left: var(--sp-4);
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.role__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 1px;
  background-color: var(--accent);
}

.role--current .role__dates::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  background-color: var(--accent);
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/*=============== FEATURED PROJECT ===============*/
.feature {
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.feature__head {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  background-color: var(--surface-2);
}

@media screen and (min-width: 62em) {
  .feature__head { padding: var(--sp-6); }
}

.feature__title {
  font-size: var(--fs-h2);
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.03em;
}

.feature__body {
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-6);
}

@media screen and (min-width: 62em) {
  .feature__body {
    padding: var(--sp-6);
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.feature__quote {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-style: italic;
  color: var(--heading);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent);
  margin-bottom: var(--sp-4);
}

.feature__foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

@media screen and (min-width: 62em) {
  .feature__foot { padding: var(--sp-5) var(--sp-6); }
}

/*=============== CERTIFICATIONS ===============*/
.badges {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  /* Without a cap the two cards stretch to the full 74rem and the badge
     floats in a sea of empty card. */
  max-width: 52rem;
}

.badge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s linear;
}

.badge:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}

.badge__img {
  width: 7rem;
  height: 7rem;
  flex: none;
  object-fit: contain;
}

.badge__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: var(--sp-1);
}

.badge__issuer {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/*=============== CONTACT ===============*/
.contact__grid {
  display: grid;
  gap: var(--sp-7);
}

@media screen and (min-width: 62em) {
  .contact__grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--sp-9);
  }
}

.form { display: grid; gap: var(--sp-4); }

.form__row {
  display: grid;
  gap: var(--sp-4);
}

@media screen and (min-width: 40em) {
  .form__row { grid-template-columns: repeat(2, 1fr); }
}

.field { position: relative; }

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
}

.field__input {
  width: 100%;
  padding: 0.85rem var(--sp-3);
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--heading);
  font-family: var(--font-body);
  transition: border-color 0.2s linear, background-color 0.2s linear;
}

.field__input::placeholder { color: var(--text-dim); opacity: 0.7; }

.field__input:hover { border-color: var(--line-strong); }

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--surface-2);
}
.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea.field__input {
  min-height: 10rem;
  resize: vertical;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  min-height: 1.2em;
}

.contact__links { display: grid; gap: 0; align-content: start; }

.contact__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: color 0.2s linear;
}
.contact__link:first-child { border-top: 1px solid var(--line); }
.contact__link:hover { color: var(--accent); }

.contact__link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--accent);
}

.contact__link-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  display: block;
}

.contact__link-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading);
  letter-spacing: -0.01em;
}

/*=============== ABOUT ===============*/
.about__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media screen and (min-width: 62em) {
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--sp-8);
  }
}

/*=============== CTA ===============*/
.cta {
  border-top: 1px solid var(--line-strong);
  background-color: var(--surface);
}

.cta__inner {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

@media screen and (min-width: 62em) {
  .cta__inner {
    grid-template-columns: 1fr auto;
    gap: var(--sp-7);
  }
}

.cta__title {
  font-size: var(--fs-h2);
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.03em;
}

/*=============== FOOTER ===============*/
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 0.2s linear;
}
.footer__link:hover { color: var(--accent); }

.footer__copy {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/*=============== REVEAL MOTION ===============*/
/* Rows wipe in from the left, like a table populating.
   Scoped to .js so a script failure can never leave the page blank:
   without JS the content is simply visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="wipe"] {
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 0.5s linear,
    clip-path 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Subtle parallax drift, driven by the scroll listener. */
[data-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-parallax] { transform: none !important; }

  .main.is-entering { animation: none; }
}