/* ---------- Fonts ---------- */
@font-face {
  font-family: "Druk Wide";
  src: url("assets/fonts/DrukWideBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alata";
  src: url("assets/fonts/Alata-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --red: #af0b27;
  --ink: #100e09;
  --steel: #88a9c3;
  --white: #ffffff;
  /* dark theme roles */
  --bg: var(--ink);
  --fg: var(--white);
  --surface: #1d1a14;      /* one step up from the page, for panels */
  --muted: #a39d92;        /* 7:1 on --bg */
  --rule: rgba(255, 255, 255, .12);

  --display: "Druk Wide", "Arial Black", Impact, sans-serif;
  --text: "Alata", "Helvetica Neue", Arial, sans-serif;

  --max-w: 1240px;
  --px: 20px;
  --aside: 37.8%;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --hero-switch-duration: 1.4s;
}
@media (min-width: 768px) {
  :root { --px: 48px; --hero-switch-duration: .8s; }
}
@media (min-width: 1200px) {
  :root { --px: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--red); color: var(--white); padding: 10px 14px; font-size: 14px;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max-w) + var(--px) * 2);
  margin-inline: auto;
  padding-inline: var(--px);
}
.rule { border: 0; border-top: 1px solid var(--rule); }

/* "+ link" — the reference's signature nav device */
.plus { display: inline-flex; align-items: center; gap: .3em; font-size: 15px; }
/* standalone "+ links" get a 44px-tall hit area on touch screens without changing the look */
@media (pointer: coarse) {
  .yt__head .plus, .aside-link { min-height: 44px; }
}
.plus::before {
  content: "+";
  display: inline-block;
  transition: transform .4s var(--ease), color .2s;
}
.plus:hover::before, .plus:focus-visible::before { transform: rotate(90deg); color: var(--steel); }

/* ---------- Header ---------- */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.brand__logo { width: auto; height: 40px; transition: transform .5s var(--ease); }
.brand:hover .brand__logo { transform: rotate(-8deg); }
.nav { display: none; gap: 28px; position: absolute; left: 50%; transform: translateX(-50%); }
.header__cta { display: none; }
/* the one filled control on the page: brand red, white text (6.9:1) */
.header__cta {
  padding: 9px 16px 9px 14px;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  transition: background-color .25s;
}
.header__cta:hover { background: #c30f2e; }
.header__cta:hover::before { color: var(--white); }

.menu-btn {
  font: inherit; font-size: 15px; color: var(--fg);
  background: none; border: 0; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 2px;
}
.mobile-menu {
  position: absolute; z-index: 20;
  top: 76px; left: var(--px); right: var(--px);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 8px 20px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
}
.mobile-menu a {
  display: block; padding: 14px 0; font-size: 18px;
  border-bottom: 1px solid var(--rule);
}
.mobile-menu a:last-child {
  border-bottom: 0; margin: 8px 0 10px; padding: 12px 16px;
  background: var(--red); color: var(--white); text-align: center; border-radius: 999px;
}

@media (min-width: 1000px) { /* 4 nav links need the room */
  .nav, .header__cta { display: flex; }
  .menu-btn, .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 48px 72px; }
.hero__col { max-width: 840px; margin-inline: auto; }
@media (min-width: 1024px) {
  .hero { padding-block: 72px 140px; }
  .hero__col { margin-left: 18%; }
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(25px, 6.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: inline-block; }
.line--soft { color: var(--steel); }
.dot { font-style: normal; color: var(--steel); }
.hot { color: var(--red); }

/* rotating word: all words share one grid cell (so the line never reflows) and only the
   active one is ever visible: the old word fades up and out, then the new one rises in */
.swap { display: inline-grid; vertical-align: baseline; color: var(--red); }
.swap__word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.3em);
  transition: opacity .35s ease, transform .35s ease;
}
.swap__word.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .3s, transform var(--hero-switch-duration) var(--ease) .3s;
}
.swap__word.is-out { opacity: 0; transform: translateY(-.3em); }
@media (max-width: 599px) {
  .swap { display: grid; }   /* drop to its own line on phones */
  .hero__media { aspect-ratio: 4 / 3; }
}

