/* Shared design system — loaded after the compiled stylesheet. */

:root {
  --ink: #f2ede4;
  --muted: #aaa49d;
  --paper: #09090a;
  --panel: #151517;
  --line: #2a292a;
  --lime: #d8f24f;
  --coral: #f0836d;
  --accent: var(--lime);
  --shell: 1180px;
  --gutter: clamp(16px, 4vw, 24px);
  --header-h: 74px;
  --radius: 18px;
  --space-section: clamp(88px, 10vw, 140px);
  --case-prose: 46rem;
}

html,
body {
  overflow-x: hidden;
}

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

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

/* --- Navigation --- */

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  z-index: 40;
  position: sticky;
  top: 0;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.wordmark span {
  color: var(--accent);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--ink);
}

.site-header a:focus-visible,
.button:focus-visible,
.case-link:focus-visible,
.home-project-visual:focus-visible,
summary:focus-visible,
.contact a:focus-visible,
footer a:focus-visible,
.back-link:focus-visible,
.next-project a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (width <= 650px) {
  .site-header .desktop-nav {
    display: none;
  }

  .site-header .mobile-nav {
    display: block;
    position: relative;
  }
}

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

.home-page {
  overflow: visible;
}

.home-page .home-hero {
  overflow: visible;
}

.home-page .hero-orb {
  top: -45%;
  right: auto;
  left: -45%;
  width: 190%;
  height: 190%;
  opacity: 0.44;
  overflow: visible;
  background: none;
  filter: none;
  transform: none;
  animation: none;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-page .hero-orb::after {
  display: none;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(88px);
  will-change: transform;
}

.hero-glow-lime {
  width: 34%;
  height: 38%;
  left: 50%;
  top: 24%;
  background: radial-gradient(circle, #ddff30cc 0%, #ddff3057 24%, transparent 58%);
  animation: glow-drift-a 14s ease-in-out infinite alternate;
}

.hero-glow-orange {
  width: 30%;
  height: 28%;
  left: 61%;
  top: 10%;
  background: radial-gradient(circle, #ff9b45c7 0%, #ff9b454d 26%, transparent 58%);
  animation: glow-drift-b 17s ease-in-out infinite alternate;
}

.hero-glow-pink {
  width: 32%;
  height: 30%;
  left: 57%;
  top: 48%;
  background: radial-gradient(circle, #f58cbac2 0%, #f58cba47 26%, transparent 60%);
  animation: glow-drift-c 20s ease-in-out infinite alternate;
}

@keyframes glow-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(48px, -36px, 0) scale(1.05); }
}

@keyframes glow-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to { transform: translate3d(-52px, 40px, 0) scale(1); }
}

@keyframes glow-drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(36px, 56px, 0) scale(1.06); }
}

@media (width <= 900px) {
  .home-page .hero-orb {
    top: -45%;
    left: -45%;
    right: auto;
    width: 190%;
    height: 190%;
    opacity: 0.4;
    filter: none;
  }
}

.home-page .home-hero h1 {
  overflow-wrap: anywhere;
}

/* --- Selected work --- */

.home-page .home-project,
.home-page .home-project.mik-featured,
.home-page .home-project.trpn,
.home-page .home-project.parks,
.home-page .home-project.stonewall {
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #171719, #111113);
}

.home-page .home-project-copy {
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 4vw, 50px);
}

.home-page .home-project-copy .eyebrow {
  margin-top: 32px;
}

.home-page .home-project-copy h3 {
  margin: 20px 0 24px;
}

.home-page .project-index {
  color: #858585;
}

.home-page .project-tags {
  gap: 8px;
  margin: 20px 0 38px;
}

.home-page .home-project-copy .case-link {
  margin-top: auto;
  padding-top: 20px;
}

.home-page .home-project-visual,
.home-page .mik-home-visual,
.home-page .trpn-visual,
.home-page .parks-visual,
.home-page .stonewall-visual {
  min-height: 0;
  width: 100%;
  padding: clamp(28px, 4vw, 50px);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171719;
}

.home-page .home-project-visual img,
.home-page .home-project-visual > img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: none;
  filter: none;
}

