/* =====================
   CSS VARIABLES
   ===================== */
:root {
  --bg: #F7F7F2;
  --gunmetal: #1E2022;
  --gunmetal-light: #3A3D40;
  --red: #004225;
  --text: #1E2022;
  --text-muted: #6B6B6B;
  --font: Helvetica, Arial, sans-serif;
}

/* =====================
   RESET & BASE
   ===================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

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

/* =====================
   CUSTOM CURSOR
   ===================== */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid white;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px) brightness(1.08);
  -webkit-backdrop-filter: blur(6px) brightness(1.08);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-radius 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.3s ease,
              background-color 0.3s ease,
              backdrop-filter 0.3s ease,
              opacity 0.3s ease;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor-dot {
  display: none;
}

.cursor-ring.hover {
  width: 64px;
  height: 64px;
  border-color: white;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cursor-ring.text-hover {
  border-radius: 3px;
  border-color: #FFD600;
  background-color: rgba(255, 214, 0, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mix-blend-mode: normal;
}

/* Custom text selection color */
::selection {
  background-color: #FFD600;
  color: var(--gunmetal);
}

.cursor-dot.hover {
  background-color: var(--gunmetal-light);
}

.cursor-ring.hidden,
.cursor-dot.hidden {
  opacity: 0;
}

/* =====================
   NAVIGATION
   ===================== */
nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  z-index: 100;
  background-color: transparent;
  /* No transform / will-change here on purpose — those would create a
     stacking context that traps the children's mix-blend-mode and
     stops the header text from blending with the page background. */
}

.nav-logo {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gunmetal);
  transition: color 0.2s ease;
}

.nav-logo:hover {
  color: var(--red);
}

.nav-links {
  display: flex;
  gap: 48px;
  align-items: center;
}

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gunmetal-light);
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: #0A0C0E;
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-links a:hover {
  color: var(--gunmetal);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a.active {
  /* same color as inactive — the underline alone differentiates */
}

.nav-links a.active::after {
  width: 100%;
  background-color: #0A0C0E;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--gunmetal);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* =====================
   HERO SECTION
   ===================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 56px 80px;
}

.hero-label {
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 56px;
  text-align: center;
}

.hero-objects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.object-item {
  flex: 0 0 calc(20% - 20px);
}

.object-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s ease;
}

.object-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/*
  Replace the .object-placeholder with an <img> tag once PNGs are ready:
  <img src="images/ticket.png" alt="Rendeview" class="object-img">
*/
.object-placeholder {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  user-select: none;
  display: block;
  transition: font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.object-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gunmetal-light);
  transition: color 0.25s ease, font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
}

.object-item:hover .object-title {
  font-size: 16px;
  color: var(--gunmetal);
}

.object-item:hover .object-placeholder {
  font-size: clamp(96px, 12vw, 160px);
  transform: translateY(-20px);
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.3));
}

.object-item:hover .object-title {
  color: var(--gunmetal);
}

/* =====================
   FOOTER
   ===================== */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  border-top: 1px solid rgba(30, 32, 34, 0.1);
}

.footer-logo {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gunmetal);
  transition: color 0.2s ease;
}

.footer-logo:hover {
  color: var(--red);
}

.footer-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.footer-links a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--gunmetal);
}

.footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* =====================
   ABOUT PAGE
   ===================== */

/* Hero: centered image + name */
.about-hero {
  background-color: var(--gunmetal);
  padding-top: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 64px;
}

.about-hero-img {
  width: clamp(200px, 28vw, 360px);
  aspect-ratio: 3 / 4;
  background-color: #3A3D40;
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.3);
  overflow: hidden;
}

.about-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-name {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--bg);
  text-align: center;
  margin-top: 36px;
}

/* Section group heading — full width label before a group of rows */
.section-group-heading {
  padding: 56px 56px 0;
  border-top: 1px solid rgba(30, 32, 34, 0.1);
}

.section-group-title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--gunmetal);
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(30, 32, 34, 0.08);
}

