/* ==========================================================================
   ALEXANDRE AUGUSTO ARDUINI TAVARES — COMMAND CENTER CV & PORTFOLIO
   Visual System: Command Center — Desktop 1440
   Dark Charcoal Canvas, Subtle Checkered Grid, Ice-Blue & Amber Accents,
   Technical Dossier Reticles & Editorial Craft.
   Self-Hosted JetBrains Mono & Silkscreen Fonts — Zero Remote CDN / Frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELF-HOSTED FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/JetBrainsMono-Regular.f1a7a03672.woff2') format('woff2');
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/Silkscreen-Regular.c845473330.ttf') format('truetype');
}

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Canvas & Surfaces */
  --bg-canvas: #0A0B10;
  --bg-surface: #11141C;
  --bg-surface-dim: #0D0E14;
  --bg-surface-elevated: #171C26;
  --bg-surface-highlight: #1F2633;

  /* Lines & Borders */
  --line-steel: #3B4658;
  --line-quiet: #283242;
  --line-subtle: #1C2330;

  /* Accents */
  --accent-ice: #B4D9FD;
  --accent-ice-hover: #FFFFFF;
  --accent-ice-bg: rgba(180, 217, 253, 0.08);
  --accent-ice-border: rgba(180, 217, 253, 0.35);

  --accent-amber: #FFCB6B;
  --accent-amber-bg: rgba(255, 203, 107, 0.12);
  --accent-amber-border: rgba(255, 203, 107, 0.4);

  --accent-emerald: #4ECCA3;
  --accent-emerald-bg: rgba(78, 204, 163, 0.12);
  --accent-emerald-border: rgba(78, 204, 163, 0.4);

  /* Typography Colors */
  --text-primary: #E7EDF5;
  --text-secondary: #BBC5D3;
  --text-muted: #98A5B8;

  /* Font Stacks */
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-retro: 'Silkscreen', ui-monospace, monospace;
}

/* Activity snapshots: static by default, optional chart controls with JS. */
.activity-disclosure { border: 1px solid var(--line-quiet); padding: 20px; }
.activity-disclosure > summary { cursor: pointer; color: var(--accent-ice); font: 600 16px/1.5 var(--home-sans, sans-serif); }
.activity-disclosure > summary:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 6px; }
.activity-disclosure[open] > summary { margin-bottom: 24px; }
.activity-cards { display: grid; gap: 24px; }
.activity-card { padding: 24px; min-width: 0; }
.activity-card-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.activity-card-heading h3 { margin: 0; font: 700 20px/1.4 var(--home-mono, var(--font-mono)); }
.activity-card-heading a, .activity-source { font-size: 13px; color: var(--text-muted); }
.activity-total { margin: 0 0 24px; color: var(--text-secondary); }
.activity-total strong { font: 700 28px/1.4 var(--home-mono, var(--font-mono)); color: var(--accent-emerald); }
.activity-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 12px; margin: 0 0 24px; }
.activity-metrics dt { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.activity-metrics dd { margin: 0; color: var(--accent-ice); font: 700 18px/1.4 var(--home-mono, var(--font-mono)); }
.activity-scroll { overflow-x: auto; padding: 4px 0 12px; max-width: 100%; }
.activity-calendar { display: block; max-width: none; }
.activity-calendar text, .activity-trend text { fill: var(--text-muted); font: 11px var(--home-sans, sans-serif); }
.activity-card { --activity-1:#174c3d; --activity-2:#267c5b; --activity-3:#35ae79; --activity-4:#62e6a3; }
.activity-codex { --activity-1:#1c3659; --activity-2:#315e9a; --activity-3:#5286c9; --activity-4:#a3d0ff; }
.activity-level-0 { fill:#202733; background:#202733; }
.activity-level-1 { fill:var(--activity-1); background:var(--activity-1); }
.activity-level-2 { fill:var(--activity-2); background:var(--activity-2); }
.activity-level-3 { fill:var(--activity-3); background:var(--activity-3); }
.activity-level-4 { fill:var(--activity-4); background:var(--activity-4); }
.activity-level-missing { fill:var(--bg-canvas); stroke:var(--line-quiet); stroke-width:1; background:var(--bg-canvas); border:1px solid var(--line-quiet); }
.activity-legend { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; color:var(--text-muted); font-size:11px; }
.activity-legend > span:first-child { margin-right:4px; }
.activity-swatch { width:10px; height:10px; border-radius:2px; }
.activity-note, .activity-freshness { margin-top:16px; color:var(--text-muted); font-size:12px; line-height:1.6; }
.activity-freshness { margin-bottom:16px; }
.activity-values { font-size:13px; color:var(--text-secondary); border-top:1px solid var(--line-quiet); padding-top:12px; }
.activity-values summary { cursor:pointer; width:fit-content; }
.activity-table-scroll { max-height:260px; overflow:auto; margin-top:12px; }
.activity-values table { border-collapse:collapse; width:100%; max-width:500px; }
.activity-values caption { text-align:left; padding:0 8px 12px; }
.activity-values th, .activity-values td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line-quiet); }
.activity-values td { font-variant-numeric:tabular-nums; }
.activity-view-controls { display:flex; gap:4px; justify-content:flex-end; margin-bottom:12px; }
.activity-view-controls[hidden], [data-activity-panel][hidden] { display:none; }
.activity-view-controls button { background:none; border:1px solid transparent; border-radius:3px; color:var(--text-muted); padding:6px 10px; cursor:pointer; font:inherit; font-size:12px; }
.activity-view-controls button[aria-pressed="true"] { color:var(--accent-ice); border-color:var(--line-steel); background:var(--bg-surface-elevated); }
.activity-trend { width:100%; min-height:130px; }
.activity-axis { stroke:var(--line-steel); }
.activity-trend-bar { fill:var(--activity-3); }
.activity-trend-line { fill:none; stroke:var(--activity-4); stroke-width:2; }
@media (max-width:700px) {
  .activity-card { padding:18px; }
  .activity-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .activity-card-heading h3 { font-size:18px; }
}

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

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

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

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-mono);
  background-image: conic-gradient(#0A0B10 25%, #0C0D12 0 50%, #0A0B10 0 75%, #0C0D12 0);
  background-size: 40px 40px;
  background-position: 0 0;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--accent-ice);
  color: var(--bg-surface-dim);
}

a {
  color: var(--accent-ice);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-ice-hover);
}

[hidden] {
  display: none !important;
}

