/* =========================================================
   RASMUS GALI PORTFOLIO
   Clean shared stylesheet
   ========================================================= */

:root {
  --charcoal: #3D3D3D;
  --paper: #f7f7f3;
  --accent: #e6c72c;
  --gold: #7C6100;
  --muted: #77766f;

  --tag-bg: #ffe999;
  --tag-border: #7c6100;
  --tag-text: #7c6100;

  --font-display: "Koulen", sans-serif;
  --font-body: "Noto Sans", sans-serif;

  --page-width: 1152px;
  --journal-width: 1184px;
  --page-pad: 20px;

  /* Shared layout tokens */
  --nav-width: 760px;
  --nav-height: 72px;
  --nav-top: 16px;
  --nav-radius: 999px;
}

/* ---------- Reset / global ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
}

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

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

::selection {
  background: var(--accent);
  color: var(--charcoal);
}

::-moz-selection {
  background: var(--accent);
  color: var(--charcoal);
}

.outline-word {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  paint-order: stroke fill;
}

.outline-word--dark {
  -webkit-text-stroke-color: var(--charcoal);
}

/* ---------- Shared site header ---------- */

.site-header {
  position: fixed;
  z-index: 1000;
  top: var(--nav-top);
  left: 50%;
  width: min(var(--nav-width), calc(100% - 32px));
  height: var(--nav-height);
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;

  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--nav-radius);
  background: rgba(215, 215, 211, .72);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.site-header__brand {
  width: 40px;
  height: 40px;
}

.site-header__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition: opacity .18s ease;
}

.site-nav a:hover {
  opacity: .55;
}

/* ---------- Shared section heading ---------- */

.section-heading h2,
.journal__title-wrap h2,
.footer h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
}

.section-heading h2::after,
.journal__title-wrap h2::after,
.footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: min(297px, 100%);
  height: 7px;
  background: url("assets/line.svg") left center / 100% 7px no-repeat;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .36s cubic-bezier(.22, .78, .28, 1);
}

.section-heading h2.is-underlined::after,
.journal__title-wrap h2.is-underlined::after,
.footer h2.is-underlined::after {
  transform: scaleX(1);
}

.footer h2::after {
  filter: invert(1);
}

/* =========================================================
   LANDING PAGE
   ========================================================= */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--paper);
  color: white;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 96px;
  background: url("assets/hero-wave.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.hero-sketch {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

.hero__inner {
  position: relative;
  z-index: 4;
  width: min(var(--page-width), calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 150px 0 110px;

  display: grid;
  grid-template-columns: 760px 1fr;
  gap: 64px;
  align-items: center;
}

.hero__copy {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.hero__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 18px;

  font-family: var(--font-display);
  font-size: 128px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: 0;
}

.hero__gali {
  position: relative;
  display: inline-block;
}

.hero__gali-outline {
  color: transparent;
  -webkit-text-stroke: 2px white;
}

/* Hero text sequence */

.hero-reveal {
  opacity: 0;
}

.hero-reveal--eyebrow {
  transform: translateY(10px);
  animation: hero-eyebrow-in .42s ease-out 1.55s forwards;
}

.hero-reveal--rasmus {
  display: inline-block;
  transform: translateY(18px);
  animation: hero-rasmus-in .5s cubic-bezier(.2, .8, .2, 1) 1.95s forwards;
}

.hero-reveal--gali {
  display: inline-block;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: hero-gali-draw .95s cubic-bezier(.28, .08, .18, 1) 2.35s forwards;
}

.hero-reveal--sticker {
  opacity: 0;
  transform-origin: left center;
  transform: translateX(90px) rotate(-26deg) rotateY(72deg) scale(.92);
  animation: hero-sticker-stick 1s cubic-bezier(.2, .74, .22, 1) 3.18s forwards;
  perspective: 600px;
}

@keyframes hero-eyebrow-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-rasmus-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-gali-draw {
  to { clip-path: inset(0 0 0 0); }
}

/* Hero Buddy */

.hero__aside {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.buddy-scene {
  position: relative;
}

.buddy-light-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.buddy-stage {
  position: relative;
  width: 225px;
  aspect-ratio: 1;
  isolation: isolate;
}

.buddy-spotlight {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 122%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;

  opacity: 0;
  transform: translate(-50%, -50%) scale(.78);
  transition:
    opacity .22s ease,
    transform .38s cubic-bezier(.2, .8, .2, 1);
}

.buddy-light-toggle:checked + .buddy-stage .buddy-spotlight {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.buddy-object {
  display: block;
  border: 0;
  pointer-events: none;
}

.buddy-object--hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%);
}

.buddy-caption {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5%;
  width: 100%;
  margin: 0;

  transform: translateX(-50%);
  color: var(--charcoal);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}

.buddy-button {
  display: grid;
  width: 42px;
  height: 22px;
  place-items: center;

  border: 0;
  background: var(--accent);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;

  transform: rotate(-2deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.buddy-button:hover {
  transform: rotate(3deg) translateY(-2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .16);
}

/* ---------- Work / personal ---------- */

.section {
  width: min(var(--page-width), calc(100% - 40px));
  margin-inline: auto;
}

.section--work {
  position: relative;
  padding-top: 128px;
}

.section--personal {
  position: relative;
  margin-top: 256px;
}

.section-heading {
  margin: 0;
}

.work-grid,
.personal-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 560px);
  column-gap: 32px;
  row-gap: 72px;
  align-items: start;
}

.section--work,
.section--personal {
  display: grid;
  grid-template-columns: repeat(2, 560px);
  column-gap: 32px;
  align-items: start;
}

.section--work > .section-heading,
.section--personal > .section-heading {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
}

.section--work > .work-grid,
.section--personal > .personal-grid {
  grid-column: 1 / -1;
  grid-row: 1;
}

.project--swipbox {
  grid-column: 2;
  grid-row: 1;
}

.project--danfoss {
  grid-column: 1;
  grid-row: 2;
}

.project--cup {
  grid-column: 2;
  grid-row: 2;
}

.personal-card:first-child {
  grid-column: 2;
  grid-row: 1;
}

.personal-card:last-child {
  grid-column: 2;
  grid-row: 2;
}

.project,
.personal-card {
  min-width: 0;
}

.project__visual,
.personal-card__visual {
  display: block;
  width: 560px;
  height: 330px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #9f9f9f;
}

.project__visual img,
.personal-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__meta {
  padding-top: 32px;
}

.project__meta h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.project__meta p {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  word-spacing: 8px;
}

.image-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

/* Pushing Buddy */

.work-grid {
  --push-offset: 150px;
}

.project--danfoss,
.project--cup,
.work-buddy {
  transform: translateX(var(--push-offset));
}

.work-buddy {
  position: absolute;
  z-index: 8;
  right: -200px;
  bottom: 92px;
  width: 200px;
  height: 200px;
  overflow: visible;
  will-change: transform;
}

.buddy-object--push {
  width: 200px;
  height: 200px;
}

.work-buddy.buddy-is-fleeing {
  animation: buddy-flee-right .78s cubic-bezier(.46, .04, .88, .42) forwards;
}

@keyframes buddy-flee-right {
  0% { transform: translateX(0) translateY(0); }
  7% { transform: translateX(-7px) translateY(2px); }
  100% { transform: translateX(calc(100vw + 220px)) translateY(-12px); }
}

/* ---------- Design Journal ---------- */

.journal {
  width: min(var(--journal-width), calc(100% - 40px));
  margin: 256px auto 0;
  padding-bottom: 96px;
}

.journal__top {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 64px;
  align-items: start;
  margin-bottom: 72px;
}

.journal__title-wrap {
  min-height: 0;
}

.journal__intro {
  width: 560px;
  margin: 0;
  padding-top: 12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
}

.journal-grid {
  position: relative;
  width: 100%;
  height: 798px;
}

.journal-tile {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  background: #b8b8b8;
  cursor: zoom-in;
  transition: transform .2s ease, opacity .2s ease;
}

.journal-tile:hover {
  transform: translateY(-3px);
  opacity: .92;
}

.journal-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-tile--1 { left: 0; top: 0; width: 286px; height: 383px; }
.journal-tile--2 { left: 318px; top: 0; width: 519px; height: 315px; }
.journal-tile--3 { left: 869px; top: 0; width: 315px; height: 315px; }
.journal-tile--4 { left: 0; top: 415px; width: 286px; height: 315px; }
.journal-tile--5 { left: 318px; top: 415px; width: 286px; height: 383px; }
.journal-tile--6 { left: 636px; top: 415px; width: 230px; height: 170px; }
.journal-tile--7 { left: 636px; top: 617px; width: 230px; height: 181px; }
.journal-tile--8 { left: 898px; top: 415px; width: 286px; height: 383px; }

/* Journal lightbox */

.journal-lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.journal-lightbox:target {
  display: flex;
}

.journal-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .84);
  backdrop-filter: blur(4px);
}

.journal-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  padding: 24px 64px;

  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 12px;
}

.journal-carousel-image {
  grid-column: 2;
  grid-row: 1;

  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.journal-carousel-image img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 180px);
  max-height: calc(100vh - 56px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}

.journal-carousel-image--placeholder {
  display: grid;
  width: min(1100px, 82vw);
  height: min(760px, 78vh);
  place-items: center;
  background: #9f9f9f;
  color: #555;
}

.journal-arrow,
.journal-lightbox__close {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--charcoal);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.journal-arrow {
  width: 48px;
  height: 48px;
  font-size: 22px;
}

.journal-arrow--left {
  grid-column: 1;
  grid-row: 1;
}

.journal-arrow--right {
  grid-column: 3;
  grid-row: 1;
}

.journal-lightbox__close {
  position: fixed;
  z-index: 5;
  top: 24px;
  right: 30px;
  width: 38px;
  height: 38px;
  font-size: 24px;
}

