/* ==========================================================================
   Kali Coogan — Portfolio
   Built from Figma file "Portfolio" (1728px desktop frames).
   ========================================================================== */

:root {
  /* Colors */
  --color-ink: #171717;        /* dark section backgrounds */
  --color-cream: #efebe2;      /* page background + light text */
  --color-text: #161616;       /* body text on cream */
  --color-placeholder: #d9d9d9;
  --color-muted: #a7a49e;     /* muted cream-gray: details labels, nav hover */

  /* Fonts */
  --font-display: "Jacquarda Bastarda 9", serif;  /* nav, pills, big blackletter */
  --font-accent: "Jacquard 24", serif;            /* inline emphasis, footer labels */
  --font-body: "Gowun Batang", Georgia, serif;    /* headings + paragraphs */

  /* Layout — design uses 146px gutters on a 1728px frame (≈ 8.45vw) */
  --gutter: clamp(16px, 8.45vw, 146px);
  --content-max: 1436px;
  --gap: 20px;          /* the one gutter between all images, rows and columns alike */
  --radius-pill: 20px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
p {
  margin: 0;
  font-weight: inherit;
}

.container {
  width: min(var(--content-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Pills (filters, tags, KC logo, contact links)
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lamp hover: a diagonal band of light sweeps across the pill from the side
   the cursor enters, turning it ink-on-cream, with a hot spot that follows
   the cursor. Leaving carries the light out the far side. JS adds .pill__light
   and toggles the .is-off-left / .is-on / .is-off-right states. */
.pill-group--lamp .pill {
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: box-shadow 0.4s ease;
}

@media (hover: hover) {
  .pill-group--lamp .pill:hover {
    box-shadow: 0 0 22px rgba(255, 244, 214, 0.28);
  }
}

.pill__light {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    #fffaf0 0%,
    var(--color-cream) 55%,
    #ddd5c4 100%
  );
  color: var(--color-ink);
  pointer-events: none;
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.25, 1);
}

/* Parallelograms leaning 40% so the edge is a stark diagonal */
.pill__light.is-off-left  { clip-path: polygon(-40% 0, 0% 0, -40% 100%, -80% 100%); }
.pill__light.is-on        { clip-path: polygon(0% 0, 140% 0, 100% 100%, -40% 100%); }
.pill__light.is-off-right { clip-path: polygon(140% 0, 180% 0, 140% 100%, 100% 100%); }
.pill__light.no-anim      { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .pill__light { transition: none; }
}

/* --------------------------------------------------------------------------
   Scroll reveals
   Only active when <html> has .reveal-on (set in each page's <head>, skipped
   for prefers-reduced-motion), so content is never hidden without JS.
   main.js tags elements with data-reveal and adds .is-visible on scroll.
   --i staggers siblings, --c staggers title letters, --e staggers <em>s,
   --base delays hero copy until the title has written itself in.
   -------------------------------------------------------------------------- */

[data-reveal] {
  --delay: calc(var(--base, 0ms) + var(--i, 0) * 120ms);
}

.reveal-on [data-reveal="fade"]:not(.is-visible),
.reveal-on [data-reveal="image"]:not(.is-visible),
.reveal-on [data-reveal="letters"]:not(.is-visible) .char,
.reveal-on [data-reveal="fade"]:not(.is-visible) em {
  opacity: 0;
}

/* Text: rises out of a soft blur */
.is-visible[data-reveal="fade"] {
  animation: reveal-fade 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay) both;
}

/* Blackletter phrases arrive a beat later, bleeding in like fresh ink */
.is-visible[data-reveal="fade"] em {
  animation: reveal-ink 1.2s ease calc(var(--delay) + 450ms + var(--e, 0) * 250ms) both;
}

/* Images: a plain opacity fade */
.is-visible[data-reveal="image"] {
  animation: reveal-image 0.9s ease var(--delay) both;
}

/* Titles: letter by letter */
[data-reveal="letters"] .word {
  display: inline-block;
  white-space: nowrap;
}

[data-reveal="letters"] .char {
  display: inline-block;
}

.is-visible[data-reveal="letters"] .char {
  animation: reveal-letter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1)
    calc(var(--base, 0ms) + var(--c, 0) * 45ms) both;
}

