/* =========================================================================
   Aung Zaw Win — portfolio
   Zero dependencies. No webfonts, no CDN, no trackers.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --bg: #08090b;
  --bg-1: #0d0f13;
  --bg-2: #12151b;
  --bg-3: #191d25;
  --line: #21262f;
  --line-soft: #171b22;
  --fg: #f3f4f6;
  --fg-2: #a9afba;
  --fg-3: #6d7583;
  --gold: #e3b778;
  --gold-2: #f3ddb9;
  --gold-dim: #8a6d43;
  --jade: #5fd3a6;
  --azure: #7ba5f5;
  --rose: #e8836f;

  --shell: min(1180px, 100% - 2.5rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI",
    Inter,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
    "Cascadia Mono",
    Menlo,
    Consolas,
    monospace;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 24px 60px -24px rgb(0 0 0 / .75);
  --glow: 0 0 0 1px rgb(227 183 120 / .18), 0 18px 60px -22px rgb(227 183 120 / .32);
}

/* Light theme. Warm paper rather than clinical white, with enough separation
   between --bg and --bg-1 that cards actually read as cards. Gold is darkened
   to stay legible on light surfaces; the primary button flips to ink, because
   dark-on-gold fails contrast at button sizes. */
:root[data-theme="light"] {
  --bg: #f4f2ed;
  --bg-1: #ffffff;
  --bg-2: #faf8f4;
  --bg-3: #ece8e0;
  --line: #d9d3c8;
  --line-soft: #e7e2d8;
  --fg: #15171b;
  --fg-2: #494f58;
  --fg-3: #757c87;
  --gold: #e3b778;
  --gold-2: #f3ddb9;
  --gold-dim: #b08c4a;
  --jade: #0f7350;
  --azure: #2a55b4;
  --rose: #a83f27;
  --shadow-1: 0 1px 2px rgb(40 34 24 / .05), 0 6px 18px -10px rgb(40 34 24 / .16);
  --shadow-2: 0 2px 6px rgb(40 34 24 / .06), 0 22px 48px -22px rgb(40 34 24 / .22);
  --glow: 0 0 0 1px rgb(138 93 21 / .2), 0 16px 44px -24px rgb(138 93 21 / .3);
}

:root[data-theme="light"] ::selection {
  background: var(--gold-dim);
  color: #1a1206;
}

/* gold-on-gold has no contrast at button size — use ink instead */
/* :root[data-theme="light"] .btn-primary {
  --btn-bg: linear-gradient(160deg, #2b2f36, #14171c);
  --btn-fg: #fff;
}

:root[data-theme="light"] .btn-primary:hover {
  box-shadow: var(--shadow-2);
} */

/* flat white surfaces read better than a gradient against warm paper.
   NB: don't set `color` on .shine here — it clips a gradient through the text
   and needs to stay transparent. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .fun,
:root[data-theme="light"] .arc li {
  background: var(--bg-1);
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img,
svg,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

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

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

::selection {
  background: var(--gold);
  color: #08090b;
}

/* ---------- ambience: grain + aurora ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

:root[data-theme="light"] body::before {
  opacity: .22;
  mix-blend-mode: multiply;
}

.aurora {
  position: fixed;
  inset: -25vh -10vw auto;
  height: 130vh;
  z-index: 0;
  pointer-events: none;
  filter: blur(90px);
  opacity: .40;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: drift 26s var(--ease) infinite alternate;
}

.aurora i:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: 52%;
  top: 2%;
  background: radial-gradient(circle, rgb(227 183 120 / .55), transparent 68%);
}

.aurora i:nth-child(2) {
  width: 40vw;
  height: 40vw;
  left: 2%;
  top: 22%;
  background: radial-gradient(circle, rgb(123 165 245 / .34), transparent 68%);
  animation-delay: -9s;
}

.aurora i:nth-child(3) {
  width: 34vw;
  height: 34vw;
  left: 26%;
  top: 48%;
  background: radial-gradient(circle, rgb(95 211 166 / .24), transparent 68%);
  animation-delay: -17s;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(4vw, 7vh, 0) scale(1.18);
  }
}

:root[data-theme="light"] .aurora {
  opacity: .17;
  filter: blur(110px);
}

/* ---------- layout ---------- */
.shell {
  width: var(--shell);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

main {
  position: relative;
  z-index: 1;
}

section {
  padding-block: clamp(3.25rem, 6.5vw, 5.25rem);
  position: relative;
}

.rule {
  border-top: 1px solid var(--line-soft);
}

/* ---------- type ---------- */
/* sized so "hospitals run on." holds on one line in the hero column —
   don't raise the max without re-checking that break */
.display {
  font-size: clamp(2.6rem, 6.1vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -.042em;
  font-weight: 680;
}

h2.title {
  font-size: clamp(1.95rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 640;
  text-wrap: balance;
}

h3 {
  font-size: 1.16rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: var(--fg-2);
  max-width: 62ch;
  line-height: 1.62;
}

.muted {
  color: var(--fg-2);
}

.dim {
  color: var(--fg-3);
}

.mono {
  font-family: var(--mono);
  font-size: .82em;
  letter-spacing: .01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.35rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.sec-head {
  max-width: 66ch;
  margin-bottom: clamp(1.9rem, 3.4vw, 2.6rem);
}

.sec-head .lede {
  margin-top: 1.15rem;
}

/* gold gradient text */
.shine {
  background: linear-gradient(96deg, var(--fg) 12%, var(--gold-2) 46%, var(--gold) 62%, var(--fg) 92%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}

@keyframes sheen {
  to {
    background-position: -220% 0;
  }
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .93rem;
  font-weight: 560;
  letter-spacing: -.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .3s, background .3s, box-shadow .35s;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold-dim);
  box-shadow: var(--shadow-1);
}

.btn:active {
  transform: translateY(0);
}

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

.btn-primary {
  --btn-bg: linear-gradient(160deg, var(--gold-2), var(--gold));
  --btn-fg: #100c05;
  border-color: transparent;
  font-weight: 640;
}

.btn-primary:hover {
  box-shadow: var(--glow);
}

.btn-ghost {
  --btn-bg: transparent;
}

.btn-sm {
  padding: .55rem 1rem;
  font-size: .84rem;
}

.arrow {
  transition: transform .35s var(--ease-out);
}

.btn:hover .arrow,
.link:hover .arrow {
  transform: translateX(3px);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--gold);
  font-weight: 560;
  font-size: .93rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}

.link:hover {
  border-color: currentColor;
}

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .85rem .38rem .7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  backdrop-filter: blur(10px);
  font-size: .8rem;
  color: var(--fg-2);
  letter-spacing: -.005em;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 70%, transparent);
  animation: ping 2.4s var(--ease) infinite;
}

@keyframes ping {

  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }

  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 55%, transparent);
  }
}

