/* =========================================================
   Oluwafunmibi Daramola — portfolio
   Tokens mirror the Figma variables ("Portfolio / Color",
   "Portfolio / Spacing & Radius") and local text styles.
   ========================================================= */

:root {
  /* Brand */
  --brand-primary: #7b014c;
  --brand-hover: #62003d;
  --brand-soft: #f5e8f0;
  --brand-tint: #ead0df;
  /* Neutral */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-subtle: #f2efeb;
  /* Text */
  --text-primary: #242124;
  --text-secondary: #696269;
  --text-muted: #857d84; /* large text only */
  --text-on-brand: #ffffff;
  /* Border */
  --border: #e4dde1;
  --border-strong: #c8bcc4;
  /* Status */
  --success: #237a52;
  --warning: #946200;
  --error: #b42336;
  --focus: #7b014c;

  /* Spacing scale (4px base) */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px;
  --s40: 40px; --s48: 48px; --s64: 64px; --s80: 80px; --s96: 96px; --s120: 120px; --s144: 144px;

  /* Radius */
  --r-control: 8px;
  --r-card: 16px;
  --r-media: 24px;

  /* Type */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display-xl: clamp(40px, 5.2vw, 72px);
  --display-l: clamp(34px, 4.3vw, 60px);
  --h1: clamp(32px, 3.4vw, 48px);
  --h2: clamp(26px, 2.6vw, 36px);
  --h3: clamp(22px, 2vw, 28px);
  --h4: clamp(18px, 1.5vw, 20px);
  --body-l: clamp(17px, 1.4vw, 20px);

  /* Layout */
  --content: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 8vw, 120px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-primary); text-underline-offset: 4px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text-primary); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s16); top: -60px; z-index: 100; background: var(--surface); padding: var(--s8) var(--s16); border-radius: var(--r-control); }
.skip-link:focus { top: var(--s16); }

/* ---------- Type styles (Figma text styles) ---------- */
.display-xl { font-size: var(--display-xl); line-height: 1.06; letter-spacing: -0.035em; }
.display-l { font-size: var(--display-l); line-height: 1.08; letter-spacing: -0.03em; }
.h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -0.025em; }
.h2 { font-size: var(--h2); line-height: 1.15; letter-spacing: -0.02em; }
.h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -0.02em; }
.h4 { font-size: var(--h4); line-height: 1.3; }
.body-l { font-size: var(--body-l); line-height: 1.6; }
.small { font-size: 14px; line-height: 1.5; }
.meta { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); line-height: 1.4; }
.eyebrow--brand { color: var(--brand-primary); }
.index { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--brand-primary); }
.statement { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; letter-spacing: -0.015em; }
.measure { max-width: 40rem; }

/* ---------- Layout ---------- */
.container { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--s64); }
.section--subtle { background: var(--surface-subtle); }
.section--soft { background: var(--brand-soft); }
.section--rule { border-top: 1px solid var(--border); }
.stack > * + * { margin-top: var(--s16); }
.stack-l > * + * { margin-top: var(--s24); }
.stack-xl > * + * { margin-top: var(--s48); }

.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s24) clamp(24px, 6vw, 95px); align-items: start; }
.split--end { align-items: end; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--s48) var(--s24); align-items: end; }
.offset-intro { margin-left: calc((100% + 24px) * 3 / 12); max-width: 548px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s32); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s32) var(--s24); }

@media (max-width: 900px) {
  .split, .hero-grid { grid-template-columns: 1fr; }
  .offset-intro { margin-left: 0; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s24); min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s12); color: var(--text-primary); text-decoration: none; min-height: 44px; }
.wordmark__mono { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.wordmark__divider { width: 1px; height: 20px; background: var(--border-strong); }
.wordmark__name { font-size: 14px; font-weight: 500; }
.primary-nav { display: flex; align-items: center; gap: var(--s24); }
.primary-nav a.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500; }
.primary-nav a.nav-link:hover { color: var(--brand-primary); }
.primary-nav a.nav-link[aria-current="page"] { font-weight: 600; }
.primary-nav a.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 2px; background: var(--brand-primary); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: transparent; color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; }
.mobile-menu { display: none; }