.hero__media {
  display: block;
  margin-block: .22em .2em;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
  background: var(--surface);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
/* three portrait shots side by side; each tile is narrow enough that no photo is upscaled */
.hero__media--trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  gap: 6px;
  background: none;
}
.hero__media--trio img { min-width: 0; min-height: 0; }
@media (max-width: 599px) {
  .hero__media--trio { aspect-ratio: 1 / 1; gap: 4px; }
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 16px clamp(20px, 6vw, 64px);
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.45;
}
.hero__meta dt { color: var(--muted); }
@media (max-width: 599px) {
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .hero__meta div:last-child { grid-column: 1 / -1; }
}

/* ---------- YouTube channel ---------- */
.yt { padding-bottom: 8px; }
.yt__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; margin: 56px 0 24px;
}
.yt__lang { color: var(--muted); }
.yt__banner { display: block; overflow: hidden; }
.yt__banner img { display: block; width: 100%; height: auto; transition: transform 1.1s var(--ease); }
.yt__banner:hover img, .yt__banner:focus-visible img { transform: scale(1.02); }
/* phones: trim the empty chart/pattern edges so the photo + title read larger */
@media (max-width: 599px) {
  .yt { padding-bottom: 24px; }
  .yt__banner img { aspect-ratio: 3.4 / 1; object-fit: cover; object-position: 49% 50%; }
}

/* ---------- Worked with ---------- */
.clients { padding-bottom: 40px; }
.clients .label { margin-top: 56px; }
.clients__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 24px;
  margin-top: 48px;
  align-items: center;
  justify-items: center;
}
/* logos keep their brand colours; only black or navy ink is reversed to white so it reads on the dark page.
   Each width is tuned to the logo's shape so they all carry the same visual weight */
.clients__list img {
  width: calc(var(--w) * .85);
  max-width: 100%;
  height: auto;
  transition: transform .5s var(--ease);
}
.clients__list li:hover img { transform: scale(1.05); }
@media (min-width: 900px) {
  .clients__list { grid-template-columns: repeat(4, 1fr); gap: 72px 32px; }
  .clients__list img { width: calc(var(--w) * 1.15); }
}

/* ---------- Sections / grid ---------- */
.section { padding-bottom: 96px; }
.section > .rule { margin-bottom: 64px; }
@media (min-width: 1024px) {
  .section { padding-bottom: 140px; }
  .section > .rule { margin-bottom: 104px; }
}

.label { font-family: var(--text); font-size: 15px; font-weight: 400; }
.index { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--steel); }

.grid { display: grid; gap: 24px; }
.grid__aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .grid { grid-template-columns: var(--aside) 1fr; gap: 0; }
  .grid__aside { gap: 36px; }
  .grid__main > .label { margin-bottom: 36px; }
}
.grid__main > .label { margin-bottom: 20px; }

/* résumé preview under the download link */
.resume-peek { display: block; width: min(100%, 340px); margin-bottom: 16px; }
.resume-peek img { display: block; width: 100%; height: auto; transform: rotate(-2deg); box-shadow: 0 24px 48px -20px rgba(0,0,0,.8); transition: transform .5s var(--ease); }
.resume-peek:hover img, .resume-peek:focus-visible img { transform: rotate(0deg) translateY(-4px); }
@media (min-width: 900px) { .resume-peek { width: min(78%, 340px); } }
.grid--head { margin-bottom: 40px; }
@media (min-width: 900px) { .grid--head { margin-bottom: 64px; } }

.h2 {
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 14ch;
}

/* About */
.portrait { width: min(260px, 70%); aspect-ratio: 5 / 7; overflow: hidden; background: var(--surface); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lede { margin-top: 28px; max-width: 62ch; font-size: 17px; line-height: 1.65; }
.caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
  margin-top: 40px;
  font-size: clamp(19px, 2vw, 22px);
}
@media (min-width: 600px) { .caps { grid-template-columns: 1fr 1fr; gap: 26px 32px; } }

/* Work */
.work {
  display: grid;
  gap: 24px;
  padding-block: 0 56px;
}
.work__text h3 {
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 13em;
}
.work__text p { margin-top: 18px; max-width: 34ch; font-size: 15.5px; line-height: 1.6; }
.credit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.3;
}
.credit::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--red);
}
.credit__yrs { color: var(--steel); font-variant-numeric: tabular-nums; }