.journal-counter {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

/* =========================================================
   SHARED FOOTER
   ========================================================= */

.footer {
  position: relative;
  margin-top: 96px;
  padding: 120px 20px 48px;
  overflow: hidden;
  background: var(--charcoal);
  color: white;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 96px;
  background: url("assets/footer-wave.svg") center top / 100% 100% no-repeat;
}

.case-page .footer::before,
.error-page .footer::before {
  background-image: url("../assets/footer-wave.svg");
}

.error-page .footer::before {
  background-image: url("assets/footer-wave.svg");
}

.footer__inner {
  width: min(var(--page-width), 100%);
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 64px;
  align-items: end;
}

.footer h2 {
  margin-bottom: 48px;
}

.footer__copy > p {
  font-size: 14px;
}

.email-link {
  display: inline-block;
  border-bottom: 5px solid var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.copyright {
  margin-top: 24px;
  font-size: 11px !important;
  opacity: .7;
}

.footer__buddy {
  display: flex;
  min-height: 130px;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-coffee {
  width: 54px;
  margin-bottom: 8px;
}

.buddy-object--footer {
  width: 105px;
  height: 112px;
}

/* =========================================================
   CASE STUDIES
   ========================================================= */

.case-page,
.error-page {
  background: var(--paper);
}

.case-page main {
  padding-top: 0;
}

.error-page main {
  padding-top: calc(var(--nav-top) + var(--nav-height) + 64px);
}

.case-shell {
  width: min(var(--page-width), calc(100% - 40px));
  margin-inline: auto;
}

.case-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 64px;
  align-items: end;
  padding: 48px 0 32px;
}

.case-intro__title {
  max-width: 760px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: clamp(56px, 5.8vw, 88px);
  font-weight: 400;
  line-height: .95;
}

.case-intro__summary {
  max-width: 720px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.45;
}

.case-reading {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.case-meta {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #8c8c86;
}

.case-meta::after {
  content: "";
  position: absolute;
  right: -38px;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #8f8f8f;
  transform: translateY(-50%);
}

.case-meta__item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.case-meta__item span {
  font-size: 13px;
  line-height: 1.25;
}

.case-hero-band {
  margin-top: 16px;
  padding: 28px 0;
  background: var(--charcoal);
}

.case-image-placeholder {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: 8px;
  background: #b5b5b5;
}

.case-image-placeholder::after {
  content: "IMAGE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.case-image-placeholder--hero {
  min-height: clamp(280px, 30vw, 430px);
}

.case-image-placeholder--short {
  min-height: 170px;
}

.case-image-placeholder--medium {
  min-height: 230px;
}

.case-image-placeholder--tall {
  min-height: 340px;
}

.case-section {
  padding-top: clamp(64px, 7vw, 104px);
}

.case-section:last-of-type {
  padding-bottom: 80px;
}

.case-section__eyebrow {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.case-section h2,
.case-outcome h2 {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.4vw, 54px);
  font-weight: 400;
  line-height: 1;
}

.case-section h3 {
  margin: 28px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.05;
}

.case-section p,
.case-section li,
.case-outcome p,
.case-outcome li {
  font-size: 16px;
  line-height: 1.5;
}

.case-lead {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 64px;
  align-items: start;
}

.case-copy {
  max-width: 620px;
}

.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.case-split--wide-right {
  grid-template-columns: .78fr 1.22fr;
}

.case-split--wide-left {
  grid-template-columns: 1.22fr .78fr;
}

.case-stack,
.case-grid-2,
.case-grid-3 {
  display: grid;
  gap: 16px;
}

.case-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.case-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.case-list {
  margin: 16px 0 0;
  padding-left: 20px;
}

.case-list li + li {
  margin-top: 6px;
}

.case-outcome {
  margin: 96px auto;
  padding: 48px;
  background: #ecece8;
}

/* =========================================================
   404
   ========================================================= */

.error-main {
  width: min(var(--page-width), calc(100% - 40px));
  min-height: 72vh;
  margin-inline: auto;
  padding-bottom: 80px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 64px;
  align-items: center;
}

.error-copy h1 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(56px, 5.2vw, 80px);
  font-weight: 400;
  line-height: .95;
}

.error-copy > p {
  font-size: 18px;
  line-height: 1.4;
}

.error-recommend {
  margin-top: 40px;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.error-links a {
  padding: 10px 12px;
  border: 1px solid var(--charcoal);
  background: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.error-buddy-placeholder {
  width: 145px;
  height: 145px;
  margin-inline: auto;
  border-radius: 50%;
  background: #8f8f8f;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
  :root {
    --nav-height: 64px;
  }

  .site-header {
    padding-inline: 24px;
  }

  .site-nav a {
    font-size: 18px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
  }

  .hero__title {
    font-size: clamp(72px, 10vw, 110px);
  }

  .section--work,
  .section--personal,
  .work-grid,
  .personal-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project__visual,
  .personal-card__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 330;
  }

  .journal-grid {
    position: static;
    display: grid;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .journal-tile {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.2 / 1;
  }

  .case-intro,
  .case-lead,
  .case-split,
  .case-split--wide-left,
  .case-split--wide-right {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  :root {
    --nav-height: 58px;
    --nav-top: 10px;
  }

  .site-nav {
    gap: 20px;
  }

  .site-nav a {
    font-size: 16px;
  }

  .site-header__brand {
    width: 34px;
    height: 34px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 120px;
  }

  .hero__title {
    flex-wrap: wrap;
    font-size: clamp(64px, 18vw, 96px);
  }

  .hero__aside {
    min-height: 210px;
  }

  @keyframes mobile-copy-in {
    to { opacity: 1; }
  }

  .section--work,
  .section--personal {
    display: block;
  }

  .section-heading {
    margin-bottom: 56px;
  }

  .work-grid,
  .personal-grid {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }

  .project--swipbox,
  .project--danfoss,
  .project--cup,
  .personal-card:first-child,
  .personal-card:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .project--danfoss,
  .project--cup,
  .work-buddy {
    transform: none;
  }

  .work-buddy {
    display: none;
  }

  .journal__top,
  .footer__inner,
  .error-main {
    grid-template-columns: 1fr;
  }

  .journal__intro {
    width: 100%;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-lightbox__dialog {
    padding: 50px 10px 18px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 5px;
  }

  .journal-carousel-image img {
    max-width: calc(100vw - 86px);
    max-height: calc(100vh - 90px);
  }

  .case-grid-2,
  .case-grid-3 {
    grid-template-columns: 1fr;
  }

  .case-meta::after {
    right: 16px;
    top: auto;
    bottom: -28px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-reveal,
  .work-buddy.buddy-is-fleeing {
    display: none;
  }
}


/* =========================================================
   FOOTER
   Paper background, hand-drawn divider, compact contact row.
   ========================================================= */

.footer {
  position: relative;
  margin-top: 128px;
  padding: 0 20px 40px;
  overflow: visible;
  background: var(--paper);
  color: var(--charcoal);
}

/* No charcoal wave/footer edge anymore. */
.footer::before {
  display: none;
  content: none;
}

/* The divider is an actual shared asset, so case pages and the landing
   page all use the same markup without relative-path CSS hacks. */
.footer__divider {
  width: min(var(--page-width), calc(100% - 0px));
  margin: 0 auto 64px;
  overflow: hidden;
}

.footer__divider img {
  width: 100%;
  height: 8px;
  object-fit: fill;
  transform: scaleY(.9);
  transform-origin: center;
}

.footer__inner {
  width: min(var(--page-width), 100%);
  margin-inline: auto;
  display: block;
}

.footer__message {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  min-height: 150px;
}

.footer__message > p {
  max-width: 560px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
}

.footer__character {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.buddy-object--footer {
  width: 118px;
  height: 124px;
}

.footer-coffee {
  width: 54px;
  height: auto;
  margin: 0 0 8px;
}

.footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 56px;
  padding-top: 24px;
}

.footer .copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.4;
  opacity: 1;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: lowercase;
  transition: opacity .18s ease;
}

.footer__links a:hover {
  opacity: .55;
}

/* Remove obsolete old footer typography/underline behavior. */
.footer h2,
.footer .email-link,
.footer__copy,
.footer__buddy {
  display: none !important;
}

@media (max-width: 800px) {
  .footer {
    margin-top: 96px;
    padding-inline: 20px;
  }

  .footer__divider {
    margin-bottom: 48px;
  }

  .footer__message {
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }

  .footer__message > p {
    max-width: 60%;
    font-size: 18px;
  }

  .buddy-object--footer {
    width: 92px;
    height: 98px;
  }

  .footer-coffee {
    width: 44px;
  }

  .footer__meta {
    margin-top: 40px;
  }
}

@media (max-width: 560px) {
  .footer__message {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__message > p {
    max-width: 100%;
  }

  .footer__meta {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 20px;
  }
}


/* =========================================================
   TAG PILLS
   Based on the supplied tag.svg.
   ========================================================= */

.project__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.project-tag {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 3px 12px 4px;

  border: 1px solid #7c6100;
  border-radius: 999px;
  background: #ffe999;
  color: #7c6100;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .10);

  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Remove the old plain tag paragraph treatment. */
.project__meta > p {
  display: none;
}

/* =========================================================
   FOOTER REFINEMENT — v34
   ========================================================= */

/* A longer hand-drawn line, aligned to the left edge of the content grid. */
.footer__divider {
  width: min(680px, calc(100% - 40px));
  margin:
    0
    0
    64px
    max(0px, calc((100vw - var(--page-width)) / 2));
}

.footer__divider img {
  width: 100%;
  height: 9px;
  object-fit: fill;
}

.footer__message {
  width: 100%;
  justify-content: space-between;
}

.footer__character {
  margin-left: auto;
  justify-content: flex-end;
}

/* Coffee is deliberately left of Buddy in the shared markup. */
.footer-coffee {
  order: 1;
}

.buddy-object--footer {
  order: 2;
}

/* =========================================================
   SIDEQUEST
   ========================================================= */

.sidequest-page {
  background: var(--paper);
}

.sidequest-page main {
  padding-top: calc(var(--nav-top) + var(--nav-height) + 64px);
}

.sidequest-hero {
  padding: 48px 0 88px;
}

.sidequest-hero__inner {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 64px;
  align-items: end;
}

.sidequest-hero .case-intro__title {
  margin: 0;
}

.sidequest-hero__intro {
  width: 560px;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
}

/*
  Collage: four equal columns, 32px gutters, deliberately inconsistent
  row heights and column spans. The grid always fills the wrapper width.
*/
.sidequest-collage {
  width: min(var(--journal-width), calc(100% - 40px));
  margin: 0 auto 128px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows:
    250px
    340px
    220px
    390px
    270px
    330px;
  gap: 32px;
}

.sidequest-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #aaa;
}

a.sidequest-tile {
  cursor: zoom-in;
  transition: transform .2s ease, opacity .2s ease;
}

a.sidequest-tile:hover {
  transform: translateY(-3px);
  opacity: .92;
}

.sidequest-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidequest-tile--placeholder {
  background: #aaa;
}

/* Row 1 */
.sidequest-tile--1  { grid-column: 1;     grid-row: 1; }
.sidequest-tile--2  { grid-column: 2 / 4; grid-row: 1; }
.sidequest-tile--3  { grid-column: 4;     grid-row: 1; }

/* Row 2 */
.sidequest-tile--4  { grid-column: 1 / 3; grid-row: 2; }
.sidequest-tile--5  { grid-column: 3;     grid-row: 2; }
.sidequest-tile--6  { grid-column: 4;     grid-row: 2; }

/* Row 3 */
.sidequest-tile--7  { grid-column: 1;     grid-row: 3; }
.sidequest-tile--8  { grid-column: 2;     grid-row: 3; }
.sidequest-tile--9  { grid-column: 3 / 5; grid-row: 3; }

/* Row 4 */
.sidequest-tile--10 { grid-column: 1;     grid-row: 4; }
.sidequest-tile--11 { grid-column: 2 / 4; grid-row: 4; }
.sidequest-tile--12 { grid-column: 4;     grid-row: 4; }

/* Row 5 */
.sidequest-tile--13 { grid-column: 1 / 3; grid-row: 5; }
.sidequest-tile--14 { grid-column: 3;     grid-row: 5; }
.sidequest-tile--15 { grid-column: 4;     grid-row: 5; }

/* Row 6 */
.sidequest-tile--16 { grid-column: 1;     grid-row: 6; }
.sidequest-tile--17 { grid-column: 2 / 4; grid-row: 6; }
.sidequest-tile--18 { grid-column: 4;     grid-row: 6; }

@media (max-width: 1199px) {
  .sidequest-hero__inner {
    grid-template-columns: 1fr 1fr;
  }

  .sidequest-hero__intro {
    width: 100%;
  }

  .sidequest-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 260px;
  }

  .sidequest-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .sidequest-tile:nth-child(3n + 2) {
    grid-row: span 2 !important;
  }
}

@media (max-width: 800px) {
  .sidequest-hero__inner {
    grid-template-columns: 1fr;
  }

  .sidequest-collage {
    grid-template-columns: 1fr;
    grid-auto-rows: 280px;
  }

  .sidequest-tile:nth-child(3n + 2) {
    grid-row: auto !important;
  }

  .footer__divider {
    width: min(520px, calc(100% - 40px));
    margin-left: 0;
  }
}


/* =========================================================
   SYSTEM REFINEMENTS — v35
   ========================================================= */

/* ---------- Interactive hover language ---------- */

.site-nav a:hover,
.footer__links a:hover,
.error-links a:hover,
.journal-arrow:hover,
.journal-lightbox__close:hover,
.footer__buddy-link:hover {
  color: var(--accent);
  opacity: 1;
}

.site-header__brand,
.site-nav a,
.footer__links a,
.footer__buddy-link,
.project__visual-link,
.personal-card__visual,
.sidequest-tile,
.journal-arrow,
.journal-lightbox__close,
.buddy-button,
.error-links a {
  cursor: pointer;
}

.site-header__brand:focus-visible,
.site-nav a:focus-visible,
.footer__links a:focus-visible,
.footer__buddy-link:focus-visible,
.project__visual-link:focus-visible,
.personal-card__visual:focus-visible,
.sidequest-tile:focus-visible,
.journal-arrow:focus-visible,
.journal-lightbox__close:focus-visible,
.buddy-button:focus-visible,
.error-links a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* Buddy-head navigation mark gets an accent halo instead of changing the SVG. */
.site-header__brand {
  border-radius: 50%;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.site-header__brand:hover {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent);
}

/* ---------- Smaller, flat tag pills ---------- */

.project-tag {
  min-height: 22px;
  padding: 3px 9px;

  border-color: var(--tag-border);
  background: var(--tag-bg);
  color: var(--tag-text);
  box-shadow: none;

  font-size: 12px;
  line-height: 1;
}

/* ---------- Landing: only image anchors are interactive ---------- */

.project__visual-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.project__visual {
  transition: none;
}

.project__visual img,
.personal-card__visual img,
.sidequest-tile img {
  transform: scale(1);
  transition: transform .42s cubic-bezier(.2, .72, .22, 1);
  will-change: transform;
}

.project__visual-link:hover img,
.personal-card__visual:hover img,
a.sidequest-tile:hover img {
  transform: scale(1.045);
}

/* Accent feedback belongs on the interactive image frame. */
.project__visual-link:hover,
.personal-card__visual:hover,
a.sidequest-tile:hover {
  box-shadow: 0 0 0 3px var(--accent);
}

/* No card/image jumping on hover. */
a.sidequest-tile:hover,
.journal-tile:hover {
  transform: none;
  opacity: 1;
}

/* ---------- Footer divider: flush left + animated draw ---------- */

.footer__divider {
  width: min(820px, 78vw);
  margin: 0 0 64px 0;
  overflow: hidden;
}

.footer__divider img {
  width: 100%;
  height: 9px;
  object-fit: fill;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .62s cubic-bezier(.22, .78, .28, 1);
}

.footer__divider.is-drawn img {
  transform: scaleX(1);
}

.footer__message {
  width: min(var(--page-width), calc(100vw - 40px));
  margin-inline: auto;
}

.footer__meta {
  width: min(var(--page-width), calc(100vw - 40px));
  margin-inline: auto;
  margin-top: 56px;
}

/* Coffee left, Buddy right, both pushed to far right. */
.footer__character {
  margin-left: auto;
  justify-content: flex-end;
  gap: 18px;
}

.footer__buddy-link {
  display: block;
  border-radius: 50%;
  transition: transform .2s ease, background-color .2s ease;
}

.footer__buddy-link:hover {
  transform: translateY(-4px);
  background: var(--accent);
}

/* ---------- Case reading progress ---------- */

.reading-progress {
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(61, 61, 59, .14);
  pointer-events: none;
}

.reading-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left center;
}

/* ---------- Legacy ink cleanup ---------- */

/* No component should introduce a second near-black token. */
body,
.site-header,
.hero__sticker,
.project__meta,
.case-page,
.error-page,
.sidequest-page {
  color: var(--charcoal);
}

.hero {
  color: white;
}

@media (max-width: 800px) {
  .footer__divider {
    width: min(620px, 88vw);
    margin-left: 0;
  }
}


/* =========================================================
   REFINEMENTS — v36
   ========================================================= */

/* Keep horizontal escape animations from widening the page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Interactive images zoom only — no accent outline/frame. */
.project__visual-link:hover,
.personal-card__visual:hover,
a.sidequest-tile:hover {
  box-shadow: none !important;
}

/* Footer divider follows the content wrapper again. */
.footer__divider {
  width: min(var(--page-width), calc(100% - 40px));
  margin: 0 auto 64px;
}

/* Footer Buddy is decorative again. */
.footer__buddy-link {
  display: none !important;
}

/* Navbar uses Noto Sans rather than Koulen. */
.site-nav a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Smaller, calmer navigation shadow. */
.site-header {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .11),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Buddy head stays neutral on hover. */
.site-header__brand:hover {
  background: transparent;
  box-shadow: none;
}

.site-header__brand {
  transition: transform .18s ease;
}

.site-header__brand:hover {
  transform: scale(1.05);
}

/* Tags are flat: no border/stroke, no shadow. */
.project-tag {
  border: 0;
  box-shadow: none;
}

/* Ensure fleeing Buddy can visually leave, but never create horizontal scroll. */
.section--work,
.work-grid {
  overflow: visible;
}

body {
  overflow-x: clip;
}

/* =========================================================
   NAV + FOOTER LINE REFINEMENT — v37
   ========================================================= */

/* Header becomes a shell: Buddy logo outside the smaller nav pill. */
.site-header-shell {
  position: fixed;
  z-index: 1000;
  top: var(--nav-top);
  left: 50%;
  width: min(620px, calc(100% - 32px));
  height: 56px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 14px;
}

.site-header {
  position: static;
  width: auto;
  height: 46px;
  flex: 1;
  transform: none;
  padding: 0 22px;

  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(232, 232, 228, .82);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .08),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.site-header__brand {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform .24s ease;
}

.site-header__brand:hover {
  transform: scale(1.04);
  background: transparent;
  box-shadow: none;
}

.site-nav {
  width: 100%;
  justify-content: center;
  gap: 28px;
}

.site-nav a {
  font-size: 15px;
  font-weight: 500;
  transition:
    color .24s ease,
    opacity .24s ease,
    transform .24s ease;
}

.site-nav a:hover {
  color: var(--accent);
  opacity: 1;
  transform: translateY(-1px);
}

/* Softer accent transitions across interactive elements. */
.footer__links a,
.about-sidequest-link,
.error-links a,
.journal-arrow,
.journal-lightbox__close,
.buddy-button {
  transition:
    color .24s ease,
    background-color .24s ease,
    opacity .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}

/* Footer divider: align to the LEFT EDGE of the same centered wrapper.
   Not the viewport, not the center of the page. */
.footer__divider {
  width: min(var(--page-width), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;
}

.footer__divider img {
  display: block;
  width: 72%;
  max-width: 820px;
  height: 9px;
  margin-left: 0;
  margin-right: auto;
  object-fit: fill;
}

/* Smaller nav variables for shared page spacing. */
:root {
  --nav-height: 46px;
  --nav-top: 14px;
}

.error-page main,
.sidequest-page main,
.about-page main {
  padding-top: calc(var(--nav-top) + 56px + 64px);
}

@media (max-width: 800px) {
  .site-header-shell {
    width: min(520px, calc(100% - 24px));
    height: 52px;
    gap: 10px;
  }

  .site-header {
    height: 42px;
    padding-inline: 16px;
  }

  .site-header__brand {
    width: 32px;
    height: 32px;
  }

  .site-nav {
    gap: 18px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .footer__divider img {
    width: 84%;
  }
}


/* =========================================================
   NAV + FOOTER LINE POLISH — v38
   ========================================================= */

/* Put the complete hand-drawn SVG across the available line width.
   The divider itself starts at the wrapper's left edge, and the SVG
   now fills the divider instead of only occupying a percentage of it. */
.footer__divider {
  width: min(var(--page-width), calc(100% - 40px));
  margin: 0 auto 64px;
}

.footer__divider img {
  display: block;
  width: 100%;
  max-width: none;
  height: 9px;
  margin: 0;
  object-fit: fill;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .62s cubic-bezier(.22, .78, .28, 1);
}

.footer__divider.is-drawn img {
  transform: scaleX(1);
}

/* Smaller and slightly lower shared header. */
:root {
  --nav-top: 20px;
  --nav-height: 44px;
}

.site-header-shell {
  top: var(--nav-top);
  width: min(540px, calc(100% - 32px));
  height: 50px;
  gap: 14px;
}

/* Shorter pill, lighter/tighter shadow. */
.site-header {
  height: 42px;
  padding: 0 18px;

  background: rgba(236, 236, 232, .84);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, .075),
    inset 0 1px 0 rgba(255, 255, 255, .58);
}

/* Normal title casing rather than uppercase.
   No translate/position change on hover = no visual jump. */
.site-nav {
  gap: 26px;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  transform: none;

  transition:
    color .28s ease,
    opacity .28s ease;
}

.site-nav a:hover {
  color: var(--accent);
  opacity: 1;
  transform: none;
}

/* Keep page-top spacing aligned with the new header dimensions. */
.error-page main,
.sidequest-page main,
.about-page main {
  padding-top: calc(var(--nav-top) + 50px + 64px);
}

@media (max-width: 800px) {
  :root {
    --nav-top: 16px;
  }

  .site-header-shell {
    width: min(480px, calc(100% - 24px));
    height: 48px;
    gap: 10px;
  }

  .site-header {
    height: 40px;
    padding-inline: 14px;
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav a {
    font-size: 15px;
  }

  .footer__divider img {
    width: 100%;
  }
}


/* =========================================================
   FOOTER HAND-DRAWN LINE — v39
   No line.svg. This line is drawn directly in the footer.
   ========================================================= */

.footer__divider {
  width: min(var(--page-width), calc(100% - 40px));
  height: 24px;
  margin: 0 auto 64px;
  overflow: visible;
}

.footer__drawn-line {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

.footer__drawn-path {
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* pathLength="1" makes the animation independent of viewport width */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .82s cubic-bezier(.22, .72, .22, 1);
}

.footer__divider.is-drawn .footer__drawn-path {
  stroke-dashoffset: 0;
}

/* Kill the old image-based footer divider rules completely. */
.footer__divider > img {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .footer__drawn-path {
    stroke-dashoffset: 0;
    transition: none;
  }
}


/* =========================================================
   FOOTER PENCIL LINE — v40
   Shorter, thicker at the start, fading to a fine point.
   ========================================================= */

.footer__divider {
  width: min(var(--page-width), calc(100% - 40px));
  height: 26px;
  margin: 0 auto 64px;
}

.footer__drawn-line {
  display: block;
  width: 78%;
  height: 26px;
  overflow: visible;
}

.footer__drawn-path {
  fill: none;
  stroke: var(--charcoal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform-origin: left center;
  transition: stroke-dashoffset .9s cubic-bezier(.22, .72, .22, 1);
}

/* Broad graphite body. */
.footer__drawn-path--thick {
  stroke-width: 5.2;
  opacity: .88;
}

/* Slightly offset mid-stroke creates an imperfect pencil texture. */
.footer__drawn-path--mid {
  stroke-width: 2.8;
  opacity: .58;
}

/* Fine upper graphite line makes the end feel sharpened. */
.footer__drawn-path--fine {
  stroke-width: 1.15;
  opacity: .82;
}

/* Taper all three strokes toward the right using a mask-like clip.
   The line begins full-weight and progressively becomes finer. */
.footer__drawn-path--thick {
  clip-path: polygon(0 0, 64% 0, 88% 42%, 100% 50%, 88% 58%, 64% 100%, 0 100%);
}

.footer__drawn-path--mid {
  clip-path: polygon(0 10%, 72% 10%, 93% 44%, 100% 50%, 93% 56%, 72% 90%, 0 90%);
}

.footer__drawn-path--fine {
  clip-path: polygon(0 25%, 82% 25%, 100% 48%, 100% 52%, 82% 75%, 0 75%);
}

.footer__divider.is-drawn .footer__drawn-path {
  stroke-dashoffset: 0;
}

/* Small stagger makes it feel scribbled rather than mechanically identical. */
.footer__drawn-path--mid {
  transition-delay: .035s;
}

.footer__drawn-path--fine {
  transition-delay: .07s;
}

@media (max-width: 800px) {
  .footer__drawn-line {
    width: 86%;
  }
}


/* Footer pencil-line sizing — v41 */
.footer__drawn-line {
  width: 62%;
}

/* Keep the pencil beginning weighted, but much less chunky. */
.footer__drawn-path--thick {
  stroke-width: 3.4;
  opacity: .82;
}

.footer__drawn-path--mid {
  stroke-width: 2.1;
  opacity: .54;
}

.footer__drawn-path--fine {
  stroke-width: 1;
}

@media (max-width: 800px) {
  .footer__drawn-line {
    width: 72%;
  }
}


/* =========================================================
   NAV / HERO / CASE REFINEMENT — v43
   ========================================================= */

/* Single navbar: smaller width, slightly taller. */
:root {
  --nav-width: 430px;
  --nav-height: 48px;
  --nav-top: 20px;
}

.site-header-shell {
  width: min(500px, calc(100% - 32px));
  height: 54px;
}

.site-header {
  height: 48px;
  padding-inline: 20px;
}

.site-nav {
  gap: 24px;
}

/* ---------- Hero Buddy ---------- */

.buddy-object--hero {
  opacity: 1;
}

/* Button waits until hero drawing is complete. */
.buddy-button {
  opacity: 0;
  transform: rotate(-2deg) scale(.55);
  pointer-events: none;
}

.buddy-button.is-visible {
  opacity: 1;
  transform: rotate(-2deg) scale(1);
  pointer-events: auto;
  transition:
    opacity .22s ease,
    transform .42s cubic-bezier(.18,.9,.24,1.3),
    box-shadow .18s ease;
}

.buddy-caption {
  font-size: 16px;
  line-height: 1.25;
  bottom: 1%;
}

/* Uploaded UX/UI sticker */
.hero__sticker img {
  width: 102px;
  height: 73px;
  max-width: none;
}

/* Slow fold-out, edge-first, then flatten into place. */
.hero-reveal--sticker {
  opacity: 0;
  transform-origin: 8% 52%;
  transform-style: preserve-3d;
  transform: translateX(96px) rotateZ(-28deg) rotateY(86deg);
  animation: hero-sticker-fold 1.65s cubic-bezier(.18,.72,.22,1) 3.18s forwards;
}

@keyframes hero-sticker-fold {
  0% {
    opacity: 0;
    transform: translateX(96px) rotateZ(-28deg) rotateY(86deg);
  }
  22% {
    opacity: 1;
    transform: translateX(22px) rotateZ(-24deg) rotateY(78deg);
  }
  50% {
    transform: translateX(2px) rotateZ(-20deg) rotateY(48deg);
  }
  74% {
    transform: translateX(0) rotateZ(-17deg) rotateY(18deg);
  }
  90% {
    transform: translateX(0) rotateZ(-16deg) rotateY(-4deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotateZ(-16deg) rotateY(0deg);
  }
}

/* ---------- SwipBox nomination ---------- */

.visual--swipbox {
  position: relative;
}

.ux-nomination-badge {
  position: absolute;
  z-index: 4;
  right: 32px;
  bottom: 32px;
  width: 87px !important;
  height: 130px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Thumbnail zoom only affects the underlying artwork, not the badge. */
.project__visual-link:hover .visual--swipbox > img:first-child {
  transform: scale(1.045);
}

/* ---------- Case charcoal band ---------- */

.case-hero-band {
  position: relative;
  margin-top: 36px;
  padding: 68px 0;
  background: var(--charcoal);
  overflow: visible;
}

.case-hero-band::before,
.case-hero-band::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 42px;
  background: var(--paper);
  pointer-events: none;
}

.case-hero-band::before {
  top: -1px;
  clip-path: polygon(
    0 0,100% 0,100% 58%,
    93% 48%,86% 62%,77% 51%,68% 66%,58% 50%,
    49% 62%,39% 47%,29% 64%,19% 50%,9% 61%,0 52%
  );
}

.case-hero-band::after {
  bottom: -1px;
  clip-path: polygon(
    0 48%,9% 38%,19% 51%,29% 36%,39% 53%,49% 38%,
    58% 50%,68% 34%,77% 49%,86% 38%,93% 52%,100% 42%,
    100% 100%,0 100%
  );
}

.case-hero-band > * {
  position: relative;
  z-index: 2;
}

/* ---------- Case typography system ---------- */

.case-section p,
.case-section li,
.case-outcome p,
.case-outcome li,
.case-intro__summary {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
}

.case-sticker {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  padding: 6px 18px;

  background: #fafafa;
  color: var(--charcoal);
  box-shadow: 0 4px 8px rgba(0,0,0,.16);

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  transform: rotate(-4deg);
}

.case-primary-heading {
  max-width: 900px;
  margin: 0 0 32px !important;

  font-family: var(--font-body) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.case-section h3,
.case-section h2:not(.case-primary-heading) {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

@media (max-width: 800px) {
  :root {
    --nav-width: 390px;
  }

  .site-header-shell {
    width: min(450px, calc(100% - 24px));
  }

  .case-primary-heading {
    font-size: 30px !important;
  }

  .case-section p,
  .case-section li,
  .case-outcome p,
  .case-outcome li,
  .case-intro__summary {
    font-size: 18px;
  }

  .ux-nomination-badge {
    right: 20px;
    bottom: 20px;
    width: 70px !important;
    height: auto !important;
  }
}


/* =========================================================
   REUSABLE STICKER SYSTEM + CASE HERO STRUCTURE — v44
   ========================================================= */

/*
  One reusable sticker component everywhere.
  Inspired by the supplied sticker artwork:
  white paper strip, rotated, soft shadow, charcoal type.
*/
.sticker-label {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;

  background: #fafafa;
  color: var(--charcoal);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .14);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  transform: rotate(-5deg);
  transform-origin: center;
}

/* The moving paper roll at the unrolling edge. */
.sticker-label::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -7px;
  width: 12px;
  height: calc(100% + 4px);

  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.10),
      rgba(255,255,255,.98) 35%,
      rgba(220,220,216,.92) 72%,
      rgba(0,0,0,.12)
    );
  box-shadow: 2px 1px 4px rgba(0,0,0,.12);

  opacity: 0;
  pointer-events: none;
}

/* ---------- Hero sticker ---------- */

.sticker-label--hero {
  position: absolute;
  z-index: 5;
  right: -68px;
  top: 42%;
  min-width: 98px;
  min-height: 30px;
  padding: 7px 14px;

  font-size: 11px;
  transform: rotate(-16deg);
}

/*
  "Rolling out" rather than folding/flipping:
  the sticker arrives from the right as a narrow rolled strip and
  progressively unrolls toward the left until the paper is flat.
*/
.hero-reveal--sticker {
  opacity: 1;
  overflow: visible;

  clip-path: inset(-10px 0 -10px 94%);
  transform: translateX(64px) rotate(-16deg);
  transform-origin: right center;

  animation: sticker-unroll 1.65s cubic-bezier(.2,.72,.22,1) 3.18s forwards;
}

.hero-reveal--sticker::after {
  opacity: 1;
  animation: sticker-roll-edge 1.65s cubic-bezier(.2,.72,.22,1) 3.18s forwards;
}

@keyframes sticker-unroll {
  0% {
    clip-path: inset(-10px 0 -10px 94%);
    transform: translateX(64px) rotate(-16deg);
  }

  20% {
    clip-path: inset(-10px 0 -10px 80%);
    transform: translateX(20px) rotate(-16deg);
  }

  48% {
    clip-path: inset(-10px 0 -10px 48%);
    transform: translateX(3px) rotate(-16deg);
  }

  76% {
    clip-path: inset(-10px 0 -10px 16%);
    transform: translateX(0) rotate(-16deg);
  }

  100% {
    clip-path: inset(-10px 0 -10px 0);
    transform: translateX(0) rotate(-16deg);
  }
}

@keyframes sticker-roll-edge {
  0% {
    right: -7px;
    transform: scaleX(1);
    opacity: 1;
  }

  20% {
    right: 73%;
    transform: scaleX(1.05);
  }

  48% {
    right: 43%;
    transform: scaleX(.96);
  }

  76% {
    right: 11%;
    transform: scaleX(.78);
  }

  94% {
    opacity: 1;
  }

  100% {
    right: -7px;
    transform: scaleX(.2);
    opacity: 0;
  }
}

/* ---------- Case intro ---------- */

.case-intro {
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 64px;
  align-items: stretch;
}

.case-intro__visual {
  position: relative;
  min-height: 100%;
}

.case-intro__placeholder {
  width: 100%;
  height: 100%;
  min-height: 430px;

  display: grid;
  place-items: center;

  border-radius: 8px;
  background: #aaa;
  color: #666;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* Keywords can intentionally break outside the image frame. */
.case-keyword {
  position: absolute;
  z-index: 3;
  font-size: 12px;
  padding: 6px 13px;
}

.case-keyword--1 {
  left: -28px;
  top: 28px;
  transform: rotate(-8deg);
}

.case-keyword--2 {
  right: -26px;
  top: 46%;
  transform: rotate(7deg);
}

.case-keyword--3 {
  left: 24px;
  bottom: -15px;
  transform: rotate(4deg);
}

/* Yellow UX post-its */
.case-postit {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;

  width: 94px;
  min-height: 78px;
  padding: 12px;

  background: var(--accent);
  color: var(--charcoal);
  box-shadow: 0 5px 10px rgba(0,0,0,.14);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.case-postit--1 {
  right: 18px;
  top: -28px;
  transform: rotate(5deg);
}

.case-postit--2 {
  left: -38px;
  bottom: 55px;
  transform: rotate(-7deg);
}

.case-postit--3 {
  right: -22px;
  bottom: 22px;
  transform: rotate(9deg);
}

/* ---------- Horizontal metadata below charcoal band ---------- */

.case-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;

  padding-top: 56px;
  padding-bottom: 32px;
}

.case-meta-row .case-meta__item {
  padding: 0;
}

.case-meta-row .case-meta__item strong {
  display: block;
  margin-bottom: 8px;

  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-meta-row .case-meta__item span {
  display: block;

  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

/* Remove legacy boxed metadata completely. */
.case-meta {
  display: none !important;
}

/* ---------- Case section stickers ---------- */

.case-sticker {
  margin-bottom: 24px;
}

/* Main section statement and case copy hierarchy. */
.case-primary-heading {
  max-width: 920px;
  margin: 0 0 36px !important;

  font-family: var(--font-body) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.case-section h3,
.case-section h2:not(.case-primary-heading) {
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.case-section p,
.case-section li,
.case-outcome p,
.case-outcome li,
.case-intro__summary {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .case-intro {
    grid-template-columns: 1fr;
  }

  .case-intro__visual {
    min-height: 420px;
  }

  .case-meta-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 800px) {
  .case-intro__placeholder {
    min-height: 360px;
  }

  .case-primary-heading {
    font-size: 30px !important;
  }

  .case-section p,
  .case-section li,
  .case-outcome p,
  .case-outcome li,
  .case-intro__summary {
    font-size: 18px;
  }

  .case-keyword--1 {
    left: 10px;
  }

  .case-keyword--2 {
    right: 10px;
  }

  .case-postit--2 {
    left: 12px;
  }

  .case-postit--3 {
    right: 10px;
  }
}


/* =========================================================
   STICKER + POST-IT POLISH — v45
   ========================================================= */

/* ---------------------------------------------------------
   Reusable sticker: thick white edge, charcoal outline, text.
   2px corners everywhere.
--------------------------------------------------------- */

.sticker-label {
  position: relative;
  isolation: isolate;

  min-height: 34px;
  padding: 7px 16px;

  border-radius: 2px;
  border: 2px solid var(--charcoal);
  background: #fff;
  color: var(--charcoal);

  /* Thick white "sticker cutline" around the black outline */
  box-shadow:
    0 0 0 5px #fff,
    0 3px 7px rgba(0,0,0,.12);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* Keep hero sticker a little smaller, but same component language. */
.sticker-label--hero {
  min-width: 98px;
  min-height: 30px;
  padding: 7px 13px;
  border-radius: 2px;
  font-size: 11px;
}

/* Keyword stickers inherit same visual system. */
.case-keyword {
  border-radius: 2px;
}

/* ---------------------------------------------------------
   Smoother hero sticker unroll
--------------------------------------------------------- */

/* Use a reveal mask instead of abrupt clip jumps. */
.hero-reveal--sticker {
  opacity: 1;
  overflow: visible;

  --reveal: 0%;
  -webkit-mask:
    linear-gradient(
      90deg,
      #000 0,
      #000 var(--reveal),
      transparent calc(var(--reveal) + 1px)
    );
  mask:
    linear-gradient(
      90deg,
      #000 0,
      #000 var(--reveal),
      transparent calc(var(--reveal) + 1px)
    );

  transform: translateX(60px) rotate(-16deg);
  transform-origin: right center;

  animation:
    sticker-roll-reveal 1.9s cubic-bezier(.22,.75,.2,1) 3.18s forwards,
    sticker-roll-position 1.9s cubic-bezier(.22,.75,.2,1) 3.18s forwards;
}

/* The curl travels smoothly with the reveal edge. */
.hero-reveal--sticker::after {
  opacity: 1;
  right: auto;
  left: 0%;
  width: 11px;
  height: calc(100% + 4px);

  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.11),
      #fff 32%,
      #e7e7e4 68%,
      rgba(0,0,0,.12)
    );
  box-shadow: 1px 1px 4px rgba(0,0,0,.12);

  animation: sticker-curl-travel 1.9s cubic-bezier(.22,.75,.2,1) 3.18s forwards;
}

@keyframes sticker-roll-reveal {
  0%   { --reveal: 2%; }
  12%  { --reveal: 10%; }
  28%  { --reveal: 26%; }
  46%  { --reveal: 48%; }
  66%  { --reveal: 71%; }
  84%  { --reveal: 90%; }
  100% { --reveal: 100%; }
}

@keyframes sticker-roll-position {
  0%   { transform: translateX(60px) rotate(-16deg); }
  35%  { transform: translateX(22px) rotate(-16deg); }
  70%  { transform: translateX(4px) rotate(-16deg); }
  100% { transform: translateX(0) rotate(-16deg); }
}

@keyframes sticker-curl-travel {
  0% {
    left: 1%;
    transform: scaleX(1.15);
    opacity: 1;
  }
  18% {
    left: 15%;
    transform: scaleX(1.08);
  }
  42% {
    left: 40%;
    transform: scaleX(1);
  }
  68% {
    left: 67%;
    transform: scaleX(.9);
  }
  88% {
    left: 88%;
    transform: scaleX(.65);
    opacity: 1;
  }
  100% {
    left: 98%;
    transform: scaleX(.2);
    opacity: 0;
  }
}

/* Safari/Chrome animate custom property more smoothly with registration. */
@property --reveal {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* ---------------------------------------------------------
   Post-it folded corner + slow floating fold
--------------------------------------------------------- */

.case-postit {
  position: absolute;
  overflow: visible;
  border-radius: 2px;

  /* Slight paper warmth, still based on accent */
  background: var(--accent);

  transform-origin: center;
}

/* Corner fold */
.case-postit::before {
  content: "";
  position: absolute;
  z-index: 2;

  width: 22px;
  height: 22px;
  bottom: -1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.72) 0 48%,
      rgba(0,0,0,.11) 49% 53%,
      rgba(230,199,44,.92) 54% 100%
    );

  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
  transform-origin: 100% 100%;
  animation: postit-corner-breathe 4.8s ease-in-out infinite;
}

/* Alternate which side folds */
.case-postit--1::before,
.case-postit--3::before {
  right: -1px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.case-postit--2::before {
  left: -1px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform-origin: 0 100%;
  animation-delay: -1.6s;
}

.case-postit--3::before {
  animation-delay: -3.1s;
}

@keyframes postit-corner-breathe {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-3px) rotate(2deg) scale(1.035);
  }
}

/* ---------------------------------------------------------
   Post-it text "drawing" itself
--------------------------------------------------------- */

.case-postit__text {
  position: relative;
  z-index: 3;
  display: inline-block;
  white-space: normal;

  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  /* Reveal from left to right like handwritten text appearing. */
  clip-path: inset(0 100% 0 0);
  animation: postit-write 1.25s steps(14, end) forwards;
}

/* Small stagger so each note doesn't write simultaneously */
.case-postit--1 .case-postit__text { animation-delay: .3s; }
.case-postit--2 .case-postit__text { animation-delay: .75s; }
.case-postit--3 .case-postit__text { animation-delay: 1.15s; }

@keyframes postit-write {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Add a tiny hand-drawn baseline flicker while writing */
.case-postit__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--charcoal);
  opacity: .4;

  animation: postit-pencil-tail 1.25s ease-out forwards;
}

.case-postit--1 .case-postit__text::after { animation-delay: .3s; }
.case-postit--2 .case-postit__text::after { animation-delay: .75s; }
.case-postit--3 .case-postit__text::after { animation-delay: 1.15s; }

@keyframes postit-pencil-tail {
  0%   { width: 0; opacity: .45; }
  90%  { width: 100%; opacity: .22; }
  100% { width: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal--sticker {
    animation: none !important;
    --reveal: 100%;
    transform: rotate(-16deg);
  }

  .hero-reveal--sticker::after {
    display: none;
  }

  .case-postit::before,
  .case-postit__text,
  .case-postit__text::after {
    animation: none !important;
    clip-path: none !important;
  }
}


/* =========================================================
   STICKER ROLL + CASE SPACING + POST-IT CORNERS — v46
   ========================================================= */

/* Slightly finer charcoal outline on all reusable stickers. */
.sticker-label {
  border-width: 1px;
  box-shadow:
    0 0 0 5px #fff,
    0 3px 7px rgba(0,0,0,.10);
}

/* ---------------------------------------------------------
   Hero sticker: real paper/curl separation.
   No custom-property mask; use directly interpolated clip-path.
--------------------------------------------------------- */

.hero-sticker-roll {
  position: absolute;
  z-index: 5;
  right: -68px;
  top: 42%;

  width: 118px;
  height: 46px;

  opacity: 1;
  overflow: visible;
  transform: rotate(-16deg);
  transform-origin: center;
}

/* Cancel v45 mask / old pseudo rollout mechanism completely. */
.hero-sticker-roll.hero-reveal--sticker {
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none;
  animation: none;
  transform: rotate(-16deg);
}

.hero-sticker-roll.hero-reveal--sticker::after {
  display: none !important;
  animation: none !important;
}

.hero-sticker-roll__paper {
  position: absolute;
  right: 0;
  top: 7px;

  width: 108px;
  min-width: 108px;
  height: 32px;

  transform: none;
  transform-origin: right center;

  /* Begin as a tiny sliver at the RIGHT edge and smoothly reveal LEFT. */
  clip-path: inset(-8px 0 -8px 98%);
  animation: hero-paper-unroll 1.9s cubic-bezier(.18,.72,.2,1) 3.18s forwards;
}

/* A physical-looking curl sits exactly at the moving reveal boundary. */
.hero-sticker-roll__curl {
  position: absolute;
  z-index: 4;
  top: 5px;
  left: calc(100% - 13px);

  width: 13px;
  height: 36px;
  border-radius: 48%;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.16) 0%,
      #ecece9 20%,
      #fff 47%,
      #deded9 72%,
      rgba(0,0,0,.12) 100%
    );

  box-shadow:
    1px 1px 3px rgba(0,0,0,.12),
    inset 1px 0 1px rgba(255,255,255,.75);

  transform-origin: center;
  animation: hero-curl-unroll 1.9s cubic-bezier(.18,.72,.2,1) 3.18s forwards;
}

@keyframes hero-paper-unroll {
  0%   { clip-path: inset(-8px 0 -8px 98%); }
  15%  { clip-path: inset(-8px 0 -8px 91%); }
  30%  { clip-path: inset(-8px 0 -8px 75%); }
  45%  { clip-path: inset(-8px 0 -8px 57%); }
  60%  { clip-path: inset(-8px 0 -8px 39%); }
  75%  { clip-path: inset(-8px 0 -8px 21%); }
  90%  { clip-path: inset(-8px 0 -8px 6%); }
  100% { clip-path: inset(-8px 0 -8px 0); }
}

@keyframes hero-curl-unroll {
  0% {
    left: calc(100% - 13px);
    transform: scaleX(1.15) rotate(0deg);
    opacity: 1;
  }
  15% {
    left: 88%;
    transform: scaleX(1.1) rotate(-1deg);
  }
  30% {
    left: 72%;
    transform: scaleX(1.04) rotate(1deg);
  }
  45% {
    left: 54%;
    transform: scaleX(1) rotate(-1deg);
  }
  60% {
    left: 36%;
    transform: scaleX(.94) rotate(1deg);
  }
  75% {
    left: 18%;
    transform: scaleX(.85) rotate(-1deg);
  }
  90% {
    left: 3%;
    transform: scaleX(.55);
    opacity: 1;
  }
  100% {
    left: -4%;
    transform: scaleX(.15);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   Case section spacing:
   keep Challenge clearly BELOW meta row / black hero.
--------------------------------------------------------- */

.case-meta-row {
  padding-top: 56px;
  padding-bottom: 48px;
}

.case-meta-row + .case-section {
  padding-top: 72px;
}

.case-section {
  position: relative;
  z-index: 1;
}

.case-sticker {
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 24px;
}

/* ---------------------------------------------------------
   Post-it fold: actual paper corner, not a floating triangle.
--------------------------------------------------------- */

.case-postit {
  --fold-size: 22px;
  overflow: hidden;
}

/* Actual corner is cut out of the note via the note background. */
.case-postit--1,
.case-postit--3 {
  background:
    linear-gradient(
      225deg,
      transparent 0 var(--fold-size),
      var(--accent) calc(var(--fold-size) + 1px)
    );
}

.case-postit--2 {
  background:
    linear-gradient(
      135deg,
      transparent 0 var(--fold-size),
      var(--accent) calc(var(--fold-size) + 1px)
    );
}

/* Fold flap occupies the precise missing corner. */
.case-postit::before {
  width: var(--fold-size);
  height: var(--fold-size);
  top: 0;
  bottom: auto;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.80),
    rgba(242,220,114,.96) 60%,
    rgba(0,0,0,.08)
  );

  filter: drop-shadow(0 1px 1px rgba(0,0,0,.10));
}

/* Right-corner folds */
.case-postit--1::before,
.case-postit--3::before {
  right: 0;
  left: auto;

  clip-path: polygon(0 0, 100% 100%, 100% 0);
  transform-origin: 100% 0;
  animation: postit-fold-right 5.4s ease-in-out infinite;
}

/* Left-corner fold — the "Offline states" treatment. */
.case-postit--2::before {
  left: 0;
  right: auto;

  clip-path: polygon(0 0, 0 100%, 100% 0);
  transform-origin: 0 0;
  animation: postit-fold-left 5.6s ease-in-out infinite;
}

.case-postit--3::before {
  animation-delay: -2.7s;
}

@keyframes postit-fold-right {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    transform: translateY(-2px) rotateX(13deg) rotateZ(1.3deg);
  }
}

@keyframes postit-fold-left {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    transform: translateY(-2px) rotateX(13deg) rotateZ(-1.3deg);
  }
}

/* Keep text above the fold and away from top folded corner. */
.case-postit__text {
  position: relative;
  z-index: 3;
}

.case-postit--1 .case-postit__text,
.case-postit--3 .case-postit__text {
  padding-right: 8px;
  padding-top: 4px;
}

.case-postit--2 .case-postit__text {
  padding-left: 8px;
  padding-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-sticker-roll__paper {
    clip-path: none;
    animation: none;
  }

  .hero-sticker-roll__curl {
    display: none;
  }

  .case-postit::before {
    animation: none !important;
  }
}


/* =========================================================
   HERO ROLL + CASE STICKER / POST-IT POSITION FIX — v47
   ========================================================= */

/* ---------------------------------------------------------
   Hero sticker curl: narrow paper fold, not an oval.
--------------------------------------------------------- */

.hero-sticker-roll__curl {
  top: 6px;
  width: 8px;
  height: 34px;

  border-radius: 1px 3px 3px 1px;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.16) 0%,
      #dcdcd7 18%,
      #ffffff 46%,
      #eeeeea 74%,
      rgba(0,0,0,.10) 100%
    );

  box-shadow:
    1px 1px 2px rgba(0,0,0,.11),
    inset 1px 0 0 rgba(255,255,255,.72);

  /* Slight skew makes it read as a curled paper edge. */
  clip-path: polygon(
    18% 0,
    100% 5%,
    82% 50%,
    100% 95%,
    18% 100%,
    0 52%
  );
}

@keyframes hero-curl-unroll {
  0% {
    left: calc(100% - 8px);
    transform: skewY(-4deg) scaleX(1);
    opacity: 1;
  }

  15% {
    left: 89%;
    transform: skewY(-3deg) scaleX(.98);
  }

  30% {
    left: 73%;
    transform: skewY(-2deg) scaleX(.94);
  }

  45% {
    left: 55%;
    transform: skewY(0deg) scaleX(.9);
  }

  60% {
    left: 37%;
    transform: skewY(1deg) scaleX(.82);
  }

  75% {
    left: 19%;
    transform: skewY(2deg) scaleX(.72);
  }

  90% {
    left: 4%;
    transform: skewY(2deg) scaleX(.42);
    opacity: 1;
  }

  100% {
    left: -2%;
    transform: skewY(2deg) scaleX(.12);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   CASE HERO ANNOTATIONS
   Keep ALL stickers physically attached to the grey image.
--------------------------------------------------------- */

.case-intro__visual {
  overflow: visible;
}

/* Keywords sit ON the placeholder edge, never below into the charcoal band. */
.case-keyword--1 {
  left: -22px;
  top: 66%;
  transform: rotate(-7deg);
}

.case-keyword--2 {
  right: -22px;
  top: 72%;
  transform: rotate(6deg);
}

.case-keyword--3 {
  left: 45%;
  bottom: 10px;
  transform: translateX(-50%) rotate(4deg);
}

/* Keep the sticker white cutline from visually disappearing into the image. */
.case-keyword {
  z-index: 6;
}

/* ---------------------------------------------------------
   POST-ITS
   Real folded BOTTOM corners only, as marked in the screenshot.
--------------------------------------------------------- */

.case-postit {
  --fold-size: 20px;
  overflow: hidden;
  background: var(--accent);
}

/* Reset the previous top-corner treatment. */
.case-postit::before {
  top: auto !important;
  bottom: 0 !important;
  width: var(--fold-size);
  height: var(--fold-size);
  border-radius: 0;
}

/* Notes 1 and 3: bottom-right fold. */
.case-postit--1,
.case-postit--3 {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--fold-size)),
    calc(100% - var(--fold-size)) 100%,
    0 100%
  );
  background: var(--accent);
}

.case-postit--1::before,
.case-postit--3::before {
  right: 0 !important;
  left: auto !important;

  clip-path: polygon(
    0 100%,
    100% 0,
    100% 100%
  );

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.84) 0 46%,
      rgba(239,214,93,.98) 48% 100%
    );

  transform-origin: 100% 100%;
  animation: postit-bottom-right-fold 5.6s ease-in-out infinite;
}

/* Note 2: bottom-left fold. */
.case-postit--2 {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--fold-size) 100%,
    0 calc(100% - var(--fold-size))
  );
  background: var(--accent);
}