.chip {
  display: inline-block;
  padding: .3rem .68rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: .73rem;
  color: var(--fg-2);
  white-space: nowrap;
}

/* ---------- card + cursor spotlight ---------- */
.card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(168deg, var(--bg-1), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}

.card::before {
  /* cursor spotlight */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--gold) 13%, transparent), transparent 62%);
}

.card:hover {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  box-shadow: var(--shadow-2);
}

.card:hover::before {
  opacity: 1;
}

.card-lift:hover {
  transform: translateY(-4px);
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}

.nav[data-stuck] {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line-soft);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  height: 4.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 660;
  letter-spacing: -.03em;
  margin-right: auto;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--gold-2), var(--gold-dim));
  color: #0d0a05;
  font-weight: 760;
  font-size: .82rem;
  letter-spacing: -.04em;
  box-shadow: var(--shadow-1);
}

.nav-links {
  display: flex;
  gap: .25rem;
}

.nav-links a {
  padding: .5rem .8rem;
  border-radius: 9px;
  font-size: .89rem;
  color: var(--fg-2);
  font-weight: 520;
  transition: color .25s, background .25s;
}

.nav-links a:hover {
  color: var(--fg);
  background: var(--bg-2);
}

.nav-links a[aria-current="true"] {
  color: var(--gold);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
  cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}

.icon-btn:hover {
  border-color: var(--gold-dim);
  transform: translateY(-1px);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
}

.sun {
  display: none;
}

:root[data-theme="light"] .sun {
  display: block;
}

:root[data-theme="light"] .moon {
  display: none;
}

#navToggle {
  display: none;
}

.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-2));
  width: 0;
  transition: width .1s linear;
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.75rem, 5.5vw, 4.5rem);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1.22fr .78fr;
  align-items: center;
}

.hero h1 {
  margin: 1.1rem 0 1.5rem;
}

.hero .lede {
  max-width: 54ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.2rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 2.4rem;
  font-size: .86rem;
  color: var(--fg-3);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.hero-meta svg {
  width: 15px;
  height: 15px;
  opacity: .75;
}

.portrait-wrap {
  position: relative;
}

.portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  aspect-ratio: 3 / 4;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.portrait-glow {
  position: absolute;
  inset: -14% 0 6%;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 66%);
  filter: blur(46px);
  z-index: -1;
}

.portrait-badge {
  position: absolute;
  left: -1.1rem;
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.portrait-badge b {
  font-size: 1.25rem;
  letter-spacing: -.03em;
  display: block;
  line-height: 1.1;
}

.portrait-badge small {
  font-size: .7rem;
  color: var(--fg-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  /* gap to the project cards */
}

.stat {
  padding: 1.6rem 1.5rem;
  border-right: 1px solid var(--line-soft);
}

.stat:last-child {
  border-right: 0;
}

.stat b {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -.045em;
  font-weight: 660;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: .55rem;
  font-size: .81rem;
  color: var(--fg-3);
  line-height: 1.4;
}


/* ---------- tracks (hire vs contract) ---------- */
.tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.track {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.15rem);
}

.track-tag {
  align-self: flex-start;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 100px;
}

.track h3 {
  font-size: clamp(1.24rem, 2.1vw, 1.42rem);
  line-height: 1.3;
  letter-spacing: -.026em;
  margin-bottom: .9rem;
  text-wrap: balance;
}

.track>p {
  font-size: .93rem;
  line-height: 1.66;
}

.track ul {
  list-style: none;
  padding: 1.5rem 0 0;
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  border-top: 1px solid var(--line-soft);
}

/* The tick is a flex sibling of ONE span holding all the text. It must stay a
   single element: when the li itself was the grid/flex container, the <strong>
   and the text after it became separate items and the copy shattered into a
   one-word-per-line column. */
.track li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.track li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: .32rem;
  color: var(--gold);
}

.track li>span {
  font-size: .9rem;
  color: var(--fg-2);
  line-height: 1.6;
}

.track li strong {
  color: var(--fg);
  font-weight: 600;
}

.track .btn {
  margin-top: auto;
  align-self: flex-start;
}

.track ul+.btn {
  margin-top: 2rem;
}

/* ---------- lifecycle arc ---------- */
.lifecycle {
  margin-top: 1.5rem;
}

.lifecycle-lead {
  font-size: 1.02rem;
  color: var(--fg-2);
  letter-spacing: -.012em;
  margin: 1.6rem 0 1.5rem;
  text-align: center;
  text-wrap: balance;
}

.lifecycle-lead::before,
.lifecycle-lead::after {
  content: "—";
  color: var(--gold-dim);
  margin: 0 .55rem;
}

.arc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
  counter-reset: arc;
}

.arc li {
  position: relative;
  padding: 1rem .9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(170deg, var(--bg-1), var(--bg));
  transition: border-color .35s, transform .45s var(--ease-out), background .35s;
}

.arc li::after {
  /* connector between steps */
  content: "";
  position: absolute;
  right: -.62rem;
  top: 50%;
  width: .62rem;
  height: 1px;
  background: var(--line);
  z-index: 1;
}

.arc li:last-child::after {
  display: none;
}

.arc li:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
}

.arc-n {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: .5rem;
}

