@font-face {
  font-family: TahomaLocal;
  src: url('/fonts/tahoma_regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: TahomaLocal;
  src: url('/fonts/tahoma_bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f3f6f8;
  --ink: #172331;
  --muted: #586674;
  --line: #ccd6de;
  --warm: #e1e8ed;
  --accent: #bd3d28;
  --panel: rgba(23, 35, 49, .035);
  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --type-display: clamp(3.25rem, 5.5vw, 4.6rem);
  --type-page-title: clamp(3.5rem, 6vw, 5.5rem);
  --type-statement: clamp(2rem, 3.4vw, 3.25rem);
  --type-section: clamp(1.85rem, 3vw, 2.8rem);
  --type-section-compact: clamp(1.5rem, 2.2vw, 2rem);
  --type-project: clamp(1.35rem, 2.1vw, 1.8rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: TahomaLocal, Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page-about {
  display: flex;
  flex-direction: column;
}

.page-about main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-about .contact { flex: 1; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }
section[id], .project[id] { scroll-margin-top: 5rem; }

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

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  transform: translateY(-180%);
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 6.75rem;
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: rgba(243, 246, 248, .96);
  transition: height .28s var(--ease), background .28s ease, box-shadow .28s ease;
}

.site-header.is-compact {
  height: 4.5rem;
  background: rgba(243, 246, 248, .9);
  box-shadow: 0 12px 30px rgba(23, 35, 49, .045);
  backdrop-filter: blur(14px);
}

.wordmark {
  display: flex;
  flex-direction: column;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.wordmark-name {
  position: relative;
  display: block;
  font-size: .975em;
  width: 8.6rem;
  height: 1.15em;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: -.025em;
  transition: width .55s var(--ease);
}

.wordmark-collapse {
  display: inline-block;
  width: 3.65rem;
  overflow: hidden;
  vertical-align: bottom;
  transition: width .55s var(--ease);
}

.wordmark.is-condensed .wordmark-name { width: 5.3rem; }
.wordmark.is-condensed .wordmark-collapse { width: 0; }

@media (hover: hover) {
  .wordmark:hover .wordmark-name { width: 8.6rem; }
  .wordmark:hover .wordmark-collapse { width: 3.65rem; }
}

@media (min-width: 701px) {
  .wordmark:focus-visible .wordmark-name { width: 8.6rem; }
  .wordmark:focus-visible .wordmark-collapse { width: 3.65rem; }
}

.wordmark small {
  max-height: 1rem;
  margin-top: .3rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 1;
  transition: max-height .24s var(--ease), margin .24s var(--ease), opacity .16s ease, transform .24s var(--ease);
}

.site-header.is-compact .wordmark small {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-4px);
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.8vw, 2.5rem);
  font-size: .875rem;
}

nav a, .social-row a, .site-footer a {
  position: relative;
  padding-block: .8rem;
}

nav a::after, .social-row a::after, .site-footer a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

nav a:hover::after, nav a[aria-current]::after,
.social-row a:hover::after, .site-footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.eyebrow {
  margin: 0 0 1.35rem;
  color: var(--accent);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero {
  min-height: calc(100svh - 6.75rem);
  padding-block: clamp(3rem, 6vw, 5.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: var(--type-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
}

.hero h1 span { display: block; }

.hero-note {
  max-width: 670px;
  margin-top: clamp(2.25rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.lede {
  max-width: 450px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
}

.portrait {
  width: min(100%, 420px);
  margin: 0;
  justify-self: end;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--warm);
}

.portrait picture { display: block; width: 100%; height: 100%; }

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s var(--ease);
}

.portrait:hover img { transform: scale(1.018); }

.nav-label-mobile { display: none; }

.text-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--accent);
  font-size: .875rem;
  white-space: nowrap;
}

.text-link span, .project-arrow, .about-link > a > span:last-child {
  transition: transform .25s var(--ease);
}

.text-link:hover span { transform: translate(2px, 2px); }

.work {
  padding-block: clamp(5.5rem, 9vw, 8.5rem);
  border-top: 1px solid var(--line);
}

.section-heading {
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  display: block;
}

.section-heading .eyebrow { margin-bottom: 1rem; }

.section-heading h2 {
  max-width: 680px;
  margin: 0;
  font-size: var(--type-section);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.featured-work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.project { position: relative; min-width: 0; }

.project-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem 1.5rem;
}

.project-featured .project-visual {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  margin-bottom: .45rem;
}

.project-index {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  min-width: 2rem;
  padding: .28rem .4rem;
  background: rgba(243, 246, 248, .84);
  color: var(--accent);
  font-size: .6875rem;
  text-align: center;
  backdrop-filter: blur(8px);
}

.project-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--warm);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}

.project-visual img { transition: transform .55s var(--ease); }
.project-visual img { max-width: 72%; max-height: 62%; object-fit: contain; }

.project-kinda .project-visual { background: rgb(241, 238, 230); }
.project-kapture .project-visual { background: #9ebcdc; }
.project-kapture .project-visual img { width: 10rem; max-height: 72%; }

.project-meta { display: flex; flex-direction: column; gap: .25rem; }
.project-meta strong { font-size: var(--type-project); font-weight: 400; letter-spacing: -.035em; }
.project-meta small { color: var(--muted); font-size: .75rem; }

.project-description {
  max-width: 390px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
}

.project-featured .project-description { grid-column: 1; }
.project-featured .project-arrow { grid-column: 2; grid-row: 2 / 4; align-self: start; color: var(--accent); font-size: 1.2rem; }

a.project-featured:hover .project-visual, a.project-featured:focus-visible .project-visual {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(23, 35, 49, .09);
}

a.project:hover .project-visual img, a.project:focus-visible .project-visual img { transform: scale(1.045); }
a.project:hover .project-arrow, a.project:focus-visible .project-arrow { transform: translate(4px, -4px); }

.product-work {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  background: var(--panel);
}

.project-product {
  min-height: 12.5rem;
  padding: .5rem;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 1rem;
}

.project-product .project-index { top: .15rem; left: auto; right: .15rem; background: transparent; backdrop-filter: none; }
.project-product .project-visual { grid-row: 1 / 3; width: 5.25rem; height: 5.25rem; padding: .55rem; }
.project-product .project-visual picture { display: contents; }
.project-product .project-meta { padding-right: 1.5rem; }
.project-product .project-meta strong { font-size: 1.2rem; }
.project-product .project-description { grid-column: 2 / 4; align-self: end; font-size: .8125rem; }
.project-product .project-arrow { grid-column: 3; grid-row: 1; margin-top: 2rem; color: var(--accent); }

.project-bloobu .project-visual { background: #dbe5df; }
.project-mindfol .project-visual { background: #f1e3d9; }
.project-ticklet .project-visual { background: radial-gradient(circle at 50% 0, rgba(35, 132, 232, .13), transparent 8rem), #f6f8fb; }
.project-product .project-visual img { width: auto; height: 100%; max-width: none; max-height: none; border-radius: 22%; box-shadow: 0 8px 24px rgba(27, 48, 40, .12); }

.has-js .project-product .project-visual .scroll-reveal:not(.is-visible) {
  opacity: 0;
  transform: scale(.82);
}

.clients { padding-block: clamp(4.5rem, 7vw, 7rem); }
.section-heading.compact { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section-heading.compact h2 { max-width: 600px; font-size: var(--type-section-compact); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  padding: clamp(.45rem, 1vw, .75rem);
  border: 1px solid var(--line);
  border-radius: .35rem;
}

.logo-grid > * {
  min-width: 0;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
}

.logo-grid img {
  width: 14rem;
  height: 4.5rem;
  object-fit: contain;
  opacity: 1;
  transition: opacity .3s ease, transform .3s var(--ease);
}

.logo-grid > *:hover { background: rgba(189, 61, 40, .07); }
.logo-grid > *:hover img { opacity: 1; transform: scale(1.025); }

.about-link {
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
  background: var(--paper);
  color: var(--ink);
}

.about-link > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
}

.about-link .eyebrow { grid-column: 1 / -1; margin: 0 0 .75rem; color: var(--accent); }
.about-link > a > span:nth-child(2) { display: flex; flex-direction: column; gap: .5rem; }
.about-link strong { font-size: var(--type-section); font-weight: 400; letter-spacing: -.045em; }
.about-link small { color: var(--muted); font-size: .8125rem; }
.about-link > a > span:last-child { color: var(--accent); font-size: 1.8rem; }
.about-link > a:hover > span:last-child { transform: translateX(6px); }

.about-details {
  padding-block: clamp(4rem, 7vw, 6.5rem) clamp(3.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.about-intro { max-width: 760px; }
.about-lede {
  max-width: 720px;
  margin: 0;
  font-size: var(--type-statement);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.about-note { padding: 0; }
.about-note p { max-width: 430px; margin: 0 0 2rem; color: var(--muted); line-height: 1.7; }

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

.contact-inner {
  padding-block: clamp(3.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  align-items: start;
  gap: clamp(3rem, 9vw, 9rem);
}

.contact h2 { max-width: 700px; margin: 0; font-size: var(--type-section); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
.contact h2 strong { font-weight: 700; }
.contact-lede { max-width: 430px; margin: 1.5rem 0 0; color: var(--muted); line-height: 1.6; }
.contact-actions { min-height: 5.5rem; }

.email-reveal {
  min-width: 14rem;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}

.email-reveal span:last-child { transition: transform .22s ease; }
.email-reveal:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.email-reveal:hover span:last-child { transform: translateX(3px); }
.email-reveal[disabled] { cursor: wait; opacity: .65; }
.email-reveal.is-email { cursor: pointer; text-transform: none; }
.email-status { margin: .65rem 0 0 !important; color: #9b332c !important; font-size: .75rem !important; }

.social-row { display: flex; gap: 2rem; margin-top: 1.25rem; font-size: .875rem; }

.site-footer {
  width: min(var(--max), calc(100% - var(--pad) * 2));
  margin: auto;
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .75rem;
}

.footer-social {
  display: flex;
  align-items: center;
}

.footer-social { gap: .35rem; }

.footer-social a {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  transition: color .22s ease, transform .22s var(--ease);
}

.footer-social a::after { display: none; }
.footer-social a::before {
  content: '';
  position: absolute;
  inset: .375rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .22s ease;
}

.footer-social a:hover { color: var(--accent); transform: translateY(-2px); }
.footer-social a:hover::before { border-color: var(--accent); }

.footer-social svg {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social .icon-dot { fill: currentColor; stroke: none; }

.graveyard-hero {
  padding-block: clamp(6rem, 11vw, 10rem) clamp(4rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.graveyard-hero h1, .not-found h1 {
  margin: 0;
  font-size: var(--type-page-title);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.07em;
}

.graveyard-hero > p, .not-found > p {
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
}

.grave-list { display: flex; flex-direction: column; gap: .75rem; }

.grave-item {
  padding: 1rem;
  display: grid;
  grid-template-columns: 2rem 11rem minmax(10rem, .65fr) minmax(18rem, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  transition: background .25s ease, transform .3s var(--ease);
}

.grave-item:hover { background: rgba(189, 61, 40, .055); transform: translateX(3px); }
.grave-index { align-self: start; padding-top: .25rem; color: var(--muted); font-size: .6875rem; }

.grave-thumb {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--warm);
}

.grave-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.grave-item:hover .grave-thumb img { transform: scale(1.025); }
.grave-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--warm); }
.grave-thumb-placeholder span { color: var(--ink); font-size: 1rem; letter-spacing: -.04em; }

.grave-meta { display: flex; flex-direction: column; gap: .45rem; }
.grave-meta h2 { margin: 0; font-size: var(--type-project); font-weight: 400; letter-spacing: -.035em; }
.grave-meta span { color: var(--muted); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
.grave-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.grave-item p { max-width: 470px; margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }

.gallery-trigger, .gallery-close {
  min-height: 2.75rem;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: .8125rem;
}

.gallery-trigger span { display: inline-block; transition: transform .2s ease; }
.gallery-trigger:hover span { transform: translate(2px, -2px); }
.gallery-trigger:hover, .gallery-close:hover { color: var(--accent); }

.gallery-dialog {
  width: min(1120px, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior: contain;
}

.gallery-dialog::backdrop { background: rgba(20, 20, 18, .72); backdrop-filter: blur(4px); }
.gallery-dialog[open] { animation: gallery-in .5s ease both; }
.gallery-dialog[open]::backdrop { animation: gallery-backdrop-in .5s ease both; }
.gallery-dialog[open]:not(.is-closing) .gallery-shell { animation: gallery-content-in .75s ease both; }
.gallery-dialog[open]:not(.is-closing) .gallery-images img { animation: gallery-image-in .85s ease both; }
.gallery-dialog[open]:not(.is-closing) .gallery-images img:nth-child(2) { animation-delay: .08s; }
.gallery-dialog[open]:not(.is-closing) .gallery-images img:nth-child(3) { animation-delay: .16s; }
.gallery-dialog[open]:not(.is-closing) .gallery-images img:nth-child(4) { animation-delay: .24s; }
.gallery-dialog.is-closing { animation: gallery-out .34s var(--ease) both; }
.gallery-dialog.is-closing::backdrop { animation: gallery-backdrop-out .34s ease both; }
.gallery-shell { min-height: 100%; padding: 0 clamp(1rem, 3vw, 2.5rem) 2.5rem; }
.gallery-shell > header { position: sticky; top: 0; z-index: 2; padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: rgba(243, 246, 248, .94); backdrop-filter: blur(12px); }
.gallery-shell > header .eyebrow { margin-bottom: .4rem; }
.gallery-shell > header h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; }
.gallery-images { padding-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.gallery-images img { width: 100%; height: auto; background: var(--warm); }
.gallery-images-single { grid-template-columns: 1fr; }
.gallery-images-single img { max-width: 900px; margin-inline: auto; }

.graveyard-exit { padding-block: clamp(5rem, 9vw, 8rem); }
.graveyard-exit p { margin: 0 0 1rem; color: var(--muted); font-size: .8125rem; }

.not-found { min-height: calc(100svh - 10rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.not-found > p { margin: 2rem 0; }
.page-404 .site-footer { display: none; }

.reveal { animation: enter .9s ease-out both; }
.portrait.reveal { animation-delay: .12s; }
.scroll-reveal { transition: opacity .85s ease-out, transform .85s ease-out; }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.has-js .scroll-reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #111820;
    --ink: #edf2f5;
    --muted: #a4b0ba;
    --line: #34414c;
    --warm: #202a33;
    --accent: #e2705b;
    --panel: rgba(237, 242, 245, .045);
  }

  body::before { opacity: 0; }

  .site-header { background: rgba(17, 24, 32, .96); }
  .site-header.is-compact {
    background: rgba(17, 24, 32, .9);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  }

  .project-index { background: rgba(17, 24, 32, .84); }
  a.project-featured:hover .project-visual,
  a.project-featured:focus-visible .project-visual { box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }

  .project-kinda .project-visual { background: #292622; }
  .project-kinda .project-visual img { filter: brightness(0) invert(1); }
  .project-kapture .project-visual { background: #263b50; }
  .project-bloobu .project-visual { background: #26342e; }
  .project-mindfol .project-visual { background: #392d28; }
  .project-ticklet .project-visual {
    background: radial-gradient(circle at 50% 0, rgba(35, 132, 232, .22), transparent 8rem), #202b37;
  }

  .project-product .project-visual img { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }

  .email-status { color: #ff8d7a !important; }
  .gallery-shell > header { background: rgba(17, 24, 32, .94); }
}

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

@keyframes gallery-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: none; }
}

@keyframes gallery-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gallery-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes gallery-image-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes gallery-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(.995); }
}

@keyframes gallery-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .65fr); gap: 3rem; }
  .project-product { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .project-product .project-visual { width: 4.5rem; height: 4.5rem; }
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grave-item { grid-template-columns: 2rem 9rem minmax(9rem, .6fr) minmax(16rem, 1fr); }
}

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
    padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 7vw, 5rem);
  }
}

@media (max-width: 800px) {
  :root { --pad: 1.25rem; }
  .site-header { height: 5.5rem; }
  .site-header.is-compact { height: 4.25rem; }
  nav { gap: 1.1rem; font-size: .8125rem; }
  nav a:first-child { display: none; }

  .hero { min-height: auto; padding-block: 4rem 5rem; grid-template-columns: minmax(0, 1fr) minmax(14rem, .72fr); gap: 2rem; }
  .hero h1 { max-width: 650px; font-size: clamp(3rem, 8.5vw, 4rem); }
  .portrait { width: min(100%, 280px); justify-self: end; }

  .graveyard-hero { grid-template-columns: 1fr; gap: 1rem; }
  .featured-work { gap: 1rem; }
  .project-featured .project-description { font-size: .8125rem; }
  .project-product { min-height: 11.5rem; grid-template-columns: 4rem minmax(0, 1fr) auto; }
  .project-product .project-visual { width: 4rem; height: 4rem; }
  .project-product .project-description { align-self: start; }

  .about-link .eyebrow { margin-bottom: .75rem; }
  .about-link > a > span:last-child { position: static; }
  .about-details { padding-block: 3.5rem 3rem; gap: 2rem; }
  .about-note { padding: 0; }
  .contact-inner { min-height: auto; grid-template-columns: 1fr; align-items: start; gap: 3rem; }

  .graveyard-hero { padding-block: 6rem 4rem; }
  .graveyard-hero > p { margin-top: 1rem; }
  .grave-item { grid-template-columns: 1.5rem 7rem minmax(0, 1fr); align-items: start; gap: .75rem 1rem; }
  .grave-index { grid-row: 1 / 3; }
  .grave-thumb { grid-row: 1 / 3; }
  .grave-meta { grid-column: 3; }
  .grave-copy { grid-column: 3; }
  .grave-item p { font-size: .875rem; line-height: 1.5; }
  .gallery-images { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 2.5rem; }
  .portrait { width: min(76vw, 330px); justify-self: center; }
}

@media (max-width: 560px) {
  .wordmark { font-size: .875rem; }
  .wordmark-name { width: 8.6rem; font-size: .925rem; }
  .wordmark.is-condensed .wordmark-name { width: 5.3rem; }
  nav { gap: .85rem; }
  .nav-label-wide { display: none; }
  .nav-label-mobile { display: inline; }
  .hero { padding-top: 2.5rem; }
  .hero h1 { font-size: clamp(2.65rem, 11.5vw, 3.25rem); }
  .hero h1 span { display: block; }
  .hero-note { margin-top: 2rem; grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .portrait { width: min(76vw, 330px); justify-self: center; }

  .work { padding-block: 4.5rem; }
  .section-heading { margin-bottom: 2.75rem; }
  .section-heading h2 { font-size: 1.9rem; }
  .featured-work { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-featured .project-visual { aspect-ratio: 16 / 9; }
  .project-meta strong { font-size: 1.35rem; }
  .product-work { margin-inline: calc(var(--pad) * -.35); padding: 1rem; grid-template-columns: 1fr; gap: .6rem; }
  .project-product { min-height: 8.25rem; padding: .35rem 0; grid-template-columns: 4.75rem minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .project-product .project-visual { width: 4.75rem; height: 4.75rem; }
  .project-product .project-description { font-size: .8rem; }

  .clients { padding-block: 4.25rem; }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; padding: .35rem; }
  .logo-grid > * { height: 4.5rem; }
  .logo-grid img { width: 10rem; height: 3.2rem; }

  .about-link { padding-block: 3.25rem; }
  .about-link strong { font-size: 2rem; }
  .about-link small { padding-right: 2rem; }
  .about-lede { font-size: 2rem; }
  .contact h2 { font-size: 1.875rem; }
  .social-row { gap: 1.25rem; }

  .graveyard-hero h1 { font-size: 3.25rem; }
  .grave-item { margin-inline: -.5rem; padding: .9rem .5rem; grid-template-columns: 1.25rem 5.75rem minmax(0, 1fr); gap: .65rem .8rem; }
  .grave-meta h2 { font-size: 1.35rem; }
  .gallery-dialog { width: calc(100% - .75rem); max-height: calc(100dvh - .75rem); }
  .gallery-shell { padding-inline: .85rem; }
  .gallery-shell > header { padding-block: 1rem; }
}

@media (hover: none) {
  .logo-grid img { opacity: 1; }
  .grave-item:hover { background: transparent; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .has-js .scroll-reveal:not(.is-visible) { opacity: 1; transform: none; }
  .wordmark-name { width: 5.3rem; }
  .wordmark-collapse { width: 0; }
}