/* ==========================================================================
   Jennifer Huang — portfolio
   Design tokens and components, extracted from Portfolio.dc.html
   ========================================================================== */

:root {
  --ground: #faf8f5;
  --paper: #fff;
  --ink: #333;
  --coral: #ED655A;
  --coral-dark: #E83C2E;   /* resume button hover */
  --coral-lift: #FB6F6F;   /* link hover on the dark footer */

  --ink-82: rgba(51, 51, 51, .82);
  --ink-68: rgba(51, 51, 51, .68);

  --on-dark: #faf8f5;
  --on-dark-40: rgba(250, 248, 245, .4);
  --on-dark-28: rgba(250, 248, 245, .28);

  --paper-warm: #e8e4dd;   /* cream button, hovered */
  --frame: #efece6;
  --placeholder: #eae6df;

  /* Per-page hero colour. Overridden inline on each case study. */
  --hero: var(--coral);

  --gutter: clamp(24px, 7.6vw, 110px);
  --topbar-pad: 44px;   /* space above the bar at rest */
  --topbar-h: 60px;     /* bar height once condensed */
  --rail: 236px;
  --rail-gap: 80px;
  --measure: 660px;

  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, blockquote, figure { margin: 0; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- hero --- */

.hero {
  background: var(--hero);
  color: var(--on-dark);
  padding: 44px var(--gutter) 72px;
  animation: fadeUp .8s both;
}

/* Fixed header on every page: full height at rest in the page's own hero
   colour, condensing to a 60px coral bar once scrolled. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--hero);
  padding: var(--topbar-pad) var(--gutter);
  transition: background .35s ease, padding .35s ease;
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: var(--topbar-h);
}

/* Condensed on scroll: 60px tall, and always the home coral whatever the
   page's own hero colour is. */
.topbar.is-stuck {
  padding: 0 var(--gutter);
  background: var(--coral);
}

.topbar.is-stuck .hero__wordmark img { height: 32px; }

/* Home runs a wider gutter than the rest of the site — the bar has to match
   it, or the logo sits left of the content beneath it. */
.topbar--home { --gutter: clamp(24px, 8.3vw, 120px); }

/* White wordmark — it only ever sits on a coloured bar. */

/* Clears the bar at rest, keeping the title exactly where it was before.
   The bar's own bottom padding is invisible here — same background — so this
   still leaves the original 72px between the logo and the title. */
.hero--offset { padding-top: calc(var(--topbar-pad) + var(--topbar-h) + 72px); }

.hero--home.hero--offset { padding-top: calc(var(--topbar-pad) + var(--topbar-h) + 104px); }

.hero__wordmark { display: block; }

.hero__wordmark img {
  height: 60px;
  width: auto;
  display: block;
  transition: opacity .25s;
}

a.hero__wordmark:hover img { opacity: .7; }

.hero__back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color .25s;
}

.hero__back:hover { color: var(--ink); }

.hero__title {
  margin: 0 0 24px;
  font-size: clamp(42px, 6.1vw, 88px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}

.hero__deck {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 36ch;
  text-wrap: pretty;
}

/* Home variant: taller, wider gutter, two-column masthead. */

.hero--home {
  --gutter: clamp(24px, 8.3vw, 120px);
  padding: 52px var(--gutter) 104px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: start;
}

.hero__lede {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 12px;
}

.hero__lede p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--on-dark);
  text-wrap: pretty;
}

/* Solid cream on the coral hero — the site's paper laid onto the field.
   Coral itself can't be the fill here, since the hero already is coral. */
/* Scoped so it out-specifies .btn, which is defined later in this file. */
.hero__lede .hero__cta {
  align-self: flex-start;
  margin-top: 10px;
  background: var(--on-dark);
  color: var(--ink);
  padding: 14px 23px;
  font-weight: 500;
}

.hero__lede .hero__cta:hover { background: var(--paper-warm); }

.hero__cta .arrow {
  display: inline-block;
  transition: transform .25s ease;
}