.arc b {
  display: block;
  font-size: .88rem;
  font-weight: 620;
  letter-spacing: -.018em;
  margin-bottom: .35rem;
}

.arc small {
  display: block;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--fg-3);
}

/* the arc lights up left-to-right once it scrolls in */
.lifecycle.in .arc li {
  animation: arcIn .6s var(--ease-out) backwards;
}

.lifecycle.in .arc li:nth-child(1) {
  animation-delay: .05s
}

.lifecycle.in .arc li:nth-child(2) {
  animation-delay: .14s
}

.lifecycle.in .arc li:nth-child(3) {
  animation-delay: .23s
}

.lifecycle.in .arc li:nth-child(4) {
  animation-delay: .32s
}

.lifecycle.in .arc li:nth-child(5) {
  animation-delay: .41s
}

.lifecycle.in .arc li:nth-child(6) {
  animation-delay: .50s
}

@keyframes arcIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    border-color: var(--gold-dim);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

.work-grid>.card:first-child {
  grid-column: 1 / -1;
}

.proj-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .9rem;
}

.proj-head h3 {
  font-size: 1.3rem;
  letter-spacing: -.028em;
}

.proj-no {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--gold-dim);
  margin-left: auto;
  flex: none;
  padding-top: .25rem;
}

.proj-desc {
  font-size: .94rem;
  color: var(--fg-2);
  max-width: 64ch;
}

.proj-stack {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin-top: 1.3rem;
}

.proj-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 1.5rem;
}

/* ---------- platform reach + store badges ---------- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.05rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.platforms b {
  font-weight: 500;
  color: var(--gold);
  padding-right: .55rem;
  margin-right: .1rem;
  border-right: 1px solid var(--line);
}

.platforms span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.platforms span::before {
  content: "▪";
  color: var(--gold-dim);
  font-size: .6em;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.35rem;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .85rem .42rem .7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-2);
  font-size: .8rem;
  color: var(--fg-2);
  transition: border-color .3s, color .3s, transform .35s var(--ease-out), background .3s;
}

.store:hover {
  border-color: var(--gold-dim);
  color: var(--fg);
  transform: translateY(-2px);
  background: var(--bg-3);
}

.store svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.store i {
  font-style: normal;
  color: var(--fg-3);
  font-size: .92em;
}

.store:hover i {
  color: var(--gold);
}

/* ---------- per-hospital deployment grid ---------- */
.deploys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: .55rem;
  margin-top: 1.35rem;
}

.deploy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  transition: border-color .3s, transform .4s var(--ease-out);
}

.deploy:hover {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  transform: translateY(-2px);
}

.deploy b {
  grid-column: 1 / -1;
  font-size: .84rem;
  font-weight: 580;
  letter-spacing: -.012em;
}

.deploy em {
  grid-column: 1 / -1;
  font-style: normal;
  margin-top: -.25rem;
  margin-bottom: .2rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.deploy .store {
  padding: .3rem .5rem;
  font-size: .72rem;
  justify-content: center;
  gap: .35rem;
}

.deploy .store svg {
  width: 14px;
  height: 14px;
}

/* the deployment panel when it sits in the right column of a feature card */
.deploys-panel {
  grid-template-columns: 1fr 1fr;
  align-content: start;
  margin-top: 0;
}

.deploys-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: .1rem;
}

.deploys-head span {
  margin-left: auto;
  color: var(--gold);
  letter-spacing: .08em;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 100px;
  padding: .16rem .5rem;
}

@media (max-width: 620px) {
  .deploys-panel {
    grid-template-columns: 1fr;
  }
}

/* the "where's the code?" note */
.src-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-top: 2.25rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-dim);
  border-radius: var(--r);
  background: var(--bg-1);
  font-size: .88rem;
  color: var(--fg-2);
  line-height: 1.6;
}

.src-note svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gold);
  margin-top: .15rem;
}

.src-note strong {
  color: var(--fg);
  font-weight: 600;
}

.feature-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.device-mini {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: .55rem;
  box-shadow: var(--shadow-1);
}

.device-mini svg {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- timeline ---------- */
.tl {
  position: relative;
  display: grid;
  gap: 0;
}

.tl::before {
  content: "";
  position: absolute;
  left: 7px;
  top: .7rem;
  bottom: 3rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-dim), var(--line) 62%, transparent);
}

.tl-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1.4rem;
  padding-bottom: 2.6rem;
  cursor: pointer;
}

.tl-node {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: .45rem;
  border: 2px solid var(--gold-dim);
  background: var(--bg);
  transition: background .35s, box-shadow .35s, transform .35s var(--ease-out);
}

.tl-item[data-open] .tl-node,
.tl-item:hover .tl-node {
  background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 15%, transparent);
  transform: scale(1.1);
}

.tl-trigger {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
}

.tl-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 8px;
}

.tl-when {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--gold);
  letter-spacing: .06em;
}

.tl-role {
  font-size: 1.2rem;
  letter-spacing: -.025em;
  font-weight: 620;
  margin: .3rem 0 .12rem;
}

.tl-org {
  font-size: .88rem;
  color: var(--fg-3);
}

.tl-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out), opacity .4s;
  opacity: .0;
}

.tl-item[data-open] .tl-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.tl-body>div {
  overflow: hidden;
}

.tl-body ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .55rem;
}

.tl-body li {
  font-size: .92rem;
  color: var(--fg-2);
  line-height: 1.55;
}

.tl-body li::marker {
  color: var(--gold-dim);
}

/* ---------- skills constellation ---------- */
.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.radar-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 45%, var(--bg-2), var(--bg-1) 78%);
  padding: 1rem 1rem .35rem;
}

.radar-wrap canvas {
  width: 100%;
  height: 420px;
  display: block;
}

.radar-key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  justify-content: center;
  padding: .5rem 0 .7rem;
  border-top: 1px solid var(--line-soft);
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--fg-3);
}

.radar-key span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.radar-key span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-dim);
}

.skill-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.filter {
  padding: .42rem .9rem;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: .83rem;
  color: var(--fg-2);
  transition: all .28s var(--ease);
}

