/* =====================================================================
   Isabella Aaron | styles.css
   ---------------------------------------------------------------------
   HOW TO EDIT (Isabella):
   1. Colors, fonts and spacing live in the :root block right below.
      Change a value there and the whole site follows.
   2. Dark mode (phones and laptops switch on their own) picks its own
      colors in the "@media (prefers-color-scheme: dark)" block.
   3. Everything under "LAYOUT" is structure. You do not need to touch it
      to change words or photos. Those live in index.html.

   PATCHED COPY: accessibility and layout fixes.
   1. --btn-fg: the "email me" button text flips with the theme for WCAG contrast.
   2. .nav-links: tightened padding and flex sizing to ensure the Contact button
      and all section pills are fully visible and unobstructed at all screen sizes.
   Everything else below is identical to the original.
   ===================================================================== */

:root {
  /* ---- Colors (light theme). Teal comes from the iris in the eye photo. */
  --bg: #faf7f2;            /* page background, warm paper */
  --bg-2: #f1ebe2;          /* every second section */
  --ink: #1c1b1a;           /* main text */
  --muted: #5f5b56;         /* quieter text */
  --accent: #1e7b8c;        /* links, numbers, highlights */
  --accent-soft: rgba(30, 123, 140, 0.12);
  --accent-2: #c9704f;      /* warm coral, used sparingly */
  --surface: #ffffff;       /* stat tiles and journey cards */
  --card: #ffffff;          /* polaroid frame (stays white in dark mode) */
  --card-ink: #2a2826;      /* caption text inside the polaroid */
  --line: rgba(0, 0, 0, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1);
  --btn-fg: #ffffff;        /* PATCH: text color for .btn, theme-aware */
  --hire: #b44518;          /* resume CTA, darker coral so white text clears AA */
  --hire-fg: #fff8f3;
  --hire-glow: rgba(180, 69, 24, 0.45);

  /* ---- Fonts. System fonts only, nothing downloads. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Segoe Print", "Bradley Hand", "Noteworthy", "Marker Felt", cursive; /* polaroid captions */

  /* ---- Sizes */
  --max: 1100px;            /* content width on big screens */
  --radius: 14px;
  --nav-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416;
    --bg-2: #191c1f;
    --ink: #f3f1ee;
    --muted: #b5b0a8;
    --accent: #5cc4d3;
    --accent-soft: rgba(92, 196, 211, 0.16);
    --accent-2: #e39273;
    --surface: #1f2326;
    --line: rgba(255, 255, 255, 0.1);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
    --btn-fg: #0b2226;      /* PATCH: dark ink instead of white - --accent is pale cyan here, so white text on it fails contrast (~2.0:1). Dark ink gives ~9.9:1. */
    --hire: #ff9a62;
    --hire-fg: #2a1208;
    --hire-glow: rgba(255, 154, 98, 0.4);
  }
}

/* =====================================================================
   LAYOUT (you can stop reading here)
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; }

a { color: var(--accent); }

.wrap {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

/* ---------- Top navigation (sticky) ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 0.75rem;
  height: var(--nav-h);
}

.nav-brand {
  justify-self: start;
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

.nav-links {
  justify-self: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.25rem;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-links a:focus-visible,
.nav-hire:focus-visible,
.dl-btn:focus-visible {
  outline: 3px solid var(--hire);
  outline-offset: 3px;
}

/* Distinct from the section pills: a solid coral chip that never scrolls away. */
.nav-hire {
  justify-self: end;
  flex: 0 0 auto;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  background: var(--hire);
  color: var(--hire-fg);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hire) 35%, transparent);
}
.nav-hire:hover,
.nav-hire[aria-current="page"] {
  filter: brightness(1.08);
}