.case-postit--2::before {
  left: 0 !important;
  right: auto !important;

  clip-path: polygon(
    0 0,
    100% 100%,
    0 100%
  );

  background:
    linear-gradient(
      45deg,
      rgba(255,255,255,.84) 0 46%,
      rgba(239,214,93,.98) 48% 100%
    );

  transform-origin: 0 100%;
  animation: postit-bottom-left-fold 5.8s ease-in-out infinite;
}

.case-postit--2::before {
  animation-delay: -1.9s;
}

.case-postit--3::before {
  animation-delay: -3.2s;
}

@keyframes postit-bottom-right-fold {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-2px) rotate(-1deg) scale(1.025);
  }
}

@keyframes postit-bottom-left-fold {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-2px) rotate(1deg) scale(1.025);
  }
}

/* Give text a little breathing room above the bottom folds. */
.case-postit--1 .case-postit__text,
.case-postit--3 .case-postit__text {
  padding: 0 6px 8px 0;
}

.case-postit--2 .case-postit__text {
  padding: 0 0 8px 6px;
}

/* Keep post-its visually tied to the image, not the charcoal band. */
.case-postit--1 {
  right: 16px;
  top: -24px;
}

.case-postit--2 {
  left: -34px;
  bottom: 48px;
}

.case-postit--3 {
  right: -20px;
  bottom: 34px;
}

