@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Montserrat:wght@400;500;700;800&family=Rubik+Dirt&family=Rubik+Glitch&family=Rubik+Spray+Paint&display=swap');

:root {
  --cream: #fdf6ef;
  --story: #e1d5d4;
  --resume: #dfe4ff;
  --reels: #e3cfd4;
  --brown: #866a5a;
  --dark: #2a2a2a;
  --ink: #55392c;
  --soft-white: #fdf8f2;
  --cyan: #00e5ef;
  --magenta: #f000d6;
  --page-pad: min(5.65vw, 81.36px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Section colours span the entire browser width. The visual content is capped
   at 1440px and centred inside those full-width colour bands. */
main {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

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

.panel {
  position: relative;
  width: 100%;
  min-height: min(56.25vw, 810px);
  overflow: hidden;
}

/* HERO ----------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, min(60vw, 864px))
    minmax(0, min(40vw, 576px))
    minmax(0, 1fr);
  background: var(--cream);
}

.hero-copy { grid-column: 2; }
.hero-photo-wrap { grid-column: 3; }

.hero-copy {
  position: relative;
  padding: 10.7% 7% 7% 9.6%;
  z-index: 1;
}

.hero h1 {
  margin: 0;
  color: var(--brown);
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(58px, min(7.5vw, 108px), 154px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.role {
  margin: min(2.4vw, 34.56px) 0 0;
  color: var(--brown);
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(15px, min(1.17vw, 16.848px), 25px);
  font-weight: 400;
}

.contact-link {
  position: absolute;
  left: 18.3%;
  top: 75.5%;
  color: var(--brown);
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(14px, min(1.06vw, 15.264px), 23px);
  font-weight: 500;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.hero-photo-wrap { height: 100%; overflow: hidden; }
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 46%;
}

/* STORY ---------------------------------------------------------- */
.story { background: var(--story); }
.story-inner { width: min(100%, 1440px); margin-inline: auto; padding: min(2.7vw, 38.88px) var(--page-pad) min(3vw, 43.2px); }
.story h2 {
  margin: 0 0 min(3vw, 43.2px);
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(52px, min(5.15vw, 74.16px), 108px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.story-copy {
  max-width: min(90vw, 1296px);
  color: #503b32;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(15px, min(0.95vw, 13.68px), 20px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.story-copy p { margin: 0 0 0.88em; }

/* RESUME --------------------------------------------------------- */
.resume {
  display: grid;
  place-items: center;
  background: var(--resume);
}
.resume-button {
  display: inline-block;
  position: relative;
  padding: 0.16em 0.38em 0.2em;
  border-radius: 0.28em;
  background: var(--brown);
  color: white;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(34px, min(3.55vw, 51.12px), 76px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.resume-button-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.95);
  transition: color 140ms ease;
}

.resume-button:hover .resume-button-text,
.resume-button:focus-visible .resume-button-text {
  color: #ffffff;
}

.resume-button:active .resume-button-text {
  color: rgba(255, 255, 255, 0.92);
}

/* Whole RESUME button hover feedback.
   These selectors are intentionally more specific than the scroll-reveal
   transform rules so the button can still move after it has animated in. */
.resume-button:hover,
.resume-button:focus-visible {
  transform: translate3d(0, -6px, 0);
}

.resume-button:active {
  transform: translate3d(0, -2px, 0);
}

.js .resume-button.reveal.is-visible:hover,
.js .resume-button.reveal.is-visible:focus-visible {
  transform: translate3d(0, -6px, 0) scale(1);
}

.js .resume-button.reveal.is-visible:active {
  transform: translate3d(0, -2px, 0) scale(1);
}

/* SHOWREELS ------------------------------------------------------ */
.showreels { background: var(--reels); }
.showreels-inner { width: min(100%, 1440px); margin-inline: auto; padding: min(4.4vw, 63.36px) min(3.2vw, 46.08px) min(4vw, 57.6px); }
.showreels h2 {
  margin: 0;
  color: #4e3428;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(52px, min(5.35vw, 77.04px), 112px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
}

.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(3.7vw, 53.28px);
  margin-top: min(7.2vw, 103.68px);
  align-items: start;
}
.reel-card { text-align: center; }
.year {
  position: relative;
  width: fit-content;
  margin: 0 auto min(0.45vw, 6.48px);
  color: #47167c;
  font-size: clamp(42px, min(4vw, 57.6px), 86px);
  line-height: 0.8;
  text-shadow: 4px 1px 0 var(--cyan), -4px 1px 0 var(--magenta);
  transform: scaleX(1.05);
}
.year-2026 { font-family: "Rubik Dirt", Impact, sans-serif; }
.year-2025 { font-family: "Rubik Spray Paint", Impact, sans-serif; }
.year-2013 { font-family: "Rubik Glitch", Impact, sans-serif; }

.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: min(0.32vw, 4.608px) solid #8b6e61;
  background: #000;
  box-shadow: min(0.65vw, 9.36px) min(0.55vw, 7.92px) 0 #e8f4ff;
  overflow: hidden;
}
.video-shell iframe { width: 100%; height: 100%; border: 0; display: block; }

.breakdown-link {
  display: inline-block;
  margin-top: min(1.4vw, 20.16px);
  padding: 0.25em 0.55em;
  border-radius: 0.45em;
  background: rgba(253, 246, 239, 0.8);
  color: #574034;
  font-family: "Montserrat", "DM Sans", Arial, sans-serif;
  font-size: clamp(14px, min(1.45vw, 20.88px), 30px);
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease;
}
.breakdown-link:hover,
.breakdown-link:focus-visible { transform: translateY(-2px); background: var(--cream); }

/* CONTACT / WORK ------------------------------------------------- */
.work {
  position: relative;
  min-height: min(56.25vw, 810px);
  color: var(--soft-white);
  overflow: hidden;
}
.work-brown,
.work-dark { position: absolute; left: 0; width: 100%; }
.work-brown { top: 0; height: 35.42%; background: var(--brown); }
.work-dark { top: 35.42%; bottom: 0; background: var(--dark); }
.work h2 {
  position: absolute;
  z-index: 2;
  left: calc(max(0px, calc((100vw - 1440px) / 2)) + min(5.6vw, 80.64px));
  top: 28.5%;
  margin: 0;
  color: var(--soft-white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(62px, min(7.05vw, 101.52px), 150px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.contact-content {
  position: absolute;
  z-index: 3;
  left: calc(max(0px, calc((100vw - 1440px) / 2)) + min(6vw, 86.4px));
  top: 60.5%;
}
.social-links {
  display: flex;
  align-items: center;
  gap: min(3.2vw, 46.08px);
  height: min(3vw, 43.2px);
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease;
}
.social-links a:hover,
.social-links a:focus-visible { transform: translateY(-2px); filter: brightness(1.18); }
.social-links svg {
  width: min(2.25vw, 32.4px);
  height: min(2.25vw, 32.4px);
  min-width: 28px;
  min-height: 28px;
  fill: var(--brown);
  stroke: var(--brown);
  stroke-width: 2;
}
.social-links svg rect,
.social-links svg circle:not(.dot) { fill: none; }
.social-links .dot { stroke: none; }
.imdb-link {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(22px, min(2vw, 28.8px), 42px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.contact-details {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: min(7vw, 100.8px);
  margin-top: min(3vw, 43.2px);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(15px, min(1.45vw, 20.88px), 30px);
  line-height: 1.2;
}
.contact-details p { margin: 0; }
.contact-details span { display: block; margin-bottom: 0.32em; }
.contact-details a { display: block; color: var(--soft-white); text-decoration: none; }
.contact-details a:hover,
.contact-details a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

.cutout {
  position: absolute;
  z-index: 4;
  right: calc(max(0px, calc((100vw - 1440px) / 2)) + min(3.5vw, 50.4px));
  bottom: -100px;
  width: 31%;
  max-width: 620px;
  height: auto;
  display: block;
  background: transparent;
  pointer-events: none;
}

/* RESPONSIVE ----------------------------------------------------- */
@media (max-width: 720px) {
  :root { --page-pad: 24px; }
  .panel { min-height: 0; overflow: hidden; }

  .hero {
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    padding: 28px 24px 22px;
  }
  .hero-copy { grid-column: auto; padding: 0; }
  .hero h1 {
    font-size: clamp(48px, min(15.2vw, 218.88px), 78px);
    line-height: 0.88;
  }
  .role { margin-top: 11px; font-size: 12px; }
  .contact-link {
    position: static;
    display: block;
    width: fit-content;
    margin: 34px auto 30px;
    font-size: 14px;
  }
  .hero-photo-wrap {
    grid-column: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 0.76;
  }
  .hero-photo { object-position: center 48%; }

  .story-inner { width: min(100%, 1440px); margin-inline: auto; padding: 24px 22px 30px; }
  .story h2 {
    margin-bottom: 28px;
    font-size: clamp(46px, min(14vw, 201.6px), 66px);
  }
  .story-copy {
    max-width: none;
    font-size: 14.5px;
    line-height: 1.35;
  }
  .story-copy p { margin-bottom: 12px; }

  .resume { min-height: 72vh; }
  .resume-button { font-size: clamp(34px, min(10vw, 144px), 48px); }

  .showreels-inner { width: min(100%, 1440px); margin-inline: auto; padding: 42px 20px 52px; }
  .showreels h2 { font-size: clamp(44px, min(13vw, 187.2px), 60px); }
  .reel-grid {
    grid-template-columns: 1fr;
    gap: 54px;
    margin-top: 46px;
  }
  .year {
    margin-bottom: 8px;
    font-size: clamp(44px, min(14vw, 201.6px), 62px);
    text-shadow: 3px 1px 0 var(--cyan), -3px 1px 0 var(--magenta);
  }
  .video-shell { border-width: 3px; box-shadow: 6px 5px 0 #e8f4ff; }
  .breakdown-link { margin-top: 16px; font-size: 15px; }

  .work { min-height: 610px; }
  .work-brown { height: 25%; }
  .work-dark { top: 25%; }
  .work h2 {
    left: 22px;
    top: 19.8%;
    font-size: clamp(44px, min(13.5vw, 194.4px), 62px);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }
  .contact-content {
    left: 24px;
    top: 35%;
    right: 20px;
  }
  .social-links { gap: 26px; height: 34px; }
  .social-links svg { width: 27px; height: 27px; min-width: 0; min-height: 0; }
  .imdb-link { font-size: 22px; }
  .contact-details {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
    font-size: 15px;
  }
  .cutout {
    width: min(56%, 260px);
    right: -1%;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* MOTION --------------------------------------------------------- */
/*
   Animation classes are applied by script.js only when JavaScript is
   available. Content therefore remains visible and usable without JS.
*/
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal.reveal-left {
  transform: translate3d(-34px, 0, 0);
}

.js .reveal.reveal-right {
  transform: translate3d(34px, 0, 0);
}

.js .reveal.reveal-scale {
  transform: translate3d(0, 20px, 0) scale(0.965);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Initial hero entrance */
.js .hero-copy > *,
.js .hero-photo-wrap {
  opacity: 0;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .hero h1 { transform: translate3d(-30px, 0, 0); transition-delay: 100ms; }
.js .hero .role { transform: translate3d(-24px, 0, 0); transition-delay: 230ms; }
.js .hero .contact-link { transform: translate3d(0, 18px, 0); transition-delay: 360ms; }
.js .hero-photo-wrap { transform: scale(1.035); transition-delay: 80ms; }

.js.hero-ready .hero-copy > *,
.js.hero-ready .hero-photo-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Slightly richer hover motion once the page is animated */
.resume-button,
.breakdown-link,
.social-links a {
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.video-shell {
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-card:hover .video-shell {
  transform: translateY(-5px);
  box-shadow: min(0.8vw, 11.52px) min(0.75vw, 10.8px) 0 #e8f4ff;
}

@media (max-width: 720px) {
  .js .reveal {
    transform: translate3d(0, 24px, 0);
  }
  .js .reveal.reveal-left {
    transform: translate3d(-22px, 0, 0);
  }
  .js .reveal.reveal-right {
    transform: translate3d(22px, 0, 0);
  }
  .reel-card:hover .video-shell {
    transform: none;
    box-shadow: 6px 5px 0 #e8f4ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .hero-copy > *,
  .js .hero-photo-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* CONTACT remains static on hover after its initial hero entrance. */
.contact-link {
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js.hero-ready .hero .contact-link {
  transition-delay: 0ms;
}

.js.hero-ready .hero .contact-link:hover,
.js.hero-ready .hero .contact-link:focus-visible,
.js.hero-ready .hero .contact-link:active {
  transform: translate3d(0, 0, 0);
}