/* ---------- Tokens ---------- */
:root {
  --bg: #fbfbfd;
  --grid-line: #e6e6f8;
  --grid-size: 44px;

  --ink: #0a0a0a;
  --ink-soft: #3d3d3d;
  --ink-muted: #5f5f5f;

  --red: #e5322d;
  --red-deep: #c92a26;
  --red-tint: #fde4e4;
  --red-text: #b52a26;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-script: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  --nav-h: clamp(80px, 11vh, 116px);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  --bg: #0f0e16;
  --grid-line: #232135;
  --ink: #f5f5f8;
  --ink-soft: #c9c9d6;
  --ink-muted: #a3a3b4;
  --red-tint: rgba(229, 50, 45, 0.18);
  --red-text: #ff8f8a;
  color-scheme: dark;
}

:root[data-theme="dark"] .logo img {
  filter: invert(1);
}

:root[data-theme="dark"] .theme-toggle {
  background: #1a1926;
  border-color: #2d2b42;
  color: #fff;
}

:root[data-theme="dark"] .btn--dark {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 8px 22px -10px rgba(255, 255, 255, 0.25);
}

:root[data-theme="dark"] .btn--dark:hover {
  background: #ececf2;
}

:root[data-theme="dark"] .burger {
  background: #fff;
}

:root[data-theme="dark"] .burger__bar {
  background: #0a0a0a;
}

:root[data-theme="dark"] .mobile-menu {
  background: rgba(22, 21, 33, 0.96);
  border-color: #2d2b42;
}

:root[data-theme="dark"] .cursor-tag__arrow path {
  fill: #fff;
  stroke: #0a0a0a;
}

:root[data-theme="dark"] .scenery__img {
  filter: brightness(0.5) saturate(0.85);
}

:root[data-theme="dark"] .toolbar {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}

body,
.paper,
.theme-toggle,
.btn--dark {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Reserve the scrollbar gutter on every page so the navbar sits at the
   exact same position whether or not the page scrolls. */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  font-size-adjust: 0.52;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

@media (max-height: 600px) {
  body {
    overflow: hidden auto;
  }
}

img {
  display: block;
  max-width: 100%;
}

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

/* ---------- Page shell ---------- */
.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* On very short viewports let the page scroll rather than clip content */
@media (max-height: 600px) {
  .page {
    height: auto;
    min-height: 100dvh;
  }
}

/* Grid paper. The SVG in assets/paper.svg is the same pattern; drawing it
   with gradients keeps it seamless at any viewport size. */
.paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 38px 43px;
  pointer-events: none;
}

/* ---------- Scenery (grass + hills) ---------- */
/* The PNG is 2.25:1 with ~26% transparent sky at the top. We keep it at
   full page width (never zoomed or side-cropped), pull it up by the sky
   height so the hills always start at the top of the band, and let the
   band clip only the very bottom of the grass when the screen is short. */
.scenery {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;               /* take what is left below the hero */
  min-height: 220px;
  max-height: 32.6vw;           /* = opaque part of the image at 100% width */
  margin-top: auto;             /* hug the bottom on very tall screens */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.scenery__img {
  position: absolute;
  left: 0;
  /* hide the transparent sky, then leave a little air under the toolbar */
  top: calc(-11.6vw + clamp(12px, 2.5vh, 28px));
  width: 100%;
  height: auto;
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 5;
  flex: none; /* never let the fixed-height home page squash the navbar */
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: clamp(20px, 10vw, 144px);
}

.logo img {
  height: 56px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: 24px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.nav__links a {
  position: relative;
  padding: 4px 2px;
  transition: opacity 0.2s ease;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--red);
}

.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid #e2e2ee;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.theme-toggle svg {
  grid-area: 1 / 1;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.theme-toggle__moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

:root[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(60deg) scale(0.6);
}

/* ---------- Download CV dropdown ---------- */
.cv {
  position: relative;
}

.cv__chev {
  margin-left: -2px;
  transition: transform 0.25s ease;
}

.cv__btn[aria-expanded="true"] .cv__chev {
  transform: rotate(180deg);
}

.cv__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 210px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--grid-line);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  animation: menu-in 0.18s ease;
}

.cv__menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: inherit;
  border-left: 1px solid var(--grid-line);
  border-top: 1px solid var(--grid-line);
}

.cv__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  transition: background-color 0.15s ease;
}

.cv__item:hover,
.cv__item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.cv__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex: none;
}