/* Alternating image + text rows */
.content-row {
  display: flex;
  align-items: center;
  gap: 72px;
  padding: 72px 56px;
  border-top: 1px solid rgba(30, 32, 34, 0.1);
}

.content-row.reverse {
  flex-direction: row-reverse;
}

.row-image {
  flex: 0 0 58%;
  aspect-ratio: 4 / 3;
  background-color: #E8E8E2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden;
}

.row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   Aurora problem-section carousel
   Layout: buttons OVERLAY the image (left/right edges)
   ========================================= */
.aurora-carousel {
  position: relative;
}

/* Blurred backdrop that mirrors the current slide */
.aurora-carousel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(34px) saturate(1.1);
  transform: scale(1.2);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.aurora-carousel-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  /* No z-index here — keeping the track out of its own stacking context lets
     the buttons' mix-blend-mode reach through to the image pixels. */
}

.row-image img.aurora-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Video carousel slide — custom-controls wrapper around a <video>.
   No native browser controls (kills timeline + fullscreen). */
.row-image .aurora-video-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  z-index: 1;
  background-color: #000;
}

.aurora-video-slide .aurora-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: #000;
}

/* Caption that sits in the top letterbox gap above each video. */
.aurora-video-title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 0 12px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Hide any native UI fragments WebKit/Blink might still expose. */
.aurora-video-slide .aurora-video::-webkit-media-controls,
.aurora-video-slide .aurora-video::-webkit-media-controls-enclosure,
.aurora-video-slide .aurora-video::-webkit-media-controls-fullscreen-button,
.aurora-video-slide .aurora-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

/* Custom video control bar — anchored to the bottom of the slide, sitting
   directly above the carousel pagination dots. Horizontally centered, well
   under 1/3 of the carousel width, laid out as
     [play/pause][progress timeline][replay]                              */
