/* ==========================================================================
   Component & layout styles
   Depends on brand.css for every color, size and timing value.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--sp-4); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; }

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

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent); color: #04120D; font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.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;
}

/* ---------- Ambient background ------------------------------------------- */
.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
}
.backdrop::before,
.backdrop::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px);
}
.backdrop::before {
  width: 46vw; height: 46vw; top: -14vw; right: -10vw;
  background: var(--brand-azure); opacity: .10;
}
.backdrop::after {
  width: 38vw; height: 38vw; top: 32vw; left: -14vw;
  background: var(--brand-mint); opacity: .07;
}

/* ---------- Layout -------------------------------------------------------- */
.container {
  width: 100%;
  /* Track the viewport instead of hard-capping, so large displays stay filled. */
  max-width: min(var(--container), 94vw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: min(var(--container-narrow), 94vw); }

.section { padding-block: var(--sp-9); position: relative; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head { margin-bottom: var(--sp-7); max-width: 56ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--brand-gradient);
}

.section-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.section-lede { color: var(--text-muted); font-size: var(--fs-md); margin: 0; }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Header / nav -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--scrim);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  height: 72px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--text); font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.01em; margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-size: var(--fs-base); }
.brand__role {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-dim); font-weight: 400;
}

.nav__links { display: flex; align-items: center; gap: var(--sp-2); }
.nav__link {
  position: relative; padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brand-gradient);
}

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

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.7rem 1.15rem; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--brand-gradient); color: #03130E; border: none;
  box-shadow: 0 6px 20px -8px rgba(0,217,163,.55);
}
.btn--primary:hover { box-shadow: 0 10px 28px -8px rgba(0,217,163,.7); }
:root[data-theme="light"] .btn--primary { color: #FFFFFF; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn--primary { color: #FFFFFF; }
}

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

.btn--quiet {
  background: transparent; color: var(--text-muted); border-color: var(--line);
}
.btn--quiet:hover { color: var(--text); border-color: var(--line-strong); }

.btn--sm { padding: 0.5rem 0.85rem; font-size: var(--fs-xs); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--line); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent-line); }
.icon-btn svg { width: 18px; height: 18px; }

/* Theme toggle swaps which glyph is visible. */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: none; }
}

.nav__toggle { display: none; }

/* ---------- Hero ---------------------------------------------------------- */
.hero { padding-block: var(--sp-9) var(--sp-8); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-8); align-items: center;
}

.status-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.04em;
  margin-bottom: var(--sp-5);
}
.status-pill__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,217,163,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0,217,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,217,163,0); }
}

.hero__name {
  font-size: var(--fs-4xl); letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}
.hero__role {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  color: var(--text-muted); margin-bottom: var(--sp-4);
  min-height: 1.5em;
}
.hero__role .typed { color: var(--accent); }
.hero__role .caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: -0.12em;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero__lede {
  font-size: var(--fs-md); color: var(--text-muted);
  max-width: 54ch; margin-bottom: var(--sp-5);
}
.hero__lede strong { color: var(--text); font-weight: 600; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); margin-bottom: var(--sp-6);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta svg { width: 14px; height: 14px; color: var(--accent); }

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