.filter:hover {
  border-color: var(--gold-dim);
  color: var(--fg);
}

.filter[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #100c05;
  font-weight: 580;
}

.bars {
  display: grid;
  gap: .95rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem .9rem;
  align-items: baseline;
}

.bar-row .n {
  font-size: .9rem;
  font-weight: 520;
}

.bar-row .v {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--fg-3);
}

.bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-3);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-2));
  transition: width 1.1s var(--ease-out);
}

.bar-row[hidden] {
  display: none;
}

/* ---------- playground ---------- */
.pg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
}

.pg-tab {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.05rem;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: .87rem;
  color: var(--fg-2);
  font-weight: 520;
  transition: all .3s var(--ease);
}

.pg-tab:hover {
  border-color: var(--gold-dim);
  color: var(--fg);
}

.pg-tab[aria-selected="true"] {
  background: var(--bg-3);
  border-color: var(--gold-dim);
  color: var(--fg);
}

.pg-tab svg {
  width: 15px;
  height: 15px;
}

.stage {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.stage-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}

.tl-lights {
  display: flex;
  gap: .38rem;
}

.tl-lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-3);
}

.tl-lights i:nth-child(1) {
  background: #e2685c;
}

.tl-lights i:nth-child(2) {
  background: #e0b341;
}

.tl-lights i:nth-child(3) {
  background: #58c26a;
}

.stage-url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--fg-3);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  padding: .28rem .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage iframe {
  width: 100%;
  height: 620px;
  border: 0;
  background: var(--bg);
}

.pg-note {
  margin-top: 1.1rem;
  font-size: .84rem;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  align-items: center;
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Deliberately no `aspect-ratio` + `object-fit: cover` on either plate — the
   old single portrait was cropped to 3:4, and forcing the desk shot into that
   frame would slice the setup in half. Both keep their own ratio. */
.about-photos {
  position: relative;
  margin: 0;
  /* room for the inset to hang below the portrait */
  padding-bottom: clamp(64px, 11vw, 104px);
}

.about-plate {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.about-plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* The negative offset is a percentage so it scales with the column instead of
   punching a fixed 26px hole in the layout on a phone. It eats into the grid
   gap on desktop, which is 32–64px, so it never collides with the copy. */
.about-plate-inset {
  position: absolute;
  right: -6%;
  bottom: 0;
  width: 60%;
  border: 0;
  border-radius: var(--r-lg);
  /* ring of page background, then a hairline — this is what separates the two
     images without a gap, and it works in both themes because it is the page
     colour rather than a fixed grey */
  box-shadow:
    0 0 0 7px var(--bg),
    0 0 0 8px var(--line),
    0 28px 60px -22px rgb(0 0 0 / .75);
  transition: transform .5s var(--ease-out);
}

.about-photos:hover .about-plate-inset {
  transform: translateY(-8px);
}

.about-cap {
  position: absolute;
  left: 0;
  bottom: clamp(18px, 3.4vw, 34px);
  padding: .5rem .8rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-2);
  color: var(--fg-2);
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-body p+p {
  margin-top: 1.1rem;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 2.2rem;
}

.fact {
  background: var(--bg);
  padding: 1.1rem 1.2rem;
}

.fact dt {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.fact dd {
  margin: .35rem 0 0;
  font-size: .95rem;
  font-weight: 540;
}

/* ═════════ off the clock ═════════ */
.fun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}

.fun {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--bg-1), var(--bg));
  padding: 1.5rem;
  transition: border-color .4s, transform .5s var(--ease-out), box-shadow .5s;
}

.fun:hover {
  border-color: color-mix(in srgb, var(--gold) 32%, var(--line));
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.fun-gym {
  grid-column: span 3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.1rem);
}

.fun-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .26rem .66rem;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 100px;
  margin-bottom: .95rem;
}

.fun h3 {
  font-size: 1.14rem;
  letter-spacing: -.026em;
  margin-bottom: .55rem;
}

.fun p {
  font-size: .89rem;
  color: var(--fg-2);
  line-height: 1.62;
  max-width: 52ch;
}

/* ── gym: two photos side by side, plus a lifter doing presses ── */
.fun-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  width: clamp(230px, 32vw, 440px);
  flex: none;
}

.fp {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transition: transform .55s var(--ease-out);
}

.fp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp:first-child {
  transform: rotate(-2.5deg);
}

.fp:last-child {
  transform: rotate(2.5deg) translateY(10px);
}

.fun-gym:hover .fp:first-child {
  transform: rotate(-3.5deg) translateY(-6px) scale(1.03);
}

.fun-gym:hover .fp:last-child {
  transform: rotate(3.5deg) translateY(4px) scale(1.03);
}

