/* ==========================================================================
   Sections below the hero
   ========================================================================== */

/* ---------- Fixed top bar ---------- */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero { padding-top: var(--bar-h); }
section[id], header[id] { scroll-margin-top: var(--bar-h); }
.jp--s { font-size: 12px; }

/* ---------- Shared: section shell, section head, lead, ghost word ---------- */
.sec {
  position: relative;
  padding-block: clamp(84px, 11vw, 150px);
  overflow: hidden;
}
.sec > .wrap { position: relative; z-index: 1; }

.shead {
  display: flex;
  align-items: center;
  gap: 18px;
}
.shead__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.shead__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}

.lead {
  font-family: var(--f-display);
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lead em, .about__lead em, .contact__big em { font-style: normal; color: var(--red); }

.ghost {
  position: absolute;
  z-index: 0;
  left: -2vw;
  top: clamp(20px, 3vw, 44px);
  font-family: var(--f-display);
  font-size: clamp(120px, 21vw, 330px);
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(35, 31, 32, 0.13);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.ghost--dark { -webkit-text-stroke-color: rgba(241, 236, 228, 0.1); top: auto; bottom: -3vw; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border-block: 1px solid var(--ink);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex;
  align-items: center;
  padding-block: 15px;
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track i {
  width: 9px;
  height: 9px;
  margin-inline: clamp(18px, 2.4vw, 34px);
  border-radius: 50%;
  background: var(--red);
}
@keyframes marquee { to { transform: translateX(-25%); } }

/* ==========================================================================
   01 Style range
   ========================================================================== */
.styles {
  --ph: clamp(360px, calc(100svh - 388px), 620px);
  position: relative;
  background: var(--paper);
}
.styles__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding-block: calc(var(--bar-h) + 22px) 22px;
  overflow: hidden;
}
.styles__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px clamp(24px, 5vw, 90px);
  align-items: end;
  margin-top: 22px;
}
.styles__text { max-width: 46ch; color: var(--ink); }

.styles__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
.styles__viewport::-webkit-scrollbar { display: none; }
.styles__viewport.is-pinned { overflow: hidden; scroll-snap-type: none; }
.styles__track {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  padding-block: 8px 30px;
  will-change: transform;
}
.pcard { display: grid; gap: 12px; scroll-snap-align: center; }
.pcard__meta { display: flex; align-items: baseline; gap: 12px; }
.pcard__meta .num { color: var(--red-text); }
.pcard__meta .jp { margin-left: auto; }
.pcard .poster { height: var(--ph); width: calc(var(--ph) * 0.75); }

.styles__foot { display: flex; align-items: center; gap: 22px; }
.styles__count b { font-weight: 500; color: var(--red-text); }
.styles__bar { flex: 1 1 auto; height: 1px; background: var(--line-soft); position: relative; }
.styles__bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--red); transform: scaleX(0.125); transform-origin: 0 50%; }

/* ==========================================================================
   02 Selected work
   ========================================================================== */
.work__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px clamp(24px, 5vw, 90px);
  align-items: end;
  margin-top: clamp(28px, 4vw, 52px);
}
.work__text { max-width: 46ch; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(36px, 5vw, 64px);
}
.slot { display: grid; gap: 14px; align-content: start; }
.slot--a { grid-column: span 7; grid-row: span 2; }
.slot--b, .slot--c { grid-column: span 5; }
.slot__frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  height: 100%;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(35, 31, 32, 0.07) 13px 14px),
    var(--cream);
  overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.4s var(--ease);
}
.slot--a .slot__frame { aspect-ratio: 7 / 5.6; }
.slot--b .slot__frame, .slot--c .slot__frame { aspect-ratio: 5 / 2.6; }
.slot:hover .slot__frame { transform: translateY(-3px); border-color: var(--red); }
.slot__num {
  position: absolute;
  left: 22px;
  top: 14px;
  font-family: var(--f-display);
  font-size: clamp(54px, 7vw, 104px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--red);
}
.slot__note { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--grey); }
.slot__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.slot__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; text-transform: uppercase; }
.slot__row .label { color: var(--red-text); white-space: nowrap; }