@media (max-width: 800px) {
  .case-keyword--1 {
    left: 8px;
    top: 64%;
  }

  .case-keyword--2 {
    right: 8px;
    top: 72%;
  }

  .case-keyword--3 {
    left: 50%;
    bottom: 8px;
  }

  .case-postit--2 {
    left: 10px;
  }

  .case-postit--3 {
    right: 10px;
  }
}


/* =========================================================
   HERO STICKER ROLL + CASE ANNOTATION FIX — v48
   ========================================================= */

/* ---------------------------------------------------------
   CASE HERO ANNOTATIONS
   Annotations now live INSIDE .case-intro__placeholder,
   so they cannot drift onto the lower charcoal image.
--------------------------------------------------------- */

.case-intro__visual {
  position: relative;
  min-height: 100%;
}

.case-intro__placeholder {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  min-height: 430px;

  display: grid;
  place-items: center;

  border-radius: 8px;
  background: #aaa;
  color: #666;
}

.case-intro__placeholder-label {
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* Sticker positions are now relative to the GREY HERO PLACEHOLDER itself. */
.case-keyword--1 {
  left: -24px;
  top: 68%;
  transform: rotate(-7deg);
}

.case-keyword--2 {
  left: 44%;
  right: auto;
  bottom: -15px;
  top: auto;
  transform: translateX(-50%) rotate(4deg);
}

.case-keyword--3 {
  right: -24px;
  left: auto;
  top: 73%;
  bottom: auto;
  transform: rotate(6deg);
}

/* Post-its likewise remain attached to the top hero image. */
.case-postit--1 {
  right: 18px;
  top: -26px;
  bottom: auto;
}

.case-postit--2 {
  left: -36px;
  top: 62%;
  bottom: auto;
}

.case-postit--3 {
  right: -20px;
  top: 76%;
  bottom: auto;
}

/* ---------------------------------------------------------
   HERO UX/UI STICKER
   Smooth, continuous unroll with a thin folded-paper leading edge.
--------------------------------------------------------- */

/*
  The paper begins as a narrow sliver at the right edge and reveals
  continuously toward the left. Only TWO animation endpoints are used,
  avoiding the stepped/jumpy feel from the previous versions.
*/
.hero-sticker-roll__paper {
  position: absolute;
  right: 0;
  top: 7px;

  width: 108px;
  min-width: 108px;
  height: 32px;

  transform: none;
  transform-origin: right center;

  clip-path: inset(-8px 0 -8px 100%);
  will-change: clip-path;

  animation:
    hero-paper-unroll-v48 2.15s cubic-bezier(.22,.64,.18,1) 3.18s forwards;
}

@keyframes hero-paper-unroll-v48 {
  from {
    clip-path: inset(-8px 0 -8px 100%);
  }

  to {
    clip-path: inset(-8px 0 -8px 0);
  }
}

/*
  The leading edge is NOT a roll/oval anymore.
  It is a slim folded strip of paper with a visible crease and underside.
*/
.hero-sticker-roll__curl {
  position: absolute;
  z-index: 6;
  top: 6px;
  left: 106px;

  width: 7px;
  height: 34px;

  border-radius: 1px;
  background:
    linear-gradient(
      90deg,
      #d9d9d4 0%,
      #ffffff 32%,
      #ffffff 58%,
      #cfcfca 100%
    );

  border-left: 1px solid rgba(61,61,59,.18);
  border-right: 1px solid rgba(61,61,59,.12);

  box-shadow:
    1px 1px 2px rgba(0,0,0,.10);

  transform: translateX(0) skewY(-2deg);
  transform-origin: center;
  will-change: transform, opacity;

  animation:
    hero-curl-slide-v48 2.15s cubic-bezier(.22,.64,.18,1) 3.18s forwards;
}

/* Tiny folded underside: makes it read as paper turning over, not a capsule. */
.hero-sticker-roll__curl::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 2px;

  width: 7px;
  height: 8px;

  background: #e3e3df;
  border-left: 1px solid rgba(61,61,59,.15);

  clip-path: polygon(100% 0, 100% 100%, 0 72%);
  transform: rotate(-5deg);
}

@keyframes hero-curl-slide-v48 {
  0% {
    transform: translateX(0) skewY(-2deg);
    opacity: 1;
  }

  92% {
    transform: translateX(-104px) skewY(1deg);
    opacity: 1;
  }

  100% {
    transform: translateX(-108px) skewY(1deg) scaleX(.25);
    opacity: 0;
  }
}

/* Kill all previous hero roll animations that might conflict. */
.hero-sticker-roll__paper {
  animation-name: hero-paper-unroll-v48 !important;
}

.hero-sticker-roll__curl {
  animation-name: hero-curl-slide-v48 !important;
}

/* ---------------------------------------------------------
   Post-it folds stay at the actual BOTTOM corners.
--------------------------------------------------------- */

.case-postit {
  --fold-size: 20px;
  overflow: hidden;
  background: var(--accent);
}

/* Bottom-right */
.case-postit--1,
.case-postit--3 {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--fold-size)),
    calc(100% - var(--fold-size)) 100%,
    0 100%
  );
}

/* Bottom-left */
.case-postit--2 {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--fold-size) 100%,
    0 calc(100% - var(--fold-size))
  );
}

.case-postit::before {
  top: auto !important;
  bottom: 0 !important;
  width: var(--fold-size) !important;
  height: var(--fold-size) !important;
  border-radius: 0 !important;
}

/* True bottom-right flap */
.case-postit--1::before,
.case-postit--3::before {
  right: 0 !important;
  left: auto !important;

  clip-path: polygon(0 100%, 100% 0, 100% 100%);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.88) 0 47%,
      #efd862 49% 100%
    );

  transform-origin: 100% 100%;
  animation: postit-bottom-right-fold-v48 5.8s ease-in-out infinite !important;
}

/* True bottom-left flap */
.case-postit--2::before {
  left: 0 !important;
  right: auto !important;

  clip-path: polygon(0 0, 100% 100%, 0 100%);

  background:
    linear-gradient(
      45deg,
      rgba(255,255,255,.88) 0 47%,
      #efd862 49% 100%
    );

  transform-origin: 0 100%;
  animation: postit-bottom-left-fold-v48 5.9s ease-in-out infinite !important;
}

@keyframes postit-bottom-right-fold-v48 {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(-1.2deg);
  }
}

@keyframes postit-bottom-left-fold-v48 {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(1.2deg);
  }
}