/* Hero copy waits for the title */
.hero__subtitle                  { --base: 650ms; }
.hero__tagline                   { --base: 800ms; }
.project-hero__desc              { --base: 450ms; }
.project-hero__head .pill-group > li,
.project-hero__tags--below > li  { --base: 650ms; }
/* With a details row, it goes between the title and the description */
.project-details > div                             { --base: 450ms; }
.project-details ~ .project-hero__desc             { --base: 750ms; }
.project-details ~ .project-hero__tags--below > li { --base: 950ms; }

@keyframes reveal-fade {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes reveal-ink {
  from { opacity: 0; filter: blur(4px); }
  50%  { opacity: 1; text-shadow: 0 0 14px currentColor; }
  to   { opacity: 1; filter: none; text-shadow: none; }
}

@keyframes reveal-image {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes reveal-letter {
  from { opacity: 0; transform: translateY(0.25em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   Site header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  padding-top: 88px;
  color: var(--color-cream);
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 47px;
}

.site-nav__links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 20px;
}

.site-nav__links a {
  transition: color 0.25s ease;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--color-muted);
}

/* Mobile menu: main.js adds the hamburger (.nav-toggle) and the slide-out
   drawer, then marks the nav .nav-ready. Only then do the inline links and
   KC badge hide on small screens, so without JS the links still show. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav-toggle:focus-visible,
.nav-drawer__close:focus-visible {
  outline: 1.5px solid var(--color-cream);
  outline-offset: 2px;
  border-radius: 50%;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 340px);
  padding: 104px 36px 36px;
  border-left: 1px solid #2a2a2a;
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-drawer.is-open .nav-drawer__backdrop {
  opacity: 1;
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: none;
}

.nav-drawer__close {
  position: absolute;
  top: 28px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav-drawer__close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 30px;
}

/* Links ease in one after another as the panel opens */
.nav-drawer__links li {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-drawer.is-open .nav-drawer__links li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + var(--i, 0) * 0.07s);
}

.nav-drawer__links a {
  transition: color 0.25s ease;
}

.nav-drawer__links a:hover,
.nav-drawer__links a:focus-visible {
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__backdrop,
  .nav-drawer__panel,
  .nav-drawer__links li {
    transition: none;
  }
}

.site-nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 69px;
  height: 37px;
  padding: 0;
  border-width: 1.5px;
  font-size: 36px;
}

/* --------------------------------------------------------------------------
   Dark sections
   -------------------------------------------------------------------------- */

.dark {
  background: var(--color-ink);
  color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */

.hero {
  padding-bottom: 104px;
}

.hero__intro {
  margin-top: 112px;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 7.4vw, 128px);
  line-height: 1.3;
}

/* Magic text: on hover an overlay copy of the text (from data-text) fades in
   with a flowing iridescent gradient, a soft glow and a one-time glint.
   Used on the homepage name. The gradient repeats twice
   across a 200%-wide background, so shifting it by 100% loops seamlessly. */
.magic {
  --name-gradient: linear-gradient(100deg,
    #fb8bbd 0%, #b992fa 10%, #74c5f9 20%, #74e6ae 30%, #fcdb70 40%, #fb8bbd 50%,
    #b992fa 60%, #74c5f9 70%, #74e6ae 80%, #fcdb70 90%, #fb8bbd 100%);
}

.magic::after,
.hero__title--magic::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--name-gradient);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-kerning: none;          /* match letter-by-letter spans underneath */
  pointer-events: none;
  opacity: 0;
}

.magic::after {
  transition: opacity 0.5s ease;
}

.magic:hover::after {
  opacity: 1;
  animation: name-flow 4s linear infinite;
}

/* Glint: an anime-style double highlight (a thick band, then a thin one)
   that cuts across the letters once as the cursor arrives. main.js adds
   this span (another copy of the text). */
.magic__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 34%, rgba(255, 255, 255, 0.9) 38%, #fff 40%, #fff 44%, rgba(255, 255, 255, 0.9) 46%,
    transparent 48%, transparent 51%, #fff 52.5%, #fff 54%, transparent 55.5%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-kerning: none;
  pointer-events: none;
  opacity: 0;
}