/* Terminal card ------------------------------------------------------------ */
.terminal {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.terminal__bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.terminal__dot--r { background: #FF5F57; }
.terminal__dot--y { background: #FEBC2E; }
.terminal__dot--g { background: #28C840; }
.terminal__title {
  margin-left: auto; font-size: var(--fs-xs); color: var(--text-dim);
}
.terminal__body { padding: var(--sp-5); line-height: 1.85; }
.terminal__line { display: block; white-space: pre-wrap; word-break: break-word; }
.tok-prompt  { color: var(--accent); }
.tok-key     { color: var(--brand-azure); }
.tok-str     { color: var(--text); }
.tok-num     { color: var(--brand-amber); }
.tok-comment { color: var(--text-dim); }
:root[data-theme="light"] .tok-key { color: var(--accent-2); }
:root[data-theme="light"] .tok-num { color: var(--accent-3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tok-key { color: var(--accent-2); }
  :root:not([data-theme]) .tok-num { color: var(--accent-3); }
}

/* ---------- Stats --------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.stat {
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stat:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.stat__value {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700;
  line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--sp-2);
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* ---------- About (layout lives in the magazine-spread block below) ------- */
.about__body strong { color: var(--text); font-weight: 600; }

.facts {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
}
.fact { display: flex; gap: var(--sp-4); padding-block: var(--sp-3); }
.fact + .fact { border-top: 1px solid var(--line); }
.fact__key {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-dim); width: 8.5rem; flex: none; padding-top: 2px;
}
.fact__val { font-size: var(--fs-sm); color: var(--text); }

/* ---------- Highlight cards ---------------------------------------------- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.card {
  position: relative; overflow: hidden;
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--brand-gradient); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-md); margin-bottom: var(--sp-4);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.card__icon svg { width: 20px; height: 20px; }
.card__icon--amber { background: var(--amber-soft); color: var(--accent-3); border-color: transparent; }
.card__icon--azure { background: var(--azure-soft); color: var(--accent-2); border-color: transparent; }

.card__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.card__text { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ---------- Experience timeline ------------------------------------------ */
.timeline { position: relative; padding-left: var(--sp-7); }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--brand-azure), transparent);
  opacity: .45;
}
.job { position: relative; padding-bottom: var(--sp-7); }
.job:last-child { padding-bottom: 0; }
.job::before {
  content: ""; position: absolute; left: calc(var(--sp-7) * -1 + 5px); top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.job--current::before { background: var(--accent); }

.job__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2);
}
.job__company { font-size: var(--fs-lg); }
.job__badge {
  font-family: var(--font-mono); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.job__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); margin-bottom: var(--sp-4);
}

.role { margin-bottom: var(--sp-5); }
.role:last-child { margin-bottom: 0; }
.role__head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.role__title { font-size: var(--fs-md); color: var(--text); }
.role__dates {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
  white-space: nowrap;
}

.bullets { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bullets li {
  position: relative; padding-left: var(--sp-5);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 2px; border-radius: 2px; background: var(--accent); opacity: .8;
}
.bullets li strong { color: var(--text); font-weight: 600; }

.bullets--collapsed li:nth-child(n + 5) { display: none; }

.more-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent); letter-spacing: 0.04em;
}
.more-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.more-btn svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Tech tags ----------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 0.22rem 0.55rem; border-radius: var(--radius-sm);
  background: var(--surface-raised); border: 1px solid var(--line);
  color: var(--text-muted);
}
.tag--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---------- Skills -------------------------------------------------------- */
.skills__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-4);
}
.skill-group {
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.skill-group__head {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.skill-group__icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
}
.skill-group__icon svg { width: 16px; height: 16px; }
.skill-group__title { font-size: var(--fs-base); }

/* ---------- Resume downloads --------------------------------------------- */
.resume__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-4);
}
.doc {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.doc:hover { border-color: var(--accent-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doc--featured { border-color: var(--accent-line); background: var(--accent-soft); }

.doc__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.doc__flag {
  font-size: 1.4rem; line-height: 1; flex: none;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface-raised);
  border: 1px solid var(--line);
}
.doc__title { font-size: var(--fs-md); margin-bottom: 2px; }
.doc__region {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.doc__text { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; margin-bottom: var(--sp-4); }
.doc__specs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.doc__actions { display: flex; gap: var(--sp-2); }
.doc__actions .btn { flex: 1; }

.badge-featured {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--accent); margin-bottom: var(--sp-3);
}

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6);
  margin-top: var(--sp-9);
}
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4); justify-content: space-between;
}
.footer__note { font-size: var(--fs-xs); color: var(--text-dim); margin: 0; }
.footer__links { display: flex; gap: var(--sp-4); }
.footer__links a { color: var(--text-muted); font-size: var(--fs-xs); }
.footer__links a:hover { color: var(--accent); }

/* ---------- Back to top --------------------------------------------------- */
.to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Reveal on scroll ---------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: var(--sp-7); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .section { padding-block: var(--sp-8); }
  .nav { height: 64px; }
  .brand__role { display: none; }

  .nav__toggle { display: inline-grid; order: 3; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-4);
    background: var(--bg-alt); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link { padding: var(--sp-4); font-size: var(--fs-base); }
  .nav__link.is-active::after { display: none; }
  .nav__cta { display: none; }

  .hero { padding-block: var(--sp-7) var(--sp-6); }
  .hero__actions .btn { flex: 1 1 100%; }
  .timeline { padding-left: var(--sp-6); }
  .job::before { left: calc(var(--sp-6) * -1 + 4px); }
  .fact { flex-direction: column; gap: var(--sp-1); }
  .fact__key { width: auto; }
  .footer__inner { justify-content: center; text-align: center; }
}

