/* ==========================================================================
   Judy Lai — portfolio
   Shared styles. Page-specific one-offs stay inline in the HTML.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Founders Grotesk and Span Compressed are licensed from Klim Type Foundry.
   These are the .woff2 web kit files — licensed for web embedding. Do not
   commit the desktop .otf files here. See README.
   ------------------------------------------------------------------------ */
@font-face { font-family: 'Span Compressed'; src: url('../fonts/SpanCompressed-Light.woff2') format('woff2');         font-weight: 300; font-display: swap; }
@font-face { font-family: 'Span Compressed'; src: url('../fonts/SpanCompressed-Regular.woff2') format('woff2');       font-weight: 400; font-display: swap; }
@font-face { font-family: 'Span Compressed'; src: url('../fonts/SpanCompressed-LightItalic.woff2') format('woff2');   font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Span Compressed'; src: url('../fonts/SpanCompressed-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/FoundersGrotesk-Light.woff2') format('woff2');    font-weight: 300; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/FoundersGrotesk-Regular.woff2') format('woff2');  font-weight: 400; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/FoundersGrotesk-Medium.woff2') format('woff2');   font-weight: 500; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/FoundersGrotesk-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('../fonts/FoundersGrotesk-Bold.woff2') format('woff2');     font-weight: 700; font-display: swap; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper:  #F8F8F8;
  --ink:    #17181A;
  --ink-60: #454641;
  --ink-40: #8A8578;
  --accent: #F05436;
  --rule:   rgba(23, 24, 26, 0.1);
  --gutter: 56px;
  --sans:  'Founders Grotesk', sans-serif;
  --serif: 'Span Compressed', serif;
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }

/* Custom cursor, 24px with the hotspot in the middle. Safari ignores SVG
   cursors, so a PNG of the same mark follows as its fallback; links keep the
   browser's hand pointer. */
body {
  cursor: url('/assets/cursor.svg') 12 12,
          url('/assets/cursor.png') 12 12,
          auto;
}

img, video { max-width: 100%; }

/* One selection colour everywhere — the per-case-study brand colours are gone. */

/* --- Links ---------------------------------------------------------------- */
/* Replaces the design export's `style-hover` attribute. */
a.hover-accent { transition: color 0.2s ease; }
a.hover-accent:hover,
a.hover-accent:focus-visible { color: var(--accent); }

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

/* --- Motion --------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@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;
  }
}

/* ==========================================================================
   Home
   ========================================================================== */
.home {
  display: grid;
  /* 60:40 on large screens; 50:50 from 1513px down, single column below 900px */
  grid-template-columns: minmax(0, 60fr) minmax(440px, 40fr);
  gap: 51px;
  align-items: start;
  width: 100%;
  padding-left: var(--gutter);
}

.home__intro {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 0;
}

.home__statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
  animation: fadeUp 0.8s ease 0.1s both;
}

/* The italic phrases keep the font's default tracking. */
.home__statement i {
  letter-spacing: normal;
}

/* The space before an italic phrase reads tight because the first italic
   letter leans back into it, so it's doubled (a space here is ~0.12em). It's
   the space that widens rather than a margin on the <i>, so a phrase that
   starts a line isn't pushed in — a space at the end of a line hangs. */
.home__statement .italic-gap {
  word-spacing: 0.12em;
}

.home__social {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.home__social a {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 24, 26, 0.4);
}

.home__work { display: flex; flex-direction: column; }

/* --- Project cards -------------------------------------------------------- */
.proj-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.proj-card__media {
  width: 100%;
  /* A fixed ratio keeps every card the same height and stops the frame
     reshaping as the window resizes, which was cropping the logos. 3:2 fits
     the Jessie's artboard (640x432); the 4:3 assets crop top and bottom. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}

.proj-card__media > img,
.proj-card__media > video,
.proj-card__media > .lottie {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12%;
  opacity: 0;
  background: transparent;
  transition: opacity 0.3s ease, background 0.3s ease;
}

/* Hover is limited to mice so a tap doesn't leave the overlay stuck on. Touch
   screens reveal captions on scroll instead — see the (hover: none) block. */
@media (hover: hover) {
  .proj-card:hover .proj-overlay { opacity: 1; background: var(--accent); }
}

.proj-card:focus-visible .proj-overlay { opacity: 1; background: var(--accent); }

.proj-overlay p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.3;
  color: var(--paper);
  margin: 0;
  text-align: center;
}

/* ==========================================================================
   Case studies — shared chrome
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
  background: rgba(248, 248, 248, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(23, 24, 26, 0.08);
}

.site-header__back {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__back svg { display: block; margin-top: -3px; }

.site-header__wordmark {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  font-weight: 600;
}

.case-hero { padding: 100px var(--gutter) 32px; max-width: 1000px; }

.case-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1.02;
  margin: 0 0 28px;
}

.case-hero__lede {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 56ch;
  margin: 0;
}

/* Problem / solution pair */
.case-brief {
  padding: 0 var(--gutter) 80px;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.case-brief h2 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 400;
}