@media (max-width: 760px) {
  .wordmark__divider, .wordmark__name { display: none; }
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu { display: block; border-top: 1px solid var(--border); background: var(--bg); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu ul { padding: var(--s16) var(--gutter) var(--s32); }
  .mobile-menu li a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: var(--text-primary); text-decoration: none; }
  .mobile-menu li a[aria-current="page"] { color: var(--brand-primary); }
  .mobile-menu .btn { width: 100%; margin-top: var(--s24); }
}

/* ---------- Buttons (Figma "Button" component) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s8); min-height: 48px; padding: 12px 24px; border-radius: var(--r-control); border: 1px solid transparent; font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.btn--primary { background: var(--brand-primary); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--brand-hover); color: var(--text-on-brand); }
.btn--secondary { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn--secondary:hover { background: var(--brand-soft); color: var(--brand-hover); border-color: var(--brand-hover); }
.btn--text { min-height: 44px; padding-inline: 4px; background: none; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 4px; }
.btn--text:hover { color: var(--brand-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.btn[aria-disabled="true"], .btn:disabled { background: var(--surface-subtle); color: var(--text-secondary); border-color: transparent; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); }
@media (max-width: 640px) { .btn-row--stack .btn:not(.btn--text) { width: 100%; } }

/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--s8); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.4; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--shipped { color: var(--success); }
.badge--progress { color: var(--warning); }
.badge--concept { color: var(--brand-primary); background: var(--brand-soft); }

/* ---------- Section header ---------- */
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); padding-bottom: var(--s16); border-bottom: 1px solid var(--text-primary); margin-bottom: var(--s48); }

/* ---------- Figures ---------- */
.figure { margin: 0; }
.figure img { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-subtle); width: 100%; }
.figure figcaption { margin-top: var(--s12); font-size: 13px; line-height: 1.5; color: var(--text-secondary); max-width: 60rem; }
.figure--bare img { border: 0; background: none; }
.panel { background: var(--surface-subtle); border-radius: var(--r-card); padding: clamp(20px, 4vw, 40px); }
.panel--soft { background: var(--brand-soft); }
.panel--surface { background: var(--surface); }

/* phone rows (Skana / mobile screens) */
.phones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--s24) clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 28px); background: var(--surface-subtle); border-radius: var(--r-card); }
.phones figure { margin: 0; display: grid; justify-items: center; gap: var(--s12); }
.phones img { width: var(--phone-w, 200px); border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 16px 36px rgba(36, 33, 36, .14); }
.phones figcaption { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-align: center; }
@media (max-width: 640px) { .phones img { width: min(var(--phone-w, 200px), 40vw); } }

/* ---------- Home ---------- */
.hero { padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 96px); }
.profile-aside { border-top: 1px solid var(--text-primary); padding-top: var(--s16); display: grid; gap: var(--s16); font-size: 13px; line-height: 1.5; }
.profile-aside dt { color: var(--text-secondary); }
.profile-aside dd { margin: 0; font-weight: 500; }

.feature { display: grid; grid-template-columns: 71px minmax(0, 7fr) minmax(0, 4fr); gap: var(--s24); align-items: end; padding-bottom: var(--s64); }
.feature--reverse { grid-template-columns: 71px minmax(0, 4fr) minmax(0, 6fr); }
.feature__index { align-self: start; }
.feature__text { display: grid; gap: var(--s16); justify-items: start; }
.feature .figure img { border-radius: var(--r-card); }
.gallery { display: flex; gap: var(--s16); padding: var(--s40) var(--s32); background: var(--brand-soft); border-radius: var(--r-card); justify-content: center; }
.gallery img { width: 30%; max-width: 150px; border-radius: 20px; border: 1px solid var(--border); }
.gallery img:nth-child(2) { margin-top: var(--s32); }
.card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24) clamp(24px, 8vw, 119px); padding-left: 95px; }
.card-pair > :nth-child(2) { padding-top: var(--s120); }
.project-card { display: grid; gap: var(--s16); align-content: start; }
.project-card img { border-radius: var(--r-card); border: 1px solid var(--border); }
.project-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s16); flex-wrap: wrap; }
@media (max-width: 900px) {
  .feature, .feature--reverse { grid-template-columns: 1fr; padding-bottom: var(--s48); }
  .feature--reverse .gallery { order: -1; }
  .card-pair { grid-template-columns: 1fr; padding-left: 0; }
  .card-pair > :nth-child(2) { padding-top: 0; }
}