@media (max-width: 460px) {
  .doc__actions { flex-direction: column; }
}

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

/* ---------- Print --------------------------------------------------------- */
@media print {
  .site-header, .to-top, .backdrop, .hero__actions, .channel__act, .channel__act--btn,
  .nav, .more-btn, .resume, .site-footer { display: none !important; }
  /* contact details still print; only the copy control is dropped */
  .channel { break-inside: avoid; background: none; border-color: #ccc; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .section { padding-block: 10pt; }
  .card, .doc, .stat, .skill-group, .depth-card, .facts { border: 1px solid #ccc; box-shadow: none; }
  .bullets--collapsed li:nth-child(n + 5) { display: list-item; }
  a { color: #000; }
  .gradient-text, .stat__value { -webkit-text-fill-color: #000; color: #000; }
}

.brand-mark { color: var(--text); }

/* ==========================================================================
   Brand mark theming
   var() inside an SVG presentation attribute is not reliably supported, so
   the inline marks are themed with real CSS rules instead.
   ========================================================================== */

/* ==========================================================================
   Brand guidelines page
   ========================================================================== */
.brand-hero { padding-block: var(--sp-8) var(--sp-7); }
.brand-hero__mark {
  width: 104px; height: 104px; margin-bottom: var(--sp-5);
  filter: drop-shadow(0 10px 30px rgba(0,217,163,.18));
}
.brand-hero__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.brand-hero__lede { font-size: var(--fs-md); color: var(--text-muted); max-width: 60ch; }

.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.logo-tile {
  display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); text-align: center;
}
.logo-tile svg { width: 66px; height: 66px; }
.logo-tile__name { font-size: var(--fs-sm); font-weight: 600; }
.logo-tile__note {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
}
.logo-tile--ink  { background: #0A1017; border-color: #1C2936; }
.logo-tile--ink .logo-tile__name { color: #E6EDF5; }
.logo-tile--ink .logo-tile__note { color: #8296AC; }
.logo-tile--paper { background: #FFFFFF; border-color: #E1E8EF; }
.logo-tile--paper .logo-tile__name { color: #0B131C; }
.logo-tile--paper .logo-tile__note { color: #6B7F94; }

.swatches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.swatch {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface);
}
.swatch__chip { height: 92px; }
.swatch__body { padding: var(--sp-4); }
.swatch__name { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 2px; }
.swatch__hex {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.swatch__use { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }

.type-specimen {
  padding: var(--sp-5); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface);
  margin-bottom: var(--sp-4);
}
.type-specimen__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.type-specimen__sample { margin: 0; line-height: 1.25; }
.type-specimen__sample--display { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; }
.type-specimen__sample--body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; }
.type-specimen__sample--mono { font-family: var(--font-mono); font-size: 0.95rem; }
.type-specimen__scale {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
  margin-top: var(--sp-4); letter-spacing: 0.04em;
}

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.rule {
  padding: var(--sp-5); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
}
.rule__head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 600; margin-bottom: var(--sp-3);
}
.rule__head svg { width: 19px; height: 19px; flex: none; }
.rule--do .rule__head { color: var(--accent); }
.rule--dont .rule__head { color: #FF6B6B; }
:root[data-theme="light"] .rule--dont .rule__head { color: #C0392B; }
.rule ul { display: grid; gap: var(--sp-2); }
.rule li {
  font-size: var(--fs-sm); color: var(--text-muted);
  padding-left: var(--sp-4); position: relative;
}
.rule li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5;
}

.token-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.token-table th, .token-table td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.token-table th {
  background: var(--surface-raised); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 500;
}
.token-table td { color: var(--text-muted); }
.token-table td:first-child { color: var(--accent); }
.token-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ==========================================================================
   Wide screens
   The shell fills the viewport, but prose keeps a readable measure — a line
   of body text should never run the full width of a 27" monitor.
   ========================================================================== */
.bullets li   { max-width: 90ch; }
.card__text, .doc__text, .depth-card__text { max-width: 62ch; }

/* The experience timeline splits in two: the company stays pinned on the
   left while its roles scroll past on the right. */
@media (min-width: 1100px) {
  .job {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: start;
  }
  .job__aside {
    position: sticky;
    top: 104px;
  }
  .job__meta { margin-bottom: 0; }
  .job__head { margin-bottom: var(--sp-3); }
}

/* Very wide displays: let the hero breathe rather than stretch. */
@media (min-width: 1500px) {
  .hero__grid { gap: var(--sp-9); }
  .section { padding-block: var(--sp-10); }
}

/* ==========================================================================
   Mobile refinements
   ========================================================================== */
@media (max-width: 760px) {
  /* Two stat tiles per row reads better than four stacked blocks. */
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
  .stat { padding: var(--sp-4); }
  .stat__value { font-size: var(--fs-2xl); }

  .section-title { font-size: var(--fs-xl); }
  .contact__title { font-size: var(--fs-xl); }

  .terminal__body { padding: var(--sp-4); font-size: var(--fs-xs); line-height: 1.7; }
  .terminal__bar { padding: var(--sp-2) var(--sp-3); }

  .contact { padding: var(--sp-6) var(--sp-4); border-radius: var(--radius-lg); }
  
  /* A long address must wrap rather than push the page sideways. */
    
  .card, .doc, .skill-group, .depth-card, .facts { padding: var(--sp-4); }
  .status-pill { font-size: 0.6875rem; }
  .hero__meta { gap: var(--sp-3); }

  /* Comfortable thumb targets. */
  .icon-btn { width: 42px; height: 42px; }
  .btn { padding: 0.8rem 1.1rem; }
  .more-btn { padding-block: var(--sp-2); }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
  .brand__name { font-size: var(--fs-sm); }
  .hero__name { font-size: 2.1rem; }
  .job__head { gap: var(--sp-2); }
}

/* Nothing should ever force a horizontal scrollbar. */
.terminal, .table-wrap, .tags, .doc__specs { min-width: 0; }
.job__roles, .job__aside { min-width: 0; }

/* ==========================================================================
   Very large displays
   Past ~1500px a single column of text would leave half the screen empty and
   the lines would be unreadably long. Flowing prose and bullet lists into two
   columns fills the width while keeping every line a comfortable measure.
   ========================================================================== */
@media (min-width: 1500px) {
  .bullets {
    columns: 2;
    column-gap: var(--sp-7);
  }
  .bullets li {
    max-width: none;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* Roomier cards rather than ever-thinner ones. */
  .skills__grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
  .resume__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

  .job { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .section-head { max-width: 72ch; }
}

@media (min-width: 2000px) {
  /* Three columns of bullets only once each one can still hold ~55 characters. */
  .bullets { columns: 3; }
  .stats   { gap: var(--sp-5); }
}

/* ==========================================================================
   About — reads as a magazine spread rather than a wall of text.
   Prose keeps a short measure; the width is filled by two sidebar panels
   that split off into their own columns on large screens.
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.about__side {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  /* The sidebar dissolves so its two panels become real grid columns. */
  .about__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.78fr) minmax(0, 0.92fr); }
  .about__side { display: contents; }
}

.about__body p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.8;
  margin-bottom: var(--sp-5);
  max-width: 62ch;
}
.about__body p:last-child { margin-bottom: 0; }

/* The opening line gets room to breathe and a gradient rule to anchor it. */
.about__body p.about__lead {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.about__body p.about__lead::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em; bottom: 0.3em;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-gradient);
}

.enjoys {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.enjoys__title {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
.enjoys ul { display: grid; gap: var(--sp-4); }
.enjoys li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.enjoys svg {
  width: 18px; height: 18px; flex: none;
  color: var(--accent);
  margin-top: 1px;
}

@media (max-width: 760px) {
  .about__body p.about__lead { font-size: var(--fs-md); padding-left: var(--sp-4); }
  .about__body p { font-size: var(--fs-base); line-height: 1.75; margin-bottom: var(--sp-4); }
  .enjoys { padding: var(--sp-4); }
}

/* ==========================================================================
   Selected work
   Six cards want an explicit column count, not auto-fit — left to itself a
   wide viewport strings them into a single thin row that reads as a feature
   list rather than a portfolio. Two rows of three stays balanced.
   ========================================================================== */
.cards { grid-template-columns: 1fr; }
@media (min-width: 880px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.work { display: flex; flex-direction: column; }

.work__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.work__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
  line-height: 1;
  padding-top: var(--sp-2);
}

.work .card__title { margin-bottom: var(--sp-2); }

/* Where and when — the context the cards were missing. */
.work__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}

.work .card__text {
  flex: 1;
  margin-bottom: var(--sp-4);
  max-width: 54ch;
}

/* Terminal: commands read brighter than their output; the commit hash borrows
   the amber accent so the brand line lands. */
.tok-cmd { color: var(--text); }
.tok-sha { color: var(--brand-amber); }
:root[data-theme="light"] .tok-sha { color: var(--accent-3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tok-sha { color: var(--accent-3); }
}

/* ==========================================================================
   Skills
   The highlight on a chip now carries meaning, so it needs a legend; and the
   depth cards state what I can take responsibility for rather than repeating
   the technology list above them.
   ========================================================================== */
.skills__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.legend-item .tag { pointer-events: none; }

.depth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.depth-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}
.depth-card:hover { border-color: var(--accent-line); }
.depth-card__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.depth-card__icon svg { width: 17px; height: 17px; }
.depth-card__title { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.depth-card__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

/* The full name is longer than the short form it replaced — keep it on one
   line and let it shrink rather than wrap beside the mark. */
.brand__name { white-space: nowrap; }
@media (max-width: 520px) {
  .brand__name { font-size: var(--fs-sm); }
  .brand__mark { width: 32px; height: 32px; }
}
@media (max-width: 380px) {
  .brand__name { font-size: var(--fs-xs); }
}

/* ==========================================================================
   Education
   Two panels with matching internal structure, so they read as a pair rather
   than as one paragraph card sitting beside one list card.
   ========================================================================== */
.edu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 820px) { .edu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.edu-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.edu-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }

.edu-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.edu-card__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.edu-card__icon--amber {
  background: var(--amber-soft); color: var(--accent-3); border-color: transparent;
}
.edu-card__icon svg { width: 20px; height: 20px; }

.edu-card__school { font-size: var(--fs-md); margin-bottom: 2px; }
.edu-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin: 0;
}

.edu-card__degree {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.edu-card__spec {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  flex: 1;
}

.honors { display: grid; gap: var(--sp-4); }
.honour {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.honour svg { width: 17px; height: 17px; color: var(--accent-3); flex: none; margin-top: 2px; }
.honour strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Contact
   The pitch on the left; every way to reach me as scannable rows on the right.
   Each row carries the real value, not just a label, so nothing has to be
   clicked to be read. Email is the row that matters, so it is the only one
   filled in.
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 0% 0%, var(--accent-soft), transparent 65%);
  pointer-events: none;
}
.contact > * { position: relative; min-width: 0; }

@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-8); }
}

.contact__pitch { display: grid; gap: var(--sp-3); }
.contact__title { font-size: var(--fs-2xl); margin: 0; max-width: 22ch; }
.contact__text { color: var(--text-muted); max-width: 48ch; margin: 0; }
.contact__note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); margin: var(--sp-2) 0 0;
}