/* Accessible focus states */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-ice) !important;
  outline-offset: 4px !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background-color: var(--accent-ice);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  z-index: 9999;
  text-decoration: none;
  border: 1px solid #fff;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   RETRO / SILKSCREEN BADGES & LABELS
   -------------------------------------------------------------------------- */
.badge-silkscreen {
  font-family: var(--font-retro);
  letter-spacing: 0.05em;
}

.technical-panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--line-quiet);
  border-radius: 2px;
}

.technical-panel-elevated {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--line-steel);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   STICKY SYSTEM STATUS HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background-color: rgba(17, 20, 28, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-quiet);
}

.header-inner {
  max-width: 92rem;
  margin-inline: auto;
  padding-inline: 2rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--accent-ice-bg);
  color: var(--accent-ice);
  border: 1px solid var(--accent-ice-border);
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 2px;
}

.brand-name {
  color: var(--text-primary);
  font-weight: 500;
}

.header-sep {
  color: var(--line-steel);
}

.header-positioning {
  color: var(--accent-amber);
  font-family: var(--font-mono);
}

.header-status-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--accent-amber);
  display: inline-block;
}

.status-label {
  font-size: 0.625rem;
  color: var(--accent-amber);
  letter-spacing: 0.08em;
}

.header-telemetry {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-secondary);
  border-left: 1px solid var(--line-quiet);
  padding-left: 1rem;
}

.telemetry-label {
  color: var(--text-muted);
  font-size: 0.6875rem;
  margin-right: 0.25rem;
}

.telemetry-sep {
  color: var(--line-quiet);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 1px solid var(--line-quiet);
  border-radius: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sound-toggle:hover {
  border-color: var(--line-steel);
  color: var(--text-secondary);
}

.sound-toggle[aria-pressed='true'] {
  border-color: var(--accent-amber-border);
  background-color: var(--accent-amber-bg);
  color: var(--accent-amber);
}

/* --------------------------------------------------------------------------
   COMMAND CENTER LAYOUT (GRID: LEFT DOSSIER + RIGHT EVIDENCE)
   -------------------------------------------------------------------------- */
.command-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 2rem;
  max-width: 92rem;
  margin-inline: auto;
  padding: 2rem 2rem 4rem;
  align-items: start;
}

/* --------------------------------------------------------------------------
   LEFT IDENTITY DOSSIER (SCROLL INTO VIEW, THEN STICK; NO SEPARATE SCROLLBAR)
   -------------------------------------------------------------------------- */
.identity-dossier {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

/* A negative inset lets taller dossiers scroll to their bottom before sticking. */
.identity-dossier[data-sticky-ready='true'] {
  position: sticky;
  top: var(--dossier-top);
}

.dossier-card {
  padding: 1.5rem;
  position: relative;
  border-color: var(--line-steel);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dossier-portrait {
  width: min(100%, 200px);
  margin: 0 auto 1.25rem;
}

.dossier-portrait-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--line-steel);
  border-radius: 2px;
  background: var(--bg-canvas);
}

.dossier-reticle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.625rem;
  color: var(--line-steel);
}

.dossier-kicker {
  font-size: 0.625rem;
  color: var(--accent-ice);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.dossier-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.dossier-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-ice);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-quiet);
}

/* Dossier Document Actions */
.dossier-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-quiet);
  margin-bottom: 1rem;
}

.btn-dossier-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background-color: var(--accent-ice);
  color: #0A0B10;
  font-weight: 700;
  font-size: 0.75rem;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-dossier-primary:hover {
  background-color: #FFFFFF;
  color: #0A0B10;
}

.dossier-arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.dossier-actions-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.btn-dossier-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-size: 0.75rem;
  text-decoration: none;
  border: 1px solid var(--line-steel);
  border-radius: 2px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-dossier-action:hover {
  background-color: var(--bg-surface-highlight);
  border-color: var(--text-muted);
}

.dossier-bio {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* Telemetry Grid */
.dossier-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: rgba(23, 28, 38, 0.7);
  border: 1px solid var(--line-quiet);
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
}

.dossier-metric-item {
  display: flex;
  flex-direction: column;
}

.dossier-metric-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-ice);
  line-height: 1.2;
}

.dossier-metric-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.dossier-metric-full {
  grid-column: span 2;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(40, 50, 66, 0.6);
}

.dossier-metric-full .dossier-metric-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dossier-metric-full .dossier-metric-label {
  font-size: 0.625rem;
}

/* Core Competencies */
.dossier-competencies {
  margin-bottom: 1.25rem;
}

.dossier-competencies-header {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dossier-tag-verbatim {
  font-size: 0.5625rem;
  color: var(--line-steel);
}

.dossier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.dossier-pill {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--line-quiet);
  color: var(--text-secondary);
  border-radius: 2px;
}

.dossier-pill-accent {
  color: var(--accent-ice);
  border-color: var(--accent-ice-border);
}

/* Academic Status Summary */
.dossier-academic {
  padding: 0.75rem;
  background-color: var(--bg-surface-dim);
  border: 1px solid var(--line-quiet);
  font-size: 0.75rem;
}

.dossier-academic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.badge-status-in-progress {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  background-color: var(--accent-amber-bg);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber-border);
  border-radius: 2px;
}

.dossier-academic-degree {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.dossier-academic-inst {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.dossier-academic-expected {
  font-size: 0.625rem;
  color: var(--accent-amber);
  margin-top: 0.25rem;
  font-family: var(--font-mono);
}

/* Command Navigation Index */
.dossier-nav {
  padding: 1rem;
  border-color: var(--line-quiet);
}

.dossier-nav-title {
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.dossier-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-index-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  font-size: 0.75rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border-radius: 0 2px 2px 0;
}

.nav-index-link:hover,
.nav-index-link.active {
  border-left-color: var(--accent-ice);
  background-color: var(--accent-ice-bg);
  color: var(--accent-ice);
}

.nav-index-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-index-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--line-steel);
}

.nav-index-badge {
  font-size: 0.625rem;
  color: var(--text-muted);
}

.badge-accent-ice {
  color: var(--accent-ice);
}

.dossier-nav-links {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-quiet);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.nav-links-label {
  font-family: var(--font-mono);
}