.lifter {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.lifter svg {
  width: 168px;
  height: auto;
  flex: none;
  overflow: visible;
}

/* The scene brings its own light stage, so the heavy ink outline reads the same
   in both themes and needs no light-theme override. Literal colours, like the
   camp scene — these are illustration paint, not interface tokens. */
.lifter .stage {
  fill: #eef3fb;
}

.lifter .bar,
.lifter .plate,
.lifter .head,
.lifter .vest,
.lifter .shorts {
  stroke: #12306b;
  stroke-width: 6;
  stroke-linejoin: round;
}

.lifter .bar {
  fill: #a8c3f5;
}

.lifter .plate {
  fill: #cfdcfa;
}

.lifter .head {
  fill: #cd7360;
}

.lifter .vest {
  fill: url(#liftVest);
}

.lifter .shorts {
  fill: #b9cdf5;
}

/* Each arm is one polyline stroked twice: ink underneath, skin on top. The
   difference in stroke-width *is* the outline, so a tapered, jointed limb costs
   two lines instead of a hand-built outline path. */
.lifter .arm-o,
.lifter .arm-i {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lifter .arm-o {
  stroke: #12306b;
  stroke-width: 21;
}

.lifter .arm-i {
  stroke: #cd7360;
  stroke-width: 14;
}

/* Bar and arms share one keyframe — the hands are gripping, so they have to
   travel together or the grip visibly slides off the bar. */
.fun-gym.in .lift-rig,
.fun-gym.in .arms {
  animation: press 2.4s var(--ease) infinite;
}

.fun-gym.in .figure {
  animation: brace 2.4s var(--ease) infinite;
}

@keyframes press {

  0%,
  100% {
    transform: translateY(0)
  }

  45% {
    transform: translateY(-14px)
  }
}

/* The body settles under the bar and rises with it — runs opposite to `press`,
   because the authored pose is the bottom of the rep. */
@keyframes brace {

  0%,
  100% {
    transform: translateY(3px)
  }

  45% {
    transform: translateY(0)
  }
}

.reps {
  display: flex;
  gap: .3rem;
}

.reps i {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-3);
  transform-origin: left;
  transform: scaleX(0);
}

.fun-gym.in .reps i {
  animation: rep .5s var(--ease-out) forwards;
  background: var(--gold-dim);
}

.fun-gym.in .reps i:nth-child(1) {
  animation-delay: .1s
}

.fun-gym.in .reps i:nth-child(2) {
  animation-delay: .19s
}

.fun-gym.in .reps i:nth-child(3) {
  animation-delay: .28s
}

.fun-gym.in .reps i:nth-child(4) {
  animation-delay: .37s
}

.fun-gym.in .reps i:nth-child(5) {
  animation-delay: .46s
}

.fun-gym.in .reps i:nth-child(6) {
  animation-delay: .55s
}

.fun-gym.in .reps i:nth-child(7) {
  animation-delay: .64s
}

.fun-gym.in .reps i:nth-child(8) {
  animation-delay: .73s;
  background: var(--gold)
}

@keyframes rep {
  to {
    transform: scaleX(1)
  }
}

/* All three off-duty scenes share one frame: same viewBox (320×170), same box,
   so the cards line up whatever is drawn inside them. */
.fun-art {
  margin-top: 1.15rem;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

.fun-art svg {
  width: 100%;
  display: block;
}

/* ── beer: two mugs fill, frost beads, then a clink ── */
.beer .mug-line {
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 3.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .72;
}

.beer .head ellipse {
  fill: #fff8e8;
  opacity: 0;
}

.beer .ale {
  transform: translateY(0);
}

.fun-beer.in .mug-a .ale {
  animation: fill 1.4s var(--ease-out) .2s forwards;
}

.fun-beer.in .mug-b .ale {
  animation: fill 1.4s var(--ease-out) .45s forwards;
}

@keyframes fill {
  to {
    transform: translateY(-96px)
  }
}

.fun-beer.in .head ellipse {
  animation: headUp .6s var(--ease-out) 1.5s forwards;
}

@keyframes headUp {
  from {
    opacity: 0;
    transform: translateY(9px) scaleY(.6)
  }

  to {
    opacity: .96;
    transform: none
  }
}

.beer .fizz circle {
  fill: #fff3d4;
  opacity: 0;
}

.fun-beer.in .fizz circle {
  animation: fizz 2.6s linear 1.8s infinite;
}

.fun-beer.in .fizz circle:nth-child(2) {
  animation-delay: 2.2s
}

.fun-beer.in .fizz circle:nth-child(3) {
  animation-delay: 2.6s
}

.fun-beer.in .fizz circle:nth-child(4) {
  animation-delay: 2s
}

.fun-beer.in .fizz circle:nth-child(5) {
  animation-delay: 3s
}

.fun-beer.in .fizz circle:nth-child(6) {
  animation-delay: 2.4s
}

@keyframes fizz {
  0% {
    opacity: 0;
    transform: translateY(0)
  }

  15% {
    opacity: .9
  }

  100% {
    opacity: 0;
    transform: translateY(-72px)
  }
}

.beer .frost path {
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
}

.fun-beer.in .frost path {
  animation: bead 3.4s ease-in 2.2s infinite;
}

.fun-beer.in .frost path:nth-child(2) {
  animation-delay: 2.9s
}

.fun-beer.in .frost path:nth-child(3) {
  animation-delay: 3.6s
}

.fun-beer.in .frost path:nth-child(4) {
  animation-delay: 4.2s
}

@keyframes bead {
  0% {
    opacity: 0;
    transform: translateY(-6px)
  }

  25% {
    opacity: .4
  }

  100% {
    opacity: 0;
    transform: translateY(18px)
  }
}

.mug {
  transform-origin: 50% 92%;
}

.fun-beer.in .mug-a {
  animation: tiltL 4.2s var(--ease) 2.1s infinite;
}

.fun-beer.in .mug-b {
  animation: tiltR 4.2s var(--ease) 2.1s infinite;
}

@keyframes tiltL {

  0%,
  70%,
  100% {
    transform: rotate(0)
  }

  78% {
    transform: rotate(9deg) translateX(14px)
  }

  86% {
    transform: rotate(4deg) translateX(4px)
  }
}

@keyframes tiltR {

  0%,
  70%,
  100% {
    transform: rotate(0)
  }

  78% {
    transform: rotate(-9deg) translateX(-14px)
  }

  86% {
    transform: rotate(-4deg) translateX(-4px)
  }
}

.beer .clink {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 160px 46px;
}

.beer .splash circle {
  fill: #ffe9b0;
  opacity: 0;
}

.fun-beer.in .clink {
  animation: clink 4.2s var(--ease) 2.1s infinite;
}

.fun-beer.in .splash circle {
  animation: splash 4.2s var(--ease) 2.1s infinite;
}

.fun-beer.in .splash circle:nth-child(2) {
  animation-delay: 2.15s
}

.fun-beer.in .splash circle:nth-child(3) {
  animation-delay: 2.2s
}

@keyframes clink {

  0%,
  76%,
  100% {
    opacity: 0;
    transform: scale(.55)
  }

  80% {
    opacity: 1;
    transform: scale(1)
  }

  88% {
    opacity: 0;
    transform: scale(1.3)
  }
}

@keyframes splash {

  0%,
  76%,
  100% {
    opacity: 0;
    transform: translateY(0)
  }

  80% {
    opacity: .9
  }

  90% {
    opacity: 0;
    transform: translateY(-16px)
  }
}

/* ── motorbike: classic roadster, parallax scenery ── */
.ride .far {
  fill: color-mix(in srgb, var(--gold) 13%, var(--bg-3));
}

.ride .mid {
  fill: color-mix(in srgb, var(--gold) 22%, var(--bg-3));
}

.ride .posts {
  stroke: var(--line);
  stroke-width: 2.6;
  fill: none;
}

.fun-ride.in .far {
  animation: pan 9s linear infinite;
}

.fun-ride.in .mid {
  animation: pan 4.5s linear infinite;
}

.fun-ride.in .posts {
  animation: pan 2.2s linear infinite;
}

@keyframes pan {
  to {
    transform: translateX(-80px)
  }
}

.ride .tarmac {
  stroke: var(--line);
  stroke-width: 2.6;
}

.ride .dashes {
  stroke: var(--gold-dim);
  stroke-width: 2.8;
  stroke-linecap: round;
  fill: none;
}

.fun-ride.in .dashes {
  animation: dash .5s linear infinite;
}

@keyframes dash {
  to {
    transform: translateX(-56px)
  }
}

.ride .tyre {
  fill: none;
  stroke: var(--fg-2);
  stroke-width: 5.4;
}

.ride .rim {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
}

.ride .spokes {
  stroke: var(--gold-dim);
  stroke-width: 1.6;
  fill: none;
}

.ride .hub {
  fill: var(--gold);
}

.ride .frame,
.ride .fork,
.ride .bars,
.ride .pipe,
.ride .guard {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ride .grip {
  fill: var(--fg-2);
}

.ride .jug {
  fill: var(--gold-dim);
}

.ride .pipe {
  stroke: var(--fg-3);
  stroke-width: 5;
}

.ride .guard {
  stroke: var(--gold-dim);
  stroke-width: 4.4;
}

.ride .tank {
  fill: var(--gold);
}

.ride .seat {
  fill: #2b2118;
}

/* dark leather — the rider is --fg-2 */
.ride .engine {
  fill: var(--gold-dim);
}

/* headlight burns after dark only; by day it is an unlit glass lens */
.ride .lamp {
  fill: #fff3d0;
  stroke: var(--gold);
  stroke-width: 2.4;
}

.ride .beam {
  stroke: #ffe9a8;
  stroke-width: 2.6;
  stroke-linecap: round;
  fill: none;
  opacity: .6;
}

.fun-ride.in .lamp {
  filter: drop-shadow(0 0 7px rgb(255 226 150 / .75));
}

:root[data-theme="light"] .ride .seat {
  fill: #241c14;
}

:root[data-theme="light"] .ride .lamp {
  fill: var(--bg-3);
  stroke: var(--fg-3);
  filter: none;
}

:root[data-theme="light"] .fun-ride.in .lamp {
  filter: none;
}

:root[data-theme="light"] .ride .beam {
  display: none;
}

.ride .body {
  fill: none;
  stroke: var(--fg-2);
  stroke-width: 5.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ride .helmet {
  fill: var(--fg-2);
  stroke: none;
}

.ride .visor {
  fill: var(--gold-2);
  stroke: none;
}

.ride .streaks {
  stroke: var(--gold-dim);
  stroke-width: 2.6;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
}

.fun-ride.in .streaks {
  animation: streak .45s linear infinite;
}

@keyframes streak {
  0% {
    opacity: .8;
    transform: translateX(12px)
  }

  100% {
    opacity: 0;
    transform: translateX(-30px)
  }
}

.ride .exhaust circle {
  fill: var(--fg-3);
  opacity: 0;
}

.fun-ride.in .exhaust circle {
  animation: puff 1.4s ease-out infinite;
}

.fun-ride.in .exhaust circle:nth-child(2) {
  animation-delay: .22s
}

.fun-ride.in .exhaust circle:nth-child(3) {
  animation-delay: .44s
}

@keyframes puff {
  0% {
    opacity: .32;
    transform: translate(0, 0) scale(.5)
  }

  100% {
    opacity: 0;
    transform: translate(-32px, -14px) scale(1.5)
  }
}

.ride .rider {
  transform-origin: 168px 128px;
}

.fun-ride.in .rider {
  animation: lean 2.6s var(--ease) infinite;
}

@keyframes lean {

  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg)
  }

  35% {
    transform: translateY(-4px) rotate(1.2deg)
  }

  70% {
    transform: translateY(-1px) rotate(-.4deg)
  }
}

.fun-ride.in .wheel .spokes {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin .34s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ── outdoors: mountains, river, tent; sun + birds by day, moon + fire by night ── */
.sky-a {
  stop-color: #0b1322;
}

.sky-b {
  stop-color: #1c2740;
}

.riv-a {
  stop-color: #14304c;
}

.riv-b {
  stop-color: #0a1522;
}

:root[data-theme="light"] .sky-a {
  stop-color: #a9d6f2;
}

:root[data-theme="light"] .sky-b {
  stop-color: #eef6fc;
}

:root[data-theme="light"] .riv-a {
  stop-color: #6fadd8;
}

:root[data-theme="light"] .riv-b {
  stop-color: #cbe4f3;
}

.camp .stars circle {
  fill: #fff;
}

.fun-outdoor.in .stars circle {
  animation: twinkle 3.6s ease-in-out infinite;
}

.fun-outdoor.in .stars circle:nth-child(2n) {
  animation-delay: 1.2s
}

.fun-outdoor.in .stars circle:nth-child(3n) {
  animation-delay: 2.4s
}

@keyframes twinkle {

  0%,
  100% {
    opacity: .22
  }

  50% {
    opacity: .95
  }
}

.camp .shooting path {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
}

.fun-outdoor.in .shooting path {
  animation: shoot 11s linear 3s infinite;
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate(40px, 10px)
  }

  3% {
    opacity: .9
  }

  9% {
    opacity: 0;
    transform: translate(200px, 60px)
  }

  100% {
    opacity: 0;
    transform: translate(200px, 60px)
  }
}

/* night: moon + stars + a lit fire. day: sun + birds, cold logs. */
.camp .sun,
.camp .sun-halo,
.camp .birds,
.camp .coldlogs {
  display: none;
}

.camp .sun {
  fill: #ffd45e;
}

.camp .sun-halo {
  fill: #ffd45e;
  opacity: .16;
}

.camp .moon {
  fill: #eef3fb;
}

:root[data-theme="light"] .camp .moon,
:root[data-theme="light"] .camp .stars,
:root[data-theme="light"] .camp .shooting,
:root[data-theme="light"] .camp .fire {
  display: none;
}

:root[data-theme="light"] .camp .sun,
:root[data-theme="light"] .camp .sun-halo,
:root[data-theme="light"] .camp .birds,
:root[data-theme="light"] .camp .coldlogs {
  display: block;
}

.camp .coldlogs path {
  stroke: #6b4a2a;
  stroke-width: 3.6;
  stroke-linecap: round;
  fill: none;
}

.camp .stones {
  stroke: var(--fg-3);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .5;
}

.fun-outdoor.in .daystar {
  animation: hang 8s ease-in-out infinite alternate;
}

@keyframes hang {
  from {
    transform: translateY(5px)
  }

  to {
    transform: translateY(-6px)
  }
}

.fun-outdoor.in .sun-halo {
  animation: halo 4s ease-in-out infinite alternate;
}

@keyframes halo {
  from {
    transform: scale(1);
    opacity: .12
  }

  to {
    transform: scale(1.16);
    opacity: .24
  }
}

.camp .birds path {
  stroke: #46586e;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
}

.fun-outdoor.in .birds {
  animation: glide 14s linear infinite;
}

@keyframes glide {
  0% {
    opacity: 0;
    transform: translate(-40px, 8px)
  }

  12% {
    opacity: .75
  }

  85% {
    opacity: .75
  }

  100% {
    opacity: 0;
    transform: translate(240px, -16px)
  }
}

.camp .mtn-far {
  fill: #29334a;
}

.camp .mtn-near {
  fill: #1a2331;
}

.camp .snow {
  fill: #e9f0f8;
  opacity: .92;
}

.camp .trees {
  fill: #14301d;
}

.camp .bank {
  fill: #26361f;
}

:root[data-theme="light"] .camp .mtn-far {
  fill: #8ba2bd;
}

:root[data-theme="light"] .camp .mtn-near {
  fill: #66809b;
}

:root[data-theme="light"] .camp .trees {
  fill: #3a6741;
}

:root[data-theme="light"] .camp .bank {
  fill: #5c8850;
}

.camp .reflect path {
  stroke: #fff;
  stroke-width: 5;
  opacity: .05;
  stroke-linecap: round;
}

.camp .ripples {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .26;
}

.fun-outdoor.in .ripples path {
  animation: drift 5.5s linear infinite;
}

.fun-outdoor.in .ripples path:nth-child(2) {
  animation-delay: 1.1s
}

.fun-outdoor.in .ripples path:nth-child(3) {
  animation-delay: 2.2s
}

.fun-outdoor.in .ripples path:nth-child(4) {
  animation-delay: .6s
}

.fun-outdoor.in .ripples path:nth-child(5) {
  animation-delay: 3.1s
}

.fun-outdoor.in .ripples path:nth-child(6) {
  animation-delay: 4s
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translateX(-16px)
  }

  25% {
    opacity: .34
  }

  100% {
    opacity: 0;
    transform: translateX(30px)
  }
}

.camp .tent-body {
  fill: var(--gold);
}

.camp .tent-back {
  fill: var(--gold-dim);
}

.camp .tent-door {
  fill: #6d4512;
}

.camp .tent-pole,
.camp .tent-guy {
  stroke: var(--fg-3);
  stroke-width: 1.6;
  fill: none;
  opacity: .6;
}

.camp .logs {
  stroke: #6b4a2a;
  stroke-width: 3.6;
  stroke-linecap: round;
}

.camp .flame-o {
  fill: #ff8f22;
}

.camp .flame-m {
  fill: #ffb545;
}

.camp .flame-i {
  fill: #ffe89a;
}

.camp .flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.fun-outdoor.in .flame-o {
  animation: flick .66s ease-in-out infinite alternate;
}

.fun-outdoor.in .flame-m {
  animation: flick .5s ease-in-out infinite alternate-reverse;
}

.fun-outdoor.in .flame-i {
  animation: flick .38s ease-in-out infinite alternate;
}

@keyframes flick {
  from {
    transform: scale(1) rotate(-4deg)
  }

  to {
    transform: scale(1.18, 1.26) rotate(5deg)
  }
}

.camp .sparks circle {
  fill: #ffc55e;
  opacity: 0;
}

.fun-outdoor.in .sparks circle {
  animation: spark 2.4s linear infinite;
}

.fun-outdoor.in .sparks circle:nth-child(2) {
  animation-delay: .6s
}

.fun-outdoor.in .sparks circle:nth-child(3) {
  animation-delay: 1.2s
}

.fun-outdoor.in .sparks circle:nth-child(4) {
  animation-delay: 1.7s
}

.fun-outdoor.in .sparks circle:nth-child(5) {
  animation-delay: 2.1s
}

@keyframes spark {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0)
  }

  18% {
    opacity: .95
  }

  100% {
    opacity: 0;
    transform: translateY(-32px) translateX(7px)
  }
}