/* ---------- Hero ---------- */
.hero {
  min-height: auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 0 2rem;
  background:
    radial-gradient(60% 50% at 50% 30%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.hero-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-intro {
  max-width: 46ch;
  margin: 1.1rem auto 0;
  font-size: 1.08rem;
}

.hero-tagline {
  max-width: 40ch;
  margin: 0.8rem auto 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.scroll-cue i {
  position: relative;
  width: 22px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 12px;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: currentColor;
  animation: cue 1.6s ease-in-out infinite;
}

@keyframes cue {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.section:nth-of-type(even) { background: var(--bg-2); }

.section h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.section h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 0.65rem;
  border-radius: 2px;
  background: var(--accent);
}

.lead {
  max-width: 62ch;
  margin: 0 0 2rem;
  font-size: 1.08rem;
  color: var(--muted);
}

.strip-label {
  margin: 1.75rem 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.strip-label:first-of-type { margin-top: 0; }

/* ---------- Polaroid cards ---------- */
.polaroid {
  --rot: 0deg;
  margin: 0;
  padding: 12px 12px 14px;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 4px;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transform: rotate(var(--rot));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eee;
}

/* screenshots and photography keep their real shape */
.polaroid--shot img,
.polaroid--photo img {
  aspect-ratio: auto;
  object-fit: contain;
}

.polaroid figcaption {
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 0.98rem;
  line-height: 1.3;
  text-align: center;
}

/* slight "thrown on the table" rotation, varies by position */
.polaroid:nth-child(4n + 1) { --rot: -2deg; }
.polaroid:nth-child(4n + 2) { --rot: 1.5deg; }
.polaroid:nth-child(4n + 3) { --rot: -1deg; }
.polaroid:nth-child(4n)     { --rot: 2.4deg; }

.polaroid:hover,
.polaroid:focus-visible,
.js .polaroid.reveal.is-visible:hover,
.js .polaroid.reveal.is-visible:focus-visible {
  transform: translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow: var(--shadow-hover);
  z-index: 2;
  outline: none;
}

/* ---------- Logo card ---------- */
.polaroid--logo {
  position: relative;
}

.logo-view-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #fdfbf7;
}

@media (prefers-color-scheme: dark) {
  .logo-view-wrap { background: #191c1f; }
}





.logo-btn[data-src*="red"].active {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.cards {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Screenshots in a row (outreach) */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2.2rem;
}
.shots .polaroid { flex: 1 1 170px; max-width: 250px; }

/* Masonry-ish photo grid */
.masonry {
  columns: 2 170px;
  column-gap: 1.4rem;
}
.masonry .polaroid {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.4rem;
  break-inside: avoid;
}

/* ---------- Stat tiles ---------- */
.stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat {
  padding: 1.6rem 1.2rem;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}

.stat-num {
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.stat-label {
  margin-top: 0.5rem;
  color: var(--muted);
}

/* ---------- Vouch ---------- */
.vouch {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 720px) {
  .vouch { grid-template-columns: minmax(220px, 320px) 1fr; }
}
.vouch .polaroid { max-width: 320px; margin-inline: auto; }

.vouch blockquote {
  margin: 0;
  padding-left: 1.2rem;
  border-left: 5px solid var(--accent);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.vouch blockquote footer {
  margin-top: 0.8rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

/* ---------- Before / after split (movable line) ---------- */
.detail-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 820px) {
  .detail-grid { grid-template-columns: minmax(260px, 400px) 1fr; }
}

.split {
  --split: 50%;
  max-width: 400px;
  margin: 0 auto;
  padding: 12px 12px 14px;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.split-stage {
  position: relative;
  aspect-ratio: 287 / 383;
  overflow: hidden;
  background: #eee;
  touch-action: none;
  border-radius: 4px;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.split-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.split-before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  will-change: clip-path;
}

.split-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  pointer-events: none;
  will-change: left;
}

.split-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.split-tag {
  position: absolute;
  top: 10px;
  padding: 0.24rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.split-tag--before { left: 10px; }
.split-tag--after  { right: 10px; }

.split-control {
  display: block;
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  text-align: center;
}

.split-control input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- Journey Cards (glass over an aurora) ---------- */
#journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* three soft color blobs drifting behind the glass; this is what the blur refracts */
#journey::before,
#journey::after,
#journey .jcards::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
#journey::before { top: -8%; left: -10%; background: radial-gradient(circle at 30% 30%, #38bdf8, transparent 65%); }
#journey::after { bottom: 6%; right: -12%; background: radial-gradient(circle at 60% 40%, #f59e0b, transparent 65%); animation-delay: -9s; }
#journey .jcards::before { top: 35%; left: 40%; width: 34vw; height: 34vw; background: radial-gradient(circle at 50% 50%, #a855f7, transparent 65%); animation-delay: -15s; }
@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, -4vw, 0) scale(1.18); }
}

.jcards {
  position: relative;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 3.5rem;
  perspective: 1200px;
}

.jcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 20%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem;
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.35s ease;
}
/* gradient hairline border, drawn under the padding box */
.jcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08) 45%, var(--jc, #fff) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}
/* specular shine that follows the pointer */
.jcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.jcard:hover::after, .jcard:focus-within::after { opacity: 1; }
.jcard:hover { box-shadow: 0 34px 70px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 60px -20px var(--jc, #fff), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

.jcard--direction { --jc: #38bdf8; }
.jcard--ownership { --jc: #fbbf24; }
.jcard--goals { --jc: #c084fc; }

@media (prefers-color-scheme: dark) {
  .jcard {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  #journey::before, #journey::after, #journey .jcards::before { opacity: 0.42; }
}

.jcard-eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--jc, var(--accent));
  background: color-mix(in srgb, var(--jc, #fff) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--jc, #fff) 45%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.jcard h3 {
  margin: 0 0 0.8rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.jcard-quote {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid var(--jc, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  line-height: 1.45;
}

.jcard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  #journey::before, #journey::after, #journey .jcards::before { animation: none; }
  .jcard { transform: none !important; transition: none; }
}

/* ---------- Timeline (Glassmorphic Cards & Electric Blue Spine) ---------- */
.timeline {
  list-style: none;
  position: relative;
  margin: 1.5rem 0 0;
  padding: 0 0 0 2rem;
}

/* Glowing electric blue spine */
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 24px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 35%, #0ea5e9 70%, #38bdf8 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.55), 0 0 20px rgba(14, 165, 233, 0.25);
}

.timeline li {
  position: relative;
  margin-bottom: 2rem;
}

.timeline li:last-child {
  margin-bottom: 0;
}

/* Glowing jewel nodes */
.timeline li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 1.4rem;
  width: 22px;
  height: 22px;
  margin-left: 0px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #bae6fd, #0284c7 65%, #0369a1);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 6px rgba(56, 189, 248, 0.45),
    0 0 16px rgba(56, 189, 248, 0.75);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  z-index: 2;
}

.timeline li:hover::before {
  transform: scale(1.25);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 7px #38bdf8,
    0 0 24px rgba(56, 189, 248, 0.95);
}

/* Glassmorphic Timeline Cards */
.timeline-card {
  padding: 1.5rem 1.7rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .timeline-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(22, 26, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.timeline li:hover .timeline-card {
  transform: translateX(8px);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.25), var(--shadow);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.timeline-year {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.timeline-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.2);
}

.timeline-pill--active {
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
}

@media (prefers-color-scheme: dark) {
  .timeline-pill {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.26);
  }
  .timeline-pill--active {
    color: #34d399;
    background: rgba(52, 211, 153, 0.16);
    border-color: rgba(52, 211, 153, 0.3);
  }
}

.timeline-title {
  margin: 0 0 0.5rem;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.timeline-desc {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.timeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.timeline-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  line-height: 1.4;
}

.timeline-chip--active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(30, 123, 140, 0.25);
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .timeline-chip--active {
    border-color: rgba(92, 196, 211, 0.35);
  }
}

@media (max-width: 560px) {
  .timeline {
    padding-left: 1.6rem;
  }
  .timeline::before {
    left: 6px;
  }
  .timeline li::before {
    left: -1.6rem;
    width: 18px;
    height: 18px;
    top: 1.3rem;
  }
  .timeline-card {
    padding: 1.1rem 1.2rem;
  }
  .timeline-title {
    font-size: 1.08rem;
  }
}

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact h2::after { margin-inline: auto; }
.contact .lead { margin-inline: auto; }

.btn {
  display: inline-block;
  padding: 0.9rem 1.7rem;
  background: var(--accent);
  color: var(--btn-fg);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.footer {
  padding: 2rem 0 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px) rotate(var(--rot, 0deg));
  transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.35s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}
.js .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .reveal:nth-child(5) { transition-delay: 0.32s; }
.js .reveal:nth-child(6) { transition-delay: 0.4s; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.92);
}
.lightbox[hidden] { display: none; }

.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: min(96vw, 1200px);
  margin: 0;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
}

.lightbox figcaption {
  color: #fff;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  text-align: center;
}

.lightbox button {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev  { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 0.5rem; top: 50%; transform: translateY(-50%); }

/* ---------- Reduced motion: show everything, no animation ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue i::after { animation: none; }
  .slide { transition: none; }
  .js .reveal { opacity: 1; transform: rotate(var(--rot, 0deg)); transition: none; }
  .polaroid, .btn { transition: none; }
}

/* ---------- Showcase: glass 3D carousel under the hero text ---------- */
.showcase {
  position: relative;
  max-width: 980px;
  margin: 2.2rem auto 0;
  padding: 0 52px;
  clip-path: inset(0 0 -140px 0); /* clip the side cards at the box edges, keep the reflections below */
}
.hero { overflow: hidden; } /* nothing from the carousel may widen the page */
.showcase-stage {
  position: relative;
  height: clamp(230px, 40vw, 400px);
  perspective: 1400px;
  transform-style: preserve-3d;
  outline: none;
  border-radius: 20px;
}
.showcase-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(200px, 38vw, 380px);
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s ease, box-shadow 0.4s ease;
  will-change: transform;
  cursor: pointer;
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(0, 0, 0, 0.22));
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
}
.slide figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 0.55rem 0.8rem 0.6rem;
  font-family: var(--font-hand);
  font-size: 0.98rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  border-radius: 0 0 12px 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap; /* one-line captions */
  overflow: hidden;
  text-align: center;
}
.slide.is-active { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 44px var(--accent-soft); cursor: default; }
.slide.is-active figcaption { opacity: 1; }
.showcase-btn {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.showcase-btn:hover, .showcase-btn:focus-visible { background: rgba(255, 255, 255, 0.4); outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 16px rgba(0, 0, 0, 0.18); }
.showcase-btn.prev { left: 0; }
.showcase-btn.next { right: 0; }
.showcase-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 1.1rem; }
.showcase-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--muted); opacity: 0.4; cursor: pointer; transition: transform 0.3s, opacity 0.3s; }
.showcase-dots button[aria-selected="true"] { background: var(--accent); opacity: 1; transform: scale(1.4); }
@media (max-width: 560px) {
  .showcase { padding: 0 40px; }
  .showcase-stage { height: 250px; }
  .slide { width: min(70vw, 260px); }
  .showcase-btn { width: 36px; height: 36px; font-size: 1.4rem; }
}

/* ---------- Skip link (hire page; harmless if unused) ---------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 80;
  padding: 0.5rem 0.9rem;
  background: var(--hire);
  color: var(--hire-fg);
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
}
.skip-link:focus {
  top: 0.75rem;
}

/* ---------- Hire packet: distinct CTA, one page, loud downloads ---------- */
.hire-hero {
  text-align: center;
  padding: 2.4rem 0 1.2rem;
  background:
    radial-gradient(55% 60% at 50% 0%, var(--hire-glow), transparent 70%),
    var(--bg);
}
.hire-hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3rem);
  letter-spacing: -0.02em;
}
.hire-hero .lead {
  max-width: 46ch;
  margin: 0.8rem auto 0;
  color: var(--muted);
}

.dl-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  padding: 0.75rem 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.dl-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1.45rem;
  background: var(--hire);
  color: var(--hire-fg);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--hire-glow), var(--shadow);
  animation: hire-pulse 2.4s ease-out infinite;
}
.dl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dl-icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }

@keyframes hire-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--hire-glow), 0 8px 24px var(--hire-glow); }
  50% { box-shadow: 0 0 0 10px transparent, 0 8px 24px var(--hire-glow); }
}

.hire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0 3rem;
  align-items: start;
}
.paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem 1.35rem 1.6rem;
  box-shadow: var(--shadow);
}
.paper h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  color: var(--accent);
}
.paper h3 {
  margin: 1.15rem 0 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.paper p, .paper li { font-size: 0.95rem; }
.paper ul { margin: 0.2rem 0 0.6rem; padding-left: 1.15rem; }
.paper li { margin: 0.2rem 0; }
.paper-meta {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.hire-strip {
  padding: 2.2rem 0;
  text-align: center;
  background:
    radial-gradient(70% 80% at 50% 50%, var(--hire-glow), transparent 70%),
    var(--bg-2);
  border-block: 1px solid var(--line);
}
.hire-strip h2 { margin: 0.2rem 0 0.4rem; }
.hire-strip h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: var(--hire);
}
.hire-strip .lead { margin: 0.6rem auto 0; max-width: 46ch; }
.hire-strip .dl-btn { margin-top: 0.9rem; }

@media (max-width: 1040px) {
  .nav-inner {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .nav-links {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding-right: 0.5rem;
  }
}

@media (max-width: 860px) {
  .hire-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dl-btn { width: 100%; }
  .nav-hire { padding: 0.34rem 0.75rem; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-btn { animation: none; }
}