.nav-links-items {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-links-items a {
  color: var(--text-muted);
  text-decoration: underline;
}

.nav-links-items a:hover {
  color: var(--accent-ice);
}

/* --------------------------------------------------------------------------
   RIGHT EVIDENCE COLUMN & COMMAND SECTIONS
   -------------------------------------------------------------------------- */
.evidence-column {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  min-width: 0; /* Prevents flex children from overflowing */
}

.command-section {
  scroll-margin-top: 5rem;
}

.section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-quiet);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section-kicker {
  font-size: 0.6875rem;
  color: var(--accent-amber);
  margin-bottom: 0.25rem;
  letter-spacing: 0.08em;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.section-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 34rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   01. CASE STUDIES SECTION
   -------------------------------------------------------------------------- */
.case-study-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.case-card {
  padding: 1.5rem 2rem;
  border-color: var(--line-steel);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease;
}

.case-card:hover {
  border-color: var(--accent-ice);
}

.case-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-quiet);
}

.case-card-meta {
  flex: 1 1 20rem;
}

.case-card-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.case-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.case-badge-pro {
  background-color: var(--accent-ice-bg);
  color: var(--accent-ice);
  border: 1px solid var(--accent-ice-border);
}

.case-badge-indie {
  background-color: var(--accent-amber-bg);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber-border);
}

.case-scope {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.case-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.case-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.case-title a:hover {
  color: var(--accent-ice);
}

.case-subtitle {
  font-size: 0.75rem;
  color: var(--accent-ice);
  font-family: var(--font-mono);
}

.case-card-top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Problem / Approach / Outcome 3-Column Summary Block */
.case-summary-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
  background-color: var(--bg-surface-dim);
  border: 1px solid var(--line-quiet);
  margin-block: 1.25rem;
  border-radius: 2px;
}

.summary-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-label {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

.summary-label-amber {
  color: var(--accent-amber);
}

.summary-label-ice {
  color: var(--accent-ice);
}

.summary-label-emerald {
  color: var(--accent-emerald);
}

.summary-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tag {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--line-quiet);
  color: var(--text-muted);
  border-radius: 2px;
}

.case-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-quiet);
}

.case-readmore-link {
  font-size: 0.75rem;
  color: var(--accent-ice);
  font-weight: 600;
  text-decoration: none;
}

.case-readmore-link:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
}

.btn-primary {
  background-color: var(--accent-ice);
  color: #0A0B10;
  border: 1px solid var(--accent-ice-border);
  padding: 0.625rem 1.25rem;
  font-weight: 700;
}

.btn-primary:hover {
  background-color: #FFFFFF;
  color: #0A0B10;
}

.btn-secondary {
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--line-steel);
  padding: 0.5rem 1rem;
}

.btn-secondary:hover {
  background-color: var(--bg-surface-highlight);
  border-color: var(--accent-ice);
  color: var(--accent-ice);
}

/* Inset Schematic Pipeline Figure */
.source-pipeline {
  padding: 1.5rem;
  background-color: var(--bg-surface);
  border: 1px dashed var(--line-steel);
  margin: 2rem 0;
  border-radius: 2px;
}

.diagram-label {
  font-size: 0.8125rem;
  color: var(--accent-amber);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.pipeline-svg-wrapper {
  width: 100%;
  overflow-x: auto;
}

.pipeline-svg-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
}

.source-pipeline figcaption {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-top: 1rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   02. EXPERIENCE SECTION (ALL 7 OFFICIAL ROLES)
   -------------------------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline-item {
  padding: 1.5rem 1.75rem;
  position: relative;
  border-radius: 2px;
}

.timeline-border-amber {
  border-left: 4px solid var(--accent-amber);
  border-color: var(--line-steel) var(--line-steel) var(--line-steel) var(--accent-amber);
}

.timeline-border-ice {
  border-left: 4px solid var(--accent-ice);
  border-color: var(--line-quiet) var(--line-quiet) var(--line-quiet) var(--accent-ice);
}

.timeline-border-steel {
  border-left: 4px solid var(--line-steel);
}

.timeline-border-quiet {
  border-left: 4px solid var(--line-quiet);
}

.timeline-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.role-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.role-company {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-ice);
  margin-top: 0.125rem;
}

.timeline-border-amber .role-company {
  color: var(--accent-amber);
}

.role-date-badge-current {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background-color: var(--accent-amber-bg);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber-border);
  font-weight: 700;
  border-radius: 2px;
}

.role-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.role-summary {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.role-deliverables {
  margin-bottom: 1rem;
}

.deliverables-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.role-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.role-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.deliverable-bullet {
  color: var(--accent-amber);
  font-weight: 700;
}

.timeline-border-ice .deliverable-bullet {
  color: var(--accent-ice);
}

.timeline-border-steel .deliverable-bullet,
.timeline-border-quiet .deliverable-bullet {
  color: var(--text-muted);
}

.timeline-item .tag-list {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-quiet);
}

/* --------------------------------------------------------------------------
   03. SKILLS SECTION
   -------------------------------------------------------------------------- */