.hero__cta:hover .arrow { transform: translateY(2px); }

.hero--home .hero__title {
  margin: 0;
  font-size: clamp(38px, 5.3vw, 76px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ------------------------------------------------------- reading layout --- */

/* Sticky meta rail on the left, single reading column on the right. */
.layout {
  padding: 72px var(--gutter) 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--rail-gap);
  align-items: start;
}

/* Same grid, rail column left empty — keeps later prose on the same axis. */
.offset {
  padding: 64px var(--gutter) 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--rail-gap);
}

.offset--wide { padding-top: 96px; }

.rail {
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 8px;
  border-top: 2px solid var(--coral);
}

.rail__item { display: flex; flex-direction: column; gap: 6px; }

.rail__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-68);
}

.rail__value { font-size: 15px; line-height: 1.55; }

.prose {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: var(--measure);
}

.prose--tight { gap: 32px; }

.block { display: flex; flex-direction: column; gap: 16px; }

.eyebrow {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--coral);
}

.section-title {
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-82);
  text-wrap: pretty;
}

.prose ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prose strong { font-weight: 500; }

/* --------------------------------------------------------------- media --- */

.figure {
  padding: 96px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.figure img { width: 100%; height: auto; display: block; }

.figure__caption {
  font-size: 13px;
  color: var(--ink-68);
  text-align: center;
  text-wrap: pretty;
}

/* Hatched stand-in for case studies whose imagery is not cleared yet. */
.figure__placeholder {
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
  background-image: repeating-linear-gradient(135deg,
    rgba(51, 51, 51, .06) 0 10px, transparent 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

.figure__placeholder span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-68);
}

.figure__placeholder + .figure__caption + .figure__placeholder { margin-top: 20px; }

/* Device mockup videos, shown side by side. */
.device-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

.device-row video {
  height: 640px;
  width: auto;
  display: block;
  border-radius: 20px;
}

.loop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.loop-grid img {
  width: 200px;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* --------------------------------------------------------------- quote --- */

/* No card — the quote sits in the copy column as another paragraph, on the
   same left edge past the rail and the same measure as body text. The coral
   rule runs the full block so the attribution reads as part of the quotation. */
.quote {
  margin: 32px var(--gutter) 0 calc(var(--gutter) + var(--rail) + var(--rail-gap));
  max-width: var(--measure);
  border-left: 3px solid var(--coral);
  padding-left: 32px;
}

/* Set at body-copy size so this reads as part of the Outcome, not as a
   display pull-quote. The coral rule carries the distinction instead. */
.quote blockquote {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-82);
  text-wrap: pretty;
}

.quote__who {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quote__name { font-size: 15px; font-weight: 500; line-height: 1.4; }
.quote__role { font-size: 14px; line-height: 1.5; color: var(--ink-68); }

/* ------------------------------------------------------------ work grid --- */

.work {
  --gutter: clamp(24px, 8.3vw, 120px);
  padding: 96px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 48px;
}

/* Explicit gaps rather than one flex gap — the title and its subtitle read as
   a pair, so they sit tighter than the gap below the image. */
.work__card {
  display: flex;
  flex-direction: column;
  animation: fadeUp .8s both;
}

.work__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--frame);
  border-radius: 12px;
  margin-bottom: 20px;
}

.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* Coral wash that comes up under the thumbnail on hover. */
.work__wash {
  position: absolute;
  inset: 0;
  background: var(--coral);
  opacity: 0;
  transition: opacity .35s;
}

.work__title {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  transition: color .3s;
}

.work__desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-68);
  max-width: 44ch;
}

.work__card:hover .work__frame img,
.work__card:focus-visible .work__frame img { transform: scale(1.025); }

.work__card:hover .work__wash,
.work__card:focus-visible .work__wash { opacity: .1; }

.work__card:hover .work__title,
.work__card:focus-visible .work__title { color: var(--coral); }

/* --------------------------------------------------------------- pager --- */

