:root {
  --bg: #f7f5f1;
  --bg-alt: #ffffff;
  --fg: #17181c;
  --muted: #6b6f76;
  --border: #e7e3db;
  --card: #ffffff;
  --accent: #7c5cff;
  --accent-2: #ff7a59;
  --accent-3: #16b8a6;
  --label: #d31c77;
  --sky-top: hsl(200deg 70% 78%);
  --sky-bottom: hsl(200deg 70% 70%);
  --cloud-back: hsl(200deg 80% 83%);
  --cloud-front: hsl(202deg 68% 92%);
  --puff: #b1dff6;
  --shadow: 0 10px 30px -12px rgba(23, 24, 28, 0.12);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0c111c;
  --bg-alt: #101828;
  --fg: #f2f1ee;
  --muted: #94a2b8;
  --border: #20293a;
  --card: #111a2b;
  --accent: #a493ff;
  --accent-2: #ff9776;
  --accent-3: #4fd8c6;
  --label: #ff52a2;
  --sky-top: hsl(214deg 40% 11%);
  --sky-bottom: hsl(200deg 50% 30%);
  --cloud-back: hsl(213deg 40% 12%);
  --cloud-front: hsl(212deg 40% 9%);
  --puff: rgba(14, 20, 27, 0.5);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}

/* Registered so the diagonal clip-path sweep (joshwcomeau.com's .p1yz2o0p
   pattern) can transition between values on hover. -30% keeps the whole
   slanted edge off the left side of the box, i.e. fully hidden. */
@property --progress {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -30%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, .logo, .btn {
  font-family: var(--font-display);
}

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

/* Background glow blobs */
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}
.glow-1 {
  width: 500px; height: 500px;
  top: -150px; right: -150px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
}
.glow-2 {
  width: 450px; height: 450px;
  bottom: -180px; left: -150px;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  opacity: 0.25;
}
html[data-theme="dark"] .glow { display: none; }

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem clamp(1.5rem, 5vw, 4rem);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.topbar.at-top {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
}
.dot { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--fg); }
.nav-cv {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.nav-cv:hover { border-color: var(--accent); color: var(--accent) !important; }

.topbar-actions {
  display: flex;
  align-items: center;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg);
  margin-left: 1.25rem;
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

/* Sound toggle: waves icon when audible, crossed-out speaker when muted. */
.sound-toggle .snd-x { display: none; }
.sound-toggle.is-muted .snd-waves { display: none; }
.sound-toggle.is-muted .snd-x { display: block; }

.lang-toggle {
  width: auto;
  padding: 0 0.65rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  gap: 0.15rem;
}
.lang-toggle span { color: var(--muted); transition: color 0.15s ease; }
.lang-toggle .lang-sep { color: var(--border); }
.lang-toggle[data-active="tr"] [data-lang-value="tr"],
.lang-toggle[data-active="en"] [data-lang-value="en"] {
  color: var(--fg);
}
.lang-toggle:hover [data-lang-value] { color: var(--accent); }

/* Layout */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* Hero */
.hero {
  padding: 0 0 clamp(3rem, 8vw, 6rem);
}

.hero-sky {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: calc(-1 * var(--topbar-h, 77px));
  /* Matches the reference scene: 28.5rem cloud strip + 7rem header padding
     - 2rem overlap ≈ 536px tall on desktop */
  height: clamp(400px, 37vw, 536px);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  transition: background 0.3s ease;
}

/* Cloud strip (joshwcomeau.com structure): a 5120px-wide bank of two cloud
   layers pinned to the bottom of the scene, centered so wider screens reveal
   more of the strip, plus a foreground "floor" cloud in the page background
   color that melts the scene into the rest of the page. */
.clouds {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 5120px);
  height: clamp(280px, 32vw, 456px);
  display: block;
  pointer-events: none;
}
.clouds-bank { z-index: 1; }
.clouds-floor { z-index: 3; }
.cloud { transition: fill 0.3s ease; }
.cloud-back { fill: var(--cloud-back); }
.cloud-front { fill: var(--cloud-front); }
.clouds-floor .cloud { fill: var(--bg); }

/* The puff the avatar sits on (joshwcomeau.com's .wfzqr02 cloud): a wide
   cloud mound whose right edge ends just past the avatar's center, so its
   bulk spreads out to the avatar's left. Sits behind the rainbow. */