.filter-controls-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter-bar-label {
  font-size: 0.625rem;
  color: var(--text-muted);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.25rem 0.625rem;
  background-color: var(--bg-surface-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--line-quiet);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-btn:hover {
  border-color: var(--line-steel);
  color: var(--text-primary);
}

.filter-btn.filter-btn-active,
.filter-btn[aria-pressed='true'] {
  background-color: var(--accent-ice);
  color: #0A0B10;
  border-color: var(--accent-ice);
  font-weight: 700;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.skill-group {
  padding: 1.25rem;
  border-color: var(--line-steel);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-group-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.skill-group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.skill-group-context {
  font-size: 0.625rem;
  color: var(--accent-ice);
}

.skill-group[data-category-tag='agentic'] .skill-group-context {
  color: var(--accent-amber);
}

.skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.skill-pill {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--line-quiet);
  color: var(--text-secondary);
  border-radius: 2px;
}

.skill-group[data-category-tag='agentic'] .skill-pill:first-child {
  color: var(--accent-ice);
  border-color: var(--accent-ice-border);
}

.skill-group[data-category-tag='tools'] .skill-pill:first-child {
  color: var(--accent-amber);
}

/* --------------------------------------------------------------------------
   04. EDUCATION & LANGUAGE PROFICIENCIES
   -------------------------------------------------------------------------- */
.education-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.education-card {
  padding: 1.25rem;
  border-color: var(--line-steel);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.education-card-amber {
  border-color: rgba(255, 203, 107, 0.5);
  background-color: rgba(255, 203, 107, 0.03);
}

.education-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.edu-status-tag {
  font-size: 0.625rem;
  color: var(--accent-ice);
  font-family: var(--font-mono);
}

.edu-status-date {
  font-size: 0.625rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.edu-degree {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.edu-institution {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.edu-timeline {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-quiet);
  font-family: var(--font-mono);
}

.education-card-amber .edu-timeline {
  color: var(--accent-amber);
}

/* Languages Panel */
.languages-panel {
  padding: 1.25rem;
  border-color: var(--line-quiet);
  background-color: var(--bg-surface-dim);
}

.languages-title {
  font-size: 0.625rem;
  color: var(--accent-ice);
  margin-bottom: 0.75rem;
}

.languages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.language-card {
  padding: 0.75rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--line-quiet);
  border-radius: 2px;
}

.language-name {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}

.language-level {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.languages-grid .language-card:nth-child(2) .language-level {
  color: var(--accent-ice);
}

/* --------------------------------------------------------------------------
   05. CONTACT SECTION
   -------------------------------------------------------------------------- */
.contact-card {
  padding: 2.5rem 2rem;
  border-color: var(--line-steel);
  background-color: var(--bg-surface-dim);
  text-align: center;
}

.contact-inner {
  max-width: 36rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--accent-amber);
}

.contact-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.contact-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.contact-channels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.contact-channels a {
  color: var(--text-muted);
  text-decoration: underline;
}

.contact-channels a:hover {
  color: var(--accent-ice);
}

.channel-sep {
  color: var(--line-steel);
}

/* --------------------------------------------------------------------------
   SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-quiet);
  padding-top: 2rem;
  padding-bottom: 3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-inner {
  max-width: 92rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: underline;
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   RESUME PAGE STYLES (FULL PROFESSIONAL RECORD, ZERO SCRIPTS)
   -------------------------------------------------------------------------- */
.resume-body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.nav-links-simple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  list-style: none;
}

.nav-links-simple .nav-link {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.nav-links-simple .nav-link:hover {
  color: var(--accent-ice);
}

.resume-wrapper {
  max-width: 80rem;
  margin-inline: auto;
  padding: 2rem 2rem 4rem;
}

.resume-container {
  padding: 2.5rem 3rem;
  border-color: var(--line-steel);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.resume-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-quiet);
}

.back-link {
  font-size: 0.8125rem;
  color: var(--accent-ice);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.resume-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-quiet);
}

.resume-kicker {
  font-size: 0.6875rem;
  color: var(--accent-amber);
  margin-bottom: 0.25rem;
  letter-spacing: 0.08em;
}

.resume-name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.resume-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-ice);
  margin-bottom: 0.5rem;
}

.resume-record-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.resume-contact-bar {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.resume-contact-bar a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.resume-contact-bar a:hover {
  color: var(--accent-ice);
}

.resume-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#certifications,
.resume-item[id^="education-"] {
  scroll-margin-top: 7rem;
}

.resume-section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-ice);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--line-steel);
  margin-bottom: 1.25rem;
}

.resume-summary-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.resume-item {
  margin-bottom: 1.5rem;
}

.resume-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.resume-item-role {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.resume-item-role a {
  color: var(--text-primary);
  text-decoration: underline;
}

.resume-item-role a:hover {
  color: var(--accent-ice);
}

.resume-item-company {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-amber);
}

.resume-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.resume-list {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.resume-list li {
  margin-bottom: 0.25rem;
}

.resume-languages-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.resume-language-item strong {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   PROJECT DETAIL PAGE STYLES
   -------------------------------------------------------------------------- */
.project-body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.project-wrapper {
  max-width: 80rem;
  margin-inline: auto;
  padding: 2rem 2rem 4rem;
}

.project-container {
  padding: 2.5rem 3rem;
  border-color: var(--line-steel);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

@media (max-width: 700px) {
  .project-wrapper { padding: 1rem 1rem 3rem; }
  .project-container { padding: 1.5rem; }
  .project-footer-nav { flex-wrap: wrap; gap: 12px; }
}

.project-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-quiet);
}

.project-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.project-subtitle {
  font-size: 0.875rem;
  color: var(--accent-ice);
  margin-bottom: 1.25rem;
}

.project-meta-section {
  margin-top: 1rem;
}

.project-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--bg-surface-dim);
  border: 1px solid var(--line-quiet);
  border-radius: 2px;
}

.project-meta-item {
  display: flex;
  flex-direction: column;
}

.project-meta-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}

.project-meta-item p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.project-body-content {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.project-body-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--line-quiet);
}

.project-body-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-ice);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.project-body-content p {
  margin-bottom: 1.25rem;
  max-width: 78ch;
}

.project-body-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.125rem 0.375rem;
  background-color: var(--bg-surface-dim);
  border: 1px solid var(--line-quiet);
  color: var(--accent-ice);
  border-radius: 2px;
}

.project-footer-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-quiet);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   404 ERROR PAGE STYLES
   -------------------------------------------------------------------------- */
.error-body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.error-wrapper {
  max-width: 48rem;
  margin: 4rem auto;
  padding: 2rem;
}