.fun-outdoor.in .glow {
  animation: glowPulse 1.5s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from {
    opacity: .7
  }

  to {
    opacity: 1
  }
}

@media (max-width: 940px) {
  .fun-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fun-gym {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .fun-grid {
    grid-template-columns: 1fr;
  }

  .fun-gym {
    grid-column: span 1;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    /* the wider clamp is for the two-column desktop layout; stacked, this card
       should sit on exactly the same padding as its three siblings */
    padding: 1.5rem;
  }

  /* Once this stacks it should read like its three siblings: tag, heading,
     copy, then the visuals. The photos have to come first in the DOM because
     they occupy the left column of the desktop layout, so the reading order is
     corrected here rather than by moving the markup.

     `justify-self` matters more than it looks: the container centres its items,
     which makes this one shrink-wrap to its widest child. `.fun p` is capped at
     ~466px, so the whole block collapsed to that and sat centred, inset from
     the card edge while every sibling card started at the padding. Stretching
     it back lets the text begin where the beer and motorbike copy begins — the
     paragraph still wraps at the same measure, it just no longer drags the tag
     and heading inward with it. */
  .fun-gym .fun-body {
    text-align: left;
    order: -1;
    justify-self: stretch;
  }

  /* The 32vw width is sized against the desktop column this sits in. Stacked,
     that leaves the pair marooned in the middle of a full-width card, so let
     them grow to the measure instead — still capped, because these are 3:4
     portraits and a full-bleed pair would tower over the sibling cards. */
  .fun-photos {
    width: min(100%, 440px);
  }

  .arc {
    grid-template-columns: 1fr 1fr;
  }

  .arc li::after {
    display: none;
  }
}

/* ---------- education ---------- */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.edu-grid .card {
  padding: 1.6rem;
}

.edu-year {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--gold);
  letter-spacing: .08em;
}