/* photo fills the frame edge to edge; sources are exported at ~2x the displayed size so they stay sharp */
.work__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}
.work__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.work:hover .work__media img { transform: scale(1.03); }

/* four-photo variant: a 2x2 contact-sheet of equal 4:3 frames */
.work__media--quad {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: none;
}
.work__media--quad img { aspect-ratio: 4 / 3; height: auto; display: block; }
.work:hover .work__media--quad img { transform: none; } /* no zoom: frames would overlap */

@media (min-width: 900px) {
  .work { grid-template-columns: var(--aside) 1fr; gap: 0; padding-block: 0 56px; }
  .work__text { padding-right: 48px; }
}

/* Experience */
.aside-link { align-self: flex-start; }
.sub { margin-top: 22px; color: var(--muted); max-width: 52ch; font-size: 15.5px; }
.roles { margin-top: 36px; }
.roles li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.roles li:last-child { border-bottom: 0; }
.roles h3 { font-weight: 400; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.3; }
.roles p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.roles time { flex: none; font-size: 14.5px; color: var(--muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .roles li { flex-direction: column; gap: 6px; }
  .roles time { order: -1; padding-top: 0; font-size: 13px; }
}

/* ---------- Footer ---------- */
.footer { padding-bottom: 40px; overflow: hidden; }
.footer__bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-block: 28px 32px;
  font-size: 15px;
}
.footer__bar a { min-height: 44px; }
.footer__brand { display: inline-flex; align-items: center; gap: 14px; justify-self: start; }
.footer__brand img { width: auto; height: 52px; }
.social { display: flex; flex-wrap: wrap; gap: 0 20px; }
@media (min-width: 768px) {
  .footer__bar { grid-template-columns: auto 1fr; align-items: center; gap: 18px 32px; padding-block: 36px 56px; border-top: 1px solid var(--rule); }
  .social { justify-content: flex-end; }
}

/* closing call to action: where "Get in touch" lands */
.contact { padding-block: 64px 56px; }
.contact__title {
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(44px, 11vw, 132px);
  line-height: .95;
  letter-spacing: -.01em;
}
.contact__sub { margin-top: 24px; max-width: 40ch; color: var(--muted); font-size: 17px; }
.contact__mail {
  display: inline-block;
  margin-top: 24px;
  padding-block: 10px;
  font-size: clamp(19px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 2px no-repeat;
  transition: background-size .5s var(--ease), color .2s;
}
.contact__mail:hover, .contact__mail:focus-visible { color: var(--steel); background-size: 0 2px; background-position: 100% 100%; }
@media (min-width: 1024px) {
  .contact { padding-block: 120px 96px; }
}
/* the signature is the sign-off: it writes itself in, left to right, when it scrolls into view */
.sign-off { display: flex; justify-content: center; padding-block: 24px 16px; }
.signature {
  width: clamp(240px, 40vw, 520px);
  transform: rotate(-4deg);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .line > span { transform: translateY(110%); }
  .js .hero__media { clip-path: inset(0 0 100% 0); }
  .js .hero__meta { opacity: 0; transform: translateY(12px); }

  .is-loaded .line > span { transform: none; transition: transform 1.1s var(--ease); }
  .is-loaded .line:nth-child(2) > span { transition-delay: .08s; }
  .is-loaded .line:nth-child(3) > span { transition-delay: .16s; }
  .is-loaded .line:nth-child(5) > span { transition-delay: .5s; }
  .is-loaded .line:nth-child(6) > span { transition-delay: .58s; }
  .is-loaded .hero__media { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease) .28s; }
  .is-loaded .hero__media img { animation: settle 1.8s var(--ease) .28s both; }
  .is-loaded .hero__meta { opacity: 1; transform: none; transition: opacity .8s, transform .8s var(--ease); transition-delay: .75s; }

  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }

  .js .signature { clip-path: inset(-10% 100% -10% 0); }
  .js .signature.in { clip-path: inset(-10% -10% -10% 0); transition: clip-path 2s cubic-bezier(.6, 0, .3, 1) .2s; }
}
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .swap__word { transition: none; }
}