.pager {
  padding: 56px var(--gutter) 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.pager--spaced { margin-top: 80px; }

.pager__link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: color .25s;
}

.pager__link--next { align-items: flex-end; text-align: right; margin-left: auto; }

.pager__link:hover { color: var(--coral); }

.pager__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-68);
}

.pager__title { font-size: 22px; font-weight: 300; letter-spacing: -.01em; }

/* ------------------------------------------------------------ site foot --- */

.cta {
  background: var(--ink);
  color: var(--on-dark);
  padding: 54px var(--gutter) 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.cta--home {
  --gutter: clamp(24px, 8.3vw, 120px);
  padding-top: 64px;
  align-items: flex-end;
}

.cta__lead { font-size: 20px; font-weight: 300; }

.cta__block { display: flex; flex-direction: column; gap: 14px; }
.cta__block .cta__lead { font-size: 22px; letter-spacing: -.01em; }

.cta__email {
  font-size: 15px;
  border-bottom: 1px solid rgba(250, 248, 245, .3);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .25s, border-color .25s;
}

.cta__email:hover { color: var(--coral-lift); border-bottom-color: var(--coral-lift); }

.cta__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn {
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 6px;
  transition: background .25s, border-color .25s, color .25s;
}

.btn--ghost { border: 1px solid var(--on-dark-28); }
.btn--ghost:hover { border-color: var(--coral-lift); color: var(--coral-lift); }

.btn--solid {
  color: var(--on-dark);
  background: var(--coral);
  padding: 14px 23px;
  font-weight: 500;
}

.btn--solid:hover { background: var(--coral-dark); color: var(--on-dark); }

.colophon {
  background: var(--ink);
  color: var(--on-dark-40);
  padding: 20px var(--gutter) 34px;
  font-size: 12px;
}

.colophon--home { --gutter: clamp(24px, 8.3vw, 120px); }

/* -------------------------------------------------------- coming soon --- */

.holding {
  min-height: 720px;
  display: flex;
  flex-direction: column;
}

/* The coral bar is a visible band here, so clear its full height. */
.holding { padding-top: calc(var(--topbar-pad) * 2 + var(--topbar-h)); }

.holding__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 140px var(--gutter);
  text-align: center;
}

.holding__body h1 {
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  max-width: 20ch;
}

.holding__body p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(51, 51, 51, .7);
  max-width: 46ch;
  text-wrap: pretty;
}

.holding__back {
  margin-top: 12px;
  font-size: 14px;
  color: var(--on-dark);
  background: var(--coral);
  padding: 14px 26px;
  border-radius: 6px;
  font-weight: 500;
  transition: background .25s;
}

.holding__back:hover { background: var(--ink); color: var(--on-dark); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  :root { --rail: 200px; --rail-gap: 56px; }
  .device-row video { height: 520px; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__lede { padding-top: 0; }
  .hero__wordmark img { height: 40px; }

  /* Rail stops being a column and sits above the prose as a meta block. */
  .layout,
  .offset {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px 32px;
  }

  .offset > .offset__spacer { display: none; }

  /* No rail column to clear, so the quote returns to the gutter. */
  .quote { margin-left: var(--gutter); max-width: none; }

  .work { grid-template-columns: 1fr; gap: 48px; }
  .figure { padding-top: 64px; }
  .device-row { gap: 24px; }
  .device-row video { height: 440px; }
  .holding__body { padding: 88px var(--gutter); }
}

@media (max-width: 620px) {
  :root { --topbar-pad: 28px; }
  .hero { padding-bottom: 56px; }
  .hero--offset { padding-top: calc(var(--topbar-pad) + var(--topbar-h) + 48px); }
  .pager { flex-direction: column; align-items: flex-start; gap: 32px; }
  .pager__link--next { align-items: flex-start; text-align: left; margin-left: 0; }
  .cta { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta--home { align-items: flex-start; }
  .quote { padding-left: 20px; }
  .loop-grid img { width: 140px; }
  .device-row video { height: 360px; }
}

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