.magic:hover .magic__glint {
  animation: name-glint 0.75s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

/* Sparkles: four-point stars that twinkle in around the name on hover.
   main.js adds them; positions are in em so they track the name at any size. */
.magic__sparkle {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(185, 146, 250, 0.9)) drop-shadow(0 0 14px rgba(116, 197, 249, 0.6));
}

.magic__sparkle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.magic__sparkle:nth-of-type(1) { left: calc(50% - 2.45em); top: 0;      --d: 0.05s; }
.magic__sparkle:nth-of-type(2) { left: calc(50% - 0.95em); top: -0.1em; --d: 0.25s; width: 0.14em; height: 0.14em; }
.magic__sparkle:nth-of-type(3) { left: calc(50% + 2.2em);  top: 0.1em;  --d: 0.4s; }
.magic__sparkle:nth-of-type(4) { left: calc(50% + 0.75em); top: 0.95em; --d: 0.55s; width: 0.13em; height: 0.13em; }

.magic:hover .magic__sparkle {
  animation: sparkle-pop 0.9s ease-out var(--d) both;
}

/* Homepage name: bigger Jacquard 24, plus one sweep after it writes in */
.hero__title--magic {
  position: relative;
  font-family: var(--font-accent);
  font-size: clamp(64px, 10vw, 176px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero__title--magic:hover {
  transform: scale(1.03);
}

.hero__title--magic.is-visible::before {
  animation: name-sweep 2.4s ease-in-out 1.3s both;
}

@keyframes name-glint {
  0%   { opacity: 1; background-position: 100% 0; }
  100% { opacity: 1; background-position: 0% 0; }
}

@keyframes sparkle-pop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.25) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(90deg); }
}

@keyframes name-sweep {
  0%   { opacity: 0; background-position: 0% 0; }
  25%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; background-position: 100% 0; }
}

@keyframes name-flow {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title--magic::before { animation: none; }
  .magic:hover::after { animation: none; }
  .magic:hover .magic__glint { animation: none; }
  .magic:hover .magic__sparkle { animation: none; }
  .hero__title--magic:hover { transform: none; }
}

.hero__subtitle {
  margin-top: 37px;
  font-size: clamp(20px, 2.1vw, 36px);
}

.hero__tagline {
  margin-top: 14px;
  font-size: clamp(16px, 1.25vw, 20px);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Home — My Work
   -------------------------------------------------------------------------- */

.work {
  padding-block: 48px 140px;
}

.section-title {
  font-weight: 700;
  font-size: clamp(40px, 4.35vw, 75px);
  line-height: 1.45;
  color: #202020;
}

.work__filters {
  margin-top: 9px;
  color: #111;
}

.work__filters .pill {
  cursor: pointer;
  font-family: var(--font-body);  /* plain serif: blackletter caps (A, I) misread at this size */
  font-size: 17px;
}

.work__filters .pill.is-active {
  background: #111;
  color: var(--color-cream);
}

/* On the cream page the lamp sweep is inverted: ink light, cream text */
.work__filters .pill__light {
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    #3a3a3a 0%,
    var(--color-ink) 55%,
    #000 100%
  );
  color: var(--color-cream);
}

@media (hover: hover) {
  .pill-group--lamp.work__filters .pill:hover {
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
  }
}

/* Filtered-out cards leave the grid entirely */
.work-card[hidden] {
  display: none;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px var(--gap);        /* extra row space so each caption sits with its own image */
  margin-top: 64px;
}

/* Project cards (homepage + More Work): image, then title and disciplines */
.work-card,
.more-work__card {
  display: block;
}

.work-card__media {
  display: block;
  aspect-ratio: 708 / 516;
  overflow: hidden;
  background: var(--color-placeholder);
}

.work-card__media img,
.work-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Hover zoom only where there's a real pointer: on phones a hover effect can
   swallow the first tap on a card, so it took two taps to open a project */
@media (hover: hover) {
  .work-card:hover .work-card__media img,
  .work-card:hover .work-card__media video,
  .more-work__card:hover .work-card__media video,
  .more-work__card:hover .work-card__media img {
    transform: scale(1.03);
  }
}

.work-card__title {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.3;
  color: #202020;
}

.work-card__meta {
  display: block;
  margin-top: 2px;
  font-size: clamp(15px, 1.1vw, 17px);
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Project pages
   -------------------------------------------------------------------------- */

.project-hero {
  padding-bottom: 88px;
}

.project-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 69px;
}