.hero-puff {
  position: absolute;
  z-index: 2;
  left: calc(66% + 86px);
  bottom: 14%;
  transform: translateX(-100%);
  width: clamp(700px, 78vw, 1500px);
  height: auto;
  pointer-events: none;
}
.hero-puff path {
  fill: var(--puff);
  transition: fill 0.3s ease;
}

/* Like the reference site, the rainbow floats in front of the back cloud
   bank but behind the foreground floor cloud, so its ends sink out of
   sight behind the foreground crests. */
.rainbow-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-sticker {
  position: absolute;
  left: 66%;
  bottom: 16%;
  width: clamp(80px, 9vw, 130px);
  height: auto;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3));
}

/* Rainbow Configurator */
.sky-config-btn {
  position: absolute;
  left: calc(66% + clamp(110px, 13vw, 175px));
  bottom: 22%;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  transition: color 0.2s ease, transform 0.3s ease;
}
.sky-config-btn svg { width: 22px; height: 22px; }
.sky-config-btn:hover { color: var(--muted); transform: rotate(40deg); }

.sky-config {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  top: calc(var(--topbar-h, 77px) + 12px);
  z-index: 6;
  width: min(560px, calc(100vw - 2rem));
  background: #0d1420;
  border: 1px solid #2a3850;
  border-radius: 10px;
  padding: 1.1rem 1.2rem 0.9rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: #dbe4f0;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sky-config.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sky-config-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.sky-config-head strong { font-size: 1rem; letter-spacing: 0.02em; }
.sky-config-head button {
  background: none;
  border: none;
  color: #dbe4f0;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}

/* Configurator body: boxed controls in two columns (sliders + toggles on
   the left, the XY pad on the right), like the reference panel. */
.cfg-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.cfg-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cfg-box {
  border: 1px solid #2a3850;
  border-radius: 8px;
  padding: 0.55rem 0.7rem 0.7rem;
  text-align: center;
}
.cfg-box-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.cfg-label {
  display: block;
  margin-bottom: 0.55rem;
  color: #9db0c8;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

/* Sliders like the reference panel: a tall dark track with tick marks and a
   round white grabbable handle that lights up with a rainbow conic-gradient
   while dragging. */
.cfg-box input[type="range"] {
  --track-h: 16px;
  --handle: 18px;
  display: block;
  width: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
.cfg-box input[type="range"]:active { cursor: grabbing; }
.cfg-box input[type="range"]:focus-visible {
  outline: 2px solid #dbe4f0;
  outline-offset: 4px;
  border-radius: 4px;
}
.cfg-box input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 5px;
  border: 1px solid #22304a;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(100% / 13 - 1px),
      rgba(219, 228, 240, 0.22) calc(100% / 13 - 1px) calc(100% / 13)
    ),
    #0a111e;
}
.cfg-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--handle);
  height: var(--handle);
  margin-top: -2px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.cfg-box input[type="range"]:active::-webkit-slider-thumb,
.cfg-box input[type="range"]:focus-visible::-webkit-slider-thumb {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 45%),
    conic-gradient(
      from 90deg,
      hsl(0deg 90% 55%),
      hsl(30deg 95% 65%),
      hsl(55deg 90% 65%),
      hsl(100deg 65% 45%),
      hsl(220deg 80% 55%),
      hsl(265deg 80% 50%),
      hsl(0deg 90% 55%)
    );
}
.cfg-box input[type="range"]::-moz-range-track {
  height: var(--track-h);
  border-radius: 5px;
  border: 1px solid #22304a;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(100% / 13 - 1px),
      rgba(219, 228, 240, 0.22) calc(100% / 13 - 1px) calc(100% / 13)
    ),
    #0a111e;
}
.cfg-box input[type="range"]::-moz-range-thumb {
  width: var(--handle);
  height: var(--handle);
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.cfg-box input[type="range"]:active::-moz-range-thumb,
.cfg-box input[type="range"]:focus-visible::-moz-range-thumb {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 45%),
    conic-gradient(
      from 90deg,
      hsl(0deg 90% 55%),
      hsl(30deg 95% 65%),
      hsl(55deg 90% 65%),
      hsl(100deg 65% 45%),
      hsl(220deg 80% 55%),
      hsl(265deg 80% 50%),
      hsl(0deg 90% 55%)
    );
}

