:root {
  --paper: #deddd8;
  --ink: #151718;
  --panel: #d2d1cc;
  --accent: #123ee8;
  --gold: #9ca1a2;
  --soft: #c7c7c2;
  --white: #f2f2ef;
  --black: #111314;
  --gutter: clamp(16px, 1.55vw, 28px);
  --radius: 3px;
  --sans: "Archivo", Arial, Helvetica, sans-serif;
  --display: "Bowlby One SC", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 61%, rgba(24,26,27,.06) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(24,26,27,.045) 50%, transparent calc(50% + .5px));
  background-size: 23px 29px, 31px 37px, 50vw 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.05;
  text-rendering: geometricPrecision;
}
body.is-work-page { overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.screen-reader-text:focus {
  z-index: 9999;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 14px;
  color: var(--white);
  background: var(--black);
}

.section-pad { padding-inline: var(--gutter); }

.site-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 14px var(--gutter);
}
.site-brand { display: none; font-weight: 700; }
.site-brand img { max-height: 36px; width: auto; }
.capsule-nav__list,
.social-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.capsule-nav a {
  display: block;
  padding: 7px 0 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.capsule-nav a:hover,
.capsule-nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
  background: transparent;
  transform: none;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(520px, 1.05fr);
  gap: clamp(32px, 8vw, 160px);
  align-items: start;
  padding-top: 26px;
}
.home-hero__intro {
  max-width: 470px;
  margin: 0;
  max-width: 380px;
  font-size: clamp(1.15rem, 1.6vw, 1.65rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.pill-stage {
  position: relative;
  height: min(34vw, 420px);
  min-height: 310px;
  overflow: hidden;
  border: 0;
  border-radius: clamp(24px, 2.6vw, 42px);
  color: var(--ink);
  background-color: #dedbd3;
  background-image:
    linear-gradient(145deg, rgba(24,26,27,.055), rgba(255,255,255,.08) 43%, rgba(24,26,27,.035)),
    url("../images/light-architectural-concrete.jpg");
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 18px 20px 28px rgba(30,32,33,.17),
    inset -15px -17px 24px rgba(255,255,255,.52),
    inset 0 0 0 1px rgba(24,26,27,.05),
    0 1px 0 rgba(255,255,255,.58);
  touch-action: none;
}
.pill-stage__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2px;
  margin: 0;
  font-family: var(--display);
  color: var(--gold);
  font-size: clamp(2.5rem, 4.3vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .85;
  transform: translateX(-50%);
  pointer-events: none;
}
.service-pill {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: clamp(118px, 12vw, 190px);
  min-height: clamp(42px, 4.2vw, 62px);
  padding: 9px 20px;
  border: 1px solid rgba(182, 66, 46, .22);
  border-radius: 999px;
  color: var(--accent);
  background: var(--white);
  font-size: clamp(.82rem, 1.35vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  will-change: transform;
  transform-origin: center;
}
.service-pill:active { cursor: grabbing; }
.service-pill:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

.material-stage .pill-stage__title { display: none; }
.material-sample {
  min-width: 0;
  width: clamp(145px, 13.2vw, 194px);
  min-height: clamp(72px, 6.7vw, 100px);
  padding: 16px 18px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 52% 48% 58% 42% / 45% 58% 42% 55%;
  color: var(--ink);
  font-size: clamp(.58rem, .72vw, .72rem);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  box-shadow: 0 14px 24px rgba(24,26,27,.2);
  transition: border-radius .22s ease, box-shadow .22s ease, filter .22s ease;
}
.material-sample:hover,
.material-sample:focus-visible { filter: saturate(1.08) brightness(1.035); }
.material-sample.is-pressed { filter: saturate(1.12) brightness(1.05); }
.material-sample::before,
.material-sample::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.material-sample::before {
  inset: 6% 8% 48% 14%;
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,255,255,.04));
  filter: blur(1.5px);
  opacity: .8;
}
.material-sample::after {
  right: 9%;
  bottom: 9%;
  width: 25%;
  height: 13%;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  filter: blur(5px);
}
.material-sample__label { position: relative; z-index: 2; pointer-events: none; }
.material-sample--shape-a { border-radius: 62% 38% 57% 43% / 45% 64% 36% 55%; }
.material-sample--shape-b { border-radius: 41% 59% 36% 64% / 58% 39% 61% 42%; }
.material-sample--shape-c { border-radius: 70% 30% 64% 36% / 36% 62% 38% 64%; }
.material-sample--shape-d { border-radius: 32% 68% 43% 57% / 65% 37% 63% 35%; }
.material-sample--shape-e { border-radius: 67% 33% 38% 62% / 52% 68% 32% 48%; }
.material-sample--shape-f { border-radius: 38% 62% 66% 34% / 42% 35% 65% 58%; }
.material-sample--clear {
  border: 1px solid rgba(255,255,255,.88);
  background:
    radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.74), transparent 36%),
    linear-gradient(135deg, rgba(246,252,255,.52), rgba(123,145,153,.19) 51%, rgba(255,255,255,.42));
  box-shadow: inset 0 -8px 15px rgba(75,98,106,.2), inset 0 3px 12px rgba(255,255,255,.75), 0 6px 1px rgba(70,88,94,.22), 0 16px 24px rgba(24,26,27,.17);
  backdrop-filter: blur(7px) saturate(1.25);
}
.material-sample--frost {
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(142deg, rgba(255,255,255,.9), rgba(206,209,210,.64) 52%, rgba(245,245,242,.76));
  box-shadow: inset 8px 10px 18px rgba(255,255,255,.62), inset -9px -9px 15px rgba(105,110,112,.18), 0 15px 23px rgba(24,26,27,.18);
}
.material-sample--chrome,
.material-sample--chrome-dark {
  border: 1px solid #737779;
  background:
    radial-gradient(ellipse at 26% 20%, #fff 0 4%, transparent 18%),
    linear-gradient(112deg, #3b3e40 2%, #f8f8f6 17%, #737779 34%, #f5f5f2 48%, #232628 64%, #d9dcdd 78%, #55595b 96%);
  box-shadow: inset 0 0 10px rgba(255,255,255,.62), inset 0 -8px 13px rgba(5,8,10,.36), 0 15px 24px rgba(24,26,27,.27);
}
.material-sample--chrome-dark {
  color: #f5f5f2;
  background:
    radial-gradient(ellipse at 27% 18%, #fff 0 3%, transparent 16%),
    linear-gradient(118deg, #111416, #cfd1d0 21%, #25282a 38%, #f6f6f3 53%, #151719 68%, #8e9394 84%, #202325);
}
.material-sample--cobalt {
  color: #fff;
  border: 1px solid rgba(128,158,255,.9);
  background:
    radial-gradient(ellipse at 24% 18%, rgba(255,255,255,.95) 0 3%, rgba(118,165,255,.64) 4% 16%, transparent 29%),
    linear-gradient(135deg, #071b73, #154dff 42%, #071b73 72%, #3a71ff);
  box-shadow: inset 0 -11px 16px rgba(0,7,46,.58), inset 0 5px 13px rgba(145,186,255,.54), 0 6px 1px rgba(5,21,103,.7), 0 17px 26px rgba(9,31,129,.33);
}

.wordmark {
  overflow: hidden;
  padding-top: clamp(54px, 5vw, 84px);
  padding-bottom: clamp(48px, 5vw, 76px);
  font-family: var(--display);
  width: 100%;
  font-size: clamp(2.8rem, 10.4vw, 12.8rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .82;
  white-space: nowrap;
}
.wordmark [data-fit-wordmark] {
  display: inline-block;
  transform-origin: left center;
  will-change: transform;
}

.projects-section,
.about-section,
.experience-section { padding-top: clamp(70px, 10vw, 150px); padding-bottom: clamp(70px, 10vw, 150px); }
.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 760px);
  margin: 0 0 42px;
  font-family: var(--display);
}
.section-heading::after,
.section-heading--right::before {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 1.05s cubic-bezier(.2,.75,.2,1);
}
.section-heading::after { transform-origin: left center; }
.section-heading--right::before { transform-origin: right center; }
.section-heading.is-drawn::after,
.section-heading--right.is-drawn::before { transform: scaleX(1); }
.section-heading--right { margin-left: auto; }
.section-heading--right::after { content: none; }
.section-heading h1,
.section-heading h2 {
  margin: 0;
  font: inherit;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400;
  white-space: nowrap;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  width: 100%;
}
.project-card { display: block; min-width: 0; }
.project-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.32;
  background: #ddd;
}
.project-card__media img,
.project-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.75,.25,1);
}
.project-card:hover .project-card__media img,
.project-card:hover .project-art { transform: scale(1.025); }
.project-card__caption {
  position: relative;
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding-top: 13px;
  font-size: .84rem;
}
.project-card__caption::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .95s cubic-bezier(.2,.75,.2,1) var(--draw-delay, 0ms);
}
.project-card.is-drawn .project-card__caption::before { transform: scaleX(1); }
.project-card__caption strong { font-weight: 400; }
.projects-section .section-heading { width: 100%; }
.projects-section::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: clamp(46px, 6vw, 90px);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.25s cubic-bezier(.2,.75,.2,1) .16s;
}
.projects-section.is-drawn::after { transform: scaleX(1); }
.view-all { width: 100%; margin: 30px 0 0; text-align: right; }
.view-all a { border-bottom: 1px solid currentColor; }

