/* ------------------------------------------------------------------
   Fonts
   PP Neue Montreal is a licensed typeface (Pangram Pangram). Web fonts
   live in /fonts (Regular 400, Medium 500, Bold 700).
------------------------------------------------------------------- */
@font-face {
  font-family: "PP Neue Montreal";
  font-weight: 400;
  src: url("fonts/PPNeueMontreal-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  font-weight: 500;
  src: url("fonts/PPNeueMontreal-Medium.woff") format("woff");
  font-display: swap;
}

/* ------------------------------------------------------------------
   Tokens (from the Figma styles)
------------------------------------------------------------------- */
:root {
  --black: #1a1a1a;
  --grey: #808080;
  --light-grey: #e5e5e7;
  --apple-greybg: #ececec;
  --white: #ffffff;
  --dark-grey-typo: #676767;
  --sans: "PP Neue Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: 51px;
  --page: 1920px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }  /* keep room for the scrollbar on every page, so the nav doesn't shift on pages that don't scroll */
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, ul { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
img { display: block; max-width: none; }

.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.muted { color: var(--grey); }

/* ------------------------------------------------------------------
   Logo + Nav
------------------------------------------------------------------- */
.logo {
  position: fixed;
  z-index: 20;
  top: 40px;
  left: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));
  width: 46.8px;
  height: 36px;
}
/* horse-run: 4 frames (182×140 in Figma), swapped every 150ms while hovered */
.horse { position: relative; display: block; width: 46.8px; height: 36px; }
.horse__f { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.horse__f.is-on { visibility: visible; }
/* frames 2 and 3 are a centred 163.7×131.3 box inside the 182×140 frame (inset reset first, then position) */
.horse__f--2, .horse__f--3 { inset: auto; left: 50%; top: 50%; width: 89.955%; height: 93.789%; transform: translate(-50%, -50%); }
.horse__f--2 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.horse__f--3 img { position: absolute; top: 0; left: -4.71%; width: 109.42%; height: 100%; }

.nav {
  position: absolute;
  z-index: 10;
  top: 0;
  right: max(0px, calc((100vw - var(--page)) / 2));
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px var(--gutter);
}
.nav__links { display: flex; align-items: center; gap: 40px; height: 38px; }
/* Figma: hover = grey text + dotted underline, Dissolve 200ms ease-in-out */
.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 23px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  transition: color .2s ease-in-out;
}
.nav__link.is-active { width: 53px; }
.nav__link:hover, .nav__link.is-active { color: var(--grey); }
.nav__dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  display: flex;
  gap: 1.8px;
  justify-content: center;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* leaving: fade out, then reset the line once it's invisible */
  transition: opacity .2s ease-in-out, clip-path 0s .2s;
}
.nav__link:hover .nav__dots, .nav__link.is-active .nav__dots { opacity: 1; clip-path: inset(0 0 0 0); }
/* hover: the dotted line draws left → right, same motion as under "LG H&H" */
.nav__link:hover .nav__dots { transition: opacity 0s, clip-path .5s cubic-bezier(.65, 0, .35, 1); }
.nav__dots img { width: 2px; height: 2px; }

.pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--light-grey);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--black);
  transition: color .4s cubic-bezier(0, 0, .58, 1);
}
/* Figma: hover → grey (Smart Animate 400ms ease-out); click → "Close ×" + popup */
.pill:hover, .pill[aria-expanded="true"] { color: var(--grey); }
.pill__icon { position: relative; width: 22px; height: 22px; }
/* Click me ↔ Close: the label box resizes smoothly while the old word
   slides up out of it and the new word slides up into it */
.pill__label { display: inline-block; overflow: hidden; vertical-align: top; }
.pill__text { display: inline-block; }
/* Click me ↔ Close: the + turns 45° into the ×, both ways (400ms ease-in-out).
   The + icons rotate out while the × rotates in from -45°, so it reads as one icon spinning. */