.rule-item { border-top: 1px solid var(--border-strong); padding-top: var(--s20, 20px); display: grid; gap: var(--s8); }
.rule-item--dark { border-top-color: var(--text-primary); }
.capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s24); }
.capabilities li { display: flex; align-items: center; gap: var(--s24); padding-block: 20px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: var(--h4); }
.capabilities .index { font-size: 13px; min-width: 2ch; }
@media (max-width: 640px) { .capabilities { grid-template-columns: 1fr; } }

/* ---------- Work index ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s16); }
.filter-group { display: flex; flex-wrap: wrap; gap: var(--s8); }
.chip { display: inline-flex; align-items: center; gap: var(--s8); min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); font: 500 14px/1 var(--font-body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--text-primary); color: var(--text-on-brand); border-color: var(--text-primary); font-weight: 600; }
.chip[aria-pressed="true"]::before { content: "✓"; font-size: 12px; }
.project-row { display: grid; grid-template-columns: 71px minmax(0, 453px) minmax(0, 1fr); gap: var(--s24); padding-block: var(--s40); border-top: 1px solid var(--border); }
.project-row[hidden] { display: none; }
.project-row__text { display: grid; gap: var(--s16); justify-items: start; align-content: start; }
.facts-inline { display: flex; gap: var(--s32); font-size: 13px; }
.facts-inline dt { color: var(--text-secondary); }
.facts-inline dd { margin: 0; font-weight: 500; }
.empty-state { text-align: center; padding: var(--s64) var(--s48); border: 1px solid var(--border-strong); border-radius: var(--r-card); display: grid; gap: var(--s16); justify-items: center; }
@media (max-width: 900px) { .project-row { grid-template-columns: 1fr; } .project-row .figure { order: -1; } }

/* ---------- Contact band ---------- */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s24); }

/* ---------- Case studies ---------- */
.crumbs { display: flex; align-items: center; gap: var(--s8); font-size: 14px; }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.cs-title { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s24) var(--s48); align-items: end; margin-block: var(--s48); }
.cs-title__copy { display: grid; gap: var(--s24); justify-items: start; }
.meta-block { border-top: 1px solid var(--text-primary); }
.meta-block div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s16); padding-block: 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.meta-block dt { color: var(--text-secondary); }
.meta-block dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) { .cs-title { grid-template-columns: 1fr; } }

.cs-body { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: var(--s24) 95px; }
.toc { position: sticky; top: 100px; align-self: start; display: grid; gap: var(--s4); }
.toc a { display: flex; align-items: center; gap: var(--s12); min-height: 44px; padding: 10px 0 10px 12px; border-left: 1px solid var(--border); color: var(--text-primary); text-decoration: none; font-size: 14px; }
.toc a span { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.toc a[aria-current="true"] { border-left: 2px solid var(--brand-primary); font-weight: 600; }
.toc a[aria-current="true"] span { color: var(--brand-primary); }
.article { display: grid; gap: var(--s96); min-width: 0; }
.article > section { display: grid; gap: var(--s24); scroll-margin-top: 100px; }
.article .measure { max-width: 643px; }
@media (max-width: 900px) {
  .cs-body { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc-wrap { border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); }
  .toc-wrap summary { min-height: 52px; display: flex; align-items: center; padding-inline: 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
  .toc-wrap .toc { padding: 0 16px 12px; }
  .article { gap: var(--s64); }
}
@media (min-width: 901px) { .toc-wrap > summary { display: none; } }

.facts { border-bottom: 1px solid var(--border); max-width: 643px; }
.facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s24); padding-block: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
@media (max-width: 640px) { .facts div { grid-template-columns: 1fr; gap: var(--s4); } }

.rules-panel { background: var(--brand-soft); border-radius: var(--r-card); padding: var(--s32); display: grid; gap: 20px; max-width: 643px; }
.rules-panel ol { display: grid; gap: 20px; counter-reset: rule; }
.rules-panel li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s16); counter-increment: rule; }
.rules-panel li::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--brand-primary); line-height: 1.5; }