.aurora-video-controls-bar {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  min-width: 220px;
  max-width: 380px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 999px;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Push the dots pill lower on the video carousel only so it tucks closer to
   the bottom edge, leaving room for the control bar above it. */
.aurora-carousel:has(.aurora-video-slide) .aurora-carousel-dots {
  bottom: 6px;
}

/* JS adds .controls-hidden after a 1s idle window during playback. */
.aurora-video-slide.controls-hidden .aurora-video-controls-bar,
.aurora-video-slide.controls-hidden .aurora-video-toggle--center {
  opacity: 0;
  pointer-events: none;
}

/* Big secondary play/pause sitting dead-center on the video. Inherits the
   .aurora-video-toggle class (so click + icon-swap behavior is shared) and
   adds a standalone circular surface. */
.aurora-video-toggle--center {
  position: absolute;
  top: 50%;
  left: 50%;
  /* translate(-50%, -50%) centers regardless of size/border/box-sizing. */
  transform: translate(-50%, -50%);
  /* Sized as a fraction of the video's width — aspect-ratio keeps it a circle. */
  width: 18%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 999px;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Center button intentionally has no hover state — it's already the
   focal element on the video, so additional hover affordance would feel
   noisy. The :not() guards below keep the small bar toggle's hover. */

.aurora-video-toggle--center .av-icon {
  width: 58%;
  height: 58%;
}

.aurora-video-toggle,
.aurora-video-replay {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Small toggles in the bottom control bar — fixed pixel size. The center
   variant deliberately escapes this (it sets its own width via percentage). */
.aurora-video-toggle:not(.aurora-video-toggle--center),
.aurora-video-replay {
  width: 22px;
  height: 22px;
}

.aurora-video-toggle:not(.aurora-video-toggle--center):hover,
.aurora-video-replay:hover {
  background-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.aurora-video-toggle:not(.aurora-video-toggle--center) .av-icon,
.aurora-video-replay .av-icon {
  width: 70%;
  height: 70%;
  fill: #FFFFFF;
  display: block;
}

/* Center button icon — own sizing, shared white fill. */
.aurora-video-toggle--center .av-icon {
  fill: #FFFFFF;
  display: block;
}

.aurora-video-replay .av-icon {
  width: 80%;
  height: 80%;
}

/* Toggle icon: show play by default, swap to pause when playing. */
.aurora-video-toggle .av-pause { display: none; }
.aurora-video-slide.is-playing .aurora-video-toggle .av-play { display: none; }
.aurora-video-slide.is-playing .aurora-video-toggle .av-pause { display: block; }

/* Timeline — the click-to-seek track that fills the middle of the bar. */
.aurora-video-progress {
  flex: 1 1 auto;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  position: relative;
  cursor: none;
}

.aurora-video-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: #FFFFFF;
  border-radius: 999px;
  pointer-events: none;
}

/* Buttons overlay the image — no border, no fill (idle).
   IMPORTANT: no z-index, no backdrop-filter, no isolation property on the button
   itself. Any of those would create a stacking context that blocks the arrow's
   mix-blend-mode from reaching the image. The buttons still paint above the
   track because they come after it in document order. */
.aurora-carousel-btn {
  position: absolute;
  top: 0;
  height: 100%;
  width: 64px;
  border: none;
  background-color: transparent;
  background-image: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: opacity 0.25s ease;
}

/* Gradient layer (smooth opacity fade) */
.aurora-carousel-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

/* Backdrop-blur layer — separate pseudo so the button itself doesn't isolate */
.aurora-carousel-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  transition: backdrop-filter 0.55s ease,
              -webkit-backdrop-filter 0.55s ease;
}

.aurora-carousel-prev::before {
  background-image: linear-gradient(
    to right,
    rgba(30, 32, 34, 0.75) 0%,
    rgba(30, 32, 34, 0) 100%
  );
}

.aurora-carousel-next::before {
  background-image: linear-gradient(
    to left,
    rgba(30, 32, 34, 0.75) 0%,
    rgba(30, 32, 34, 0) 100%
  );
}

.aurora-carousel-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.aurora-carousel-btn:hover:not(:disabled)::after {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.aurora-carousel-btn:disabled {
  opacity: 0.25;
  cursor: none;
}

.aurora-carousel-prev { left: 0; }
.aurora-carousel-next { right: 0; }

/* Arrow shape — white fill blended with the image via difference (same trick
   the cursor ring uses), giving a true inverse-color chevron over whatever
   pixels sit directly behind it. Sits above the button's pseudo-layers. */
.aurora-carousel-arrow {
  display: block;
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  background-color: #FFFFFF;
  mix-blend-mode: difference;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: width 0.35s ease, height 0.35s ease;
}

.aurora-carousel-arrow--prev {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 6 9 12 15 18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 6 9 12 15 18'/></svg>");
}

.aurora-carousel-arrow--next {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}

/* Bigger arrows on hover — and drop the difference blend so the chevron reads
   as plain white over the gradient/blur. */
.aurora-carousel-btn:hover:not(:disabled) .aurora-carousel-arrow {
  width: 50px;
  height: 50px;
  mix-blend-mode: normal;
}

/* Dot indicator stays anchored at the bottom of the image */
.aurora-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}

.aurora-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.aurora-carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.aurora-carousel-dot.is-active {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.25);
}

.row-text {
  flex: 1;
}

.row-subtitle {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 14px;
}

.row-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: var(--gunmetal);
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.row-title-note {
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 300;
  color: var(--text-muted);
  display: block;
  margin-bottom: 20px;
  line-height: 1.5;
}

.row-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--gunmetal-light);
}

/* Philosophy group — no internal dividers, condensed */
.philosophy-group {
  display: flex;
  flex-direction: column;
}