.project-hero__title {
  font-weight: 700;
  font-size: clamp(44px, 5.55vw, 96px);
  line-height: 1.45;
}

.project-hero__desc {
  margin-top: 16px;
}

/* Client / Role / Deliverables / Year row under the title */
.project-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 56px;
  margin: 16px 0 0;
}

.project-details dt {
  font-family: var(--font-accent);
  font-size: 22px;
  line-height: 1;
  opacity: 0.7;
}

.project-details dd {
  margin: 8px 0 0;
  font-size: clamp(16px, 1.15vw, 18px);
}

/* Client name linked to the company site: underlined */
.project-details dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.25s ease;
}

.project-details dd a:hover,
.project-details dd a:focus-visible {
  color: var(--color-muted);
}

.project-details + .project-hero__desc {
  margin-top: 48px;
}

/* Tags sit below the description on every project page; plain serif to
   match the homepage filter pills */
.project-hero__tags--below {
  margin-top: 64px;
}

.project-hero__tags--below .pill {
  font-family: var(--font-body);
  font-size: 17px;
}

/* Long-form copy with blackletter emphasis */
.prose {
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.6;
}

/* Links inside copy: underlined so they read as links; the line thickens on hover */
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-thickness: 2px;
}

.prose em {
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 1.2em;
  line-height: 1;
}

.project-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-block: 77px 140px;
}

/* Extra breathing room around text only; image-to-image spacing stays at --gap */
.project-body > .prose {
  margin-block: calc(64px - var(--gap));
}

.gallery-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.media {
  overflow: hidden;
  background: var(--color-placeholder);
}

.media img,
.media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image letterboxed inside its frame. Absolutely positioned because Safari
   won't resolve height: 100% against an aspect-ratio box, which clipped the
   bottom of these images. --pad-x / --pad-y inset it (% of width / height). */
.media--contain {
  position: relative;
}

.media--contain img {
  position: absolute;
  top: var(--pad-y, 0%);
  left: var(--pad-x, 0%);
  width: calc(100% - 2 * var(--pad-x, 0%));
  height: calc(100% - 2 * var(--pad-y, 0%));
  object-fit: contain;
}

/* Images that open in the lightbox (main.js marks them) */
.is-zoomable {
  cursor: zoom-in;
}

.is-zoomable:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Zoom into a photo past its frame: --zoom scales, --zoom-origin aims it */
.media--zoom img {
  transform: scale(var(--zoom, 1.1));
  transform-origin: var(--zoom-origin, 50% 50%);
}

/* Zoomed crop copied from a Figma image fill: --w/--h size the image relative
   to its frame, --x/--y offset it */
.media--crop {
  position: relative;
}

.media--crop img {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
  object-fit: fill;
}

/* A logo centered over a blurred, darkened backdrop image (title-card look) */
.media--logo {
  position: relative;
  display: grid;
  place-items: center;
}

.media--logo .media__backdrop {
  position: absolute;
  inset: 0;
  transform: scale(1.2);        /* hide the soft edges the blur leaves */
  filter: blur(24px) brightness(0.45) saturate(1.1);
}

.media--logo .media__logo {
  position: relative;
  width: 78%;
  height: auto;
  object-fit: contain;
}

/* Aspect ratios taken from the Figma frames */
.ar-wide    { aspect-ratio: 1436 / 635; }
.ar-banner  { aspect-ratio: 1430 / 716; }
.ar-tall    { aspect-ratio: 1434 / 775; }
.ar-taller  { aspect-ratio: 1432 / 806; }
.ar-cover   { aspect-ratio: 1430 / 876; }
.ar-spread  { aspect-ratio: 1434 / 930; }
.ar-poster  { aspect-ratio: 1430 / 989; }
.ar-strip   { aspect-ratio: 1434 / 651; }
.ar-square  { aspect-ratio: 1 / 1; }
.ar-specimen { aspect-ratio: 2 / 1; }
.ar-photo   { aspect-ratio: 4 / 3; }
.ar-video   { aspect-ratio: 16 / 9; }
.ar-page    { aspect-ratio: 2880 / 2363; }
.ar-mockup  { aspect-ratio: 1434 / 941; }

.more-work {
  margin-top: 80px;
}