.cv__badge--pdf {
  background: linear-gradient(160deg, #ff5f57, #c62a25);
}

.cv__badge--docx {
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
}

.cv__text {
  display: grid;
  gap: 1px;
  line-height: 1.2;
}

.cv__text strong {
  font-size: 15px;
  font-weight: 600;
}

.mobile-menu__cv {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mobile-menu__cv .mobile-menu__cta {
  margin-top: 0;
}

.mobile-menu .mobile-menu__cta--alt {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--grid-line);
  box-shadow: none;
}

:root[data-theme="dark"] .cv__menu {
  background: rgba(22, 21, 33, 0.97);
  border-color: #2d2b42;
}

:root[data-theme="dark"] .cv__item:hover,
:root[data-theme="dark"] .cv__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .mobile-menu .mobile-menu__cta--alt {
  background: #1a1926;
  color: #fff;
  border-color: #2d2b42;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
}

.btn--dark:hover {
  background: #1b1b1b;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.6);
}

.btn:focus-visible,
.nav__links a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Burger + mobile menu ---------- */
.burger {
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.burger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.mobile-menu {
  position: absolute;
  top: calc(var(--nav-h) - 8px);
  left: 16px;
  right: 16px;
  z-index: 20;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--grid-line);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  animation: menu-in 0.2s ease;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav a {
  padding: 12px 6px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 24px;
  border-bottom: 1px solid var(--grid-line);
}

.mobile-menu nav a:last-child {
  border-bottom: 0;
}

.mobile-menu__cta {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 4;
  padding-top: clamp(56px, 12vh, 130px);
  padding-inline: 20px;
  padding-bottom: 0;
}

.hero__inner {
  position: relative;
  z-index: 7; /* text always draws above the floating icons */
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--red-tint);
  color: var(--red-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.chip svg {
  color: var(--red-deep);
}

.headline {
  margin: clamp(14px, 2.2vh, 24px) 0 0;
  font-size: min(clamp(56px, 8.4vw, 118px), 14vh);
  line-height: 0.98;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.14em;
  text-wrap: balance;
}

.headline__strong {
  font-family: var(--font-sans);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.045em;
}

.headline__italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Figma cursor + name tag */
.cursor-tag {
  position: relative;
  margin-top: clamp(-6px, -0.5vh, 0px);
  transform: translateX(6px) rotate(-1.5deg);
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}

.cursor-tag__arrow {
  margin-top: -22px;
  margin-right: -10px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.cursor-tag__label {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 3px solid var(--red);
  background: linear-gradient(180deg, #ff6f65 0%, #ec3d38 100%);
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow:
    0 10px 24px -10px rgba(229, 50, 45, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lede {
  margin: clamp(32px, 5vh, 56px) 0 0;
  max-width: 830px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

.toolbar {
  margin-top: clamp(28px, 4.5vh, 52px);
  width: 529px;
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.18));
}

/* ---------- Floating icons ---------- */
.float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  /* --tx/--ty come from JS (mouse parallax); the animation adds the bob */
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  animation: bob var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.float--figma {
  left: calc(50% - 575px);
  top: 130px;
  --dur: 6.5s;
}

.float--ps {
  left: calc(50% + 320px);
  top: 70px;
  --dur: 5.5s;
  --delay: -1.6s;
}

.float--claude {
  left: calc(50% + 410px);
  top: 180px;
  --dur: 7s;
  --delay: -3.2s;
}

@keyframes bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float {
    animation: none;
    transform: none;
  }
  .btn,
  .nav__links a::after {
    transition: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .float--figma {
    left: max(8px, calc(50% - 40vw));
  }
  .float--ps {
    left: min(calc(100% - 120px), calc(50% + 24vw));
  }
  .float--claude {
    left: min(calc(100% - 150px), calc(50% + 31vw));
  }
}

@media (max-width: 820px) {
  :root {
    --nav-h: 88px;
  }

  .nav {
    grid-template-columns: auto 1fr auto;
    padding-inline: 20px;
  }

  .nav__links,
  .nav__cta {
    display: none;
  }

  .burger {
    display: flex;
  }

  .theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .nav__right {
    gap: 8px;
  }

  .logo img {
    height: 44px;
  }

  .btn {
    padding: 12px 16px;
    font-size: 14px;
  }

  .hero {
    padding-top: clamp(40px, 7vh, 72px);
  }

  .float {
    width: 96px;
    height: 96px;
  }

  .float--ps {
    width: 72px;
    height: 72px;
  }

  .float--figma {
    left: 14px;
    top: -6px;
  }
  .float--ps {
    left: auto;
    right: 16px;
    top: 24px;
  }
  .float--claude {
    left: auto;
    right: -12px;
    top: 150px;
  }

  .toolbar {
    width: min(529px, 92vw);
  }

  .cursor-tag {
    margin-top: -6px;
  }

  .scenery {
    min-height: 240px;
    max-height: none;
  }

  .scenery__img {
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
  }
}