/* ==========================================================================
   03 What I do
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(40px, 6vw, 84px);
}
.svc {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--cream);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -26px rgba(35, 31, 32, 0.6); }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--red);
  border-radius: 12px;
  color: var(--red);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.svc__icon svg { width: 30px; height: 30px; }
.svc:hover .svc__icon { background: var(--red); color: var(--cream); }
.svc__num { color: var(--red-text); }
.svc__title { margin-top: 30px; font-family: var(--f-display); font-weight: 400; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.1; text-transform: uppercase; }
.svc__text { margin-top: 12px; margin-bottom: 26px; font-size: 16px; line-height: 1.5; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.svc__tags li { padding: 5px 11px; border: 1px solid var(--red); border-radius: 999px; color: var(--red-text); font-size: 11px; }

/* ==========================================================================
   04 About
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.62fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 70px);
}
.about__age { position: relative; }
.about__est { position: absolute; right: 4%; top: 6%; background: var(--paper); z-index: 1; }
.about__num {
  display: flex;
  align-items: flex-end;
  font-family: var(--f-display);
  font-size: clamp(170px, 24vw, 380px);
  line-height: 0.76;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.about__num i { width: 0.17em; height: 0.17em; margin-left: 0.03em; background: var(--red); }
.about__years { margin-top: 20px; font-family: var(--f-display); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); }
.about__lead { font-family: var(--f-display); font-size: clamp(22px, 2.15vw, 31px); line-height: 1.16; text-wrap: balance; }
.about__text { margin-top: 24px; display: grid; gap: 14px; font-size: 16.5px; line-height: 1.6; }

.facts { margin: 0; padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--line); }
.facts__head { margin-bottom: 14px; }
.facts > div:not(.facts__head) { padding-block: 11px; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.facts dd { margin: 3px 0 0; font-family: var(--f-display); font-size: 14.5px; letter-spacing: 0.03em; line-height: 1.3; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 90px);
  background: var(--ink);
  color: var(--cream);
}
.stats__cell { position: relative; padding: clamp(22px, 2.6vw, 38px); }
.stats__cell + .stats__cell { border-left: 1px solid rgba(241, 236, 228, 0.16); }
.stats__idx { position: absolute; right: 20px; top: 16px; color: #a9a39b; }
.stats__num { font-family: var(--f-display); font-size: clamp(44px, 5.4vw, 78px); line-height: 1; letter-spacing: -0.02em; }
.stats__num b { font-weight: 400; color: #e0604f; }
.stats__lbl { margin-top: 14px; color: #a9a39b; }

.kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  margin-top: clamp(48px, 6vw, 84px);
}
.kit__h { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-family: var(--f-display); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; }
.tools li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.tools i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  transition: background-color 0.35s var(--ease);
}
.tools li:hover { background: var(--ink); color: var(--cream); }
.tools li:hover i { background: var(--red); }
.langs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 86px;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.langs li > span:first-child { font-family: var(--f-display); font-size: 20px; line-height: 1.1; }
.langs .label { color: var(--red-text); }
.dots {
  --n: 5;
  position: relative;
  width: 86px;
  height: 12px;
  background: radial-gradient(circle at 6px 6px, transparent 0 4.5px, var(--ink) 4.6px 5.5px, transparent 5.6px) 0 0 / 18.5px 12px repeat-x;
}
.dots::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--n) * 18.5px - 6px);
  background: radial-gradient(circle at 6px 6px, var(--red) 0 5.5px, transparent 5.6px) 0 0 / 18.5px 12px repeat-x;
}
.dots[data-level="4"] { --n: 4; }
.dots[data-level="3"] { --n: 3; }
.dots[data-level="2"] { --n: 2; }
.dots[data-level="1"] { --n: 1; }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
  padding-block: clamp(100px, 14vw, 200px);
}
.manifesto__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.36fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
.manifesto__label { display: block; margin-bottom: 26px; color: #e0604f; }
.manifesto__quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.manifesto__quote em { font-style: normal; color: #d0493a; }
.manifesto__card {
  display: grid;
  gap: 16px;
  padding: 26px;
  border: 1px solid rgba(208, 73, 58, 0.7);
  border-radius: 16px;
  background: rgba(5, 6, 9, 0.5);
  backdrop-filter: blur(6px);
}
.manifesto__card .jp { color: #e0604f; }
.manifesto__card p { font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.18; }
.manifesto__card .label { color: #a9a39b; }
.manifesto__glow {
  position: absolute;
  z-index: 0;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.34;
  pointer-events: none;
  will-change: transform;
}
.manifesto__glow--a { left: -12vw; top: -20vw; background: radial-gradient(circle, #28f0b4, transparent 66%); animation: glow 16s ease-in-out infinite alternate; }
.manifesto__glow--b { right: -14vw; bottom: -24vw; background: radial-gradient(circle, #ba3b2d, transparent 66%); opacity: 0.4; animation: glow 20s ease-in-out infinite alternate-reverse; }
@keyframes glow { to { transform: translate(9vw, 6vw) scale(1.15); } }

/* ==========================================================================
   05 Contact
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 56px);
}
.contact__big {
  font-family: var(--f-display);
  font-size: clamp(62px, 9.4vw, 150px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.contact__text { max-width: 40ch; margin-block: 22px 28px; font-size: 18px; line-height: 1.45; color: var(--grey); }
.contact__list { border-top: 1px solid var(--ink); }
.contact__list li { border-bottom: 1px solid var(--line); }
.contact__list a, .contact__list div {
  position: relative;
  display: grid;
  grid-template-columns: 22px 110px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 22px 6px;
  transition: padding 0.45s var(--ease), background-color 0.45s var(--ease);
}
.contact__list a::before, .contact__list div::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--red); transition: transform 0.45s var(--ease); }
.contact__list b { font-family: var(--f-display); font-weight: 400; font-size: clamp(15px, 1.35vw, 19px); overflow-wrap: anywhere; }
.contact__list svg { width: 18px; height: 18px; transition: transform 0.45s var(--ease); }
.contact__list a:hover { padding-inline: 16px 6px; background: var(--cream); }
.contact__list a:hover::before { transform: scale(1.4); }
.contact__list a:hover svg { transform: translate(3px, -3px); color: var(--red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { padding-bottom: 44px; }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding-top: 30px;
  border-top: 1px solid var(--ink);
  margin-inline: auto;
}
.foot .wrap { padding-inline: var(--gutter); }
.foot__mark { display: flex; align-items: center; gap: 22px; }
.foot__code {
  width: 62px;
  height: 30px;
  background: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 6px, var(--red) 6px 7px, transparent 7px 11px, var(--red) 11px 14px, transparent 14px 17px);
}
.foot__line { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.foot__line b { font-weight: 400; color: var(--red-text); }
.foot__line i { font-style: normal; color: var(--green); }
.foot__copy { color: var(--grey); }

/* ==========================================================================
   Cursor
   ========================================================================== */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  display: none;
  place-items: center;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background-color 0.35s var(--ease), opacity 0.3s;
}
.cursor__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
.cursor.is-on { display: grid; }
.cursor.is-label { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: var(--ink); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(186, 59, 45, 0.25); }