/* The XY pad ("segment values"): dotted grid + center axes, one draggable
   dot. X sets the dash length, Y sets the dash thickness. */
.cfg-box-pad {
  display: flex;
  flex-direction: column;
}
.cfg-pad {
  position: relative;
  flex: 1;
  min-height: 176px;
  border-radius: 6px;
  background:
    linear-gradient(#22304a, #22304a) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#22304a, #22304a) 0 50% / 100% 1px no-repeat,
    radial-gradient(rgba(219, 228, 240, 0.2) 1px, transparent 1.4px) 0 0 / 18px 18px,
    #0a111e;
  cursor: crosshair;
  touch-action: none;
}
.cfg-pad:focus-visible {
  outline: 2px solid #dbe4f0;
  outline-offset: 3px;
}
.cfg-pad-handle {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.cfg-toggle {
  position: relative;
  display: inline-flex;
  border: 1px solid #2a3850;
  border-radius: 6px;
  overflow: hidden;
}
/* The active-option highlight is a single pill that slides between the
   options — the reference site's transform: translateX(var(--x)) move,
   with JS writing the target button's offset into --x. */
.cfg-toggle-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 50%);
  transform: translateX(var(--x, 0px));
  background: #22304a;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cfg-toggle-indicator { transition: transform 0.3s, width 0.3s; }
}
.cfg-toggle button {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  color: #9db0c8;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.cfg-toggle button:hover { color: #dbe4f0; }
.cfg-toggle button.is-active {
  color: #fff;
  font-weight: 700;
}

/* Footer strip: note on the left, labelled blank action buttons on the
   right, like the reference panel. */
.cfg-footer {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  border-top: 1px solid #2a3850;
  padding-top: 0.8rem;
}
.cfg-note {
  flex: 1;
  font-size: 0.68rem;
  color: #8195ad;
  line-height: 1.55;
  margin: 0;
}
.cfg-note strong { color: #b8c7da; }
.cfg-actions {
  display: flex;
  gap: 0.7rem;
}
.cfg-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #9db0c8;
}
.cfg-action button {
  position: relative;
  overflow: hidden;
  width: 88px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #2a3850;
  cursor: pointer;
  --progress: -30%;
  transition: --progress 0.45s ease, transform 0.1s ease;
}
.cfg-action button:active { transform: translateY(1px); }
/* Diagonal wipe on hover: the reference site's clip-path
   polygon(0 0, var(--progress) 0, calc(var(--progress) + 20%) 100%, 0 100%)
   fill, driven here purely by the registered --progress transition. */
.cfg-action button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background: rgba(255, 255, 255, 0.22);
  clip-path: polygon(0 0, var(--progress) 0, calc(var(--progress) + 20%) 100%, 0 100%);
  pointer-events: none;
}
.cfg-action button:hover { --progress: 110%; }
#cfg-random { background: linear-gradient(180deg, #e8edf5, #b9c4d6); }
/* Light button, so the wipe darkens instead of brightening */
#cfg-random::before { background: rgba(16, 24, 40, 0.14); }
#cfg-reset { background: linear-gradient(180deg, #ef4266, #d01c46); border-color: #e0264f; }

@media (max-width: 560px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-footer { flex-direction: column; align-items: stretch; }
  .cfg-actions { justify-content: flex-end; }
}

.eyebrow {
  display: inline-block;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.role {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 1rem;
}

.bio {
  max-width: 46ch;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.pill {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--accent) 55%, black 25%);
  --progress: -30%;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease,
    --progress 0.5s ease;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(0 0, var(--progress) 0, calc(var(--progress) + 20%) 100%, 0 100%);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 color-mix(in srgb, var(--accent) 55%, black 25%); --progress: 110%; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--accent) 55%, black 25%); }
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--fg);
  box-shadow: 0 4px 0 0 var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--border); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

.social-row {
  display: flex;
  gap: 0.75rem;
}
.social-row a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* Per-icon hover tint, the reference site's --icon-hover-color pattern */
.social-row a[href*="github"] { --icon-hover-color: var(--accent); }
.social-row a[href*="linkedin"] { --icon-hover-color: #3b82f6; }
.social-row a[href^="mailto"] { --icon-hover-color: var(--accent-2); }
.social-row a:hover {
  color: var(--icon-hover-color, var(--accent));
  border-color: var(--icon-hover-color, var(--accent));
  transform: translateY(-2px);
}
.social-row-center { justify-content: center; }
.social-row-center a {
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Sections */
.section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
}

.section-head { margin-bottom: 2.5rem; max-width: 60ch; }

.section-badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.9rem;
}