.error-page-container {
  padding: 3rem 2rem;
  border-color: var(--line-steel);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.error-code {
  font-size: 4rem;
  font-weight: 700;
  color: var(--accent-amber);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.error-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Reflow within a zoomed desktop window without creating a second navigation UI. */
.command-body { container-type: inline-size; }
.header-inner { height: auto; min-height: 3rem; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .5rem; }
.header-brand, .header-status-strip, .header-telemetry { flex-wrap: wrap; min-width: 0; }
.technical-panel, .evidence-column, .case-card-meta { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 65rem) {
  .command-layout { grid-template-columns: minmax(0, 1fr); }
  .identity-dossier[data-sticky-ready='true'] { position: static; }
  .case-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Approved Figma homepage. Keep these rules local to the homepage so the
   résumé and individual case studies retain their existing presentation. */
@font-face {
  font-family: 'Portfolio Inter';
  src: url('/assets/InterVariable.693b77d4f3.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Portfolio Mono';
  src: url('/assets/JetBrainsMono-Regular.f1a7a03672.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Portfolio Mono';
  src: url('/assets/JetBrainsMono-Bold.08863c7964.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.figma-home {
  --home-mono: 'Portfolio Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
  --home-sans: 'Portfolio Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-canvas);
  font: 400 16px/25px var(--home-sans);
  overflow-wrap: anywhere;
}

.figma-home .technical-panel { border-radius: 0; box-shadow: none; }
.figma-home .site-header { background: var(--bg-surface); border-bottom-color: var(--line-quiet); backdrop-filter: none; }
.figma-home .header-inner {
  max-width: none;
  min-height: 88px;
  padding: 16px 48px;
  gap: 18px 24px;
  color: var(--text-secondary);
}
.figma-home .header-brand { gap: 12px; min-width: 0; }
.figma-home .brand-monogram {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-steel);
  color: var(--accent-ice);
  font: 700 12px/17px var(--home-mono);
}
.figma-home .brand-text { display: flex; flex-direction: column; min-width: 0; }
.figma-home .brand-name-link { color: var(--text-primary); }
.figma-home .brand-name { font: 600 14px/20px var(--home-sans); }
.figma-home .brand-kicker,
.figma-home .header-location { font: 400 11px/17px var(--home-mono); }
.figma-home .brand-kicker { color: var(--text-muted); }
.figma-home .header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.figma-home .header-location { margin-right: 24px; color: var(--text-secondary); font: 400 14px/21px var(--home-sans); }
.figma-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--line-quiet);
  border-radius: 3px;
  font: 600 14px/20px var(--home-sans);
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.figma-home .btn-primary { background: var(--accent-ice); border-color: var(--accent-ice); color: var(--bg-canvas); }
.figma-home .btn-primary:hover { background: white; border-color: white; color: var(--bg-canvas); }
.figma-home .btn-secondary { background: var(--bg-surface-elevated); color: var(--text-primary); }
.figma-home .btn-secondary:hover { background: var(--bg-surface-highlight); border-color: var(--line-steel); color: white; }

.figma-home .command-layout {
  width: 100%;
  max-width: 1440px;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 40px;
  padding: 48px 48px 64px;
}
.figma-home .identity-dossier { gap: 24px; }
.figma-home .dossier-card { padding: 24px; border-color: var(--line-steel); }
.figma-home .dossier-kicker,
.figma-home .dossier-nav-title,
.figma-home .dossier-study-kicker,
.figma-home .hero-kicker,
.figma-home .section-kicker,
.figma-home .case-card-meta,
.figma-home .case-narrative-label,
.figma-home .case-outcome-label,
.figma-home .case-step-num,
.figma-home .early-foundation-kicker,
.figma-home .skill-card-context,
.figma-home .languages-title,
.figma-home .contact-kicker {
  font: 400 11px/17px var(--home-mono);
  letter-spacing: 0;
}
.figma-home .dossier-kicker { margin-bottom: 20px; color: var(--accent-amber); }
.figma-home .dossier-name {
  font: 700 25px/31px var(--home-mono);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.figma-home .dossier-title { padding: 0; margin: 0 0 18px; border: 0; color: var(--accent-ice); font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-origin { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-divider { height: 1px; background: var(--line-quiet); margin: 20px 0; }
.figma-home .dossier-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0 0 20px; background: none; border: 0; }
.figma-home .dossier-metric-val { color: var(--accent-ice); font: 700 25px/34px var(--home-mono); }
.figma-home .dossier-metric-label { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-actions { gap: 8px; padding: 0; margin: 0; border: 0; }
.figma-home .btn-dossier-w { width: 100%; }
.figma-home .dossier-nav { padding: 0; border: 0; }
.figma-home .dossier-nav-title { margin-bottom: 9px; color: var(--accent-amber); }
.figma-home .dossier-nav-list { gap: 0; }
.figma-home .nav-index-link { justify-content: flex-start; gap: 16px; padding: 8px 0; border: 0; border-radius: 0; color: var(--text-secondary); font: 400 14px/21px var(--home-sans); }
.figma-home .nav-index-link:hover,
.figma-home .nav-index-link.active { background: none; color: var(--accent-ice); }
.figma-home .nav-index-num { color: var(--accent-amber); font: 400 11px/21px var(--home-mono); }
.figma-home .dossier-study { padding: 20px; border: 1px solid var(--line-quiet); background: var(--bg-surface); }
.figma-home .dossier-study-kicker { margin-bottom: 10px; color: var(--accent-amber); }
.figma-home .dossier-study-degree { color: var(--text-primary); font: 600 14px/21px var(--home-sans); }
.figma-home .dossier-study-inst { color: var(--text-secondary); font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-study-status { margin-top: 8px; color: var(--accent-amber); font: 400 11px/17px var(--home-mono); }
.figma-home .dossier-links { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-link { color: var(--accent-ice); }
.figma-home .dossier-citizenship { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .dossier-more > summary,
.figma-home .dossier-explore > summary,
.figma-home .hero-more > summary { display: none; }

.figma-home .evidence-column { gap: 40px; }
.figma-home .hero-statement { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.figma-home .hero-kicker { color: var(--accent-amber); }
.figma-home .hero-display-title { color: var(--text-primary); font: 700 38px/48px var(--home-mono); letter-spacing: 0; max-width: 100%; }
.figma-home .hero-lead,
.figma-home .hero-body { max-width: 980px; color: var(--text-secondary); font: 400 16px/25px var(--home-sans); }
.figma-home .hero-more { width: 100%; }
.figma-home .hero-more .hero-body { margin-bottom: 16px; }
.figma-home .hero-competencies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.figma-home .hero-competencies .portfolio-tag { padding: 6px 10px; background: var(--bg-surface-elevated); border: 1px solid var(--line-quiet); border-radius: 3px; color: var(--text-secondary); font: 400 11px/17px var(--home-mono); }
.figma-home .activity-highlights { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.figma-home .activity-highlights-label { color: var(--accent-amber); font: 400 11px/17px var(--home-mono); }
.figma-home .activity-highlights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.figma-home .activity-highlight { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--line-quiet); background: var(--bg-surface); --activity-1:#174c3d; --activity-2:#267c5b; --activity-3:#35ae79; --activity-4:#62e6a3; }
.figma-home .activity-highlight.activity-codex { --activity-1:#1c3659; --activity-2:#315e9a; --activity-3:#5286c9; --activity-4:#a3d0ff; }
.figma-home .activity-highlight-summary { display: flex; flex-direction: column; gap: 8px; }
.figma-home .activity-highlight h3 { color: var(--text-primary); font: 600 14px/20px var(--home-sans); }
.figma-home .activity-highlight-value { color: var(--accent-emerald); font: 700 38px/48px var(--home-mono); }
.figma-home .activity-codex .activity-highlight-value,
.figma-home .activity-codex .activity-highlight-link { color: var(--accent-ice); }
.figma-home .activity-highlight-period { color: var(--text-secondary); font: 400 14px/21px var(--home-sans); }
.figma-home .activity-mini-calendar { display: block; width: 100%; height: auto; aspect-ratio: auto; }
.figma-home .activity-mini-empty { min-height: 39px; }
.figma-home .activity-highlight-dates { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .activity-highlight-link { align-self: flex-start; color: var(--accent-emerald); font: 600 14px/20px var(--home-sans); text-decoration: none; }
.figma-home .activity-highlight-link:hover { text-decoration: underline; }
.figma-home .activity-highlight-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.figma-home #github-activity-heading,
.figma-home #codex-activity-heading { scroll-margin-top: 112px; }
.figma-home .command-section { scroll-margin-top: 112px; }
.figma-home .section-header { display: block; padding: 0; margin: 0 0 24px; border: 0; }
.figma-home .section-kicker { margin: 0 0 8px; color: var(--accent-amber); }
.figma-home .section-title-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.figma-home .section-title { font: 700 27px/36px var(--home-mono); letter-spacing: 0; }
.figma-home .section-context,
.figma-home .section-desc { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .section-desc { max-width: none; margin-top: 8px; color: var(--text-secondary); font: 400 16px/25px var(--home-sans); }

.figma-home .case-study-list { gap: 24px; }
.figma-home .case-card { padding: 28px; border-color: var(--line-steel); }
.figma-home .case-card-header { align-items: center; gap: 12px; padding: 0; border: 0; }
.figma-home .case-card-meta { display: flex; flex: 1 1 280px; align-items: center; gap: 16px; color: var(--text-muted); }
.figma-home .case-card-num { color: var(--accent-amber); }
.figma-home .case-card-context { color: var(--text-muted); }
.figma-home .case-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; font: 600 14px/20px var(--home-sans); }
.figma-home .case-card-actions a { color: var(--accent-ice); }
.figma-home .case-card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
.figma-home .case-card-body.has-schematic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.figma-home .case-evidence-col,
.figma-home .case-schematic-col { min-width: 0; }
.figma-home .case-card-title { font: 700 25px/34px var(--home-mono); letter-spacing: 0; margin: 0 0 8px; }
.figma-home .case-card-title a { display: block; color: var(--text-primary); }
.figma-home .case-card-title a:hover { color: var(--accent-ice); }
.figma-home .case-card-subtitle { color: var(--text-muted); font: 400 14px/21px var(--home-sans); margin-bottom: 16px; }
.figma-home .case-narrative-group { margin-top: 12px; }
.figma-home .case-narrative-label { margin-bottom: 4px; }
.figma-home .text-accent-amber { color: var(--accent-amber); }
.figma-home .text-accent-ice { color: var(--accent-ice); }
.figma-home .text-accent-emerald { color: var(--accent-emerald); }
.figma-home .case-narrative-text { color: var(--text-secondary); font: 400 16px/25px var(--home-sans); }
.figma-home .case-outcome-box { padding: 16px; margin-top: 16px; border: 1px solid var(--accent-emerald); background: var(--bg-surface-elevated); }
.figma-home .case-outcome-label { margin-bottom: 5px; }
.figma-home .case-outcome-text { color: var(--text-primary); font: 400 16px/25px var(--home-sans); }
.figma-home .case-schematic-col { align-self: start; padding: 12px; border: 1px solid var(--line-quiet); background: var(--bg-canvas); }
.figma-home .case-step-num { flex: 0 0 20px; color: var(--accent-ice); }
.figma-home .case-card-divider { height: 1px; margin: 22px 0 0; background: var(--line-quiet); }
.figma-home .case-card-footer { padding: 16px 0 0; border: 0; }
.figma-home .case-card-tags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.figma-home .case-tech-tag { color: var(--text-muted); font: 400 11px/17px var(--home-mono); }

.figma-home .timeline { display: flex; flex-direction: column; }
.figma-home .timeline::before { display: none; }
.figma-home .role-row { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 20px; padding: 0 0 24px; }
.figma-home .role-row:first-child { padding-top: 0; }
.figma-home .role-divider { height: 1px; background: var(--line-quiet); }
.figma-home .role-date,
.figma-home .role-location,
.figma-home .role-summary { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .role-location { margin-top: 4px; }
.figma-home .role-company { color: var(--accent-amber); font: 400 11px/17px var(--home-mono); margin-bottom: 6px; }
.figma-home .role-title { color: var(--text-primary); font: 700 21px/29px var(--home-mono); margin-bottom: 8px; }
.figma-home .role-summary { max-width: 760px; color: var(--text-secondary); font: 400 16px/25px var(--home-sans); }
.figma-home .role-date { color: var(--accent-ice); }
.figma-home .early-foundation-panel { padding: 24px; background: var(--bg-surface); }
.figma-home .early-foundation-kicker { color: var(--accent-amber); margin-bottom: 12px; }
.figma-home .early-foundation-list { display: flex; flex-direction: column; gap: 12px; }
.figma-home .early-foundation-item { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.figma-home .early-date,
.figma-home .early-role-company { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .early-role-title { color: var(--text-primary); font: 600 14px/21px var(--home-sans); }

.figma-home .skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.figma-home .skill-card { min-width: 0; padding: 24px; background: var(--bg-surface); border-color: var(--line-quiet); }
.figma-home .skill-card-context { color: var(--accent-amber); margin-bottom: 0; }
.figma-home .skill-card-title { color: var(--text-primary); font: 700 21px/29px var(--home-mono); margin-bottom: 0; }
.figma-home .skill-card-items { color: var(--text-secondary); font: 400 16px/25px var(--home-sans); }
.figma-home .education-languages-row { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; align-items: start; }
.figma-home .education-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.figma-home .education-row { display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }
.figma-home .edu-degree { color: var(--text-primary); font: 600 18px/26px var(--home-sans); }
.figma-home .edu-institution,
.figma-home .edu-timeline { color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .edu-timeline { color: var(--accent-ice); border: 0; padding: 0; margin: 0; }
.figma-home .languages-panel { padding: 24px; background: var(--bg-surface-dim); border-color: var(--line-quiet); }
.figma-home .languages-title { color: var(--accent-amber); margin-bottom: 16px; }
.figma-home .languages-list { display: flex; flex-direction: column; gap: 10px; }
.figma-home .language-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; font: 400 14px/21px var(--home-sans); }
.figma-home .language-name { color: var(--text-primary); font: 600 14px/20px var(--home-sans); }
.figma-home .language-proficiency { color: var(--text-secondary); }

.figma-home .contact-card { padding: 32px; background: var(--bg-surface-elevated); border-color: var(--line-steel); text-align: left; }
.figma-home .contact-kicker { color: var(--accent-amber); margin-bottom: 14px; }
.figma-home .contact-title { font: 700 27px/36px var(--home-mono); margin-bottom: 12px; }
.figma-home .contact-desc { font: 400 16px/25px var(--home-sans); margin-bottom: 16px; }
.figma-home .contact-actions { justify-content: flex-start; gap: 12px; margin: 0 0 18px; }
.figma-home .contact-details { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 400 14px/21px var(--home-sans); }
.figma-home .contact-email-text { color: var(--text-secondary); margin-right: auto; }
.figma-home .contact-social-link { color: var(--accent-ice); }
.figma-home .main-footer-divider { height: 1px; margin-top: -8px; background: var(--line-quiet); }
.figma-home .site-footer { border: 0; padding: 0; color: var(--text-muted); font: 400 14px/21px var(--home-sans); }
.figma-home .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.figma-home .footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.figma-home .footer-links a { color: var(--text-muted); }

/* Preserve every section while zooming a desktop window or narrowing its host. */
@container (max-width: 1100px) {
  .figma-home .command-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 28px; padding-inline: 32px; }
  .figma-home .case-card-body.has-schematic { grid-template-columns: minmax(0, 1fr); }
  .figma-home .education-languages-row { grid-template-columns: minmax(0, 1fr); }
  .figma-home .languages-col { max-width: 420px; }
}
@container (max-width: 850px) {
  .figma-home .command-layout { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 48px; }
  .figma-home .identity-dossier[data-sticky-ready='true'] { position: static; }
  .figma-home .identity-dossier { max-width: none; }
  .figma-home .dossier-card { max-width: 420px; }
  .figma-home .dossier-nav-list { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
  .figma-home .dossier-study { max-width: 420px; }
  .figma-home .dossier-links { max-width: 420px; }
  .figma-home .activity-highlights-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 620px) {
  .figma-home .header-inner { min-height: 56px; padding: 16px 24px; }
  .figma-home .brand-monogram,
  .figma-home .brand-kicker,
  .figma-home .header-location { display: none; }
  .figma-home .dossier-explore .header-actions { justify-content: flex-start; gap: 8px; margin-bottom: 12px; }
  .figma-home .command-layout { gap: 24px; padding-top: 24px; }
  .figma-home .identity-dossier { gap: 10px; }
  .figma-home .dossier-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 0; border: 0; background: transparent; }
  .figma-home .dossier-kicker { display: none; }
  .figma-home .dossier-portrait { grid-column: 1; grid-row: 1 / 4; width: 72px; margin: 0; }
  .figma-home .dossier-name { grid-column: 2; grid-row: 1; margin: 0; font: 600 14px/20px var(--home-sans); }
  .figma-home .dossier-title { grid-column: 2; grid-row: 2; margin: 0; color: var(--text-primary); font: 600 14px/20px var(--home-sans); }
  .figma-home .dossier-origin { grid-column: 2; grid-row: 3; font: 400 14px/21px var(--home-sans); }
  .figma-home .dossier-more { grid-column: 1 / -1; margin-top: 12px; }
  .figma-home .dossier-more > summary,
  .figma-home .dossier-explore > summary,
  .figma-home .hero-more > summary { display: list-item; cursor: pointer; padding: 10px 12px; border: 1px solid var(--line-quiet); color: var(--accent-ice); font: 600 14px/20px var(--home-sans); }
  .figma-home .dossier-more[open] > summary,
  .figma-home .dossier-explore[open] > summary { margin-bottom: 12px; }
  .figma-home .dossier-explore { min-width: 0; }
  .figma-home .dossier-explore .dossier-nav { margin-bottom: 12px; }
  .figma-home .dossier-explore .dossier-study { margin-bottom: 12px; }
  .figma-home .hero-display-title { font-size: 27px; line-height: 36px; }
  .figma-home .hero-kicker { display: none; }
  .figma-home .hero-more[open] > summary { margin-bottom: 12px; }
  .figma-home .activity-highlight { padding: 24px; }
  .figma-home .case-card { padding: 20px; }
  .figma-home .case-card-actions { justify-content: flex-start; }
  .figma-home .role-row,
  .figma-home .early-foundation-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .figma-home .skills-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Concept art remains useful without JavaScript or animation. */
.project-concept { --motion-sans: 'Portfolio Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --motion-mono: var(--font-mono); max-width: 800px; margin: 0 auto 40px; }
.project-concept-compact { margin: 0; }
.project-motion-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; color: var(--text-muted); font: 400 12px/1.5 var(--motion-mono); }
.project-motion-controls { max-width: 800px; margin: 0 auto 12px; display: flex; justify-content: flex-end; }
.figma-home .project-motion-controls { max-width: none; }
.project-motion-pause { min-height: 40px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--text-muted); font: 400 12px/1.5 var(--font-mono); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.project-motion-pause:hover { color: var(--accent-ice); }
.project-motion-pause:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 4px; }
.project-motion-pause[hidden] { display: none; }
.project-motion-scene { position: relative; overflow: hidden; border: 1px solid var(--line-quiet); background: #090e13; }
.project-motion-scene img { display: block; width: 100%; height: auto; }
.project-motion-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.project-concept[data-playing] .project-motion-overlay { opacity: 1; }
.project-motion-overlay rect, .project-motion-overlay circle { fill: none; stroke: #ffdc99; stroke-width: 4; }
.project-motion-overlay .motion-inspection-line { fill: #d5f4ff; stroke: none; }
.motion-trace { fill: none; stroke: #e7faff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .12 .88; opacity: 0; }
.project-motion-progress { visibility: hidden; height: 2px; background: var(--line-quiet); }
.has-js .project-motion-progress { visibility: visible; }
.project-motion-progress span { display: block; width: 100%; height: 100%; background: var(--accent-ice); transform: scaleX(0); transform-origin: left; }
.project-concept[data-playing] [data-project-clock] { animation: project-clock 6s linear infinite; }
.project-motion-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; gap: 8px; padding: 0; margin: 16px 0 0; }
.project-concept .case-schematic-step { display: flex; align-items: center; gap: 10px; padding: 10px; min-width: 0; min-height: 45px; background: var(--bg-surface-elevated); border-left: 2px solid transparent; color: var(--text-secondary); font: 400 13px/1.5 var(--motion-sans); }
.project-concept .case-step-num { color: var(--accent-ice); font-family: var(--motion-mono); }
.project-concept-compact .project-motion-steps { grid-template-columns: minmax(0, 1fr); }
.project-concept figcaption { margin: 14px 0 0; color: var(--text-muted); font: 400 13px/1.6 var(--motion-sans); }
.project-concept[data-playing] .case-schematic-step { animation: project-step 6s ease infinite; }
.project-concept[data-playing] .case-schematic-step:nth-child(2) { animation-delay: -4.5s; }
.project-concept[data-playing] .case-schematic-step:nth-child(3) { animation-delay: -3s; }
.project-concept[data-playing] .case-schematic-step:nth-child(4) { animation-delay: -1.5s; }
.project-concept[data-playing] .motion-inspection-line { animation: inspection-scan 6s linear infinite; }
.project-concept[data-playing] .motion-crop, .project-concept[data-playing] .motion-gate { animation: project-focus 6s ease infinite; }
.project-concept[data-playing] .motion-trace { animation: project-trace 6s linear infinite; }
.project-concept[data-playing] .motion-trace-crop, .project-concept[data-playing] .motion-trace-route { animation-delay: -4.5s; }
.project-concept[data-playing] .motion-trace-record { animation-delay: -3s; }
.project-concept[data-playing] .motion-trace-artifact { animation-delay: -1.5s; }
.project-concept[data-playing] .motion-record { animation: project-record 6s ease infinite; }
.project-concept[data-playing][data-paused] * { animation-play-state: paused; }
@keyframes project-clock { to { transform: scaleX(1); } }
@keyframes project-step { 3%, 21% { border-left-color: var(--accent-ice); background: #243341; color: #fff; } 25%, 100% { border-left-color: transparent; background: var(--bg-surface-elevated); color: var(--text-secondary); } }
@keyframes inspection-scan { 0% { opacity: 0; transform: translateY(0); } 5%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(380px); } }
@keyframes project-trace { 0% { opacity: 0; stroke-dashoffset: 1; } 2%, 22% { opacity: 1; } 25%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes project-focus { 0%, 50%, 100% { opacity: 0; } 20%, 40% { opacity: 1; } }
@keyframes project-record { 0%, 70%, 100% { opacity: 0; } 80%, 95% { opacity: 1; } }
@media (max-width: 420px) {
  .project-motion-steps { grid-template-columns: minmax(0, 1fr); }
  .figma-home .case-schematic-col { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-motion-overlay, .project-motion-pause, .project-motion-progress { display: none; }
  .project-concept[data-playing] .case-schematic-step, .project-concept[data-playing] [data-project-clock] { animation: none; }
}
@media print {
  .project-motion-pause, .project-motion-overlay, .project-motion-progress { display: none; }
  .project-concept[data-playing] .case-schematic-step { animation: none; }
}
.selected-credentials { margin-bottom: 2.5rem; }
.selected-credentials > h3, .credential-category > h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.credentials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.credential-card { padding: 1.2rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.credential-card h4 { margin: 0 0 .6rem; font-family: inherit; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.credential-issuer, .credential-date { margin: 0 0 .6rem; line-height: 1.5; }
.credential-date { font-size: .82rem; color: var(--text-secondary, #aeb9c7); }
.credential-link { margin-top: auto; padding-top: .6rem; font-size: .88rem; }
.credentials-all { display: inline-block; margin-top: 1rem; }
.credential-category { margin-top: 1.7rem; }
.qualification-topics { font-size: .92rem; line-height: 1.7; margin-top: 1.5rem; }
.additional-skills { margin-top: 1.3rem; }
.additional-skills summary { cursor: pointer; padding: .7rem 0; }
@media (max-width: 620px) { .credentials-grid { grid-template-columns: 1fr; } }

/* The HyperFrames film is full-width so its explanation stays legible. */
.profile-figure { margin: 1.5rem 0; border: 1px solid var(--line-steel); border-radius: 8px; overflow: hidden; min-width: 0; font-family: system-ui, sans-serif; }
.profile-figure-detail { margin: 0 0 2.5rem; }
.profile-figure-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 18px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.profile-figure-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-motion-toggle, .profile-video-open { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; min-width: 44px; text-decoration: none; border: 1px solid var(--line-steel); border-radius: 5px; padding: 9px 12px; background: transparent; color: var(--text-primary); font: inherit; font-size: 12px; cursor: pointer; }
.profile-motion-toggle[hidden] { display: none; }
.profile-motion-toggle:hover, .profile-video-open:hover { border-color: var(--accent-ice); }
.profile-motion-toggle:focus-visible, .profile-video-open:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 3px; }
.profile-film { position: relative; aspect-ratio: 16 / 9; background: var(--bg-surface); }
.profile-film video, .profile-film-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.profile-film video { visibility: hidden; }
.profile-figure[data-motion-state] video { visibility: visible; }
.profile-figure[data-motion-state] .profile-film-poster { visibility: hidden; }
.profile-figure figcaption { margin: 0; padding: 12px 18px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.profile-figure-detail + .project-body-content { max-width: 72ch; font-family: system-ui, sans-serif; }
.profile-figure-detail + .project-body-content p { line-height: 1.75; }
.has-profile-figure .case-card-num { flex-shrink: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce), print {
  .profile-figure[data-motion-state] video { visibility: hidden; }
  .profile-figure[data-motion-state] .profile-film-poster { visibility: visible; }
  .profile-motion-toggle { display: none !important; }
}

.profile-project .project-title,
.profile-project .project-subtitle,
.has-profile-figure .case-card-title { font-family: system-ui, sans-serif; }
.profile-project .project-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; }
.profile-project .project-subtitle { line-height: 1.6; }
.profile-project .project-meta-grid { border: 0; background: none; padding: 0; }
.profile-project .project-meta-label { display: none; }
@media (max-width: 700px) {
  .profile-project .project-wrapper { padding: 20px 12px 36px; }
  .profile-project .project-container { padding: 24px 16px; }
  .profile-project .project-header { margin-bottom: 24px; padding-bottom: 16px; }
  .profile-project .header-inner { padding-inline: 16px; }
  .profile-project .nav-links-simple { flex-wrap: wrap; gap: 8px 14px; }
  .profile-project .header-inner > nav { min-width: 0; max-width: 100%; }
  .profile-project .project-footer-nav { flex-wrap: wrap; }
}