/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --ice-1: #e9f3fb; /* frost at the edges */
  --ice-2: #f0f7fd;

  /* Primary: baby blue. Too light for text on white, so use it for
     fills, with --on-primary text on top; --primary-ink is the
     readable version for links and text on white (5.2:1). */
  --primary: #89cff0;
  --primary-ink: #1a73a8;
  --on-primary: #0b2a3c;

  /* Secondary: fluoro yellow. Fills and highlights only, never text
     on white; put --on-secondary text on top (16:1). */
  --secondary: #e3ff00;
  --on-secondary: #111113;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --text: #111113;
  --muted: #6b6b73;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max-width: 1200px;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

::selection {
  background: var(--secondary);
  color: var(--on-secondary);
}

:focus-visible {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
}

html {
  accent-color: var(--primary-ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Ice white ground ----------
   Pure white centre, with a faint icy frost in the corners
   so the white reads brighter, like fresh snow. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 45%, #ffffff 0%, #ffffff 35%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(60% 55% at 0% 0%, rgba(137, 207, 240, 0.55) 0%, rgba(137, 207, 240, 0) 100%),
    radial-gradient(55% 50% at 100% 100%, rgba(227, 255, 0, 0.45) 0%, rgba(227, 255, 0, 0) 100%),
    radial-gradient(55% 45% at 100% 0%, var(--ice-2) 0%, rgba(240, 247, 253, 0) 100%),
    radial-gradient(60% 45% at 0% 100%, var(--ice-1) 0%, rgba(233, 243, 251, 0) 100%),
    var(--bg);
}

/* ---------- Hero: the name ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}

/* The name in Apple's hello handwriting (Macintosh Skeletal, via
   github.com/npwitk/Macintosh-Skeletal-Filled; Apple's letterforms,
   licensed for personal, non-commercial use only). The SVG in
   index.html is generated: one <path> is every pen stroke's centre
   line, drawn with a round pen; the <circle> is the i's dot. */
.wordmark {
  width: clamp(260px, 80vw, 760px);
  line-height: 0;
}

.hello {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hello-line {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hello-dot {
  fill: var(--primary);
}

/* ---------- The green line ----------
   One round fluoro stroke over the whole page. js/main.js builds its
   path from where the name and "My socials" sit, draws the underline
   under the name on load, then draws the rest as you scroll (GSAP
   ScrollTrigger, scrubbed, with Lenis smooth scroll). */
.trail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.trail-path {
  fill: none;
  stroke: var(--secondary);
  stroke-width: clamp(9px, 1.2vw, 15px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Section headings ("About me", "My socials") ---------- */
.section-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--on-primary);
}

/* ---------- About me ---------- */
.about {
  min-height: 85svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(48px, 8vh, 72px);
  padding-block: 12vh;
  text-align: center;
}

.about-text {
  max-width: 30ch;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--on-primary);
  text-wrap: balance;
}

/* ---------- Socials ---------- */
.socials {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(56px, 9vh, 88px);
  padding-block: 12vh;
  text-align: center;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 500px);
  padding: 0;
  list-style: none;
}

@media (max-width: 560px) {
  .social-links {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 360px);
  }
}

.social-links img {
  flex: none;
  height: 22px;
  width: auto;
}

.social-links img[src$="letterboxd.svg"] {
  height: 15px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding-inline: 20px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 180ms var(--ease-out),
    background-color 180ms ease;
}

.social-links a:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .social-links a:hover {
    background: var(--secondary);
    transform: translateY(-2px);
  }

  .social-links a:hover:active {
    transform: translateY(-2px) scale(0.97);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 28px;
  padding: 0 var(--gutter) 24px;
  text-align: center;
}

.contact {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.contact-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--on-primary);
  text-decoration: underline;
  text-decoration-color: var(--secondary);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
  transition: text-decoration-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-email:hover {
    text-decoration-color: var(--primary);
  }
}

.legal {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Layout ---------- */
main {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), var(--max-width));
  margin-inline: auto;
}