:root {
  --bg: #0c1120;
  --bg-2: #121a2e;
  --surface: #161f36;
  --border: rgba(255, 255, 255, 0.08);
  --text: #eef1f7;
  --muted: #a7b0c4;
  --accent: #f4b860;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -10%, #1d2846 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- top bar ---------- */
.topbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  font: 800 1.5rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark span { color: var(--accent); }
.topnav { display: flex; gap: 6px; }
.topnav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.topnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* ---------- the Doug scene ---------- */
.scene-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.scene {
  position: relative;
  aspect-ratio: 1200 / 440;
  border-radius: 20px;
  overflow: hidden;
  container-type: inline-size;
  background: #f1e4cf;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border);
  isolation: isolate;
}
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-bg { z-index: 1; }
.scene-fg { z-index: 3; pointer-events: none; }

/* Doug: 300 of the scene's 440 units tall, feet on the floor line (y=360) */
.doug {
  --x: 22.5%;
  --walk: 0s;
  position: absolute;
  left: var(--x);
  bottom: 18.18%;
  height: 68.18%;
  z-index: 4;
  transform: translateX(-50%);
  translate: 0 0;
  transition: left var(--walk) linear, translate .6s cubic-bezier(.5, 0, .3, 1);
}
.doug.behind { z-index: 2; }
.doug-bob { position: relative; height: 100%; }
.doug img {
  height: 100%;
  width: auto;
  max-width: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path .6s cubic-bezier(.5, 0, .3, 1), opacity .25s, filter .25s, scale .25s;
  transform-origin: 50% 100%;
}
/* Seated: drop 65 units and hide the legs; furniture in the foreground covers the cut */
.doug.seated { translate: 0 21.7%; }
.doug.seated img { clip-path: inset(0 0 50% 0); }

.doug.walking .doug-bob { animation: walk .5s ease-in-out infinite; }
.doug.walking.left .doug-bob { animation-name: walk-left; }
@keyframes walk {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-2.2%) rotate(3deg); }
}
@keyframes walk-left {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-2.2%) rotate(-3deg); }
}

/* outfit change */
.doug.poof img { opacity: 0; scale: .92; filter: blur(4px) brightness(1.6); }
.sparkles {
  position: absolute;
  left: 50%;
  top: 30%;
  font-size: max(14px, 2.4cqw);
  pointer-events: none;
}
.sparkles span {
  position: absolute;
  animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); }
}

/* TV light on Doug while he's in the recliner */
.scene.watching .doug img { animation: tv-light 2.4s steps(1) infinite; }
@keyframes tv-light {
  0% { filter: drop-shadow(-6px 0 10px rgba(124, 196, 255, .55)); }
  33% { filter: drop-shadow(-6px 0 10px rgba(255, 207, 107, .5)); }
  66% { filter: drop-shadow(-6px 0 12px rgba(124, 240, 192, .5)); }
}

.snack {
  position: absolute;
  top: 34%;
  left: 68%;
  font-size: max(14px, 2.6cqw);
  line-height: 1;
  opacity: 0;
  scale: .3;
  transition: opacity .3s, scale .3s cubic-bezier(.3, 1.6, .5, 1);
}
.doug.has-snack .snack { opacity: 1; scale: 1; }
.doug.eating .snack { animation: nom .4s ease-in-out 4; }
@keyframes nom { 50% { transform: translateY(-30%) rotate(-12deg); } }

.bubble {
  position: absolute;
  bottom: 103%;
  left: 50%;
  translate: var(--bx, -50%) 0;
  white-space: nowrap;
  background: #fff;
  color: #1c2233;
  font: 600 max(10px, 1.2cqw)/1.2 var(--body);
  padding: .55em .85em;
  border-radius: 1em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
  opacity: 0;
  scale: .7;
  transform-origin: 50% 100%;
  transition: opacity .25s, scale .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tail, 50%);
  margin-left: -.45em;
  border: .45em solid transparent;
  border-top-color: #fff;
}
.bubble.show { opacity: 1; scale: 1; }

/* window sky follows the time of day */
.sky-top { stop-color: #86c5ef; }
.sky-bot { stop-color: #d9f0fc; }
.sun { fill: #ffd75e; }
.scene.night .sky-top { stop-color: #0d1834; }
.scene.night .sky-bot { stop-color: #2c406f; }
.scene.night .sun { fill: #f4f1de; }

/* TV */
.tv-screen { fill: #5aa9ff; animation: tv 2.4s steps(1) infinite; }
@keyframes tv {
  0% { fill: #5aa9ff; }
  33% { fill: #f4c86a; }
  66% { fill: #6fe0b4; }
}
.tv-glow { animation: glow 2.4s steps(1) infinite; }
@keyframes glow { 0%, 66% { opacity: .9; } 33% { opacity: .6; } }

/* computer */
.code-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene.typing .code-line { animation: type 3.6s var(--d) linear infinite both; }
@keyframes type {
  0% { stroke-dashoffset: 100; }
  18%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* fridge */
.fridge-door {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  transition: transform .5s cubic-bezier(.5, 0, .3, 1), filter .5s;
}
.scene.fridge-open .fridge-door { transform: scaleX(-.3); filter: brightness(.85); }

/* station hotspots double as nav */
.hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hotspot {
  position: absolute;
  left: var(--x);
  bottom: 3%;
  translate: -50% 0;
  pointer-events: auto;
  font: 600 max(11px, 1.15cqw)/1 var(--body);
  color: #1c2233;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 250, 240, .92);
  border: 0;
  padding: .6em 1em;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: translate .2s, background .2s;
}
.hotspot:hover { translate: -50% -3px; background: #fff; }
.hotspot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- content ---------- */
.intro, .projects, .about {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.intro { padding-top: 56px; padding-bottom: 24px; max-width: 760px; text-align: center; }
.intro h1 {
  font: 800 clamp(2.4rem, 6vw, 4rem)/1.02 var(--display);
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.intro p { color: var(--muted); font-size: 1.15rem; margin: 0; }

.section-head { margin: 64px 0 24px; }
.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-head h2 {
  margin: 0;
  font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--display);
  letter-spacing: -0.02em;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.tile {
  --accent: #f4b860;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1, .4, 1), border-color .3s, box-shadow .3s;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent);
  outline: none;
}
.tile-media { aspect-ratio: 5 / 4; overflow: hidden; background: #05070f; }
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s cubic-bezier(.3, 1, .4, 1);
}
.tile-media.fandara img { object-position: 50% 43%; }
.tile:hover .tile-media img { scale: 1.05; }
.tile-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.tile-body h3 { margin: 0 0 4px; font: 700 1.5rem/1.2 var(--display); }
.tagline { margin: 0 0 12px; color: var(--accent); font-weight: 600; }
.tile-body p:not(.tagline) { margin: 0 0 20px; color: var(--muted); }
.tile-link {
  margin-top: auto;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.tile-link span { display: inline-block; transition: translate .2s; }
.tile:hover .tile-link span { translate: 3px -3px; }

.about { max-width: 760px; padding-bottom: 32px; }
.about p { color: var(--muted); font-size: 1.08rem; }
.about .hint { font-size: .95rem; }
.about strong { color: var(--text); }

.footer {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

@media (max-width: 560px) {
  .scene { border-radius: 14px; }
  .hotspot { padding: .5em .7em; }
  .topnav a { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tv-screen, .tv-glow, .cursor, .scene.watching .doug img, .scene.typing .code-line { animation: none; }
  .doug, .doug img, .tile, .tile-media img { transition-duration: .01s; }
}