.edu-grid h3 {
  margin: .7rem 0 .4rem;
  font-size: 1.04rem;
}

.edu-grid p {
  font-size: .87rem;
  color: var(--fg-3);
}

.gpa {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--jade);
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.field {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.1rem;
}

.field label {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--fg-2);
  font-weight: 520;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .93rem;
  transition: border-color .3s, background .3s;
}

.field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--fg-3);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-2);
}

.field .err {
  font-size: .78rem;
  color: var(--rose);
  min-height: 0;
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 1rem;
  font-size: .89rem;
  border-radius: 12px;
  padding: .85rem 1rem;
  display: none;
}

.form-status[data-state] {
  display: block;
}

.form-status[data-state="ok"] {
  background: color-mix(in srgb, var(--jade) 12%, transparent);
  color: var(--jade);
  border: 1px solid color-mix(in srgb, var(--jade) 30%, transparent);
}

.form-status[data-state="err"] {
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  color: var(--rose);
  border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
}

.form-status[data-state="busy"] {
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--line);
}

.contact-lines {
  display: grid;
  gap: .1rem;
  margin-top: 2rem;
}

.cline {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .3s var(--ease-out);
}

.cline:hover {
  padding-left: .8rem;
}

.cline svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex: none;
}

.cline b {
  font-size: .93rem;
  font-weight: 540;
  display: block;
}