.contexts-strip {
  overflow: hidden;
  padding: 18px 0 16px;
  color: var(--white);
  background: var(--accent);
}
.contexts-strip__track {
  display: flex;
  width: max-content;
  gap: clamp(38px, 7vw, 120px);
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 5.6rem);
  letter-spacing: -.02em;
  white-space: nowrap;
  animation: contexts-marquee 28s linear infinite;
}
@keyframes contexts-marquee { to { transform: translateX(-48%); } }

.project-art { display: block; background-color: #ddd; }
.art-a { background: radial-gradient(circle at 62% 38%, #ffca83 0 8%, transparent 9%), conic-gradient(from 40deg at 55% 55%, #aacdd1, #f08771, #f5d6a0, #8cb3c0, #d65d48, #aacdd1); filter: saturate(.8); }
.art-b { background: linear-gradient(108deg, #f3f0ea 0 22%, transparent 22%), radial-gradient(ellipse at 55% 45%, #111 0 9%, transparent 10%), linear-gradient(145deg, #fff 0 38%, #e1e1de 38% 52%, #161616 52% 72%, #fafafa 72%); }
.art-c { background: linear-gradient(90deg, #ee5d55 0 20%, #78a9cb 20% 42%, #f8c846 42% 63%, #111 63% 67%, #f2eee3 67%); }
.art-d { background: radial-gradient(ellipse at 60% 40%, #1d46ff, transparent 23%), radial-gradient(ellipse at 35% 65%, #ffb5ab, transparent 30%), linear-gradient(135deg, #ff5c43, #ead8bf 48%, #51abdd); }
.art-e { background: repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 2px, transparent 2px 7px), radial-gradient(circle, #ffe0b0, #ff5f3a 28%, #40208a 62%, #b8dbe0); }
.art-f { background: linear-gradient(125deg, #111 0 28%, #f5f3ee 28% 46%, #333 46% 49%, #fafafa 49% 73%, #111 73%); }
.art-g { background: radial-gradient(circle at 50% 50%, #111 0 5%, transparent 6%), repeating-radial-gradient(circle at 50% 50%, #111 0 1px, transparent 1px 8px), #f7f7f4; }
.art-h { background: linear-gradient(145deg, #efebe3, #b4b6b0 49%, #171717 50% 65%, #f7f7f4 66%); }
.art-i { background: radial-gradient(ellipse at 55% 35%, #191919 0 13%, transparent 14%), linear-gradient(110deg, #f5f5f2 0 34%, #232323 35% 52%, #dbd8d0 53% 77%, #0d0d0d 78%); }
.art-j { background: repeating-linear-gradient(45deg, #111 0 12px, #f5f5f2 12px 24px); }
.art-k { background: radial-gradient(ellipse at 40% 35%, #111 0 8%, transparent 9%), radial-gradient(ellipse at 65% 65%, #111 0 12%, transparent 13%), #f1eee7; }

.about-section__content {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(360px, 1fr);
  gap: clamp(40px, 8vw, 150px);
  width: min(100%, 1050px);
  margin-left: auto;
}
.about-section__copy {
  margin: 0;
  font-size: clamp(1.25rem, 2.15vw, 2.2rem);
  letter-spacing: -.04em;
}
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; }
.stats-grid div { display: flex; flex-direction: column; }
.stats-grid strong { font-size: clamp(2.6rem, 5vw, 5.3rem); font-weight: 400; letter-spacing: -.07em; }
.stats-grid span { font-size: .72rem; text-transform: uppercase; }

.experience-list { width: min(100%, 760px); margin-left: auto; }
.experience-list > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0 10px;
  border-bottom: 1px solid currentColor;
}

.site-footer {
  min-height: 610px;
  padding: clamp(28px, 4vw, 64px) var(--gutter) 18px;
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, .75fr) auto;
  gap: 50px;
}
.site-footer__statement { max-width: 520px; margin: 0; font-size: clamp(1.35rem, 2.2vw, 2.2rem); letter-spacing: -.04em; }
.site-footer__contact p { margin: 0 0 18px; }
.site-footer__contact a { border-bottom: 1px solid currentColor; font-size: clamp(1.2rem, 2vw, 2rem); }
.social-nav__list a { display: block; padding: 7px 11px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; }
.site-footer__name {
  margin-top: clamp(100px, 14vw, 190px);
  font-family: var(--display);
  font-weight: 400;
  width: 85%;
  font-size: clamp(2.55rem, 9.55vw, 11.7rem);
  letter-spacing: -.07em;
  line-height: .76;
  white-space: nowrap;
  transform: scaleX(1.16);
  transform-origin: left center;
}
.site-footer__meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; font-size: .8rem; }

/* Calderr-inspired Work index. */
.work-index { padding-bottom: clamp(90px, 12vw, 180px); }
.clients-cloud {
  position: relative;
  min-height: min(58vw, 690px);
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  background: var(--black);
}
.clients-cloud h1 {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 50%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -.025em;
  line-height: .72;
  transform: translateX(-50%);
}
.clients-cloud__pills span {
  position: absolute;
  z-index: 2;
  top: calc(10% + (var(--i) % 4) * 18%);
  left: calc(3% + (var(--i) % 5) * 19%);
  padding: clamp(12px, 1.6vw, 24px) clamp(18px, 3vw, 46px);
  border-radius: 999px;
  color: var(--accent);
  background: var(--white);
  font-size: clamp(.85rem, 1.75vw, 1.8rem);
  transform: rotate(calc((var(--i) - 4) * 3deg));
  white-space: nowrap;
}
.recent-work { padding-top: clamp(100px, 14vw, 210px); }
.work-title-row {
  display: grid;
  grid-template-columns: 1fr minmax(240px, .45fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 58px;
}
.work-title-row h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 13vw, 13rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .72;
}
.work-title-row p { max-width: 360px; margin: 0 0 8px; font-size: 1.05rem; }
.project-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.project-filters button {
  padding: 8px 14px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.project-filters button:hover,
.project-filters button:focus-visible,
.project-filters button.is-active { color: var(--white); background: var(--accent); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 16px; }
.work-grid [data-project-card].is-hidden { display: none; }

/* A large pannable archive canvas, echoing Calderr's archive interaction. */
.archive-explorer {
  position: relative;
  height: calc(100svh - 70px);
  min-height: 620px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.archive-explorer.is-dragging { cursor: grabbing; }
.archive-explorer__hint { position: absolute; z-index: 20; right: var(--gutter); bottom: 16px; margin: 0; font-size: .72rem; }
.archive-explorer__viewport { position: absolute; inset: 0; overflow: hidden; }
.archive-explorer__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2200px;
  height: 1500px;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.archive-tile { position: absolute; top: var(--y); left: var(--x); width: 290px; transform: translate(-50%, -50%); }
.archive-tile--2 { width: 360px; }
.archive-tile--3 { width: 235px; }
.archive-tile--4 { width: 320px; }
.archive-tile__media { display: block; aspect-ratio: 1.25; overflow: hidden; background: #ddd; }
.archive-tile__media img,
.archive-tile__media .project-art { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.archive-tile:hover .archive-tile__media img,
.archive-tile:hover .project-art { transform: scale(1.035); }
.archive-tile__caption { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; font-size: .72rem; }
.archive-tile__caption strong { font-weight: 400; }

.content-main,
.project-single { min-height: 70vh; padding-top: clamp(60px, 10vw, 140px); padding-bottom: clamp(80px, 12vw, 170px); }
.content-title,
.content-header h1,
.project-single__header h1 { margin: 0 0 50px; font-family: var(--display); font-size: clamp(4rem, 12vw, 12rem); font-weight: 400; letter-spacing: -.07em; line-height: .78; }
.entry-content,
.post-list { width: min(100%, 760px); margin: 0 auto; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.35; }
.entry-content > * { max-width: 100%; }
.post-list__item { padding: 25px 0; border-bottom: 1px solid currentColor; }
.post-list__item h2 { margin: 0 0 10px; font-size: 2rem; }
.project-single__hero { margin: 0 0 60px; }
.project-single__hero img { width: 100%; max-height: 84svh; object-fit: cover; }

/* WooCommerce base alignment; detailed store styling belongs to phase two. */
.woocommerce main,
.woocommerce-page main { padding-inline: var(--gutter); }
.woocommerce ul.products li.product a img { border-radius: 0; }
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button { border-radius: 999px; color: var(--white); background: var(--ink); }

@media (max-width: 900px) {
  .site-header { min-height: 62px; }
  .home-hero { grid-template-columns: 1fr; gap: 44px; }
  .home-hero__intro { max-width: 620px; }
  .pill-stage { height: 57vw; min-height: 330px; }
  .about-section__content { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .social-nav { grid-column: 1 / -1; }
  .work-title-row { grid-template-columns: 1fr; }
  .archive-explorer__canvas { width: 1700px; height: 1250px; }
}

@media (max-width: 620px) {
  :root { --gutter: 14px; }
  .capsule-nav__list { gap: 5px; }
  .capsule-nav a { padding: 7px 10px 6px; font-size: .88rem; }
  .home-hero { padding-top: 18px; }
  .home-hero__intro { font-size: 1.45rem; }
  .pill-stage { height: 76vw; min-height: 290px; }
  .service-pill { min-width: 108px; min-height: 40px; padding: 8px 14px; font-size: .82rem; }
  .material-sample {
    min-width: 0;
    width: 100px;
    min-height: 62px;
    padding: 10px 8px;
    font-size: .48rem;
    letter-spacing: .055em;
  }
  .pill-stage__title { font-size: 2.55rem; }
  .wordmark { width: 100%; padding-top: 62px; font-size: 10.2vw; letter-spacing: -.085em; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card__caption { font-size: .76rem; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h1,
  .section-heading h2 { font-size: 1.75rem; }
  .stats-grid { gap: 24px 18px; }
  .stats-grid strong { font-size: 2.7rem; }
  .experience-list > div { font-size: .85rem; }
  .site-footer { min-height: 530px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 42px; }
  .social-nav { grid-column: auto; }
  .site-footer__name { width: 87%; margin-top: 80px; font-size: 9.4vw; transform: scaleX(1.13); }
  .site-footer__meta { font-size: .7rem; }
  .clients-cloud { min-height: 110vw; }
  .clients-cloud__pills span { top: calc(9% + (var(--i) % 4) * 20%); left: calc(4% + (var(--i) % 3) * 29%); }
  .work-grid { grid-template-columns: 1fr; gap: 40px; }
  .archive-explorer { min-height: 560px; }
  .archive-explorer__canvas { width: 1320px; height: 1040px; }
  .archive-tile { width: 210px; }
  .archive-tile--2 { width: 250px; }
  .archive-tile--3 { width: 180px; }
  .archive-tile--4 { width: 225px; }
}

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