.pill__icon img {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
}
.pill .i-plus { opacity: 1; }
.pill:hover .i-plus { opacity: 0; }
.pill:hover .i-plus-grey { opacity: 1; }
.pill .i-close { transform: rotate(-45deg); }
.pill[aria-expanded="true"] .i-plus,
.pill[aria-expanded="true"] .i-plus-grey { opacity: 0; transform: rotate(45deg); }
.pill[aria-expanded="true"] .i-close { opacity: 1; transform: rotate(0deg); }

.pill-wrap { position: relative; }
.popup {
  position: absolute;
  top: 54px;
  left: -212px;
  width: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
  border-radius: 13.911px;
  background: var(--light-grey);
  /* soft, diffuse shadow so the card lifts off the page */
  box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 8px 24px rgba(26, 26, 26, .06), 0 24px 48px rgba(26, 26, 26, .05);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}
.popup.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease-in-out; }
.popup__top { width: 100%; display: flex; flex-direction: column; gap: 70px; }
.popup__row { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
.popup__city { display: flex; align-items: center; gap: 3.478px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.popup__city img { width: 22px; height: 22px; }
.popup__time { font-family: var(--mono); font-weight: 300; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.popup__links { display: flex; flex-direction: column; gap: 10px; }
.popup__links .popup__row > :first-child { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.popup__links a { font-size: 14px; letter-spacing: -0.01em; color: var(--grey); transition: color .2s; }
.popup__links a:hover { color: var(--black); }
.popup__status { display: flex; align-items: center; gap: 6.955px; font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; }
.popup__status { margin-top: 70px; align-self: flex-start; gap: 11px; }  /* same 70px as Toronto → links */
.popup__status .status-dot { order: -1; }  /* light sits before the text */
.popup__weather { display: inline-flex; width: 22px; height: 22px; }
.popup__weather img, .popup__weather svg { width: 100%; height: 100%; }
.popup__weather > * { animation: weather-in .4s ease-out; }
@keyframes weather-in { from { opacity: 0; transform: scale(.8); } }

/* status light: a soft green dot that gently breathes, with a halo easing outward */
.status-dot { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #1bdf61; animation: dot-breathe 2.4s ease-in-out infinite; }
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1bdf61;
  animation: dot-halo 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}
@keyframes dot-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes dot-halo { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* time: the colon softly blinks once a second */
.popup__colon { animation: colon-blink 1s ease-in-out infinite; }
@keyframes colon-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .status-dot, .status-dot::after, .popup__colon { animation: none; }
}

/* ------------------------------------------------------------------
   Shared "Prev @ LG H&H" lockup
------------------------------------------------------------------- */
.prev { display: inline-grid; grid-template: max-content / max-content; color: var(--grey); }
/* shrinks with the pinned intro: full size at the top, 80% (28px → 22.4px) once small.
   Scaled as one block so the underline and the role label stay lined up. */
.hero__intro .prev { transform: scale(calc(1 - .2 * var(--p))); transform-origin: 0 0; }
/* …but the dotted line under "LG H&H" keeps its real dot size (2px) and spacing:
   it's un-scaled back to 100% and simply cropped to the shrinking text width */
.hero__intro .prev__line {
  width: calc(94px * (1 - .2 * var(--p)));
  transform: scale(calc(1 / (1 - .2 * var(--p))));
  transform-origin: 0 50%;
  object-fit: cover;
  object-position: left center;
}
.prev > * { grid-area: 1 / 1; }
.prev__text { margin-top: 6px; font-size: 28px; letter-spacing: -0.01em; white-space: nowrap; }
.prev__role { margin-left: 192px; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.prev__line { margin: 37px 0 0 88px; width: 94px; height: 2px; }
.prev__line { pointer-events: none; transition: filter .2s ease-in-out; }
/* hovering the link turns the grey dots (#808080) the same black as the text (#1a1a1a ≈ 20% brightness) */
.prev:has(.prev__link:hover) .prev__line, .prev:has(.prev__link:focus-visible) .prev__line { filter: brightness(.2); }
.prev__link { transition: color .2s ease-in-out; }
.prev__link:hover, .prev__link:focus-visible { color: var(--black); }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------- */
.hero {
  position: relative;
  max-width: var(--page);
  /* at least one full screen, so the stack can sit in the first screen's corner */
  height: max(1045px, 100vh);
  height: max(1045px, 100svh);
  margin: 0 auto;
}
/* Pinned intro. --p (0 → 1) is set by script.js from the scroll position:
   0 = hero size (36px text, 653px wide, 15px gaps)
   1 = small size beside Selected Works (28px text, 374px wide, 29px gaps) */
main { position: relative; }
.intro-track {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0; /* ends where the works section ends, so the intro scrolls away before the footer */
  left: max(0px, calc((100vw - var(--page)) / 2));
  pointer-events: none;
}
.hero__intro {
  --p: 0;
  position: sticky;
  top: 123px;
  margin: 123px 0 0 var(--gutter);
  width: calc(653px - 279px * var(--p));
  display: flex;
  flex-direction: column;
  gap: calc(15px + 7px * var(--p));
  pointer-events: auto;
}
.hero__hello, .hero__lede { font-size: calc(34px - 6px * var(--p)); letter-spacing: -0.01em; }
.hero__hello { font-weight: 500; }
/* once shrunk, "Hello there" and the description sit closer together than the rest (22px → 14px) */
.hero__lede { margin-top: calc(-8px * var(--p)); }
/* once the intro is past halfway to the small size, "about…" starts its own line */
.lede-br { display: none; }
.hero__intro.is-small .lede-br { display: block; }
/* …and at full size "ideas," starts the second line instead */
.lede-br--big { display: block; }
.hero__intro.is-small .lede-br--big { display: none; }
@media (max-width: 1200px) { .lede-br--big { display: none; } }

/* Letter reveal (after seungmee-lee.com): each letter rises out of its own mask */
.js .hero__intro:not(.is-split) :is(.hero__hello, .hero__lede, .prev__text) { opacity: 0; }
/* dotted line + role stay hidden until "Prev @ LG H&H" has finished rising */
.js .hero__intro:not(.is-prev-done) :is(.prev__line, .prev__role) { opacity: 0; }
.rv-w { display: inline-block; white-space: nowrap; }
.rv-m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;   /* room for descenders (g, y, p) inside the mask */
  margin-bottom: -.12em;
}
.rv-l { display: inline-block; will-change: transform, opacity; }

/* Figma 1388:20334 — "Currently" line, the bread flipbook, and the availability line */
.hero__feature {
  position: absolute;
  top: 325px;
  left: 50%;
  transform: translateX(-50%);
  width: 406px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.hero__now { display: flex; gap: 14px; font-size: 18px; line-height: normal; white-space: nowrap; color: var(--black); }
.hero__now-k { font-weight: 500; color: var(--grey); }
/* same text and blinking light as the "Click me" popup status */
.hero__avail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;  /* same light → text gap as the popup status */
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black);
}
.hero__art {
  position: relative;
  width: 406px;
  height: 293px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__art-inner { position: relative; flex-shrink: 0; width: 406px; height: 334px; background: var(--white); overflow: hidden; }
/* "Component 16": 13-frame flipbook, each frame shown 200ms, no transition */
/* each frame is the finished Figma variant (bread + 50% overlay texture baked in), exported at 2× */
.hero__bread { position: absolute; inset: 0; visibility: hidden; }
.hero__bread.is-on { visibility: visible; }
.hero__bread img { width: 100%; height: 100%; }

/* ------------------------------------------------------------------
   Experience stack
   Each card is the 480px base card scaled by --s.
------------------------------------------------------------------- */
/* Bottom-right corner of the first screen, 60px above its bottom edge.
   It scrolls with the page (absolute, not fixed). --stack-h is measured by
   script.js; the 400px floor only keeps it clear of the nav on very short windows.
   On screens wider than the 1920px page it still hugs the screen's right edge. */
.stack {
  --stack-gap: 60px;
  --stack-right: 64px;
  position: absolute;
  z-index: 2;
  top: max(400px, calc(100vh - var(--stack-gap) - var(--stack-h, 213px)));
  top: max(400px, calc(100svh - var(--stack-gap) - var(--stack-h, 213px)));
  right: calc(var(--stack-right) - max(0px, (100vw - var(--page)) / 2));
  width: 480px;
  height: 213px;
  /* whole stack 8% smaller, anchored at its bottom-right corner so its position and
     the gap above the screen edge stay exactly the same */
  scale: .92;
  transform-origin: 100% 100%;
}
/* Every card is laid out once at full size (480px) and only moved with
   transform/opacity/filter, so the motion stays on the GPU and never reflows.
   Slot sizes and offsets match the Figma variants (scale .729/.81/.9/1). */
.xp {
  --s: 1;
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: 480px;
  padding: 24px;
  overflow: hidden;
  border-radius: 20px;
  transform-origin: 50% 0;
  will-change: transform, filter;
  /* Figma: Smart Animate, "Gentle" spring, 1277ms. --spring is set by script.js */
  transition-property: transform, filter, background-color, box-shadow;
  transition-duration: 1.277s;
  transition-timing-function: var(--spring, cubic-bezier(.2,.8,.2,1));
}
/* blur is applied before the scale, so it is divided by the scale to match Figma */
.xp[data-pos="0"] { z-index: 1; transform: translateX(-50%) translateY(0px)     scale(.729); background-color: #dbdddc; filter: blur(2.74px); box-shadow: 0 0 6px 1px rgba(0,0,0,.07); }
.xp[data-pos="1"] { z-index: 2; transform: translateX(-50%) translateY(19.667px) scale(.81);  background-color: #e6e8e5; filter: blur(1.85px); box-shadow: 0 0 6px 1px rgba(0,0,0,.07); }
.xp[data-pos="2"] { z-index: 3; transform: translateX(-50%) translateY(49.297px) scale(.9);   background-color: #eeeeee; filter: blur(1.11px); box-shadow: 0 0 6px 1px rgba(0,0,0,.07); }
.xp[data-pos="3"] { z-index: 4; transform: translateX(-50%) translateY(89.997px) scale(1);    background-color: #ffffff; filter: blur(0px);    box-shadow: 0 0 6px 1px rgba(0,0,0,.1); }
.xp.is-instant { transition: none; }

.xp__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(75px * var(--s));
  height: calc(75px * var(--s));
  padding: calc(14px * var(--s));
  border: calc(1.6px * var(--s)) solid var(--light-grey);
  border-radius: calc(12px * var(--s));
  background: var(--icon-bg);
}
.xp__crop { position: relative; flex-shrink: 0; overflow: hidden; }
.xp__crop img { position: absolute; }
.xp__crop--ctc { width: calc(43px * var(--s)); height: calc(43px * var(--s)); }
.xp__crop--ctc img { height: 232.03%; left: -132.89%; top: -60.62%; width: 518.02%; }
.xp__crop--lg { width: calc(45px * var(--s)); height: calc(47px * var(--s)); }
.xp__crop--lg img { height: 117.69%; left: -13.33%; top: -9.09%; width: 438.27%; }
.xp__hackville { flex-shrink: 0; width: calc(59px * var(--s)); height: calc(59px * var(--s)); object-fit: cover; }
.xp__udesign { position: relative; flex-shrink: 0; overflow: hidden; width: calc(58.544px * var(--s)); height: calc(55.292px * var(--s)); }
.xp__udesign img { position: absolute; inset: 11.33% 15.36% 18.61% 12.16%; width: 72.48%; height: 70.06%; }

.xp__body { display: flex; flex-direction: column; justify-content: space-between; }
.xp__name { font-size: calc(24px * var(--s)); font-weight: 500; letter-spacing: -0.01em; color: #000; }
.xp__tags { display: flex; align-items: center; gap: calc(8px * var(--s)); }
.tag {
  display: inline-flex;
  padding: calc(6px * var(--s)) calc(10px * var(--s));
  border-radius: calc(4px * var(--s));
  background: var(--light-grey);
  color: #000;
  font-family: var(--mono);
  font-size: calc(12px * var(--s));
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tag--dark { background: var(--grey); color: var(--white); }

/* ------------------------------------------------------------------
   Works
------------------------------------------------------------------- */
.works {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 96px;
  padding-right: 57px;
  padding-bottom: 329px;
}

.works__main { padding-top: 35px; display: flex; flex-direction: column; gap: 40px; }
.works__title {
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.works__title img { width: 36px; height: 36px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 648px)); column-gap: 24px; row-gap: 40px; }
.card { display: flex; flex-direction: column; gap: 18px; min-height: 529px; }
.card__media {
  position: relative;
  aspect-ratio: 648 / 420;
  border-radius: 15px;
  overflow: hidden;
  isolation: isolate;
}
/* Figma card hover: Smart Animate 400ms ease-out — text fades lighter,
   LG wordmark and thesis phones grow 10% */
.card { --ease-out: cubic-bezier(0, 0, .58, 1); }
.card__meta { display: flex; flex-direction: column; gap: 5px; }
.card__kicker { font-family: var(--mono); font-weight: 300; font-size: 16px; letter-spacing: -0.02em; color: var(--grey); }
.card__dot { margin: 0 .3em; }   /* mono spaces are a full character wide, so the dot gets a tighter gap of its own */
.card__title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--black); }
.card__title--lock { display: flex; align-items: center; gap: 5px; }
.card__desc { font-size: 16px; letter-spacing: -0.01em; color: var(--grey); }
.card__kicker, .card__title, .card__desc { transition: color .4s var(--ease-out); }
.card:hover .card__kicker, .card:hover .card__desc { color: #b5b0af; }
.card:hover .card__title { color: var(--grey); }

.lock { position: relative; flex-shrink: 0; width: 20px; height: 20px; transition: opacity .4s var(--ease-out); }
.lock img { position: absolute; inset: 12.5% 16.67%; width: 66.66%; height: 75%; }
.card:hover .lock { opacity: .55; }

.lg-wordmark {
  position: absolute;
  top: 39.21%;
  left: 24.64%;
  width: 50.73%;
  height: 21.58%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.card:hover .lg-wordmark { transform: scale(1.1); }


/* every card: corner radius 15px → 30px on hover */
.card__media { transition: border-radius .4s var(--ease-out); }
.card:hover .card__media { border-radius: 30px; }

/* Thesis, Bianca, Skyscanner and the LG background switch to a centred crop on hover;
   --zoom is the scale of that crop (1.1, 1.06, 1.05, 1.125) */
.card__media > .zoom { transition: transform .4s var(--ease-out); }
.card:hover .card__media > .zoom { transform: scale(var(--zoom, 1)); }

.see-all-row { display: flex; justify-content: flex-end; margin-top: -16px; }  /* 40px → 24px below the cards */
.see-all {   /* Figma "See All Works" (1499:6723) */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 3px;
  background: var(--apple-greybg);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--grey);
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.see-all:hover { background: var(--light-grey); color: var(--dark-grey-typo); }
.see-all img { flex: none; transform: scaleX(-1); }   /* the Figma icon is a left arrow, mirrored to point right */


/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */
.footer {
  position: relative;
  max-width: var(--page);
  height: 474px;
  margin: 0 auto;
  overflow: hidden;
  font-weight: 500;
}
.footer__cols { position: absolute; top: 56px; left: 50px; right: 50px; display: flex; gap: 96px; }
.footer__col--site { width: 390px; }
.footer__col--socials { flex: 1; min-width: 0; }
.footer__head { font-size: 16px; letter-spacing: -0.01em; }
.footer__line { margin-top: 8.8px; height: 1px; }
.footer__col--site .footer__line { width: 390px; }
.footer__col--socials .footer__line { width: 100%; }
.footer__list { margin-top: 10.2px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; letter-spacing: -0.01em; }
.footer__list a { transition: color .25s cubic-bezier(0, 0, .58, 1); }
.footer__list a:hover, .footer__hi-links a:hover { color: var(--grey); }

/* Rotatable box: faces from the Figma net, scaled 580 → 72px (width = depth), 740 → 92px (height) */
.footer__mark {
  --w: 72px; --h: 92px; --d: 72px;
  position: absolute;
  top: 232px;
  left: 10px;
  width: 180px;
  height: 180px;
  perspective: 700px;
  /* keep any GPU rendering glitch of the 3D faces inside this box
     (some browsers briefly smear a face across the page while it turns edge-on) */
  overflow: hidden;
  contain: layout paint;
  cursor: grab;
  touch-action: none;   /* dragging on the box spins it instead of scrolling */
  user-select: none;
  -webkit-user-select: none;
}
.footer__mark.is-dragging { cursor: grabbing; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube__face {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: none;
  object-fit: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.cube__face--front, .cube__face--back { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.cube__face--left, .cube__face--right { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.cube__face--top, .cube__face--bottom { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.cube__face--front  { transform: translateZ(calc(var(--d) / 2)); }
.cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: linear-gradient(#fce4da, #f7d4c2); }

.footer__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 486px 1fr auto;
  align-items: center;
  padding: 30px 50px;
  font-size: 14px;
  letter-spacing: 0;  /* a touch more open than the rest of the site (-0.01em) */
}
.footer__copy { width: 308px; display: flex; flex-direction: column; gap: 5px; white-space: nowrap; font-size: 15px; }
.footer__clocks { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.footer__clocks span + span { margin-left: 6px; font-size: 15px; }
.footer__hi { min-width: 199px; display: flex; flex-direction: column; gap: 5px; }
.footer__hi .muted { text-transform: uppercase; white-space: nowrap; }
.footer__hi-links { white-space: nowrap; }
.footer__hi:not(.footer__site) .footer__hi-links { font-size: 15px; }   /* lowercase email reads small next to the caps above, so +1px */

/* ------------------------------------------------------------------
   Smaller screens
------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .stack { --stack-right: var(--gutter); }
  .hero__feature { left: 58%; }
}

@media (max-width: 1200px) {
  :root { --gutter: 24px; }
  .nav { position: absolute; right: 0; padding: 40px var(--gutter); gap: 24px; }
  .nav__links { gap: 24px; }
  .hero { height: auto; padding: 56px var(--gutter) 80px; display: flex; flex-direction: column; gap: 56px; }
  .hero__feature, .stack { position: relative; top: auto; left: auto; right: auto; transform: none; }
  .stack { transform-origin: top center; }
  /* narrow screens: the intro just sits at the top, full size, no pinning */
  .intro-track { position: static; padding: 143px var(--gutter) 0; }
  .hero__intro { --p: 0 !important; position: static; margin: 0; width: auto; max-width: 653px; }
  .hero__feature { align-self: center; }
  .stack { align-self: center; max-width: 100%; }
  .works { grid-template-columns: 1fr; padding: 0 var(--gutter) 120px; gap: 0; }
  .works__side { display: none; }
  .works__main { padding-top: 0; }
  .footer { height: auto; padding: 56px var(--gutter) 30px; }
  .footer__cols, .footer__mark, .footer__bottom { position: static; }
  .footer__cols { flex-direction: column; gap: 40px; }
  .footer__col--site, .footer__line { width: 100% !important; max-width: 390px; }
  .footer__mark { position: relative; top: auto; left: auto; margin: 36px 0 20px -39px; }
  .footer__bottom { padding: 0; grid-template-columns: 1fr; gap: 24px; }
}

/* tablets (761–1200px): Site and Find me side by side (1 : 2), the box under them,
   thanks at the bottom left and Say hi at the bottom right; no clocks, no experience cards */
@media (min-width: 761px) and (max-width: 1200px) {
  .stack { display: none; }
  .footer__cols { flex-direction: row; gap: 40px; }
  .footer__col--site { flex: 1; width: auto !important; max-width: none; }
  .footer__col--socials { flex: 2; }
  .footer__col .footer__line { width: 100% !important; max-width: none; }
  .footer__clocks { display: none; }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .hero__hello, .hero__lede { font-size: 28px; }
  .grid { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .stack { transform: scale(.72); transform-origin: top center; margin-bottom: -60px; }
  .hero__feature { transform: scale(.85); }
  /* See All Works a touch smaller on phones: 18 → 15px text, 24 → 20px arrow */
  .see-all { gap: 4px; padding: 4px 7px; font-size: 15px; }
  .see-all img { width: 20px; height: 20px; }
  /* Prev @ LG H&H a touch smaller on phones: everything × 24/28, dotted line keeps its 2px dots */
  .prev__text { margin-top: 5px; font-size: 24px; }
  .prev__role { margin-left: 164.6px; font-size: 12px; }
  .prev__line { margin: 31.7px 0 0 75.4px; width: 80.6px; }
  .hero__intro .prev__line { width: calc(80.6px * (1 - .2 * var(--p))); }
}

/* ------------------------------------------------------------------
   Phones: hamburger menu, no Click me, a slimmer footer
   (the burger, the menu sheet and the footer "Site" row are added by script.js)
------------------------------------------------------------------- */
.nav__burger, .mnav, .footer__site { display: none; }
@media (max-width: 760px) {
  .pill-wrap { display: none; }
  .nav { position: fixed; padding-top: 40px; }       /* the burger stays reachable while scrolling, like the logo */
  .mnav-open .nav { z-index: 25; }                   /* above the menu sheet so the X can close it */
  /* white band behind the logo and burger so text scrolls under it instead of through them */
  body::before {
    content: "";
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    background: #fff;
    pointer-events: none;
  }
  .nav__burger {
    position: relative;
    z-index: 30;
    display: block;
    width: 38px;
    height: 38px;
    margin-right: -7px;
  }
  .nav__burger i {
    position: absolute;
    left: 7px;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--black);
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), top .4s cubic-bezier(.65, 0, .35, 1);
  }
  .nav__burger i:first-child { top: 14px; }
  .nav__burger i:last-child { top: 22px; }
  /* open: the two lines cross into an X */
  .mnav-open .nav__burger i:first-child { top: 18px; transform: rotate(45deg); }
  .mnav-open .nav__burger i:last-child { top: 18px; transform: rotate(-45deg); }

  /* full-screen menu */
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 120px var(--gutter) 80px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s .35s;
  }
  .mnav-open .mnav { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  .mnav a {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--black);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, color .2s;
  }
  .mnav a[aria-current="page"] { color: var(--grey); }
  .mnav-open .mnav a { transform: none; opacity: 1; }
  .mnav-open .mnav a:nth-child(2) { transition-delay: .05s; }
  .mnav-open .mnav a:nth-child(3) { transition-delay: .1s; }
  .mnav-open .mnav a:nth-child(4) { transition-delay: .15s; }
  .mnav-open, .mnav-open body { overflow: hidden; }

  /* footer: just the box, Site and Say hi */
  .stack { display: none; }   /* home: no experience card stack on phones */
  .footer__cols, .footer__copy, .footer__clocks { display: none; }
  .footer { padding-top: 24px; }
  .footer__mark { --w: 57.6px; --h: 73.6px; --d: 57.6px; margin: 76px 0 -20px -49px; }   /* the box at 80%, its left edge on the page margin, sitting closer to the Site row */
  .footer__hi:not(.footer__site) { display: none; }   /* no "Say hi" row on phones */
  /* SITE, a wider gap, then the four links spread evenly to the right edge */
  .footer__site { display: flex; flex-direction: row; align-items: baseline; gap: 36px; width: auto; position: relative; z-index: 2; }   /* above the box, whose 180px frame overlaps HOME */
  .footer__site .footer__hi-links { flex: 1; display: flex; justify-content: space-between; gap: 12px; }
}
@media (max-width: 380px) {
  /* very narrow phones: tighter so the row still fits on one line */
  .footer__site { gap: 20px; font-size: 12.5px; }
  .footer__site .footer__hi-links { gap: 8px; }
  .footer__bottom { gap: 20px; }
}

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

/* ------------------------------------------------------------------
   Custom cursor (home + work): a coloured pointer that follows the mouse;
   over a project card a "View project" pill appears beside it.
   Colour is picked at random on each load (script.js); the label text is
   white only when it passes WCAG AA (4.5:1), otherwise #1a1a1a.
   Mouse/trackpad only — touch screens keep the normal behaviour.
------------------------------------------------------------------- */
.cur {
  --cur: #f421a2;
  --cur-ink: #fafafa;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-out;
}
.cur.is-on { opacity: 1; }
/* three looks: arrow (default) · small circle (anything clickable) · "View project" pill (project cards) */
.cur__body {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;                   /* the pointer's hotspot */
  transition: transform .4s cubic-bezier(.3, 1.6, .45, 1);   /* release: springs back a little past 1 */
}
.cur.is-down .cur__body { transform: scale(.78); transition-duration: .09s; transition-timing-function: ease-out; }
.cur__arrow {
  position: absolute; left: -3px; top: -3px; width: 26px; height: 26px; color: var(--cur);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
  transform-origin: 3px 3px;              /* shrinks into its own tip */
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease-out;
}
/* hover/click targets: a circle a little smaller than the arrow, centred on the pointer */
.cur__dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cur); box-shadow: 0 0 0 1px var(--cur-edge, transparent);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.cur.is-hover .cur__arrow, .cur.is-project .cur__arrow { transform: scale(.2); opacity: 0; }
.cur.is-hover .cur__dot { transform: none; }
/* project cards: only the pill, sitting right at the pointer */
.cur__label {
  position: absolute;
  left: -10px;
  top: -18px;
  padding: 9px 14px 10px;
  border-radius: 999px;
  background: var(--cur);
  color: var(--cur-ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transform: scale(.4);
  transform-origin: 10px 50%;
  opacity: 0;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s ease-out;
}
.cur.is-project .cur__label { transform: none; opacity: 1; }
.cur__clip { position: relative; display: inline-block; vertical-align: top; }
.cur__ghost { position: absolute; left: 0; top: 0; }
.cur__pad { padding-right: 4px; }   /* the lock makes the left side look heavier — balance it optically */
.cur.is-flip .cur__ghost { left: auto; right: 0; }
.cur__label { overflow: hidden; }   /* words are cut at the pill's rounded edge, not at the text box */
.cur__text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cur__label svg { width: 14px; height: 14px; flex: none; margin-top: -1px; }
/* near the right edge the pill grows to the left of the pointer instead */
.cur.is-flip .cur__label { left: auto; right: -10px; transform-origin: calc(100% - 10px) 50%; }
html.has-cur, html.has-cur * { cursor: none !important; }
html.has-cur :is(iframe, video) { cursor: auto !important; }   /* video players keep the normal cursor (the custom one hides there) */
@media (prefers-reduced-motion: reduce) { .cur__label { transition: opacity .15s; transform: none; } }