.questions { border-top: 1px solid var(--text-primary); padding-top: var(--s24); display: grid; gap: var(--s12); max-width: 643px; }

.annotated { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: var(--s24); align-items: start; }
.annotated--wide { grid-template-columns: 1fr; }
.notes { display: grid; gap: var(--s24); counter-reset: note; }
.notes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16) var(--s24); }
.notes li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s12); counter-increment: note; font-size: 14px; line-height: 1.5; }
.notes li::before { content: counter(note); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--brand-primary); color: var(--brand-primary); font-size: 12px; font-weight: 700; }
@media (max-width: 760px) { .annotated, .notes--two { grid-template-columns: 1fr; } }

.pair { display: flex; gap: var(--s24); align-items: center; justify-content: center; flex-wrap: wrap; }
.pair img { border-radius: 12px; border: 1px solid var(--border); }

.outcome { border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: var(--s32); display: grid; gap: var(--s16); max-width: 643px; }
.outcome dt { font-size: 13px; color: var(--text-secondary); }
.outcome dd { margin: 4px 0 0; font-weight: 500; font-size: 15px; }

.project-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s24); padding-block: var(--s64); border-block: 1px solid var(--border); }
.project-nav a.pn { display: grid; gap: var(--s8); text-decoration: none; color: var(--text-primary); }
.project-nav a.pn:hover .h3 { color: var(--brand-primary); }
.project-nav a.pn--next { text-align: right; }
@media (max-width: 640px) { .project-nav { grid-template-columns: 1fr; } .project-nav a.pn--next { text-align: left; } }

/* flow diagrams */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12); padding: var(--s32) var(--s28, 28px); background: var(--surface-subtle); border-radius: var(--r-card); }
.flow__step { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); }
.flow__step strong { font-size: 14px; }
.flow__step span { font-size: 12px; color: var(--text-secondary); }
.flow__step--key { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-brand); }
.flow__step--key span { color: var(--brand-tint); }
.flow__arrow { color: var(--text-secondary); }
.flow__err { font-size: 11px; color: var(--error); }
.flow-stack { display: grid; gap: var(--s24); }
.flow-col { display: grid; gap: var(--s8); justify-items: center; }

.diagram-2 { display: grid; grid-template-columns: 1fr 220px 1fr; gap: var(--s24); align-items: center; padding: var(--s40) var(--s32); background: var(--surface); border-radius: var(--r-card); }
.diagram-2 ul { display: grid; gap: var(--s12); }
.diagram-2 li { padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-control); font-size: 14px; font-weight: 500; }
.diagram-2__core { display: grid; justify-items: center; gap: var(--s12); font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.diagram-2__core b { display: grid; place-items: center; padding: 28px 24px; border-radius: 999px; background: var(--brand-primary); color: var(--text-on-brand); font-family: var(--font-display); font-size: 22px; }
@media (max-width: 760px) { .diagram-2 { grid-template-columns: 1fr; } }

.platform-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface-subtle); border-radius: var(--r-card); }
.platform-band div { padding: 28px; display: grid; gap: 6px; }
.platform-band b { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
@media (max-width: 760px) { .platform-band { grid-template-columns: 1fr 1fr; } .platform-band b { font-size: 17px; } }
@media (max-width: 480px) { .platform-band { grid-template-columns: 1fr; } .platform-band div { padding: 20px 24px; } }

.step-block { display: grid; gap: var(--s32); }
.qa { display: grid; }
.qa div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-block: 14px; border-top: 1px solid var(--border-strong); }
.qa dt { font-weight: 600; font-size: 13px; }
.qa dd { margin: 0; }
@media (max-width: 640px) { .qa div { grid-template-columns: 1fr; gap: var(--s4); } }