.home-page .shared-laptop-mockup {
  width: min(100%, 690px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1800 / 1170;
  position: relative;
  margin: 0 auto;
  filter: none;
}

.home-page .shared-laptop-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.home-page .shared-laptop-screen {
  overflow: hidden;
}

.home-page .shared-laptop-screen img,
.home-page .mik-laptop-screen img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.home-page .home-phone-single {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-page .home-phone {
  width: min(42%, 214px);
  max-width: 100%;
  transform: none;
  overflow: hidden;
}

.home-page .home-phone img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.home-page .home-project:hover .home-project-visual img {
  transform: none;
}

.home-page .case-link:hover {
  color: var(--accent);
}

.reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 640ms cubic-bezier(.22, 1, .36, 1),
    transform 640ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Case studies --- */

.case-study .case-lede,
.case-study .prose,
.case-study .section-heading p {
  max-width: var(--case-prose);
}

.case-study img {
  max-width: 100%;
  height: auto;
}

.case-hero,
.case-section,
.case-title-grid,
.mik-two-col,
.mik-feature,
.mik-direction-showcase,
.mik-mobile-progression {
  min-width: 0;
}

.next-project a span {
  color: var(--accent);
}

/* --- Shared case-study shell (TRPN / Park / Stonewall only) --- */

.trpn-case,
.park-case,
.stonewall-case {
  --case-section: clamp(100px, 11vw, 160px);
  --case-gap: clamp(34px, 5vw, 72px);
  --case-radius: 18px;
  --case-text: 760px;
}

.trpn-case,
.park-case,
.stonewall-case,
.trpn-case .shell,
.park-case .shell,
.stonewall-case .shell,
.trpn-case .case-title-grid,
.park-case .case-title-grid,
.stonewall-case .case-title-grid,
.trpn-case .two-col,
.park-case .two-col,
.stonewall-case .two-col,
.trpn-case figure,
.park-case figure,
.stonewall-case figure {
  min-width: 0;
  max-width: 100%;
}

.trpn-case .case-hero,
.park-case .case-hero,
.stonewall-case .case-hero {
  padding-bottom: clamp(90px, 10vw, 140px);
}

.trpn-case .case-section,
.park-case .case-section,
.stonewall-case .case-section,
.trpn-case .process-band,
.park-case .process-band,
.stonewall-case .process-band,
.trpn-case .visual-system,
.trpn-case .solution-band {
  padding-block: var(--case-section);
}

.trpn-case .case-title-grid,
.park-case .case-title-grid,
.stonewall-case .case-title-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: var(--case-gap);
  align-items: start;
}

.trpn-case .case-title-grid h1,
.park-case .case-title-grid h1,
.stonewall-case .case-title-grid h1 {
  font-size: clamp(58px, 7vw, 102px);
  overflow-wrap: anywhere;
}

.trpn-case .case-lede,
.park-case .case-lede,
.stonewall-case .case-lede {
  max-width: var(--case-text);
}

.trpn-case .back-link,
.park-case .back-link,
.stonewall-case .back-link {
  margin-bottom: 60px;
}

.trpn-case .project-facts,
.park-case .project-facts,
.stonewall-case .project-facts {
  border-top: 1px solid var(--line);
  margin: 0;
}

.trpn-case .project-facts div,
.park-case .project-facts div,
.stonewall-case .project-facts div {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(76px, 120px) minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
}

.trpn-case .project-facts span,
.park-case .project-facts span,
.stonewall-case .project-facts span {
  font: 700 9px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trpn-case .project-facts strong,
.park-case .project-facts strong,
.stonewall-case .project-facts strong {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.trpn-case .case-section-key,
.park-case .case-section-key,
.stonewall-case .case-section-key {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  margin-bottom: clamp(48px, 7vw, 82px);
  padding-top: 18px;
}

.trpn-case .case-section-key .eyebrow,
.park-case .case-section-key .eyebrow,
.stonewall-case .case-section-key .eyebrow {
  margin: 0;
}

.trpn-case .case-section-key span,
.park-case .case-section-key span,
.stonewall-case .case-section-key span {
  font: 700 9px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trpn-case .case-section-key span {
  color: var(--coral);
}

.park-case .case-section-key span {
  color: var(--park-orange);
}

.stonewall-case .case-section-key span {
  color: var(--sw-pink);
}

.trpn-case .process-band .case-section-key,
.park-case .process-band .case-section-key,
.stonewall-case .process-band .case-section-key,
.trpn-case .solution-band .case-section-key {
  border-color: #19161333;
}

.trpn-case .process-band .case-section-key span {
  color: #6c594f;
}

.park-case .park-research-band .case-section-key span {
  color: #80552c;
}

.stonewall-case .stonewall-process .case-section-key span {
  color: #8b5870;
}

.trpn-case .solution-band .case-section-key span {
  color: #5b671d;
}

.trpn-case .section-heading,
.park-case .section-heading,
.stonewall-case .section-heading {
  max-width: var(--case-text);
  margin-bottom: clamp(48px, 6vw, 72px);
}

.trpn-case .section-heading h2,
.park-case .section-heading h2,
.stonewall-case .section-heading h2,
.trpn-case .two-col h2,
.park-case .two-col h2,
.stonewall-case .two-col h2 {
  font-size: clamp(42px, 5.5vw, 72px);
  margin: 0;
  overflow-wrap: anywhere;
}

.trpn-case .two-col,
.park-case .two-col,
.stonewall-case .two-col {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  gap: var(--case-gap);
  align-items: start;
}

.trpn-case .affinity-crop,
.trpn-case .iteration-strip figure,
.trpn-case .survey-board figure,
.trpn-case .process-artifact,
.trpn-case .image-card,
.park-case .park-artifact,
.stonewall-case .sw-artifact {
  background: #141416;
  border: 1px solid var(--line);
  border-radius: var(--case-radius);
  margin: 0;
  overflow: hidden;
}

.trpn-case .affinity-crop img,
.trpn-case .iteration-strip img,
.trpn-case .survey-board img,
.trpn-case .process-artifact img,
.trpn-case .image-card img,
.park-case .park-artifact img,
.stonewall-case .sw-artifact img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.trpn-case .affinity-crop figcaption,
.trpn-case .iteration-strip figcaption,
.trpn-case .survey-board figcaption,
.trpn-case .process-artifact figcaption,
.trpn-case .image-card figcaption,
.trpn-case .responsive-single-device figcaption,
.park-case .park-artifact figcaption,
.park-case .park-browser figcaption,
.stonewall-case .sw-artifact figcaption,
.stonewall-case .sw-browser figcaption,
.stonewall-case .sw-phone-frame figcaption,
.stonewall-case .sw-tablet-frame figcaption {
  background: #171719;
  border-top: 1px solid var(--line);
  color: #8d8882;
  font: 9px/1.5 var(--font-mono);
  letter-spacing: 0.075em;
  padding: 13px 16px;
  text-transform: uppercase;
}

.trpn-case .iteration-strip figure {
  background: #141416;
}

.stonewall-case .sw-artifact-scroll {
  overflow-x: hidden;
  max-width: 100%;
  background: #141416;
}

.stonewall-case .sw-artifact-scroll img,
.park-case .park-wide-board img {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.trpn-case .sw-browser,
.park-case .park-browser,
.stonewall-case .sw-browser {
  border: 1px solid var(--line);
  border-radius: var(--case-radius);
  box-shadow: none;
  overflow: hidden;
}

.trpn-case .button,
.park-case .button,
.stonewall-case .button,
.trpn-case .text-link,
.park-case .text-link,
.stonewall-case .text-link {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trpn-case .trpn-hero-board,
.park-case .park-hero-stage,
.stonewall-case .stonewall-hero .sw-browser {
  max-width: 100%;
}

.park-case .shared-laptop-mockup {
  width: min(100%, 850px);
  max-width: 100%;
  filter: none;
}

.park-case .shared-laptop-shell,
.park-case .shared-laptop-screen img {
  max-width: 100%;
  object-fit: contain;
}

.trpn-case .next-project,
.park-case .next-project,
.stonewall-case .next-project {
  border-top: 1px solid var(--line);
  padding: 120px 0;
}

@media (width <= 900px) {
  .trpn-case .case-title-grid,
  .park-case .case-title-grid,
  .stonewall-case .case-title-grid,
  .trpn-case .two-col,
  .park-case .two-col,
  .stonewall-case .two-col {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (width <= 650px) {
  .trpn-case,
  .park-case,
  .stonewall-case {
    --case-section: 88px;
  }

  .trpn-case .case-title-grid h1,
  .park-case .case-title-grid h1,
  .stonewall-case .case-title-grid h1 {
    font-size: clamp(43px, 12vw, 54px);
  }

  .trpn-case .project-facts div,
  .park-case .project-facts div,
  .stonewall-case .project-facts div {
    grid-template-columns: 68px 1fr;
  }

  .trpn-case .case-section-key,
  .park-case .case-section-key,
  .stonewall-case .case-section-key {
    grid-template-columns: 44px 1fr;
    margin-bottom: 48px;
  }

  .trpn-case .trpn-hero-board {
    overflow: hidden;
    min-height: 0;
  }
}

@media (width <= 420px) {
  .trpn-case .case-section-key,
  .park-case .case-section-key,
  .stonewall-case .case-section-key {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .trpn-case .two-col h2,
  .park-case .two-col h2,
  .stonewall-case .two-col h2,
  .trpn-case .section-heading h2,
  .park-case .section-heading h2,
  .stonewall-case .section-heading h2 {
    font-size: 39px;
  }

  .trpn-case .affinity-crop,
  .trpn-case .iteration-strip figure,
  .park-case .park-artifact,
  .stonewall-case .sw-artifact,
  .stonewall-case .sw-browser,
  .park-case .park-browser {
    border-radius: 13px;
  }
}

/* --- Responsive --- */

@media (width <= 900px) {
  .home-page .home-hero h1 {
    font-size: clamp(52px, 11vw, 92px);
  }

  .home-page .section-intro {
    gap: 32px;
  }

  .home-page .home-project,
  .home-page .home-project.reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-page .home-project-copy,
  .home-page .home-project-visual {
    width: 100%;
  }

  .home-page .home-project.reverse .home-project-copy {
    order: 1;
  }

  .home-page .home-project.reverse .home-project-visual {
    order: 2;
  }
}

@media (width <= 650px) {
  .home-page .home-hero {
    min-height: max(640px, calc(100svh - var(--header-h)));
  }

  .home-page .work,
  .home-page .about,
  .home-page .contact {
    padding-block: clamp(72px, 14vw, 110px);
  }

  .home-page .home-project,
  .home-page .home-project-visual {
    min-height: 0;
  }

  .case-title-grid h1,
  .mik-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
    overflow-wrap: anywhere;
  }
}

@media (width <= 520px) {
  .home-page .home-hero h1 {
    font-size: clamp(40px, 12.5vw, 52px);
    line-height: 0.96;
  }

  .home-page .home-project-copy,
  .home-page .home-project-visual {
    min-height: 0;
    padding: 28px 22px;
  }

  .home-page .home-phone {
    width: min(46%, 165px);
  }

  .career-timeline > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .contact-actions {
    align-items: flex-start;
  }
}

@media (width < 600px) {
  .home-page .home-project-visual,
  .home-page .mik-home-visual,
  .home-page .trpn-visual,
  .home-page .parks-visual,
  .home-page .stonewall-visual {
    min-height: 0;
    height: auto;
    align-self: start;
    padding-block: 14px;
    padding-inline: 16px;
  }

  .home-page .home-project-visual > img,
  .home-page .parks-visual > img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .home-page .shared-laptop-mockup,
  .home-page .home-phone-single {
    width: 100%;
    max-width: 100%;
    margin-block: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .home-page .hero-orb,
  .home-project-visual img {
    animation: none;
    transition: none;
    transform: none;
    will-change: auto;
  }

  .reveal-ready .reveal-on-scroll,
  .reveal-ready .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}