@media (max-width: 800px) {
  .case-keyword--1 {
    left: 8px;
    top: 66%;
  }

  .case-keyword--2 {
    left: 50%;
    bottom: 8px;
  }

  .case-keyword--3 {
    right: 8px;
    top: 72%;
  }

  .case-postit--2 {
    left: 10px;
  }

  .case-postit--3 {
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sticker-roll__paper {
    clip-path: none !important;
    animation: none !important;
  }

  .hero-sticker-roll__curl {
    display: none !important;
  }
}


/* =========================================================
   HERO BUDDY EMERGENCE — v49
   Buddy is hidden until the hero paint is fully complete.
   ========================================================= */

.buddy-object--hero {
  opacity: 0 !important;
  visibility: hidden;
  transform: translate(-50%, -47%) scale(.94);
  transition:
    opacity .48s ease,
    transform .62s cubic-bezier(.2,.78,.22,1);
}

.buddy-object--hero.is-emerging {
  opacity: 1 !important;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Caption appears together with Buddy, not during the paint animation. */
.buddy-caption {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity .38s ease .14s,
    transform .48s ease .14s;
}

.buddy-stage:has(.buddy-object--hero.is-emerging) .buddy-caption {
  opacity: 1 !important;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Button waits until Buddy is fully present and his eyes have opened. */
.buddy-button {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.buddy-button.is-visible {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   LANDING HERO — FINAL
   ========================================================= */

:root {
  --hero-wave-height: 96px;
}

.hero {
  position: relative;
  min-height: calc(100svh + var(--hero-wave-height));
  min-height: calc(100vh + var(--hero-wave-height));
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
  isolation: isolate;
}

.hero-sketch {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--charcoal);
}

/* Paper wave sits just below the initial viewport. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: var(--hero-wave-height);
  background: url("assets/hero-wave.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 4;
  width: min(var(--page-width), calc(100% - 40px));
  min-height: 100svh;
  min-height: 100vh;
  margin-inline: auto;
  padding-block: 130px 90px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.hero__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero__statement {
  max-width: 620px;
  margin: 0 0 34px;

  font-family: var(--font-display);
  font-size: clamp(64px, 5.6vw, 88px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.hero__identity {
  position: relative;
  display: inline-block;
}

.hero__identity .eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}

.hero__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(54px, 4.6vw, 72px);
  font-weight: 400;
  line-height: .92;
}

.hero__gali {
  position: relative;
  display: inline-block;
}

.hero__gali-outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

/* Hero entrance sequence */
.hero-reveal {
  opacity: 0;
}

.hero-reveal--statement {
  transform: translateY(18px);
  animation: hero-statement-in .62s cubic-bezier(.2,.75,.22,1) .18s forwards;
}

.hero-reveal--eyebrow {
  transform: translateY(10px);
  animation: hero-eyebrow-in .42s ease-out .88s forwards;
}

.hero-reveal--rasmus {
  display: inline-block;
  transform: translateY(18px);
  animation: hero-rasmus-in .5s cubic-bezier(.2,.8,.2,1) 1.06s forwards;
}

.hero-reveal--gali {
  display: inline-block;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: hero-gali-draw .72s cubic-bezier(.28,.08,.18,1) 1.22s forwards;
}

@keyframes hero-statement-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-eyebrow-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-rasmus-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-gali-draw {
  to { clip-path: inset(0 0 0 0); }
}

/* UX/UI sticker */
.hero-sticker-pop {
  position: absolute;
  z-index: 10;
  right: -68px;
  top: 50%;
  width: max-content;

  opacity: 0;
  transform: translateY(-50%) rotate(-12deg) scale(.35);
  transform-origin: center;

  animation: hero-sticker-pop .46s cubic-bezier(.18,.9,.28,1.35) 1.48s forwards;
}

.hero-sticker-pop .sticker-label--hero {
  position: static;
  min-width: 98px;
  min-height: 30px;
  padding: 7px 13px;

  border: 1px solid var(--charcoal);
  border-radius: 2px;
  background: #fff;
  color: var(--charcoal);
  box-shadow:
    0 0 0 5px #fff,
    0 3px 7px rgba(0,0,0,.10);

  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  opacity: 1;
  transform: none;
}

.hero-sticker-pop::after,
.hero-sticker-pop .sticker-label--hero::after {
  display: none;
  content: none;
}

@keyframes hero-sticker-pop {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(-12deg) scale(.35);
  }
  68% {
    opacity: 1;
    transform: translateY(-50%) rotate(-12deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) rotate(-12deg) scale(1);
  }
}

/* Buddy owns the right half. */
.hero__aside {
  width: 100%;
  min-width: 0;
  min-height: 520px;
  align-self: stretch;

  display: flex;
  align-items: center;
  justify-content: center;
}

.buddy-scene {
  position: relative;
}

.buddy-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  isolation: isolate;
}

.buddy-object--hero {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  width: min(320px, 70%);
  height: auto;

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -47%) scale(.94);

  transition:
    opacity .48s ease,
    transform .62s cubic-bezier(.2,.78,.22,1);
}

.buddy-object--hero.is-emerging {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.buddy-caption {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5%;
  width: 100%;
  max-width: 260px;
  margin: 0;

  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);

  transition:
    opacity .38s ease .14s,
    transform .48s ease .14s;
}

.buddy-stage:has(.buddy-object--hero.is-emerging) .buddy-caption {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.buddy-button {
  position: absolute;
  right: 8%;
  bottom: 12%;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .22s ease,
    transform .42s cubic-bezier(.18,.9,.24,1.3),
    box-shadow .18s ease;
}

.buddy-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Landing hero responsive */
@media (max-width: 1000px) {
  .hero__inner {
    gap: 40px;
  }

  .hero__statement {
    max-width: 100%;
    font-size: clamp(56px, 7vw, 76px);
  }

  .hero__title {
    font-size: clamp(48px, 6vw, 64px);
  }

  .hero-sticker-pop {
    right: -54px;
  }
}

@media (max-width: 800px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    align-content: center;
  }

  .hero__statement {
    margin-bottom: 28px;
    font-size: clamp(50px, 13vw, 70px);
  }

  .hero__identity .eyebrow {
    font-size: 17px;
  }

  .hero__title {
    font-size: clamp(46px, 12vw, 62px);
  }

  .hero__aside,
  .buddy-stage {
    min-height: 320px;
  }

  .buddy-object--hero {
    width: min(220px, 60%);
  }

  .hero-sticker-pop {
    right: -42px;
  }
}


/* =========================================================
   v77 — LANDING HERO HIERARCHY
   Hi -> Rasmus Gali -> descriptor
   ========================================================= */

.hero__identity {
  margin-bottom: 30px;
}

.hero__identity .eyebrow {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.2vw, 32px);
}

.hero__title {
  gap: 18px;
  font-size: clamp(92px, 8.7vw, 132px);
  line-height: .84;
}

.hero__statement {
  max-width: 590px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-transform: none;
}

.hero-reveal--eyebrow {
  animation-delay: .18s;
}

.hero-reveal--rasmus {
  animation-delay: .42s;
}

.hero-reveal--gali {
  animation-delay: .62s;
}

.hero-reveal--statement {
  animation-delay: 1.02s;
}

.hero-sticker-pop {
  animation-delay: .88s;
}

@media (max-width: 1000px) {
  .hero__title {
    font-size: clamp(74px, 9vw, 104px);
  }

  .hero__statement {
    font-size: clamp(21px, 2.5vw, 27px);
  }
}

@media (max-width: 800px) {
  .hero__identity {
    margin-bottom: 24px;
  }

  .hero__identity .eyebrow {
    font-size: 22px;
  }

  .hero__title {
    gap: 12px;
    font-size: clamp(66px, 18vw, 94px);
  }

  .hero__statement {
    max-width: 520px;
    font-size: 21px;
  }
}


/* =========================================================
   v77 — CASE STUDY REAL IMAGERY
   ========================================================= */

.case-image,
.case-intro__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-intro__placeholder--image {
  overflow: hidden;
}

.case-intro__placeholder--image .case-intro__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.case-intro__placeholder--image .case-keyword,
.case-intro__placeholder--image .case-postit {
  z-index: 2;
}

.case-image {
  min-height: 220px;
  border-radius: 2px;
}

.case-image--hero {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}

.case-image--tall {
  min-height: 520px;
}

.case-grid-2 .case-image {
  aspect-ratio: 4 / 3;
}

.case-stack .case-image {
  height: auto;
  min-height: 0;
}

@media (max-width: 800px) {
  .case-image--tall {
    min-height: 360px;
  }
}


/* =========================================================
   v78 — HERO STICKER + BUDDY SPOTLIGHT FIX
   ========================================================= */

/*
  Sticker is intentionally independent from the old reveal system.
  It always exists and only uses its own pop animation.
*/
.hero-sticker-pop {
  display: block !important;
  opacity: 0;
  visibility: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;

  animation: hero-sticker-pop .46s cubic-bezier(.18,.9,.28,1.35) .88s forwards !important;
}

.hero-sticker-pop .sticker-label--hero {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/*
  Buddy keeps the current visual size, but the stage is constrained
  around him rather than stretching across the whole right column.
*/
.hero__aside {
  position: relative;
}

.buddy-stage {
  width: min(390px, 100%);
  height: 520px;
  min-height: 0;
  margin-inline: auto;
}

/*
  Spotlight only sits behind Buddy now.
  It no longer expands to the full 50% hero column.
*/
.buddy-spotlight {
  left: 50%;
  top: 46%;
  width: min(360px, 92%);
  height: auto;
  aspect-ratio: 1;
}

/* Buddy itself remains the same approximate size. */
.buddy-object--hero {
  width: min(320px, 82%);
  top: 46%;
}

/* Caption underneath Buddy, but above the light switch. */
.buddy-caption {
  bottom: 11%;
}

/* Put the light button directly underneath Buddy again. */
.buddy-button,
.buddy-button.is-visible {
  left: 50%;
  right: auto;
  bottom: 3%;
}

.buddy-button {
  transform: translateX(-50%) rotate(-2deg) scale(.55);
}

.buddy-button.is-visible {
  transform: translateX(-50%) rotate(-2deg) scale(1);
}

.buddy-button:hover {
  transform: translateX(-50%) rotate(3deg) translateY(-2px) scale(1);
}

@media (max-width: 800px) {
  .buddy-stage {
    width: min(300px, 100%);
    height: 360px;
  }

  .buddy-spotlight {
    width: min(270px, 90%);
  }

  .buddy-object--hero {
    width: min(220px, 76%);
  }

  .buddy-caption {
    bottom: 12%;
  }

  .buddy-button,
  .buddy-button.is-visible {
    bottom: 2%;
  }
}


/* =========================================================
   v79 — HERO + SWIPBOX CASE REFINEMENTS
   ========================================================= */

/* ---------- Landing hero ---------- */

.hero__statement {
  max-width: 620px;
}

/*
  Keep the light button visually attached to the spotlight/Buddy scene.
  It sits immediately under the circle when the light is on.
*/
.buddy-stage {
  padding-bottom: 58px;
}

.buddy-spotlight {
  top: 44%;
  width: min(330px, 86%);
}

.buddy-object--hero {
  top: 44%;
}

.buddy-caption {
  bottom: 64px;
}

.buddy-button,
.buddy-button.is-visible {
  left: 50%;
  right: auto;
  bottom: 22px;
}

/* ---------- SwipBox intro annotations ---------- */

.case-intro__placeholder--image {
  overflow: visible !important;
}

/*
  The image itself stays clipped to its rounded frame,
  while stickers/post-its are allowed to cross the edge.
*/
.case-intro__image {
  border-radius: 8px;
}

.case-intro__placeholder--image .case-intro__image {
  z-index: 0;
}

.case-intro__placeholder--image .case-keyword,
.case-intro__placeholder--image .case-postit {
  position: absolute;
  z-index: 5 !important;
}

/* Put keyword stickers directly on / across the image edges. */
.case-intro__placeholder--image .case-keyword--1 {
  left: -18px;
  top: 18%;
}

.case-intro__placeholder--image .case-keyword--2 {
  left: auto;
  right: -20px;
  top: 47%;
  bottom: auto;
  transform: rotate(5deg);
}

.case-intro__placeholder--image .case-keyword--3 {
  left: 32%;
  right: auto;
  top: auto;
  bottom: -16px;
  transform: rotate(-4deg);
}

/* Post-its also stay in front of the image rather than behind it. */
.case-intro__placeholder--image .case-postit--1 {
  top: -24px;
  right: 28px;
}

.case-intro__placeholder--image .case-postit--2 {
  left: -28px;
  top: 58%;
}

.case-intro__placeholder--image .case-postit--3 {
  right: -24px;
  top: 72%;
}

/* ---------- Centered case metadata ---------- */

.case-meta-row--centered {
  justify-items: center;
  text-align: center;
}

.case-meta-row--centered .case-meta__item {
  align-items: center;
  text-align: center;
}

.case-meta-row--centered .case-meta__item strong,
.case-meta-row--centered .case-meta__item span {
  width: 100%;
  text-align: center;
}

/* ---------- Editorial Challenge / Approach sections ---------- */

.case-section--editorial {
  display: block;
}

.case-section__top--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.case-section__top--two-col > div {
  min-width: 0;
}

/*
  Media sits BELOW the complete two-column text area.
  Natural sizing means we do not crop the uploaded files.
*/
.case-media-row {
  margin-top: 56px;
}

.case-media-row--natural {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.case-media-natural {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  border-radius: 8px;
}

/*
  Two section-1 images can sit beside each other if their raw widths fit;
  otherwise they wrap naturally.
*/
.case-media-row--natural .case-media-natural {
  object-fit: contain;
}

@media (max-width: 900px) {
  .case-section__top--two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-media-row {
    margin-top: 40px;
  }

  .case-media-row--natural {
    gap: 20px;
  }
}


/* =========================================================
   v80 — SWIPBOX EDITORIAL GRID
   ========================================================= */

/* Align right-column copy with the top of the left-side heading block. */
.case-section__top--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
}

.case-section__top--two-col > * {
  min-width: 0;
}

/*
  Challenge / Approach sections have a sticker above the large heading.
  Offset the right column by the sticker's visual height so the first
  bread-text line aligns with the TOP of the large heading, not the sticker.
*/
/* Image grid shared by SwipBox sections. */
.case-media-grid {
  width: 100%;
  margin-top: 56px;
  display: grid;
  gap: 32px;
  align-items: start;
}

.case-media-grid--2,
.case-media-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-media-grid--2-plus-1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-media-grid--2-plus-1 .case-media-grid__third {
  grid-column: 1 / -1;
  justify-self: start;
}

.case-media-grid--full {
  grid-template-columns: 1fr;
}

.case-media-grid--full .case-media-natural {
  width: 100%;
}

.case-media-natural {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  object-fit: contain;
}

/* Placeholders in the shared case template use the same media-grid geometry. */
.case-media-grid > .case-image-placeholder {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
}

.case-media-grid--full > .case-image-placeholder {
  min-height: clamp(280px, 34vw, 520px);
}

/*
  Section 1 and 2 images remain uncropped and preserve the raw aspect ratios.
  Grid width only scales them responsively; it does not force a crop.
*/
/* Outcome images sit side by side beneath the outcome copy. */
.case-outcome__media {
  margin-top: 48px;
}

@media (max-width: 900px) {
  .case-section__top--two-col,
  .case-media-grid--2,
  .case-media-grid--4,
  .case-media-grid--2-plus-1,
  .case-media-grid--2-plus-1 .case-media-grid__third,
  .case-media-grid--section3 .case-media-grid__third,
  .case-media-grid {
    margin-top: 40px;
    gap: 20px;
  }
}


/* =========================================================
   v81 — SWIPBOX ALIGNMENT + EQUAL-HEIGHT IMAGE PAIRS
   ========================================================= */


/*
  Horizontal image pairs use their actual source-width proportions.
  Because the source files in each pair share the same raw height,
  this preserves their aspect ratios AND makes them render at exactly
  the same visual height with a 32px gutter.
*/

/* Section 1 raw sizes: 700x550 + 452x550 */
/* Section 2 first row raw sizes: 402x550 + 750x550 */
/* Outcome raw sizes: 700x550 + 452x550 */
/* Make paired images fill their proportional columns at the same height. */
.case-media-grid--section1 > .case-media-natural,
.case-media-grid--section2 > .case-media-natural:not(.case-media-grid__third),
/*
  Keep the natural aspect ratio relationship without introducing
  arbitrary fixed heights. Each pair's proportional columns are based
  directly on the uploaded file dimensions.
*/
@media (max-width: 900px) {
  .case-media-grid--section1,
  .case-media-grid--section2,
  .case-media-grid--section1 > .case-media-natural,
  .case-media-grid--section2 > .case-media-natural,
  }


/* =========================================================
   v82 — EQUAL-HEIGHT HORIZONTAL IMAGE PAIRS EVERYWHERE
   ========================================================= */

/*
  Same rule as Section 1 / Section 2 / Outcome:
  whenever two SwipBox images share a horizontal row,
  preserve their source-width proportions so they render
  at the same visible height with a 32px gutter.
*/

/* Section 3 row 1 raw sizes: 402x550 + 750x550 */
/* Third image stays full row underneath. */
/* Fourth image stays underneath the third and right aligned. */
/*
  Section 4 has two horizontal rows.
  Row 1 raw sizes: 700x550 + 452x550
  Row 2 raw sizes: 402x550 + 750x550

  CSS Grid cannot use two different column ratios in the same grid,
  so each row is converted to a nested two-column layout via display: contents
  wrappers generated implicitly with nth-child sizing below.
*/
/* Row 1: 700 / 1152 and 452 / 1152, with a 32px gutter */
/* Row 2: 402 / 1152 and 750 / 1152, with the same 32px gutter */
/*
  Because every pair in the source material is exactly 550px tall,
  the proportional widths above produce matching visual heights
  without distorting the images.
*/

@media (max-width: 900px) {
  .case-media-grid--section3,}


/* =========================================================
   v87 — CANONICAL CASE HERO + ANNOTATIONS
   Replaces the conflicting v83-v86 overrides.
   ========================================================= */

/* ---------- SwipBox intro fills the complete first viewport ---------- */

/*
  The white intro is exactly one viewport tall.
  Its inner two-column block is centered vertically as a whole.
*/
.case-hero-stage {
  position: relative;
  display: block;
}

.case-hero-stage .case-intro {
  min-height: 100svh;
  min-height: 100vh;

  display: flex;
  align-items: center;

  padding-block: 72px;
}

/*
  One shared row for copy + image.
  The row height is determined by the copy content.
*/
.case-intro__layout {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 64px;
  align-items: stretch;
}

.case-intro__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*
  The image stretches to the SAME height as the copy column:
  title top -> reading-time bottom.
*/
.case-intro__visual {
  position: relative;
  display: flex;
  align-self: stretch;

  min-height: 0;
}

.case-intro__placeholder,
.case-intro__placeholder--image {
  position: relative;
  flex: 1 1 auto;

  width: 100%;
  height: auto;
  min-height: 0;

  border-radius: 8px;
  overflow: visible;
}

.case-intro__placeholder--image .case-intro__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: 8px;
}