.more-work .section-title {
  color: #141414;
  text-align: center;
}

.more-work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px var(--gap);
  margin-top: 35px;
}


/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.about {
  padding-block: 141px 107px;
}

.about__layout {
  display: grid;
  grid-template-columns: 846fr 590fr;
  gap: 94px;
  align-items: start;
}

.about__portrait {
  width: 100%;
  aspect-ratio: 590 / 736;
  object-fit: cover;
}

.about__title {
  font-weight: 700;
  font-size: clamp(40px, 4.35vw, 75px);
  line-height: 1.45;
}

.about__bio {
  max-width: 774px;
  margin-top: 67px;
}

.about__bio .prose + .prose {
  margin-top: 1em;
}

.about__bio + .project-details {
  margin-top: 48px;
}

.social {
  display: flex;
  gap: 19px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

/* Outlined circles with line icons; fill cream on hover, like the pills */
.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background 0.25s ease, color 0.25s ease;
}

.social__link:hover,
.social__link:focus-visible {
  background: var(--color-cream);
  color: var(--color-ink);
}

.social__link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social__dot {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   Lightbox: full-screen image viewer with pinch / scroll / double-tap zoom
   and drag to pan. main.js builds it and sets the image transform.
   -------------------------------------------------------------------------- */

.lightbox {
  --lightbox-pad: 56px;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0c0c0c;
  color: var(--color-cream);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;           /* we handle pinch and pan ourselves */
  cursor: zoom-in;
}

.lightbox.is-zoomed .lightbox__stage {
  cursor: grab;
}

.lightbox.is-zoomed .lightbox__stage:active {
  cursor: grabbing;
}

.lightbox__img {
  display: block;
  max-width: calc(100vw - 2 * var(--lightbox-pad));
  max-height: calc(100vh - 2 * var(--lightbox-pad));
  max-height: calc(100dvh - 2 * var(--lightbox-pad));
  width: auto;
  height: auto;
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.lightbox__img.is-animating {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.6);
  color: inherit;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
  .lightbox__close:hover {
    background: var(--color-cream);
    color: var(--color-ink);
  }
}

.lightbox__close:focus-visible {
  outline: 1.5px solid var(--color-cream);
  outline-offset: 3px;
}

.lightbox__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.lightbox__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(12, 12, 12, 0.6);
  font-size: 14px;
  color: var(--color-muted);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-zoomed .lightbox__hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img.is-animating {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 141px 89px;
}

.site-footer__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.7vw, 64px);
  line-height: 1.3;
  color: var(--color-cream);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 38px;
}

.contact__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact__label {
  margin-left: 7px;
  font-family: var(--font-accent);
  font-size: 32px;
  line-height: 0.9;
}

.contact__link {
  height: 44px;
  font-family: var(--font-body);
}

.contact .social {
  margin: 0;
}

.site-footer__copy {
  margin-top: 124px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-cream);
  text-align: center;
}

/* About page: footer shares the dark background, so drop the top padding gap */
.page-about .site-footer {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero {
    min-height: 0;
  }

  .hero__intro {
    margin-top: 80px;
  }

  .about__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about__portrait {
    max-width: 480px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-top: 32px;
  }

  .nav-ready .site-nav__links,
  .nav-ready .site-nav__logo {
    display: none;
  }

  .nav-ready .nav-toggle {
    display: flex;
  }

  .site-nav__links {
    gap: 18px;
    font-size: 20px;
  }

  .site-nav__logo {
    left: auto;
    right: 0;
    translate: 0 -50%;
  }

  .work-grid,
  .gallery-row,
  .more-work__grid {
    grid-template-columns: 1fr;
  }

  .project-hero__head {
    margin-top: 48px;
  }

  /* Smaller filter pills so all six fit in two rows */
  .work__filters {
    gap: 8px;
  }

  .work__filters .pill {
    height: 30px;
    padding: 0 12px;
    font-size: 15px;
  }

  /* Project tags repeat the Deliverables line, so they drop out on phones */
  .project-hero__tags--below {
    display: none;
  }

  /* Edge to edge: the photo gets the whole screen */
  .lightbox {
    --lightbox-pad: 0px;
  }

  .site-footer {
    padding-top: 80px;
  }

  .site-footer__copy {
    margin-top: 72px;
  }
}