.philosophy-row {
  border-top: none;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Synesthesia row — dark background variant */
.content-row.dark {
  background-color: var(--gunmetal);
  border-top: none;
}

.content-row.dark .row-image {
  background-color: #3A3D40;
  color: rgba(247, 247, 242, 0.25);
}

.content-row.dark .row-subtitle {
  color: rgba(247, 247, 242, 0.35);
}

.content-row.dark .row-title {
  color: var(--bg);
}

.content-row.dark .row-body {
  color: rgba(247, 247, 242, 0.65);
}

/* Rainbow text */
.rainbow-text {
  background: linear-gradient(
    90deg,
    hsl(0,   100%, 58%),
    hsl(33,  100%, 55%),
    hsl(60,  100%, 50%),
    hsl(90,  100%, 45%),
    hsl(120, 100%, 42%),
    hsl(150, 100%, 44%),
    hsl(180, 100%, 46%),
    hsl(210, 100%, 56%),
    hsl(240, 100%, 62%),
    hsl(270, 100%, 60%),
    hsl(300, 100%, 56%),
    hsl(330, 100%, 56%),
    hsl(360, 100%, 58%)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-shift 20s linear infinite;
}

@keyframes rainbow-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Hobbies infinite marquee */
.hobbies-section {
  padding: 72px 0 72px 56px;
  border-top: 1px solid rgba(30, 32, 34, 0.1);
  overflow: hidden;
}

.hobbies-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.hobbies-marquee-wrap {
  overflow: hidden;
  margin-left: -56px;
  width: calc(100% + 56px);
}

.hobbies-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: hobbies-scroll 40s linear infinite;
}

.hobby-card {
  flex: 0 0 220px;
  aspect-ratio: 3 / 4;
  background-color: #E8E8E2;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.4s ease;
}

.hobby-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hobby-card:hover {
  transform: scale(1.04);
  filter: brightness(0.9);
}

@keyframes hobbies-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* About page responsive */
@media (max-width: 1024px) {
  .hobby-card {
    flex: 0 0 180px;
  }
}

@media (max-width: 768px) {
  .about-hero-img {
    width: 60vw;
  }

  .section-group-heading {
    padding: 40px 28px 0;
  }

  .section-group-title {
    padding-bottom: 32px;
  }

  .content-row,
  .content-row.reverse {
    flex-direction: column;
    padding: 48px 28px;
    gap: 36px;
  }

  .row-image {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .hobbies-section {
    padding: 48px 0 48px 28px;
  }

  .hobbies-marquee-wrap {
    margin-left: -28px;
    width: calc(100% + 28px);
  }

  .hobby-card {
    flex: 0 0 160px;
    font-size: 56px;
  }
}

/* =====================
   PROJECTS PAGE
   ===================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}

.project-card {
  aspect-ratio: 4 / 3;
  background-color: #EAEAE4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
  text-decoration: none;
  color: var(--text);
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,32,34,0.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.project-card-emoji {
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  transition: transform 0.3s ease;
}

.project-card:hover .project-card-emoji {
  transform: translate(-50%, -65%) scale(1.05);
}

.project-card-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.project-card:hover .project-card-title {
  color: white;
}

.project-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.project-card:hover .project-card-sub {
  color: rgba(255,255,255,0.7);
}

/* =====================
   PROJECT PAGES
   ===================== */

.project-hero {
  padding-top: 88px;
}

/* Hero top — title/subtitle row + full-span image */
.project-hero-top {
  padding: 48px 56px 0;
  display: flex;
  flex-direction: column;
  min-height: 75vh;
}

.project-hero-titles {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 40px;
}

.project-title {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--gunmetal);
}

.project-subtitle {
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  max-width: 280px;
  text-align: right;
  line-height: 1.6;
  flex-shrink: 0;
}

.project-hero-img-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 44vh;
}

.project-hero-img {
  width: 100%;
  height: 130%;
  background-color: #E4E4DE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  will-change: transform;
  transform-origin: top center;
}

.project-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero bottom — meta + role */
.project-hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  padding: 48px 56px;
  border-top: 1px solid rgba(30, 32, 34, 0.1);
  min-height: calc(75vh / 3);
  align-items: start;
}

.project-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  align-content: start;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.meta-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta-value {
  font-size: 14px;
  color: var(--gunmetal);
  line-height: 1.45;
}