/* Annotations remain anchored to the actual image frame. */
.case-intro__placeholder--image .case-keyword,
.case-intro__placeholder--image .case-postit {
  position: absolute;
  z-index: 5;
}

/*
  The charcoal band starts only AFTER the white 100vh hero.
*/
.case-hero-stage .case-hero-band {
  position: relative;

  margin: 54px 0 96px !important;
  padding: 72px 0;

  display: flex;
  align-items: center;

  overflow: visible;
  background: var(--charcoal);
}

.case-hero-stage .case-hero-band::before,
.case-hero-stage .case-hero-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 54px;

  clip-path: none !important;
  transform: none !important;
  pointer-events: none;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.case-hero-stage .case-hero-band::before {
  display: block !important;
  top: -53px;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 46 C95 40 150 55 245 45 C345 34 405 54 505 43 C615 31 680 56 790 44 C900 32 970 53 1070 43 C1170 33 1250 52 1340 42 C1380 38 1410 39 1440 42 L1440 80 L0 80 Z'/%3E%3C/svg%3E");
}

.case-hero-stage .case-hero-band::after {
  bottom: -53px;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 0 L1440 0 L1440 34 C1360 46 1280 27 1185 39 C1080 52 1000 30 900 42 C792 55 718 30 606 42 C496 54 422 31 315 43 C210 54 120 35 0 46 Z'/%3E%3C/svg%3E");
}

.case-hero-stage .case-hero-band > * {
  position: relative;
  z-index: 2;
}

.case-hero-stage .case-image--hero {
  display: block;
  width: 100%;
  max-height: 680px;

  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .case-hero-stage .case-intro {
    min-height: 100svh;
    min-height: 100vh;
    padding-block: 104px 72px;
  }

  .case-intro__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-intro__visual {
    min-height: 360px;
  }

  .case-hero-stage .case-hero-band {
    padding: 48px 0;
  }

  .case-hero-stage .case-image--hero {
    max-height: none;
  }
}



/* Shared case-template hero sizing */
.case-hero-stage .case-intro__placeholder {
  height: 100%;
}

.case-hero-stage .case-intro__placeholder-label {
  position: relative;
  z-index: 1;
}

/* ---------- Outcome card ---------- */

.case-outcome {
  border-radius: 8px !important;
  overflow: hidden;
}

.case-outcome .case-media-natural,
.case-outcome__media .case-media-natural {
  border-radius: 8px !important;
}

/* ---------- Case intro text sequence ---------- */

.case-page .case-intro__title,
.case-page .case-intro__summary,
.case-page .case-reading {
  opacity: 0;
}

.case-page .case-intro__title {
  transform: translateY(18px);
  animation: case-intro-title-in-v87 .58s cubic-bezier(.2,.8,.2,1) .16s forwards;
}

.case-page .case-intro__summary {
  transform: translateY(12px);
  animation: case-intro-copy-in-v87 .52s cubic-bezier(.2,.8,.2,1) .56s forwards;
}

.case-page .case-reading {
  transform: translateY(8px);
  animation: case-intro-reading-in-v87 .42s ease-out .92s forwards;
}

@keyframes case-intro-title-in-v87 {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes case-intro-copy-in-v87 {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes case-intro-reading-in-v87 {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Case stickers + post-its ---------- */

/*
  IMPORTANT:
  No !important on opacity here.
  The earlier versions used opacity:0!important, which prevented the
  animation keyframes from ever taking ownership of opacity.
*/
.case-page .case-keyword,
.case-page .case-postit {
  opacity: 0;
  visibility: hidden;

  transform-origin: center;
  transform: scale(.72) rotate(var(--annotation-rotate, 0deg));
}

/*
  animation-fill-mode: both means the 0% keyframe is applied DURING
  each item's delay. So item 2/3 remain invisible while item 1 pops.
*/
.case-page.case-annotations-ready .case-keyword,
.case-page.case-annotations-ready .case-postit {
  animation:
    case-annotation-pop-v87
    .48s
    cubic-bezier(.16,.88,.24,1.3)
    both;
}

.case-page.case-annotations-ready .case-keyword--1 { animation-delay: .00s; }
.case-page.case-annotations-ready .case-keyword--2 { animation-delay: .16s; }
.case-page.case-annotations-ready .case-keyword--3 { animation-delay: .32s; }

.case-page.case-annotations-ready .case-postit--1 { animation-delay: .52s; }
.case-page.case-annotations-ready .case-postit--2 { animation-delay: .70s; }
.case-page.case-annotations-ready .case-postit--3 { animation-delay: .88s; }

@keyframes case-annotation-pop-v87 {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(.72) rotate(var(--annotation-rotate, 0deg));
  }

  1% {
    visibility: visible;
  }

  72% {
    opacity: 1;
    visibility: visible;
    transform: scale(1.08) rotate(var(--annotation-rotate, 0deg));
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(var(--annotation-rotate, 0deg));
  }
}

.case-keyword--1 { --annotation-rotate: -5deg; }
.case-keyword--2 { --annotation-rotate: 5deg; }
.case-keyword--3 { --annotation-rotate: -4deg; }

.case-postit--1 { --annotation-rotate: -6deg; }
.case-postit--2 { --annotation-rotate: 5deg; }
.case-postit--3 { --annotation-rotate: -4deg; }

/* ---------- Post-it polish ---------- */

.case-postit {
  overflow: hidden;
  padding: 14px 14px 18px;
}

.case-postit__text {
  display: block;
  width: 100%;
  max-width: 100%;

  overflow-wrap: anywhere;
  font-size: clamp(10px, .85vw, 13px);
  line-height: 1.12;
}

/* Light folded flap so the corner actually reads as folded paper. */
.case-postit::after {
  background: rgba(255,255,255,.40) !important;
  box-shadow:
    -1px -1px 0 rgba(255,255,255,.32),
    1px 1px 2px rgba(0,0,0,.08);
}

/* ---------- UX nomination ---------- */

/* Landing: nomination lives inside the SwipBox thumbnail again. */
.project--swipbox .project__visual {
  position: relative;
}

.project--swipbox .ux-nomination-badge {
  display: block !important;
  position: absolute !important;
  z-index: 4;

  right: 32px !important;
  bottom: 32px !important;
  left: auto !important;
  top: auto !important;

  width: 87px !important;
  height: 130px !important;

  opacity: 1 !important;
  transform: none !important;

  object-fit: contain !important;
  pointer-events: none;
}

/* SwipBox case: separate nomination follows viewport at bottom-right. */
@keyframes case-nomination-in-v87 {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .case-hero-stage .case-intro {
    min-height: 100svh;
    min-height: 100vh;
  }

  .case-hero-stage .case-hero-band {
    margin-top: 54px !important;
    padding: 48px 0;
  }

  .case-hero-stage .case-image--hero {
    max-height: none;
  }

  .project--swipbox .ux-nomination-badge {
    right: 20px !important;
    bottom: 20px !important;
    width: 70px !important;
    height: auto !important;
  }

  }


/* =========================================================
   v94 — SWIPBOX AWARD BADGE SIZE FIX
   ========================================================= */

.swipbox-award-badge-link {
  position: fixed;
  z-index: 950;
  right: 28px;
  bottom: 28px;

  display: block;
  width: 82px;
  height: 118px;
  min-width: 82px;
  min-height: 118px;
  max-width: 82px;
  max-height: 118px;

  overflow: visible;
  text-decoration: none;
  cursor: pointer;

  opacity: 0;
  transform: translateY(12px) scale(.92);
  animation: case-nomination-in-v87 .42s cubic-bezier(.2,.8,.2,1) 1.95s forwards;
}

/*
  Explicit dimensions isolate the award artwork from any generic img rules
  elsewhere in the portfolio.
*/
.swipbox-award-badge-link > .swipbox-award-badge-image {
  position: static !important;
  display: block !important;

  width: 82px !important;
  height: 118px !important;
  min-width: 82px !important;
  min-height: 118px !important;
  max-width: 82px !important;
  max-height: 118px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;

  pointer-events: none;
}

@media (max-width: 800px) {
  .swipbox-award-badge-link {
    right: 16px;
    bottom: 16px;

    width: 64px;
    height: 92px;
    min-width: 64px;
    min-height: 92px;
    max-width: 64px;
    max-height: 92px;
  }

  .swipbox-award-badge-link > .swipbox-award-badge-image {
    width: 64px !important;
    height: 92px !important;
    min-width: 64px !important;
    min-height: 92px !important;
    max-width: 64px !important;
    max-height: 92px !important;
  }
}

/* =========================================================
   PRIMARY RAISED ROUND BUTTON
   Two real layers: darker-gold body + accent top face.
   ========================================================= */

.main-round-button {
  --button-size: 54px;
  --button-face: var(--accent);
  --button-body: var(--gold);
  --button-outline: var(--gold);

  position: relative;
  display: grid;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  place-items: center;

  border: 2px solid var(--button-outline);
  border-radius: 50%;
  background: var(--button-body);
  box-sizing: border-box;
  cursor: pointer;
}

/*
  The face is a separate physical disc.
  Lifting it exposes the darker-gold button body underneath.
*/
.main-round-button__top {
  position: absolute;
  inset: -2px;

  display: grid;
  place-items: center;

  border: 2px solid var(--button-outline);
  border-radius: 50%;
  background: var(--button-face);

  transform: translateY(-3px);
  transition: transform .12s ease;
  will-change: transform;
}

/* More gold body is visible beneath the face. */
.main-round-button:hover .main-round-button__top {
  transform: translateY(-6px);
}

/* Almost flush with the body: pressed-in button. */
.main-round-button:active .main-round-button__top {
  transform: translateY(-1px);
}

.main-round-button__top img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  pointer-events: none;
}

.main-round-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

/* Buddy light control positioning. */
.hero__aside.buddy-scene {
  position: relative;
}

.hero__aside.buddy-scene > .buddy-button.main-round-button {
  --button-size: 54px;

  position: absolute;
  z-index: 8;
  left: 50%;
  right: auto;
  top: calc(46% + min(360px, 92%) / 2);
  bottom: auto;

  width: var(--button-size);
  height: var(--button-size);

  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;

  transform: translate(-50%, -50%) scale(.55);
  transition:
    opacity .22s ease,
    transform .30s cubic-bezier(.18,.9,.28,1.25);
}

.hero__aside.buddy-scene > .buddy-button.main-round-button.is-visible {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* The control itself never shifts on hover/press; only its face moves. */
.hero__aside.buddy-scene > .buddy-button.main-round-button:hover,
.hero__aside.buddy-scene > .buddy-button.main-round-button:active,
.hero__aside.buddy-scene > .buddy-button.main-round-button.is-visible:hover,
.hero__aside.buddy-scene > .buddy-button.main-round-button.is-visible:active {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: none;
}

@media (max-width: 800px) {
  .hero__aside.buddy-scene > .buddy-button.main-round-button {
    top: calc(46% + min(270px, 90%) / 2);
  }
}


/* =========================================================
   LANDING HERO — STICKERS + POLISH
   ========================================================= */

/* Slightly smaller Rasmus/Gali title while preserving the existing style. */
.hero__title {
  font-size: clamp(72px, 7.4vw, 112px);
}

/* Descriptor should read as regular body copy, not semibold/bold. */
.hero__statement {
  font-weight: 400 !important;
}

/* Bigger Buddy spotlight. */
.buddy-spotlight {
  width: min(410px, 96%) !important;
}

/* Buddy caption returns when the light is on. */
.buddy-caption {
  bottom: 72px;
  max-width: 240px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(6px);
}

.buddy-light-toggle:checked + .buddy-stage .buddy-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0);
}

/* Adjust light-button edge position to the enlarged spotlight. */
.hero__aside.buddy-scene > .buddy-button.main-round-button {
  top: calc(44% + min(410px, 96%) / 2);
}

@media (max-width: 800px) {
  .buddy-spotlight {
    width: min(310px, 94%) !important;
  }

  .hero__aside.buddy-scene > .buddy-button.main-round-button {
    top: calc(44% + min(310px, 94%) / 2);
  }
}

/* ---------------------------------------------------------
   Personal project stickers
   --------------------------------------------------------- */

.personal-card__visual {
  position: relative;
  overflow: visible;
}

.viewport-sticker {
  position: absolute;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(.72) rotate(-5deg);
  transform-origin: center;
  pointer-events: none;
}

.viewport-sticker--bonfire {
  top: 28px;
  right: -18px;
  transform: scale(.72) rotate(6deg);
}

.viewport-sticker--heist {
  left: -16px;
  bottom: 26px;
  transform: scale(.72) rotate(-7deg);
}

.viewport-sticker.is-in-view {
  visibility: visible;
  animation: viewport-sticker-pop .46s cubic-bezier(.18,.9,.28,1.28) forwards;
}

.viewport-sticker--bonfire.is-in-view {
  --sticker-rotation: 6deg;
}

.viewport-sticker--heist.is-in-view {
  --sticker-rotation: -7deg;
}

@keyframes viewport-sticker-pop {
  0% {
    opacity: 0;
    transform: scale(.72) rotate(var(--sticker-rotation, -5deg));
  }
  72% {
    opacity: 1;
    transform: scale(1.08) rotate(var(--sticker-rotation, -5deg));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--sticker-rotation, -5deg));
  }
}


/* =========================================================
   v114 — Buddy caption visibility
   ========================================================= */

.buddy-caption {
  bottom: 112px !important;
  z-index: 6;
}

@media (max-width: 800px) {
  .buddy-caption {
    bottom: 92px !important;
  }
}


/* =========================================================
   v114 — 404 page
   ========================================================= */

.error-main {
  width: min(var(--page-width), calc(100% - 40px));
  min-height: 76vh;
  margin-inline: auto;
  padding-bottom: 96px;

  display: block;
}

.error-copy {
  max-width: 900px;
  margin: 0 auto;
}

.error-title-stage {
  position: relative;
  max-width: 820px;
  margin-bottom: 44px;
  padding-bottom: 76px;
}

.error-copy h1 {
  margin: 0;
  max-width: 760px;

  font-family: var(--font-body);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: none;
}

.error-drawn-line {
  position: absolute;
  left: 0;
  bottom: 28px;
  width: min(720px, 92%);
  height: 48px;
  overflow: visible;
}