.channels { display: grid; gap: var(--sp-2); }

.channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.channel:hover { border-color: var(--accent-line); transform: translateX(3px); text-decoration: none; }
.channel--primary { background: var(--accent-soft); border-color: var(--accent-line); }

/* the email row wraps its link so the copy button stays separately clickable */
.channel__main {
  display: flex; align-items: center; gap: var(--sp-4);
  flex: 1; min-width: 0; color: inherit;
}
.channel__main:hover { text-decoration: none; }

.channel__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--accent);
}
.channel__ico svg { width: 17px; height: 17px; }

.channel__body { display: grid; min-width: 0; }
.channel__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}
.channel__value { font-size: var(--fs-sm); overflow-wrap: anywhere; }

.channel__act {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  color: var(--text-dim);
}
.channel__act svg { width: 16px; height: 16px; }
.channel:hover .channel__act { color: var(--accent); }

.channel__act--btn {
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm);
}
.channel__act--btn:hover { color: var(--accent); background: var(--surface); }

@media (max-width: 760px) {
  .contact { padding: var(--sp-5) var(--sp-4); border-radius: var(--radius-lg); gap: var(--sp-5); }
  .contact__title { font-size: var(--fs-xl); max-width: none; }
  .channel { padding: var(--sp-3); gap: var(--sp-3); }
  .edu-card { padding: var(--sp-4); }
}