.section-head h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.section-sub {
  color: var(--muted);
  margin: 0;
}

/* Bento grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.bento-large { grid-column: span 2; }
.bento-wide { grid-column: span 2; }
.bento-card .pill, .edu-card .pill {
  background: var(--bg);
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
}
.bento-card .skill-pills, .edu-card .skill-pills { margin-bottom: 0; gap: 0.5rem; }

.bento-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.bento-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.accent-purple { background: linear-gradient(90deg, var(--accent), transparent); }
.accent-coral { background: linear-gradient(90deg, var(--accent-2), transparent); }
.accent-teal { background: linear-gradient(90deg, var(--accent-3), transparent); }

.project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.project-head h3 {
  margin: 0;
  font-size: 1.15rem;
}
.stack {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.bento-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
.project-links {
  display: flex;
  gap: 1.25rem;
}
.project-links a {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.timeline li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  align-items: baseline;
}
.timeline-dot {
  position: absolute;
  left: -1.94rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.post-date {
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 9rem;
}
.post-title {
  font-size: 1rem;
  font-weight: 500;
}
/* Underlined-link hover (the reference's .a1tdgj4y): the link carries a soft
   box-shadow underline that melts away the moment the cursor lands on it. */
.post-title,
.project-links a {
  box-shadow: 0 1.5px 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.post-title:hover,
.project-links a:hover {
  color: var(--accent);
  box-shadow: 0 0 0 transparent;
}

/* Experience timeline */
.timeline-exp li { display: block; }
.exp-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-bottom: 0.4rem;
}
.exp-role {
  font-weight: 600;
  font-size: 1rem;
}
.exp-company {
  color: var(--accent);
  font-weight: 500;
}
.exp-date {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.exp-desc {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 62ch;
  margin: 0;
}

/* Education card */
.edu-card {
  display: flex;
  gap: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  background: var(--card);
  box-shadow: var(--shadow);
}
.edu-card .oss-card-head { flex-wrap: wrap; gap: 0.3rem 1rem; }
.edu-card p { color: var(--muted); font-size: 0.92rem; margin: 0.3rem 0 1rem; }

/* Education card pieces (shared icon/head/name/star styles) */
.oss-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oss-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
}
.oss-name { font-weight: 600; }
.oss-star { color: var(--muted); font-size: 0.85rem; }

/* Contact */
.contact-section { display: flex; justify-content: center; }
.contact-card {
  text-align: center;
  max-width: 560px;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.contact-card .section-head { margin: 0 auto 1.75rem; }
.contact-card h2 { margin: 0 0 0.75rem; }
.contact-card .btn-primary { margin: 1.75rem 0 1.5rem; }

/* Footer */
.footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem) 2rem;
  border-top: 1px solid var(--border);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.footer-brand p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
  max-width: 30ch;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.2rem;
}
.footer-col a {
  color: var(--muted);
  font-size: 0.88rem;
  transition: color 0.15s ease;
}
/* Footer-link hover after the reference's .fb2am7i: the link thickens to
   medium weight and snaps to the full text color. */
.footer-col a:hover {
  font-weight: 500;
  color: var(--fg);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 860px) {
  .bento-large, .bento-wide { grid-column: span 3; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; margin-bottom: 0.5rem; }
}

@media (max-width: 800px) {
  /* joshwcomeau.com's mobile cloud behavior: instead of centering the huge
     strip, shift it sideways ("magic number") and scale its height with the
     viewport so the right part of the clouds stays in view. */
  .clouds {
    height: calc(5rem + 50vw);
    transform: translateX(calc(-50% + (-50vw + 25rem)));
  }
  /* Like the reference on mobile: the avatar (and the rainbow anchored to
     it) moves to the horizontal center of the scene. */
  .hero-sticker {
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-puff {
    left: calc(50% + 86px);
  }
  .sky-config-btn {
    left: auto;
    right: 8%;
  }
}

@media (max-width: 640px) {
  .nav { display: none; }
  .topbar { padding: 1rem 1.25rem; }
  main { padding: 0 1.25rem; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-large, .bento-wide { grid-column: span 1; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}