.project-role-title {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--gunmetal);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.project-role p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--gunmetal-light);
}

/* Content sections */
.project-section {
  border-top: 1px solid rgba(30, 32, 34, 0.1);
  padding: 56px 56px 0;
}

.project-section-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 48px;
}

.project-section-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.project-section-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--gunmetal);
  line-height: 1;
}

.project-section .content-row {
  border-top: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Project page responsive */
@media (max-width: 768px) {
  .project-hero-top {
    padding: 32px 28px 0;
    min-height: auto;
  }

  .project-hero-titles {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .project-subtitle {
    text-align: left;
  }

  .project-hero-img-wrap {
    min-height: 36vh;
  }

  .project-hero-bottom {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 28px;
  }

  .project-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-section {
    padding: 40px 28px 0;
  }
}

/* =====================
   CTA BUTTON
   ===================== */
.btn-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bg);
  background-color: var(--red);
  padding: 14px 32px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-cta:hover {
  background-color: var(--gunmetal);
  transform: translateY(-2px);
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 1100px) {
  .hero-objects {
    gap: 32px;
  }

  .object-item {
    flex: 0 0 calc(33.333% - 22px);
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  nav {
    padding: 20px 28px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    z-index: 99;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 18px;
    letter-spacing: 0.12em;
  }

  .nav-toggle {
    display: flex;
    z-index: 100;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .hero {
    padding: 120px 28px 60px;
  }

  .hero-objects {
    gap: 28px;
  }

  .object-item {
    flex: 0 0 calc(50% - 14px);
  }

  .page-section {
    padding: 120px 28px 60px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  footer {
    padding: 24px 28px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-links {
    gap: 24px;
  }

  /* Hide cursor ring on touch devices */
  .cursor-ring,
  .cursor-dot {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-objects {
    gap: 20px;
  }
}

/* =====================
   AURORA PAGE THEME (scoped to .aurora-page only)
   ===================== */
body.aurora-page {
  background-color: #0C0C0C;
  color: #D3D3D3;
}

/* Body copy + general text */
.aurora-page,
.aurora-page p,
.aurora-page a,
.aurora-page span,
.aurora-page li,
.aurora-page .nav-logo,
.aurora-page .nav-links a,
.aurora-page .footer-logo,
.aurora-page .footer-links a,
.aurora-page .footer-copy,
.aurora-page .project-subtitle,
.aurora-page .meta-label,
.aurora-page .meta-value,
.aurora-page .project-section-num,
.aurora-page .row-subtitle,
.aurora-page .row-title-note,
.aurora-page .row-body,
.aurora-page .project-role p {
  color: #D3D3D3;
}

/* Justified, square paragraphs with a touch more line height on Aurora */
.aurora-page .row-body,
.aurora-page .project-role p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 2.05;
}

/* Bold every title on the Aurora page (incl. meta labels: Date, Length, etc.) */
.aurora-page .project-title,
.aurora-page .project-section-title,
.aurora-page .project-role-title,
.aurora-page .row-title,
.aurora-page .meta-label,
.aurora-page .project-section-num,
.aurora-page .row-subtitle {
  font-weight: 700;
}

/* Highlight bolded callouts inside Aurora body paragraphs — bright faded
   sage swatch with dark forest green text so the phrase reads like a marker
   stroke against the dark page background.
   box-decoration-break: clone keeps the highlight tight to each wrapped line
   instead of stretching across the gap when the strong text breaks lines. */
.aurora-page .row-body strong,
.aurora-page .project-role p strong {
  background-color: #C5D9A4;
  color: #1B4332;
  font-weight: inherit;
  padding: 0.05em 0.2em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Solid-color titles a touch brighter than body text */
.aurora-page .project-section-title,
.aurora-page .project-role-title,
.aurora-page .row-title,
.aurora-page .meta-label,
.aurora-page .project-section-num {
  color: #FFFFFF;
}

/* Sub-section titles a touch smaller on the Aurora page */
.aurora-page .project-section-title {
  font-size: clamp(22px, 3vw, 40px);
}

/* Underline the project-description meta titles (Date, Length, Role, etc.) */
.aurora-page .meta-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Placeholder carousel slides — same look as the bare "Image" placeholders */
.aurora-page .aurora-slide-placeholder {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(211, 211, 211, 0.04);
  color: rgba(211, 211, 211, 0.4);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Aurora main title — Havelock Titling, solid white */
.aurora-page .project-title {
  font-family: 'Havelock Titling', 'Halvar Tilting', 'Audiowide', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: clamp(36px, 6vw, 84px);
  letter-spacing: -0.2em;
  padding-right: 0.2em;
  background-image: none;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  animation: none;
  filter: none;
}

/* Soften borders for the dark background */
.aurora-page .project-hero-bottom,
.aurora-page .project-section,
.aurora-page .content-row,
.aurora-page footer {
  border-color: rgba(211, 211, 211, 0.08);
}

/* Image placeholder backgrounds for dark mode */
.aurora-page .row-image,
.aurora-page .project-hero-img {
  background-color: rgba(211, 211, 211, 0.04);
  color: rgba(211, 211, 211, 0.4);
}

/* Real hero <img> on Aurora — fill the wrap, cover, no placeholder text.
   Parallax is disabled on Aurora, so the image stays static and we don't
   need a GPU promotion or extra height. */
.aurora-page img.project-hero-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: transparent;
  transform: none;
  will-change: auto;
  animation: none;
}

/* Mobile nav drawer needs a dark backdrop too */
@media (max-width: 768px) {
  .aurora-page .nav-links {
    background-color: #0C0C0C;
  }
}

/* Racecar that drives across the top edge of the footer on the Aurora page.
   Footer keeps overflow visible so the car can ride above it; horizontal
   containment is handled by body's overflow-x: hidden. */
.aurora-page footer {
  position: relative;
  overflow: visible;
  background-color: #0C0C0C;   /* asphalt grey, near-black */
}

.aurora-racecar {
  position: absolute;
  top: -32px;            /* sits just above the footer's top edge */
  left: 0;
  font-size: 32px;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  animation: aurora-racecar-drive 7s linear infinite,
             aurora-racecar-bob 0.4s ease-in-out infinite;
  /* The 🏎️ glyph on most platforms faces left, so a leftward leg uses
     scaleX(1) and the rightward return leg flips to scaleX(-1). The flips
     happen while the car is off-screen so the snap isn't visible. */
}

@keyframes aurora-racecar-drive {
  0%   { transform: translateX(calc(100vw + 60px)) scaleX(1); }
  48%  { transform: translateX(-80px)              scaleX(1); }
  50%  { transform: translateX(-80px)              scaleX(-1); }
  98%  { transform: translateX(calc(100vw + 60px)) scaleX(-1); }
  100% { transform: translateX(calc(100vw + 60px)) scaleX(1); }
}

@keyframes aurora-racecar-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -2px; }
}

/* Engine smoke puffing out the back of the car. The smoke is a child of the
   racecar so it inherits the scaleX flip that happens at each turn-around —
   it always appears behind the car relative to its direction of travel. */
.aurora-racecar-smoke {
  position: absolute;
  left: 100%;
  top: 50%;
  font-size: 0.65em;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, -50%) scale(0.3);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-name: aurora-racecar-smoke;
}

/* Two staggered puffs so the smoke pattern doesn't feel mechanically periodic */
.aurora-racecar-smoke--a {
  animation-duration: 3.2s;
  animation-delay: 0s;
}

.aurora-racecar-smoke--b {
  animation-duration: 4.7s;
  animation-delay: 1.6s;
  font-size: 0.55em;
}

@keyframes aurora-racecar-smoke {
  0%   { opacity: 0;    transform: translate(2px,  -50%) scale(0.3); }
  4%   { opacity: 0.9;  transform: translate(4px,  -52%) scale(0.6); }
  18%  { opacity: 0.45; transform: translate(20px, -58%) scale(1.0); }
  30%  { opacity: 0;    transform: translate(38px, -64%) scale(1.4); }
  100% { opacity: 0;    transform: translate(38px, -64%) scale(1.4); }
}

/* Aurora mobile only — hide the subtitle that sits under the title */
@media (max-width: 768px) {
  .aurora-page .project-subtitle {
    display: none;
  }
}

/* Aurora page — slightly wider left/right gutters than the default project layout */
@media (min-width: 769px) {
  .aurora-page .project-hero-top {
    padding-left: 80px;
    padding-right: 80px;
  }
  .aurora-page .project-hero-bottom {
    padding-left: 80px;
    padding-right: 80px;
  }
  .aurora-page .project-section {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* Aurora page — extra breathing room between each section title and its content */
.aurora-page .project-section-header {
  margin-bottom: 80px;
}

/* When a row has more than one body paragraph, separate them. The base
   reset zeroes out <p> margins, so without this they'd run together. */
.row-text .row-body + .row-body {
  margin-top: 1em;
}

/* Aurora — keep image and text aligned to the top of each content row so
   the image doesn't drift to the vertical middle when text wraps to more
   lines at narrower widths. Otherwise the "container" appears to grow as
   the viewport shrinks. */
.aurora-page .project-section .content-row {
  align-items: flex-start;
}

/* Aurora mobile — tighten the gap between the hero image and the first
   numbered project section. */
@media (max-width: 768px) {
  .aurora-page .project-hero-bottom {
    padding-top: 24px;
    padding-bottom: 24px;
    gap: 24px;
  }
  .aurora-page .project-section {
    padding-top: 20px;
  }
  .aurora-page .project-section-header {
    margin-bottom: 36px;
  }
}

/* Aurora intermediate widths (tablet / narrow desktop) — scale spacing down
   so it doesn't balloon between the mobile breakpoint and full desktop.
   Without this, hero-bottom grows as the role text wraps and the section
   paddings stay at their wide-desktop values. */
@media (min-width: 769px) and (max-width: 1100px) {
  .aurora-page .project-hero-top {
    min-height: 60vh;
    padding-left: 56px;
    padding-right: 56px;
  }
  .aurora-page .project-hero-bottom {
    min-height: auto;
    padding: 32px 56px;
    gap: 24px 48px;
  }
  .aurora-page .project-section {
    padding: 36px 56px 0;
  }
  .aurora-page .project-section-header {
    margin-bottom: 48px;
  }
  .aurora-page .project-section .content-row {
    padding-bottom: 48px;
    gap: 48px;
  }
}

/* =====================
   Aurora Solution tabs
   Tabs sit above the carousel, swapping between Gauge Cluster and HUD views.
   The wrap takes the same flex slot the lone .row-image used to occupy.
   ===================== */
.aurora-tabs-wrap {
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.aurora-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(211, 211, 211, 0.18);
}

.aurora-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 18px 12px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(211, 211, 211, 0.55);
  cursor: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.aurora-tab:hover {
  color: rgba(255, 255, 255, 0.9);
}

.aurora-tab.is-active {
  color: #FFFFFF;
  border-bottom-color: var(--red, #004225);
}

.aurora-tab:focus-visible {
  outline: 2px solid var(--red, #004225);
  outline-offset: 2px;
}

.aurora-tab-panels {
  position: relative;
  width: 100%;
}

.aurora-tab-panel {
  display: none;
  width: 100%;
}

.aurora-tab-panel.is-active {
  display: block;
}

/* The .row-image inside each panel keeps its own aspect-ratio + styling. */
.aurora-tab-panel > .row-image {
  width: 100%;
  flex: none;
}

/* On mobile, the wrap drops into the column flow like .row-image does. */
@media (max-width: 768px) {
  .aurora-tabs-wrap {
    flex: 0 0 auto;
    width: 100%;
  }

  .aurora-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 8px 12px;
  }
}