/* ==========================================================================
   Motion: starting states (only when JS and motion are on)
   ========================================================================== */
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span { display: block; will-change: transform; }
html.js.motion [data-reveal],
html.js.motion [data-reveal-item],
html.js.motion [data-hero-item] { opacity: 0; }
html.js.motion [data-lines] { visibility: hidden; }
.w { display: inline-block; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .about__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; padding-left: 0; border-left: 0; }
  .facts__head { grid-column: 1 / -1; }
  .manifesto__in { grid-template-columns: 1fr; }
  .manifesto__card { max-width: 420px; }
}

@media (max-width: 900px) {
  .styles { --ph: clamp(380px, 112vw, 540px); }
  .styles__pin { min-height: 0; padding-block: clamp(70px, 10vw, 110px) 40px; }
  .styles__intro, .work__intro { grid-template-columns: 1fr; }
  .styles__hint { display: none; }
  .work__grid { grid-template-columns: 1fr; }
  .slot--a, .slot--b, .slot--c { grid-column: auto; grid-row: auto; }
  .slot--a .slot__frame, .slot--b .slot__frame, .slot--c .slot__frame { aspect-ratio: 16 / 10; }
  .services__grid { grid-template-columns: 1fr; }
  .svc__title { margin-top: 22px; }
  .contact__grid, .kit { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* Hero stacks: words first, then the portrait */
  .hero { min-height: 0; }
  .hero__stage { display: flex; flex-direction: column; }
  .hero__copy { order: 1; padding-top: 84px; }
  .hero__portrait { order: 2; }
  .hero__ghost { top: 58px; }
  .hero__title { font-size: clamp(76px, 22vw, 136px); }
  .about__grid { grid-template-columns: 1fr; }
  .about__num { font-size: clamp(170px, 46vw, 300px); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; }
  .stats__cell + .stats__cell { border-left: 0; border-top: 1px solid rgba(241, 236, 228, 0.16); }
  .ghost { font-size: 30vw; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .bar__sur { display: none; }
  .bar__nav { gap: 13px; font-size: 11px; letter-spacing: 0.1em; }
  .bar__nav a:nth-child(2) { display: inline-flex; }
  .shead { gap: 12px; }
  .shead .jp { font-size: 12px; }
  .facts { grid-template-columns: 1fr; }
  .contact__list a, .contact__list div { grid-template-columns: 18px minmax(0, 1fr) 18px; padding-block: 16px; }
  .contact__list .label { grid-column: 2; }
  .contact__list b { grid-column: 2; grid-row: 2; }
  .contact__list a svg { grid-column: 3; grid-row: 1 / span 2; }
  .langs li { grid-template-columns: minmax(0, 1fr) 86px; }
  .langs .label { grid-column: 1; grid-row: 2; }
  .langs .dots { grid-row: 1 / span 2; grid-column: 2; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .manifesto__glow { animation: none; }
}

/* Split words keep the accent colour */
.w--em { color: var(--red); }
.manifesto .w--em { color: #d0493a; }

/* Style range header stays compact so the posters fit one screen */
@media (min-width: 901px) {
  .styles .lead { font-size: clamp(26px, 3vw, 44px); white-space: nowrap; }
  .styles__intro { align-items: center; margin-top: 18px; }
}

/* ---------- Fixes after the first browser pass ---------- */
.sec { padding-block: clamp(72px, 8.4vw, 120px); }
.about__num { font-size: clamp(160px, 21.5vw, 330px); }
.about__num i { flex: none; }
.contact__list b { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.foot__in { position: relative; border-top: 0; }
.foot__in::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--ink); }

/* Section heads never wrap their small parts */
.shead .label, .shead .jp { flex: none; white-space: nowrap; }
.shead__rule { min-width: 14px; }
@media (max-width: 520px) {
  .shead__title { font-size: 22px; }
}

/* ---------- Best-practice pass ---------- */
html { color-scheme: light; scroll-padding-top: calc(var(--bar-h) + 16px); scrollbar-color: var(--ink) var(--paper); }
a, button, .pcard, .slot, .svc { touch-action: manipulation; -webkit-tap-highlight-color: rgba(186, 59, 45, 0.18); }
.about__num { letter-spacing: -0.04em; }
.shead__title, .slot__title, .svc__title, .about__lead, .contact__big { text-wrap: balance; }
.stats__num, .facts dd, .styles__count { font-variant-numeric: tabular-nums; }
/* Poster loops rest while their poster is off screen */
html.js .poster:not(.is-live) *,
html.js .poster:not(.is-live) *::before,
html.js .poster:not(.is-live) *::after { animation-play-state: paused !important; }

/* ==========================================================================
   Brand pass (after the Brand Guardian review)
   ========================================================================== */
:root {
  --r-card: 16px;
  --r-chip: 10px;
  --red-on-dark: #d0493a;
  --red-on-dark-text: #e0604f;
  --muted-on-dark: #a9a39b;
}

/* One radius and one hairline for cards */
.svc, .slot__frame, .styles-card, .manifesto__card { border-radius: var(--r-card); }
.styles-card { border-radius: var(--r-card) var(--r-card) 0 var(--r-card); }
.svc__icon { border-radius: var(--r-chip); }
.svc { border-color: var(--line); }
.about__est { border-radius: 3px; background: var(--cream); }

/* Flat like print: no soft shadows, no glass */
.svc:hover { box-shadow: none; border-color: var(--red); }
.styles-card { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.manifesto__card { background: var(--night); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--red-on-dark); }

/* On-dark colours from tokens */
.stats__num b, .manifesto__label, .manifesto__card .jp { color: var(--red-on-dark-text); }
.manifesto__quote em, .manifesto .w--em { color: var(--red-on-dark); }
.stats__idx, .stats__lbl, .manifesto__card .label { color: var(--muted-on-dark); }

/* Aurora glow drawn from the brand green, not the poster's neon */
.manifesto__glow--a { background: radial-gradient(circle, #5f9a78, transparent 66%); opacity: 0.3; }

/* Short descriptive copy in italic, as in the infographic */
.svc__text, .about__close, .kit__note { font-style: italic; }
.about__close { padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* Work: the solid red card and the new grid */
.code-card {
  grid-column: span 5;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  min-height: 340px;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--r-card);
  background: var(--red);
  color: var(--cream);
}
.code-card__idx { align-self: flex-end; }
.code-card__line { font-family: var(--f-display); font-size: clamp(26px, 2.9vw, 42px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; max-width: 13ch; }
.work__grid .slot--a { grid-column: span 7; grid-row: auto; }
.work__grid .slot--b, .work__grid .slot--c { grid-column: span 6; }
.work__grid .slot--a .slot__frame { aspect-ratio: auto; min-height: 290px; }
.work__grid .slot--b .slot__frame, .work__grid .slot--c .slot__frame { aspect-ratio: 6 / 2.4; }
.slot { grid-template-rows: 1fr auto; }

/* Stats note, small section heads, kit notes */
.stats__note { margin-top: 8px; font-size: 14px; font-style: italic; color: var(--muted-on-dark); }
.stats__num b { font-family: var(--f-body); font-weight: 700; }
.shead--s { gap: 14px; margin-bottom: 18px; }
.shead--s .shead__title { font-size: 20px; }
.kit__note { margin-bottom: 18px; color: var(--grey); }
.kit__foot { margin-top: 18px; color: var(--grey); display: flex; align-items: center; gap: 12px; }
.kit__foot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

@media (max-width: 900px) {
  .code-card, .work__grid .slot--a, .work__grid .slot--b, .work__grid .slot--c { grid-column: auto; }
  .code-card { min-height: 260px; }
  .work__grid .slot--a .slot__frame, .work__grid .slot--b .slot__frame, .work__grid .slot--c .slot__frame { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ==========================================================================
   Accessibility pass (after the Accessibility Auditor review)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }

/* Pause motion: stops every loop on the page */
html.paused *, html.paused *::before, html.paused *::after { animation-play-state: paused !important; }
.motion-toggle { display: inline-flex; align-items: center; min-height: 44px; }

/* Contrast */
.foot__line i { color: #3f5743; }
.about__lead em, .about__lead .w--em { color: var(--red-text); }

/* Gallery: visible scrollbar when it is a normal sideways scroller, focus ring inside the edge */
.styles__viewport:not(.is-pinned) { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.styles__viewport:not(.is-pinned)::-webkit-scrollbar { display: block; height: 6px; }
.styles__viewport:not(.is-pinned)::-webkit-scrollbar-thumb { background: var(--ink); }
.styles__viewport:focus-visible { outline-offset: -4px; }

/* Touch targets */
.bar__name { height: var(--bar-h); }
.hero__scroll, .foot__top { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 820px) {
  .motion-toggle { margin-left: auto; }
}

/* ==========================================================================
   Calmer pass: fewer parts on the page
   ========================================================================== */
.manifesto__in { grid-template-columns: minmax(0, 1fr); }
.manifesto__quote { max-width: 16ch; }
.kit { margin-top: clamp(56px, 7vw, 100px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--ink); }

/* Work slot that opens a project: the whole card is the link */
.slot { position: relative; }
.slot__link::after { content: ""; position: absolute; inset: 0; }
.slot__link:hover { color: var(--red-text); }

/* ==========================================================================
   Performance pass: no full-screen blend layers, no live blurs
   ========================================================================== */
/* Paper grain is part of the page background now, not a blended layer on top */
body::after { content: none; }
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.12 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Solid bar: a blurred fixed bar repaints on every scroll frame */
.bar { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Manifesto glows: plain soft gradients, no blur filter, no endless animation */
.manifesto__glow { filter: none; animation: none; will-change: auto; opacity: 0.22; width: 70vw; height: 70vw; }
.manifesto__glow--a { left: -26vw; top: -34vw; background: radial-gradient(circle, #5f9a78 0%, rgba(95, 154, 120, 0.35) 34%, transparent 68%); }
.manifesto__glow--b { right: -28vw; bottom: -38vw; opacity: 0.3; background: radial-gradient(circle, #ba3b2d 0%, rgba(186, 59, 45, 0.35) 34%, transparent 68%); }
/* Only promote layers that really move */
.ghost { will-change: auto; }
.ln > span { will-change: auto; }
.cursor { transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), background-color 0.3s var(--ease); }