.error-drawn-path {
  fill: none;
  stroke: var(--charcoal);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.error-drawn-path--main {
  stroke-width: 2.4;
}

.error-drawn-path--ghost {
  stroke-width: .8;
  opacity: .38;
}

.error-sad-buddy {
  position: absolute;
  z-index: 3;
  right: 72px;
  bottom: 41px;
  width: 112px;
  height: 112px;
  object-fit: contain;
  transform: translateY(50%);
}

.error-copy > p {
  margin: 0 0 44px;
  font-size: 18px;
  line-height: 1.5;
}

.error-recommend > p {
  margin: 0 0 20px;
  font-size: 16px;
}

/* ---------------------------------------------------------
   Raised rectangular button — sibling to the round light button
   --------------------------------------------------------- */

.raised-link {
  --raised-face: var(--accent);
  --raised-body: var(--gold);
  --raised-outline: var(--gold);

  position: relative;
  display: inline-block;
  padding: 0;

  border: 2px solid var(--raised-outline);
  border-radius: 10px;
  background: var(--raised-body);
  color: var(--charcoal);
  text-decoration: none;
}

.raised-link__top {
  display: block;
  padding: 11px 16px;

  border: 2px solid var(--raised-outline);
  border-radius: 8px;
  background: var(--raised-face);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  transform: translateY(-3px);
  transition: transform .12s ease;
}

.raised-link:hover .raised-link__top {
  transform: translateY(-6px);
}

.raised-link:active .raised-link__top {
  transform: translateY(-1px);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.error-links a {
  padding: 0;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--charcoal);
}

.error-links a:hover {
  color: var(--charcoal);
  opacity: 1;
}

@media (max-width: 760px) {
  .error-title-stage {
    padding-bottom: 96px;
  }

  .error-sad-buddy {
    right: 24px;
    width: 92px;
    height: 92px;
  }

  .error-links {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   v115 — landing hero micro-positioning
   ========================================================= */

/* Spotlight/light circle stays untouched. Buddy alone moves upward. */
.buddy-object--hero {
  top: 40% !important;
}

.buddy-object--hero.is-emerging,
.buddy-object--hero.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

/* Keep both lines visibly above the light control. */
.buddy-caption {
  bottom: 142px !important;
}

/* Light control moves down without moving the light circle. */
.hero__aside.buddy-scene > .buddy-button.main-round-button {
  top: calc(44% + min(410px, 96%) / 2 + 16px) !important;
}

/* Move the role sticker closer to the top edge of GALI without
   replacing its pop-animation transform. */
.hero-sticker-pop.hero-role-sticker {
  top: 34% !important;
}

@media (max-width: 800px) {
  .buddy-object--hero {
    top: 39% !important;
  }

  .buddy-caption {
    bottom: 116px !important;
  }

  .hero__aside.buddy-scene > .buddy-button.main-round-button {
    top: calc(44% + min(310px, 94%) / 2 + 12px) !important;
  }

  .hero-sticker-pop.hero-role-sticker {
    top: 32% !important;
  }
}

/* =========================================================
   v115 — 404 alignment + cleaner drawn line
   ========================================================= */

.error-main.case-shell {
  width: min(var(--page-width), calc(100% - 40px));
  max-width: var(--page-width);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

.error-copy {
  max-width: none;
  width: 100%;
}

.error-title-stage {
  max-width: 820px;
}

/* Cleaner pencil/ink line: no fuzzy secondary stroke. */
.error-drawn-path--main {
  stroke-width: 1.8;
}

.error-drawn-path--ghost {
  display: none;
}

/* 404 raised buttons: lower layer and face have identical outer width. */
.error-links .raised-link {
  display: inline-grid;
  box-sizing: border-box;
  width: auto;
  padding: 0;
}

.error-links .raised-link__top {
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  white-space: nowrap;
}

/* =========================================================
   v115 — Sad Buddy leg animation
   Applied through the SVG's animated leg group/class added below.
   Knee is the transform origin, so the upper leg/knee stays planted.
   ========================================================= */



/* =========================================================
   v115 final — 404 wrapper + button face geometry
   ========================================================= */

.error-main.case-shell {
  width: min(var(--page-width), 100%) !important;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.error-page main {
  box-sizing: border-box;
}

/* The footer uses 20px page padding. Give the 404 the same outer rhythm. */
@media (max-width: 1192px) {
  .error-main.case-shell {
    width: calc(100% - 40px) !important;
  }
}

/* Face and gold base now share the exact same outer footprint.
   The raised effect comes only from vertical translation. */
.error-links .raised-link {
  box-sizing: border-box;
  border: 2px solid var(--gold) !important;
  border-radius: 10px;
}

.error-links .raised-link__top {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: -2px;
  width: calc(100% + 4px);
  min-width: calc(100% + 4px);
  border: 2px solid var(--gold);
  border-radius: 10px;
}

/* Cleaner single-stroke hand line. */
.error-drawn-line {
  height: 34px;
}

.error-drawn-path--main {
  stroke-width: 1.35 !important;
  opacity: .9;
}


/* =========================================================
   v116 — 404 layout refinement
   ========================================================= */

.error-title-stage {
  max-width: none !important;
  width: 100%;
  padding-bottom: 96px;
}

.error-copy h1 {
  max-width: none !important;
  width: 100%;
  font-size: clamp(42px, 4.25vw, 60px) !important;
  white-space: nowrap;
}

.error-drawn-line {
  left: 0;
  right: 0;
  width: 100% !important;
  bottom: 28px;
}

/* Sad Buddy sits on the right end of the line. */
.error-sad-buddy {
  right: 28px !important;
  bottom: 31px !important;
  width: 156px !important;
  height: auto !important;
  transform: translateY(50%);
}

@media (max-width: 760px) {
  .error-copy h1 {
    white-space: normal;
  }

  .error-sad-buddy {
    right: 12px !important;
    width: 122px !important;
  }
}

/* =========================================================
   SIDEQUEST — ENTRANCE
   ========================================================= */

.sidequest-hero {
  padding: 96px 0 128px !important;
}

.sidequest-hero__inner > div,
.sidequest-hero__intro {
  opacity: 0;
  transform: translateY(18px);
  animation: sidequest-hero-in .72s cubic-bezier(.2,.72,.22,1) forwards;
}

.sidequest-hero__intro {
  animation-delay: .18s;
}

@keyframes sidequest-hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tiles emerge one by one on page entry. */
.sidequest-collage .sidequest-tile {
  opacity: 0;
  transform: translateY(20px) scale(.94);
  animation: sidequest-tile-pop .5s cubic-bezier(.18,.9,.28,1.22) forwards;
}

.sidequest-collage .sidequest-tile:nth-child(1)  { animation-delay: .28s; }
.sidequest-collage .sidequest-tile:nth-child(2)  { animation-delay: .34s; }
.sidequest-collage .sidequest-tile:nth-child(3)  { animation-delay: .40s; }
.sidequest-collage .sidequest-tile:nth-child(4)  { animation-delay: .46s; }
.sidequest-collage .sidequest-tile:nth-child(5)  { animation-delay: .52s; }
.sidequest-collage .sidequest-tile:nth-child(6)  { animation-delay: .58s; }
.sidequest-collage .sidequest-tile:nth-child(7)  { animation-delay: .64s; }
.sidequest-collage .sidequest-tile:nth-child(8)  { animation-delay: .70s; }
.sidequest-collage .sidequest-tile:nth-child(9)  { animation-delay: .76s; }
.sidequest-collage .sidequest-tile:nth-child(10) { animation-delay: .82s; }
.sidequest-collage .sidequest-tile:nth-child(11) { animation-delay: .88s; }
.sidequest-collage .sidequest-tile:nth-child(12) { animation-delay: .94s; }
.sidequest-collage .sidequest-tile:nth-child(13) { animation-delay: 1s; }
.sidequest-collage .sidequest-tile:nth-child(14) { animation-delay: 1.06s; }
.sidequest-collage .sidequest-tile:nth-child(15) { animation-delay: 1.12s; }
.sidequest-collage .sidequest-tile:nth-child(16) { animation-delay: 1.18s; }
.sidequest-collage .sidequest-tile:nth-child(17) { animation-delay: 1.24s; }
.sidequest-collage .sidequest-tile:nth-child(18) { animation-delay: 1.30s; }

@keyframes sidequest-tile-pop {
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   SIDEQUEST — FULL-SCREEN LIGHTBOX
   ========================================================= */

.journal-lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: none;
  align-items: stretch;
  justify-content: stretch;
}

.journal-lightbox:target {
  display: block;
}

.journal-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,16,16,.90);
  backdrop-filter: blur(4px);
  opacity: 0;
  animation: sidequest-backdrop-in .34s ease forwards;
}

@keyframes sidequest-backdrop-in {
  to { opacity: 1; }
}

.journal-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  padding: 24px 32px 22px;

  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.journal-carousel-image {
  grid-column: 2;
  min-width: 0;
  height: calc(100vh - 48px);

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 14px;
}

.journal-carousel-image > img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 104px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.journal-lightbox__description {
  margin: 0;
  max-width: 720px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;

  opacity: 0;
  transform: translateY(8px);
  animation: sidequest-caption-in .5s ease .28s forwards;
}

@keyframes sidequest-caption-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journal-counter {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 18px;
  margin: 0;
  color: rgba(247,247,243,.72);
  transform: translateX(-50%);
  font-size: 12px;
}

/* ---------------------------------------------------------
   Arrow / close controls use the same two-layer button logic
   as the landing light button.
   --------------------------------------------------------- */

.sidequest-control {
  --control-size: 52px;

  position: relative;
  display: grid !important;
  width: var(--control-size) !important;
  height: var(--control-size) !important;
  padding: 0 !important;
  place-items: center;

  border: 2px solid var(--gold) !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  color: var(--charcoal) !important;
  box-shadow: none !important;

  opacity: 0;
  transform: scale(.7);
  animation: sidequest-control-pop .42s cubic-bezier(.18,.9,.28,1.28) .18s forwards;
}

.sidequest-control__top {
  position: absolute;
  inset: -2px;

  display: grid;
  place-items: center;

  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--accent);

  transform: translateY(-3px);
  transition: transform .12s ease;
}

.sidequest-control:hover .sidequest-control__top {
  transform: translateY(-6px);
}

.sidequest-control:active .sidequest-control__top {
  transform: translateY(-1px);
}

.sidequest-control__top img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  pointer-events: none;
}

.sidequest-control--close .sidequest-control__top {
  font-size: 24px;
  line-height: 1;
}

@keyframes sidequest-control-pop {
  72% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.journal-arrow--left {
  grid-column: 1;
}

.journal-arrow--right {
  grid-column: 3;
}

.journal-lightbox__close.sidequest-control {
  position: fixed;
  z-index: 8;
  top: 24px;
  right: 28px;
}

/* Allow the sidequest image itself to use nearly the whole display. */
@media (max-width: 760px) {
  .sidequest-hero {
    padding: 72px 0 92px !important;
  }

  .journal-lightbox__dialog {
    padding: 58px 10px 18px;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .sidequest-control {
    --control-size: 42px;
  }

  .journal-carousel-image {
    height: calc(100vh - 76px);
  }

  .journal-carousel-image > img {
    max-height: calc(100vh - 142px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidequest-hero__inner > div,
  .sidequest-hero__intro,
  .sidequest-collage .sidequest-tile,
  .journal-lightbox__backdrop,
  .journal-lightbox__description,
  .sidequest-control {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   v117 — 404 button press depth
   ========================================================= */

/* Push the face completely into the gold base while pressing. */
.error-links .raised-link:active .raised-link__top {
  transform: translateY(2px) !important;
}


/* =========================================================
   SIDEQUEST — LIGHTBOX SIZING
   ========================================================= */

.journal-lightbox__dialog {
  padding: 18px 26px 14px !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  gap: 16px !important;
}

.journal-carousel-image {
  grid-column: 2;
  width: 100%;
  height: calc(100vh - 32px) !important;
  min-height: 0;

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 8px !important;
}

/*
  Use virtually all available viewport space while reserving room
  for the arrows, description, and pagination.
*/
.journal-carousel-image > img {
  width: 100% !important;
  height: 100% !important;
  max-width: calc(100vw - 190px) !important;
  max-height: calc(100vh - 92px) !important;
  object-fit: contain !important;
  border-radius: 8px;
}

.journal-lightbox__description {
  margin: 0 0 28px !important;
  max-width: 760px;
  min-height: 20px;
}

.journal-counter {
  bottom: 10px !important;
}

/* The arrows remain outside the artwork area and never cover the image. */
.journal-arrow--left {
  justify-self: start;
}

.journal-arrow--right {
  justify-self: end;
}

@media (max-width: 760px) {
  .journal-lightbox__dialog {
    padding: 56px 8px 12px !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 6px !important;
  }

  .journal-carousel-image {
    height: calc(100vh - 68px) !important;
  }

  .journal-carousel-image > img {
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 126px) !important;
  }

  .journal-lightbox__description {
    margin-bottom: 26px !important;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------
   Only animate the FIRST lightbox opening.
   Once the first opening animation has completed, arrow-to-arrow
   navigation is immediate.
   --------------------------------------------------------- */

.sidequest-page.lightbox-has-opened .journal-lightbox:target .journal-lightbox__backdrop,
.sidequest-page.lightbox-has-opened .journal-lightbox:target .journal-lightbox__description,
.sidequest-page.lightbox-has-opened .journal-lightbox:target .sidequest-control {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Preserve the raised face position when animation is disabled. */
.sidequest-page.lightbox-has-opened .journal-lightbox:target .sidequest-control__top {
  transform: translateY(-3px);
}

.sidequest-page.lightbox-has-opened .journal-lightbox:target .sidequest-control:hover .sidequest-control__top {
  transform: translateY(-6px);
}

.sidequest-page.lightbox-has-opened .journal-lightbox:target .sidequest-control:active .sidequest-control__top {
  transform: translateY(-1px);
}


/* =========================================================
   LANDING PAGE — MOBILE
   ========================================================= */

@media (max-width: 600px) {
  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .hero__inner {
    width: calc(100% - 40px) !important;
    min-height: 100svh;
    padding-top: 112px !important;
    padding-bottom: 64px !important;
    gap: 18px !important;
  }

  .hero__copy {
    width: 100%;
  }

  .hero__identity {
    width: 100%;
  }

  .hero .eyebrow {
    margin-bottom: 10px;
  }

  /*
    Mobile hierarchy:
    Hii! I'm
    Rasmus
    Gali
    And I'm making...
  */
  .hero__title {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0 !important;

    margin: 0 0 18px !important;

    font-size: clamp(82px, 22vw, 104px) !important;
    line-height: .78 !important;
  }

  .hero-reveal--rasmus {
    display: block;
    width: max-content;
  }

  .hero__gali {
    display: block !important;
    width: max-content;
    margin-top: 8px;
  }

  /*
    On mobile the sticker sits ABOVE GALI instead of hanging
    from the right-hand side.
  */
  .hero-sticker-pop.hero-role-sticker {
    right: auto !important;
    left: 8px !important;
    top: -34px !important;
  }

  .hero-sticker-pop .sticker-label--hero {
    min-width: 104px;
    min-height: 31px;
    font-size: 11px;
  }

  .hero__statement {
    width: min(100%, 360px);
    max-width: 360px !important;
    margin-top: 8px !important;

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.32 !important;
    letter-spacing: -.015em;
  }

  /*
    Buddy area still follows the hero copy, but is given enough
    vertical room that the spotlight/button don't feel cramped.
  */
  .hero__aside {
    min-height: 390px !important;
  }

  .buddy-stage {
    width: min(330px, 100%) !important;
    height: 390px !important;
  }

  /* Make the light switch easier to hit on a phone. */
  .hero__aside.buddy-scene > .buddy-button.main-round-button {
    --button-size: 64px !important;

    width: 64px !important;
    height: 64px !important;
  }

  .hero__aside.buddy-scene > .buddy-button.main-round-button .main-round-button__top img {
    width: 29px;
    height: 29px;
  }

  /*
    Requested lower Buddy caption on mobile.
    This affects only the copy, not Buddy or the light circle.
  */
  .buddy-caption {
    bottom: 78px !important;
    max-width: 250px;
    font-size: 16px;
    line-height: 1.3;
  }

  /* -------------------------------------------------------
     Main landing content
     Same 20px left/right breathing room as the footer/cases.
     ------------------------------------------------------- */

  .section--work,
  .section--personal {
    width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .work-grid,
  .personal-grid {
    width: 100% !important;
  }

  .section-heading {
    width: 100%;
  }

  .project,
  .personal-card {
    width: 100%;
    min-width: 0;
  }

  .project__visual,
  .personal-card__visual {
    width: 100% !important;
    max-width: 100%;
  }

  .section--work {
    padding-top: 104px;
  }

  .section--personal {
    margin-top: 160px !important;
  }
}

/*
  Very large phones such as iPhone 16 Pro Max still use the mobile
  composition above, while keeping the title from becoming comically large.
*/
@media (min-width: 430px) and (max-width: 600px) {
  .hero__title {
    font-size: 100px !important;
  }

  .hero__statement {
    font-size: 21px !important;
  }
}


/* =========================================================
   LANDING PAGE — MOBILE HERO PLACEMENT
   ========================================================= */

@media (max-width: 600px) {
  /*
    UX/UI sticker belongs beside GALI on mobile.
    Keep it attached to .hero__gali so it travels with the word.
  */
  .hero-sticker-pop.hero-role-sticker {
    left: auto !important;
    right: -108px !important;
    top: 50% !important;
  }

  /*
    Lower only the light button. Buddy, spotlight and caption
    keep their current positions.
  */
  .hero__aside.buddy-scene > .buddy-button.main-round-button {
    top: calc(44% + min(310px, 94%) / 2 + 30px) !important;
  }
}

/* Give the sticker a little more room on narrower phones. */
@media (max-width: 390px) {
  .hero-sticker-pop.hero-role-sticker {
    right: -96px !important;
  }
}


/* =========================================================
   CHARCOAL WAVE COMPONENT
   Reusable on every charcoal surface:
   - .case-hero-band
   - About principles band
   - Landing hero bottom edge

   Add:
     class="charcoal-wave"
   Optional:
     charcoal-wave--bottom-only
   ========================================================= */

.charcoal-wave {
  position: relative;
  overflow: visible !important;
  background: var(--charcoal);
  isolation: isolate;
}

/*
  These waves are deliberately deeper than their visible overlap,
  so the vertical drift never reveals a cut/seam.
*/
.charcoal-wave::before,
.charcoal-wave::after {
  content: "";
  position: absolute;
  z-index: 0;

  left: -6%;
  width: 112%;
  height: 88px;

  pointer-events: none;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 110% 100%;

  will-change: margin-left, transform;
}

.charcoal-wave::before {
  top: -74px;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 46 C95 40 150 55 245 45 C345 34 405 54 505 43 C615 31 680 56 790 44 C900 32 970 53 1070 43 C1170 33 1250 52 1340 42 C1380 38 1410 39 1440 42 L1440 80 L0 80 Z'/%3E%3C/svg%3E");

  animation: charcoal-wave-top 3.7s ease-in-out infinite alternate;
}

.charcoal-wave::after {
  bottom: -74px;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 0 L1440 0 L1440 34 C1360 46 1280 27 1185 39 C1080 52 1000 30 900 42 C792 55 718 30 606 42 C496 54 422 31 315 43 C210 54 120 35 0 46 Z'/%3E%3C/svg%3E");

  animation: charcoal-wave-bottom 4.4s ease-in-out infinite alternate;
}

.charcoal-wave > * {
  position: relative;
  z-index: 2;
}

/* Landing hero uses only its bottom wave. */
.charcoal-wave--bottom-only::before {
  content: none !important;
}

/*
  Landing hero already had a static hero-wave.svg on ::after.
  This shared rule supersedes it with the same living charcoal wave
  used throughout the cases/About page.
*/
.hero.charcoal-wave::after {
  z-index: 5;
  bottom: -74px;
  height: 88px;
  background-position: center;
  background-size: 110% 100%;
}

@keyframes charcoal-wave-top {
  0% {
    margin-left: -3.8%;
    transform: translateY(1px);
  }
  50% {
    margin-left: 0;
    transform: translateY(-6px);
  }
  100% {
    margin-left: 3.8%;
    transform: translateY(3px);
  }
}

@keyframes charcoal-wave-bottom {
  0% {
    margin-left: 3.8%;
    transform: translateY(-1px);
  }
  50% {
    margin-left: 0;
    transform: translateY(6px);
  }
  100% {
    margin-left: -3.8%;
    transform: translateY(-3px);
  }
}

@media (max-width: 800px) {
  .charcoal-wave::before,
  .charcoal-wave::after {
    left: -7%;
    width: 114%;
    height: 68px;
    background-size: 112% 100%;
  }

  .charcoal-wave::before {
    top: -57px;
  }

  .charcoal-wave::after,
  .hero.charcoal-wave::after {
    bottom: -57px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .charcoal-wave::before,
  .charcoal-wave::after {
    animation: none !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}


/* =========================================================
   v156 — Case bands use the shared wave WITHOUT legacy edges
   ========================================================= */

/*
  `.case-hero-stage .case-hero-band::before/after` from the older case
  implementation is more specific than `.charcoal-wave::before/after`.
  That meant some old sizing/positioning survived and exposed the SVG edge.

  These scoped rules deliberately match/exceed that specificity and make
  case bands consume the exact shared wave geometry.
*/

.case-hero-stage .case-hero-band.charcoal-wave {
  overflow: visible !important;
  isolation: isolate;
}

.case-hero-stage .case-hero-band.charcoal-wave::before,
.case-hero-stage .case-hero-band.charcoal-wave::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  left: -6% !important;
  right: auto !important;
  width: 112% !important;
  height: 88px !important;

  clip-path: none !important;

  pointer-events: none !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 110% 100% !important;

  will-change: margin-left, transform;
}

.case-hero-stage .case-hero-band.charcoal-wave::before {
  top: -74px !important;
  bottom: auto !important;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 46 C95 40 150 55 245 45 C345 34 405 54 505 43 C615 31 680 56 790 44 C900 32 970 53 1070 43 C1170 33 1250 52 1340 42 C1380 38 1410 39 1440 42 L1440 80 L0 80 Z'/%3E%3C/svg%3E") !important;

  animation: charcoal-wave-top 3.7s ease-in-out infinite alternate !important;
}

.case-hero-stage .case-hero-band.charcoal-wave::after {
  top: auto !important;
  bottom: -74px !important;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%233D3D3D' d='M0 0 L1440 0 L1440 34 C1360 46 1280 27 1185 39 C1080 52 1000 30 900 42 C792 55 718 30 606 42 C496 54 422 31 315 43 C210 54 120 35 0 46 Z'/%3E%3C/svg%3E") !important;

  animation: charcoal-wave-bottom 4.4s ease-in-out infinite alternate !important;
}

/*
  Overscan the moving wave farther than the viewport on case pages.
  The extra width remains hidden outside the browser viewport, so the
  horizontal drift can never expose the left/right end of the SVG.
*/
.case-hero-stage .case-hero-band.charcoal-wave::before,
.case-hero-stage .case-hero-band.charcoal-wave::after {
  left: -10% !important;
  width: 120% !important;
  background-size: 112% 100% !important;
}

@media (max-width: 800px) {
  .case-hero-stage .case-hero-band.charcoal-wave::before,
  .case-hero-stage .case-hero-band.charcoal-wave::after {
    left: -12% !important;
    width: 124% !important;
    height: 68px !important;
    background-size: 114% 100% !important;
  }

  .case-hero-stage .case-hero-band.charcoal-wave::before {
    top: -57px !important;
  }

  .case-hero-stage .case-hero-band.charcoal-wave::after {
    bottom: -57px !important;
  }
}


/* =========================================================
   SHARED RAISED BUTTON COMPONENTS
   One visual source of truth for circular + rectangular actions.
   ========================================================= */

:root {
  --raised-button-face: var(--accent);
  --raised-button-body: var(--gold);
  --raised-button-outline: var(--gold);
  --raised-button-lift: -3px;
  --raised-button-hover-lift: -6px;
  --raised-button-pressed-lift: -1px;
}

/* ---------- Rectangular ---------- */

.raised-link,
.error-links .raised-link,
.about-sidequest-button {
  --raised-face: var(--raised-button-face);
  --raised-body: var(--raised-button-body);
  --raised-outline: var(--raised-button-outline);

  position: relative !important;
  display: inline-grid !important;
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 2px solid var(--raised-outline) !important;
  border-radius: 10px !important;

  background: var(--raised-body) !important;
  color: var(--charcoal) !important;

  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.raised-link__top,
.error-links .raised-link__top,
.about-sidequest-button .raised-link__top {
  position: relative !important;
  inset: auto !important;
  left: -2px !important;

  display: grid !important;
  place-items: center !important;

  box-sizing: border-box !important;
  width: calc(100% + 4px) !important;
  min-width: calc(100% + 4px) !important;
  height: auto !important;

  margin: 0 !important;
  padding: 11px 16px !important;

  border: 2px solid var(--raised-outline) !important;
  border-radius: 10px !important;

  background: var(--raised-face) !important;
  color: var(--charcoal) !important;

  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;

  transform: translateY(var(--raised-button-lift)) !important;
  transition: transform .12s ease !important;
}

.raised-link:hover .raised-link__top,
.error-links .raised-link:hover .raised-link__top,
.about-sidequest-button:hover .raised-link__top {
  transform: translateY(var(--raised-button-hover-lift)) !important;
}

.raised-link:active .raised-link__top,
.error-links .raised-link:active .raised-link__top,
.about-sidequest-button:active .raised-link__top {
  transform: translateY(var(--raised-button-pressed-lift)) !important;
}

/* ---------- Circular ---------- */

.round-action-button,
.main-round-button,
.sidequest-control {
  --button-size: 54px;
  --button-face: var(--raised-button-face);
  --button-body: var(--raised-button-body);
  --button-outline: var(--raised-button-outline);

  position: relative;
  display: grid;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  place-items: center;

  box-sizing: border-box;
  border: 2px solid var(--button-outline);
  border-radius: 50%;
  background: var(--button-body);
  color: var(--charcoal);

  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

.round-action-button__top,
.main-round-button__top,
.sidequest-control__top {
  position: absolute;
  inset: -2px;

  display: grid;
  place-items: center;

  box-sizing: border-box;
  border: 2px solid var(--button-outline);
  border-radius: 50%;
  background: var(--button-face);

  transform: translateY(var(--raised-button-lift));
  transition: transform .12s ease;
}

.round-action-button:hover .round-action-button__top,
.main-round-button:hover .main-round-button__top,
.sidequest-control:hover .sidequest-control__top {
  transform: translateY(var(--raised-button-hover-lift));
}

.round-action-button:active .round-action-button__top,
.main-round-button:active .main-round-button__top,
.sidequest-control:active .sidequest-control__top {
  transform: translateY(var(--raised-button-pressed-lift));
}

.round-action-button__top img,
.main-round-button__top img,
.sidequest-control__top img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Case back-to-top ---------- */

.page-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
}

.case-back-to-top {
  display: flex;
  justify-content: center;
  padding-top: 72px;
  padding-bottom: 118px;
}

.case-back-to-top__button {
  --button-size: 58px;
}

html {
  scroll-behavior: smooth;
}

/* =========================================================
   SIDEQUEST LIGHTBOX — MOBILE CONTROL STACK
   Pagination + description move upward.
   Controls sit directly below pagination:
   left arrow  |  X  |  right arrow
   ========================================================= */

@media (max-width: 800px) {
  .journal-lightbox__dialog {
    padding: 34px 8px 132px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .journal-carousel-image {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: calc(100vh - 162px) !important;
    gap: 6px !important;
  }

  .journal-carousel-image > img {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 238px) !important;
  }

  .journal-lightbox__description {
    margin: 0 0 58px !important;
    max-width: calc(100vw - 36px) !important;
    min-height: 18px;
    font-size: 13px !important;
    line-height: 1.35;
  }

  .journal-counter {
    position: fixed !important;
    z-index: 9 !important;

    left: 50% !important;
    bottom: 76px !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  .sidequest-control {
    --control-size: 44px;

    position: fixed !important;
    z-index: 10 !important;

    top: auto !important;
    right: auto !important;
    bottom: 18px !important;

    width: var(--control-size) !important;
    height: var(--control-size) !important;

    opacity: 1 !important;
  }

  .journal-arrow--left.sidequest-control {
    left: calc(50% - 58px) !important;
    transform: translateX(-50%) !important;
  }

  .journal-lightbox__close.sidequest-control {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .journal-arrow--right.sidequest-control {
    left: calc(50% + 58px) !important;
    transform: translateX(-50%) !important;
  }

  .lightbox-has-opened .journal-lightbox:target .sidequest-control,
  .sidequest-page.lightbox-has-opened .journal-lightbox:target .sidequest-control {
    transform: translateX(-50%) !important;
  }

  .sidequest-control--close .sidequest-control__top {
    font-size: 23px;
  }
}


/* =========================================================
   v158 — Real Sidequest artwork inside existing frames
   ========================================================= */

/*
  Keep the Sidequest collage/card geometry exactly as designed.
  The supplied artwork is cropped/masked inside those existing frames.
*/
.sidequest-tile {
  overflow: hidden;
}

.sidequest-tile > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

/*
  Lightbox keeps the whole artwork visible rather than cropping it.
  The masking requirement applies to the collage/frame presentation.
*/
.journal-carousel-image > img {
  object-fit: contain !important;
}


/* =========================================================
   v161 — Landing card visual component normalization
   ========================================================= */

/*
  Bonfire and the other landing cards now share the exact same hover frame:
  the OUTER link/frame clips, while only the image scales inside it.
*/
.project__visual-link,
.personal-card__visual-link,
.project__visual,
.personal-card__visual {
  border-radius: 8px;
}

.project__visual-link,
.personal-card__visual-link {
  display: block;
  overflow: hidden !important;
}

.project__visual,
.personal-card__visual {
  overflow: hidden !important;
}

.project__visual-link img,
.personal-card__visual-link img,
.personal-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1);
  transform-origin: center center;
  transition: transform .42s cubic-bezier(.2,.72,.22,1);
  will-change: transform;
}

.project__visual-link:hover img,
.personal-card__visual-link:hover img,
.personal-card__visual:hover img {
  transform: scale(1.045);
}

/* Prevent any card-specific transform from moving the frame itself on hover. */
.personal-card__visual-link:hover,
.personal-card__visual:hover,
.project__visual-link:hover {
  transform: none !important;
}


/* =========================================================
   v162 — Landing sticker shells
   ========================================================= */

/*
  The visual frame clips only the thumbnail image.
  Stickers live in this outer shell, so they are free to sit over the edge.
*/
.project-visual-shell {
  position: relative;
  width: 100%;
  overflow: visible;
}

.project-visual-shell > .project__visual-link,
.project-visual-shell > .personal-card__visual {
  width: 100%;
  overflow: hidden !important;
  border-radius: 8px;
}

.project-visual-shell > .viewport-sticker {
  z-index: 8;
}

/* =========================================================
   v162 — Footer Buddy + coffee walk
   ========================================================= */

.footer__message {
  position: relative;
  min-height: 190px;
  overflow: visible;
}

/*
  Put the copy on the right so Buddy can visibly walk toward it.
  The overall footer wrapper remains unchanged.
*/
.footer__message > p {
  margin-left: auto;
  max-width: 560px;
}

.footer__character {
  position: absolute;
  z-index: 3;

  left: 0;
  bottom: 0;

  width: 178px;
  height: auto;

  margin: 0 !important;

  display: block;
  pointer-events: none;
  will-change: transform;
}

.footer-buddy-coffee {
  display: block;
  width: 100%;
  height: auto;

  /* User requested the supplied Buddy-with-coffee to be flipped. */
  transform: scaleX(-1);
  transform-origin: center;
}

.footer__character.is-walking .footer-buddy-coffee {
  animation: footer-buddy-step .36s ease-in-out infinite alternate;
}

.footer__character.has-arrived .footer-buddy-coffee {
  animation: footer-buddy-idle 2.4s ease-in-out infinite;
}

@keyframes footer-buddy-step {
  from {
    transform: scaleX(-1) translateY(0) rotate(-1.4deg);
  }
  to {
    transform: scaleX(-1) translateY(-5px) rotate(1.4deg);
  }
}

@keyframes footer-buddy-idle {
  0%,
  100% {
    transform: scaleX(-1) translateY(0) rotate(-.6deg);
  }
  50% {
    transform: scaleX(-1) translateY(-2px) rotate(.6deg);
  }
}

/*
  Coffee droplets are charcoal circles while falling.
  At the bottom they squash flat like a tiny coffee splat.
*/
.footer-coffee-drop {
  position: absolute;
  z-index: 2;

  width: 8px;
  height: 11px;

  border-radius: 50%;
  background: var(--charcoal);

  pointer-events: none;

  transform: translate3d(0,0,0) scale(1);
  transform-origin: center bottom;

  animation: footer-coffee-fall .82s cubic-bezier(.24,.62,.32,1) forwards;
}

@keyframes footer-coffee-fall {
  0% {
    opacity: 0;
    transform:
      translate3d(0,0,0)
      scale(0.65);
  }

  10% {
    opacity: 1;
  }

  82% {
    opacity: 1;
    width: 8px;
    height: 11px;
    border-radius: 50%;
    transform:
      translate3d(
        var(--coffee-drop-drift, 0px),
        calc(var(--coffee-drop-fall, 70px) - 3px),
        0
      )
      scale(1);
  }

  88% {
    opacity: 1;
    width: 8px;
    height: 5px;
    border-radius: 50%;
    transform:
      translate3d(
        var(--coffee-drop-drift, 0px),
        var(--coffee-drop-fall, 70px),
        0
      )
      scaleX(1.15)
      scaleY(.55);
  }

  100% {
    opacity: 0;
    width: 18px;
    height: 3px;
    border-radius: 50%;
    transform:
      translate3d(
        var(--coffee-drop-drift, 0px),
        var(--coffee-drop-fall, 70px),
        0
      )
      scaleX(1.4)
      scaleY(.25);
  }
}

@media (max-width: 800px) {
  .footer__message {
    min-height: 220px;
  }

  .footer__message > p {
    margin-left: 0;
    max-width: 100%;
  }

  .footer__character {
    width: 138px;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__character {
    animation: none !important;
  }

  .footer-buddy-coffee {
    animation: none !important;
  }

  .footer-coffee-drop {
    display: none;
  }
}


/* =========================================================
   v163 — Footer direction correction
   ========================================================= */

@media (min-width: 801px) {
  .footer__message {
    position: relative;
    min-height: 190px;
    overflow: visible;
  }

  .footer__message > p {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 560px;
  }

  .footer__character {
    left: auto !important;
    right: 0 !important;
    bottom: 0;

    width: 178px;
    margin: 0 !important;

    transform: translate3d(0,0,0);
  }
}

/*
  Mobile: no footer character animation/interaction at all.
  Keep the footer simple and text-only.
*/
@media (max-width: 800px) {
  .footer__character,
  .footer-coffee-drop {
    display: none !important;
  }

  .footer__message {
    min-height: 0 !important;
  }

  .footer__message > p {
    margin: 0 !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   v167 — Mobile nav: single source of truth
   ========================================================= */

@media (max-width: 800px) {
  /*
    True viewport centering:
    fixed width + left:0 + right:0 + auto horizontal margins.
    No translate, no asymmetric padding trick, no left/right 16px sizing.
  */
  .site-header-shell {
    position: fixed !important;
    z-index: 1000 !important;

    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;

    left: 0 !important;
    right: 0 !important;

    width: calc(100vw - 32px) !important;
    max-width: 430px !important;
    height: 60px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: block !important;

    transform: none !important;
    pointer-events: none !important;
  }

  .site-header {
    position: relative !important;

    width: 100% !important;
    height: 60px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;

    box-sizing: border-box !important;
    border-radius: 999px !important;

    transform: none !important;
    pointer-events: auto !important;
  }

  .site-header__brand {
    position: static !important;

    width: 38px !important;
    height: 38px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    border-radius: 50% !important;
  }

  .site-header__brand img {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  .site-nav {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav a {
    display: block !important;
    min-width: 0 !important;

    padding: 10px 4px !important;

    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body {
    padding-top: 0 !important;
  }

  .footer {
    padding-bottom:
      calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =========================================================
   v168 — Fix inherited site-header offset
   ========================================================= */

@media (max-width: 800px) {
  .site-header-shell {
    left: 0 !important;
    right: 0 !important;

    width: calc(100% - 32px) !important;
    max-width: 430px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;
  }

  .site-header {
    /*
      Critical reset:
      the original desktop rule declares left: 50%.
      `position: relative` made that old offset active on mobile.
    */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: 60px !important;

    margin: 0 !important;
    transform: none !important;
  }

  .site-header__brand {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
}


/* =========================================================
   v169 — Mobile spacing / nav / footer polish
   ========================================================= */

@media (max-width: 800px) {
  /* Slightly larger text in the bottom navigation. */
  .site-nav a {
    font-size: 15px !important;
  }

  /* Sidequest: less empty vertical space on mobile. */
  .sidequest-hero {
    padding: 46px 0 54px !important;
  }

  .sidequest-hero__inner {
    gap: 24px !important;
  }

  .sidequest-collage {
    margin-bottom: 84px !important;
  }

  /*
    SwipBox award badge sits above the fixed bottom navigation.
    Include iPhone safe-area spacing as well.
  */
  .swipbox-award-badge-link {
    right: 16px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /*
    Mobile footer: Buddy-with-coffee returns underneath the footer copy,
    but remains completely static. The desktop walk/spill JS is already
    desktop-only, and droplets stay hidden on mobile.
  */
  .footer__message {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .footer__character {
    position: static !important;
    display: block !important;

    width: 132px !important;
    height: auto !important;

    margin: 4px 0 0 !important;
    transform: none !important;
  }

  .footer-buddy-coffee {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    transform: scaleX(-1) !important;
    animation: none !important;
  }

  .footer-coffee-drop {
    display: none !important;
  }
}


/* =========================================================
   v170 — Portfolio image protection
   ========================================================= */

img,
picture,
svg {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}