.cline small {
  font-size: .77rem;
  color: var(--fg-3);
}

.cline .arrow {
  margin-left: auto;
  opacity: .4;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2.5rem 2rem;
  position: relative;
  z-index: 1;
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-end;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: .87rem;
  color: var(--fg-3);
}

.foot-links a:hover {
  color: var(--gold);
}

.foot-note {
  font-size: .78rem;
  color: var(--fg-3);
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
}

/* ---------- reveal on scroll ----------
   Guarded behind .js, which site.js sets on <html> before anything else.
   Without that guard a script failure — or a browser that never delivers the
   IntersectionObserver callback — would leave the entire page at opacity 0.
   No JS, no hiding: the content is simply visible. */
.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- prose (security page) ---------- */
.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -.025em;
  margin: 2.8rem 0 .9rem;
}

.prose h3 {
  margin: 1.9rem 0 .5rem;
}

.prose p,
.prose li {
  color: var(--fg-2);
  font-size: .96rem;
}

.prose ul,
.prose ol {
  padding-left: 1.2rem;
  display: grid;
  gap: .5rem;
  margin: .9rem 0;
}

.prose li::marker {
  color: var(--gold-dim);
}

.prose code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12em .4em;
  color: var(--gold-2);
}

.prose pre {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem;
  overflow-x: auto;
  margin: 1.1rem 0;
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg-2);
}

.prose a {
  color: var(--gold);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.checklist {
  list-style: none;
  padding: 0 !important;
}

.checklist li {
  display: flex;
  gap: .7rem;
}

.checklist li::before {
  content: "✓";
  color: var(--jade);
  font-weight: 700;
  flex: none;
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {

  .hero-grid,
  .about-grid,
  .contact-grid,
  .skills-layout,
  .feature-row {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 3rem;
  }

  .portrait-wrap {
    max-width: 380px;
    margin-inline: auto;
  }

  .tracks,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .edu-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stat:nth-child(2) {
    border-right: 0;
  }

  .stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--line-soft);
  }

  .about-photos {
    max-width: 420px;
    margin-inline: auto;
  }

  .about-plate-inset {
    right: 0;
  }

  .stage iframe {
    height: 560px;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: min(1180px, 100% - 1.75rem);
  }

  #navToggle {
    display: grid;
  }

  .nav-links {
    position: fixed;
    inset: 4.6rem 0 auto;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.25rem 1.6rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease-out);
  }

  .nav-links[data-open] {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: .8rem .6rem;
    font-size: 1rem;
  }

  .two-up {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .portrait-badge {
    left: .8rem;
  }

  .stage iframe {
    height: 500px;
  }

  .stage-url {
    display: none;
  }
}

/* ---------- motion / print ---------- */
@media (max-width: 380px) {

  .nav .brand>span:not(.brand-mark) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

@media (prefers-reduced-motion: reduce) {

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

  .rv {
    opacity: 1;
    transform: none;
  }
}

@media print {

  .nav,
  .aurora,
  footer,
  .pg-tabs,
  .stage,
  .hero-cta,
  .icon-btn,
  form {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  body::before {
    display: none;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #555;
  }
}

/* ---------- education folded into the skills section ---------- */
.edu-band {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.edu-head {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.edu-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ---------- off-duty, folded into the About section ---------- */
.offduty-band {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.offduty-lede {
  font-size: .95rem;
  color: var(--fg-2);
  max-width: 58ch;
  margin: -.6rem 0 1.75rem;
}