.case-brief p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* Stats — three figures in a row. The figure matches the footer nav size. */
.case-stats {
  padding: 0 var(--gutter) 80px;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.case-stats__figure {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
  margin: 0 0 14px;
}

.case-stats__label {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* Testimonial — indented callout, opening quote mark hangs outside the text */
.case-quote {
  padding: 0 var(--gutter) 96px;
  max-width: 1000px;
}

.case-quote blockquote {
  margin: 0;
  padding-left: 80px;
}

.case-quote__text {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  color: var(--accent);
  margin: 0;
}

.case-quote__mark {
  position: absolute;
  right: 100%;
}

.case-quote__cite {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-60);
  margin-top: 24px;
}

/* Media sections */
.case-media { padding: 0 var(--gutter) 96px; max-width: 1180px; }

/* Images sit 24px apart everywhere, the same as inside a stack or grid, so a
   run of media sections reads as one sequence. The 96px above stays where a
   media section is followed by something else — a quote, or the footer. */
.case-media:has(+ .case-media) { padding-bottom: 24px; }

.case-media__stack { display: flex; flex-direction: column; gap: 24px; }
.case-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.case-media img,
.case-media video,
.case-media .lottie {
  width: 100%;
  height: auto;          /* honour the intrinsic width/height attributes */
  display: block;
  border-radius: 12px;
}

.span-2 { grid-column: span 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; }
.ratio-3-2  { aspect-ratio: 3 / 2;  object-fit: cover; }
.ratio-1-1  { aspect-ratio: 1 / 1;  object-fit: cover; }

/* Lottie containers are empty until JS injects an SVG. That SVG carries its own
   intrinsic size, which would otherwise widen its grid track and spill past the
   rounded corners — so clip it and let it shrink. Pair with a .ratio-* class,
   since an empty div has no height of its own. */
.case-media .lottie,
.proj-card__media > .lottie {
  overflow: hidden;
  min-width: 0;
}

.rounded { border-radius: 12px; overflow: hidden; }

/* --- Footer --------------------------------------------------------------- */
/* Mirrors the header: full-width rule, same 28px padding and line colour. */
.site-footer {
  padding: 28px var(--gutter);
  border-top: 1px solid rgba(23, 24, 26, 0.08);
}

.site-footer__nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 28px;
}

.site-footer__next {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__next svg { display: block; flex: none; }

.site-footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-40);
}

.site-footer__meta a { color: var(--ink-40); text-decoration: none; }

/* ==========================================================================
   Responsive
   The export was desktop-only; these are the minimum breakpoints needed to
   stop the two-column layouts collapsing on phones.
   ========================================================================== */
/* 50:50 on laptops (up to 1513px wide); 60:40 above that */
@media (max-width: 1513px) {
  .home { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* cards run edge to edge; only the intro keeps the page margin */
  .home {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 0;
  }

  .home__intro {
    position: static;
    height: auto;
    gap: 40px;
    padding: 40px var(--gutter) 0;
  }

  /* single column: hold the size at 37px (what 1024px gets) rather than letting
     it drop to the 32px floor, and keep the box to 70% of the screen for a
     shorter line. Phones go full width at 32px — see the 600px block. */
  .home__statement {
    max-width: 70vw;
    font-size: 2.3125rem;
  }

  .proj-overlay { padding: 0 24px; }
  /* caption text keeps the desktop size range until phones (600px block) */

  .case-brief { grid-template-columns: 1fr; gap: 32px; }
  /* two across; the third wraps under the first with the same spacing */
  .case-stats { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .case-quote blockquote { padding-left: 32px; }
  .case-media__grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }

  .case-hero { padding-top: 64px; }
  /* not enough width for two names — show the next project only */
  .site-footer__navitem:first-child { display: none; }

  .site-footer__meta { flex-direction: column; }
}

@media (max-width: 600px) {
  .home__statement { max-width: none; font-size: 2rem; }
  .proj-overlay p { font-size: 1.15rem; }
}

/* Touch screens: a card's caption fades in over a soft shade while the card
   crosses the middle of the screen (.is-in-view comes from site.js). */
@media (hover: none) {
  .proj-overlay {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px;
    background: linear-gradient(to top, rgba(23, 24, 26, 0.55), rgba(23, 24, 26, 0) 65%);
    transition: opacity 0.5s ease;
  }

  .proj-overlay p {
    text-align: left;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    transform: translateY(8px);
    transition: transform 0.5s ease;
  }

  .proj-card.is-in-view .proj-overlay { opacity: 1; }
  .proj-card.is-in-view .proj-overlay p { transform: none; }
}

/* Award links — chip and awards box on case pages */
a.award-chip {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.award-chip:hover,
a.award-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

/* Awards box — outlined, 2×2 grid: title top left (40%), badges bottom left,
   award list bottom right (60%). As wide as the intro paragraph above it
   (width set by .case2__award in case-redesign.css). */
.award-box {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas:
    "title  ."
    "badges list";
  gap: 16px 20px;
  padding: 16px 21px;
  font-family: var(--sans);
  font-weight: 400;
  border: 1px solid #FF6B4A;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}

.award-box__title {
  grid-area: title;
  margin: 0;
  font-weight: 600;
  color: #FF6B4A;
}

.award-box__title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* contain: size stops the badges adding height to the row, so the row is as
   tall as the list and the badges stretch to match it exactly */
.award-box__badges {
  grid-area: badges;
  display: flex;
  gap: 12px;
  contain: size;
}

/* on narrower desktops the list wraps and the row grows; max-width keeps the
   badges inside their column instead of running into the list */
.award-box__badges img {
  height: 100%;
  width: auto;
  max-width: calc(50% - 6px);
  object-fit: contain;
  object-position: left top;
  display: block;
}

.award-box__list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink);
}

/* star bullet hangs, so a wrapped line lines up with the text above */
.award-box__list li {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.award-box__list li::before {
  content: "✦";
  display: inline-block;
  width: 1.3em;
  text-indent: 0;
}

@media (max-width: 515px) {
  /* phones are too narrow for two columns — title, then badges, then the list */
  .award-box {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "badges" "list";
    gap: 12px;
  }
  .award-box__badges { contain: none; margin: 10px 0; }
  .award-box__badges img { height: 96px; max-width: none; }
}