.hmw { background: var(--surface); border-radius: var(--r-card); padding: var(--s32) var(--s40); display: grid; gap: var(--s12); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--text-primary); }
.stats div { padding: 24px 20px; display: grid; gap: 6px; }
.stats b { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; color: #4e5b3c; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.token-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); }
.token { display: flex; gap: var(--s12); align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; background: #fffefb; }
.token i { width: 20px; height: 20px; border-radius: 4px; background: #4e5b3c; }
.token code { font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.forma-ivory { background: #f5f3ed; }
.olive { color: #4e5b3c; }
.next-list li { display: flex; gap: var(--s16); padding-block: var(--s16); border-bottom: 1px solid var(--border); }
.next-list li::before { content: "→"; color: #4e5b3c; font-weight: 600; }

/* ---------- About / Résumé ---------- */
.timeline > div { display: grid; grid-template-columns: 262px 357px minmax(0, 1fr); gap: var(--s24); padding-block: var(--s32); border-top: 1px solid var(--border); }
.timeline > div:last-child { border-bottom: 1px solid var(--border); }
@media (max-width: 900px) { .timeline > div { grid-template-columns: 1fr; gap: var(--s8); } }
.skill-card { background: var(--surface); border-radius: var(--r-card); padding: var(--s24); display: grid; gap: var(--s8); }
.resume-row { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: var(--s24); padding-block: var(--s40); border-bottom: 1px solid var(--border); }
.resume-row h2 { font-family: var(--font-body); }
.job + .job { margin-top: var(--s32); }
.job__head { display: flex; justify-content: space-between; gap: var(--s16); flex-wrap: wrap; align-items: baseline; }
.job ul { margin-top: var(--s8); display: grid; gap: 6px; }
.job li { padding-left: 1.2em; text-indent: -1.2em; }
.job li::before { content: "— "; }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s24); }
.kv + .kv { margin-top: var(--s16); }
@media (max-width: 760px) { .resume-row, .kv { grid-template-columns: 1fr; gap: var(--s8); } }

/* ---------- Contact form ---------- */
.contact-details { border-top: 1px solid var(--text-primary); }
.contact-details div { display: grid; grid-template-columns: 80px 1fr; gap: var(--s16); align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); font-size: 13px; }
.contact-details dt { color: var(--text-secondary); }
.contact-details dd { margin: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.form { display: grid; gap: var(--s24); max-width: 643px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s8); }
.field label { font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--text-primary); font: 400 16px/1.5 var(--font-body); }
.field textarea { min-height: 144px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-primary) 50%), linear-gradient(135deg, var(--text-primary) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border: 2px solid var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border: 2px solid var(--error); }
.field__error { display: none; align-items: center; gap: var(--s8); font-size: 14px; color: var(--error); }
.field__error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--error); color: #fff; font-size: 11px; font-weight: 700; }
.field[data-invalid] .field__error { display: flex; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s12); align-items: start; font-size: 14px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-primary); }
.banner { display: flex; gap: var(--s16); padding: 20px; border: 1px solid; border-left-width: 4px; border-radius: var(--r-control); background: var(--surface); }
.banner[hidden] { display: none; }
.banner--error { border-color: var(--error); }
.banner--success { border-color: var(--success); }
.banner--info { border-color: var(--warning); }
.banner strong { display: block; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--s48); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s32); }
.site-footer__brand { display: grid; gap: var(--s8); max-width: 300px; font-size: 14px; color: var(--text-secondary); }
.site-footer__brand b { color: var(--text-primary); font-family: var(--font-display); font-size: 20px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
@media (max-width: 640px) { .site-footer nav ul { flex-direction: column; gap: 0; } }

/* ---------- Draft notice (privacy) ---------- */
.placeholder { background: #fff6e0; padding: 0 4px; border-radius: 3px; }