/* LAKUINA — editorial refinement round 02 */

@font-face {
  font-family: "Barabbas";
  src: url("/assets/fonts/BarabbasTrial-Display.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  /* Studio cyclorama sampled from banana artwork edges */
  --color-hero-gray: #a49e9b;
  --color-banana-gray: #c2bebb;
  --color-gray: #808080;
  --color-line: #cfcfcf;
  --ink: var(--color-black);
  --paper: var(--color-white);
  --muted: #666666;
  --focus: var(--color-black);
  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --content-max: 72rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --logo-scale: 1;
  --logo-left: 1.2vw;
  --logo-width: 97.6vw;
  --nav-top: clamp(5.2rem, 13vw, 8.5rem);
}

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  color: var(--color-black);
  background: var(--color-white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.45;
  /* clip (not hidden) — avoids making body a scroll container that traps fixed chrome */
  overflow-x: clip;
}

/* Home: gray sits behind the logo so the wordmark stays visible */
body:has([data-hero]) {
  background: var(--color-hero-gray);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.75rem 1rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* ——— Chrome ———
   Full-viewport top layer so logo + nav never sink under OUR WORK / sticky panels.
   pointer-events: none lets clicks pass through except on logo/nav. */
.site-chrome {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.logo-link {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: var(--logo-left);
  width: var(--logo-width);
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  transition: none;
  will-change: width, left;
}

.logo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  aspect-ratio: 575 / 92;
}

.nav {
  pointer-events: auto;
  position: absolute;
  top: var(--nav-top);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.nav a {
  display: block;
  background: var(--color-black);
  color: var(--color-white);
  padding: 0.32em 0.55em;
  text-align: left;
}

.nav a:hover,
.nav a:focus-visible {
  opacity: 0.82;
}

.nav a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ——— Hero: 100% viewport on every monitor format ——— */
.hero {
  position: relative;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  background: var(--color-hero-gray);
  overflow: hidden;
}

.hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  line-height: 0;
  --banana-render-height: min(70.3125vw, 100vh);
  --banana-render-height: min(70.3125vw, 100dvh);
  /* Anchor the studio gradient to the photograph, not the viewport edges. */
  background: linear-gradient(180deg, #928c88 calc(50% + var(--banana-render-height) * -0.5), #958f8b calc(50% + var(--banana-render-height) * -0.4), #98928e calc(50% + var(--banana-render-height) * -0.3), #9c9591 calc(50% + var(--banana-render-height) * -0.2), #a09a95 calc(50% + var(--banana-render-height) * -0.1), #a7a19d calc(50% + var(--banana-render-height) * 0.0), #b3aca9 calc(50% + var(--banana-render-height) * 0.1), #c7bfbd calc(50% + var(--banana-render-height) * 0.2), #c9c4c2 calc(50% + var(--banana-render-height) * 0.3), #c4beba calc(50% + var(--banana-render-height) * 0.4), #bbb7b3 calc(50% + var(--banana-render-height) * 0.5));
}

/* Fit the complete artwork in both dimensions; never crop the subject.
   The soft perimeter blends only empty studio background into the stage. */
.hero__banana {
  display: block;
  width: min(100%, calc(100vh * 2048 / 1440));
  width: min(100%, calc(100dvh * 2048 / 1440));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  /* A rounded falloff avoids a visible rectangular photo boundary.
     The separate foreground layer preserves the complete banana silhouette. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}

/* ——— Shared section titles (OUR WORK / OUR RECIPE) ——— */
.section-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-black);
}

/* ——— Work: sticky deck — cards rise from below to replace each other ——— */
.work {
  position: relative;
  padding: 0;
  z-index: 1;
  background: var(--color-black);
}

.work__track {
  position: relative;
  /* Short track: pin for card/recipe steps, then quick release toward contact */
  height: 120vh;
}

.work__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-black);
}

.work-deck {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.work-card {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--color-black);
  /* Next cards wait below; one wheel step animates them up to cover */
  transform: translate3d(0, 100%, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 1;
}

.work-card[data-index="0"] {
  transform: translate3d(0, 0, 0);
}

.work-card.is-active {
  z-index: 2;
}

.work-card:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}

.work-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  background: var(--color-black);
}

.work__title {
  position: absolute;
  left: var(--page-pad);
  right: auto;
  top: auto;
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  z-index: 8;
  margin: 0;
  max-width: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-white);
  text-align: left;
  text-transform: uppercase;
  text-shadow: none;
  opacity: var(--work-title-opacity, 1);
  transform: translate3d(0, var(--work-title-y, 0px), 0);
  pointer-events: none;
}

.work__title-prefix {
  flex: none;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

.work__title [data-work-title-label] {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Our Recipe rises like a work card over the deck */
.work-recipe {
  position: absolute;
  inset: 0;
  z-index: 12;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}

.work-recipe.is-active {
  pointer-events: auto;
}


/* ——— How We Cook / receipt ——— */
.method {
  padding: clamp(4rem, 9vw, 7.5rem) var(--page-pad);
  max-width: none;
  margin: 0;
  background: var(--color-white);
}

.method__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  justify-items: start;
}

.method__title {
  /* Same treatment as .section-title / OUR WORK */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  /* Match OUR WORK left edge (page-pad), undo centered method__inner inset */
  margin-left: calc((100% - (100vw - 2 * var(--page-pad))) / 2);
}

.receipt {
  margin: 0 auto;
  padding: 0;
  width: min(100%, 34rem);
  max-width: 100%;
}

.receipt__image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12)) drop-shadow(0 10px 12px rgba(0, 0, 0, .16));
}

/* ——— Contact (black band) ——— */
.contact {
  --contact-black: var(--color-black);
  --contact-gray: var(--color-gray);
  padding: clamp(3.5rem, 9vw, 7.5rem) var(--page-pad) clamp(3rem, 6vw, 4.5rem);
  max-width: none;
  width: 100%;
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
}

.contact--page {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.page--contact {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background: var(--color-black);
  color: var(--color-white);
}

.page--contact .contact {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.page--contact .back {
  margin-left: var(--page-pad);
  color: var(--color-white);
}

.contact__heading {
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  max-width: none;
  width: 100%;
  font-family: "Barabbas", Georgia, serif;
  font-size: clamp(3.2rem, 10vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
  color: var(--color-white);
  -webkit-text-stroke: 0;
}

/* Beat .page h1 { text-transform: uppercase } on /contact/ */
.page--contact h1.contact__heading {
  text-transform: none;
}

.contact-form {
  display: grid;
  gap: 1.25rem;
  max-width: none;
  width: 100%;
  margin: 0;
}

.page--contact .contact-form {
  width: 100%;
  max-width: none;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: 0.85rem;
  align-items: stretch;
  width: 100%;
}

.contact-form__left {
  display: grid;
  gap: 0.85rem;
}

.field {
  position: relative;
  margin: 0;
}

.field label {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  z-index: 1;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-white);
  pointer-events: none;
}

.field--dark {
  background: var(--color-black);
  border: 1px solid var(--color-white);
  min-height: 4.6rem;
}

.field--idea {
  background: var(--color-black);
  border: 1px solid var(--color-white);
  min-height: 100%;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--color-black);
  color: var(--color-white);
  font: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  padding: 2.05rem 0.85rem 0.75rem;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--color-white);
}

/* Kill white autofill / UA field backgrounds on the black contact form */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white);
  caret-color: var(--color-white);
  transition: background-color 99999s ease-out;
  box-shadow: 0 0 0 1000px var(--color-black) inset;
}

.field--dark input {
  min-height: 4.6rem;
}

.field--idea textarea {
  min-height: 16.8rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -3px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: transparent;
}

.field__error {
  position: absolute;
  left: 0.85rem;
  bottom: 0.35rem;
  margin: 0;
  color: #ffb4b4;
  font-size: 0.7rem;
}

.contact-form__submit {
  justify-self: start;
  margin-top: 0.35rem;
  border: 1px solid var(--color-white);
  background: var(--color-black);
  color: var(--color-white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
}

.contact-form__submit:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.contact-form__submit:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.form-status {
  min-height: 1.25rem;
  margin: 0;
  font-size: 0.95rem;
  color: #d0d0d0;
}

.form-status[data-state="error"] {
  color: #ffb4b4;
}

.form-status[data-state="ok"] {
  color: #c8f0d2;
}

@media (max-width: 700px) {
  .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .field--idea textarea {
    min-height: 12rem;
  }
}

/* ——— Footer (continues black band) ——— */
.site-footer {
  padding: 2.25rem var(--page-pad) 3rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 0.9rem;
}

.site-footer__brand {
  margin: 0 0 0.35rem;
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-footer p {
  margin: 0.25rem 0;
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-white);
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__copy {
  margin-top: 1rem !important;
  color: #d0d0d0;
}

/* ——— Inner pages ——— */
.page {
  padding: clamp(7rem, 16vw, 11rem) var(--page-pad) 4rem;
  max-width: 46rem;
  margin: 0 auto;
  background: var(--color-white);
  color: var(--color-black);
}

/* About: full-bleed editorial layout matching art direction */
.page.page--about {
  --about-column-gap: clamp(0.65rem, 1.4vw, 1.15rem);
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(7.5rem, 14vw, 10rem) var(--page-pad) clamp(3rem, 6vw, 5rem);
  background: var(--color-white);
  color: var(--color-black);
}

.page.page--about h1 {
  margin: 0;
  max-width: 11ch;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--color-black);
}

.about-intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--about-column-gap);
  align-items: start;
  margin: 0 0 clamp(3.5rem, 8vw, 6.5rem);
}

.about-intro > h1,
.about-intro > h2 {
  grid-column: 1 / span 2;
}

.about-intro__copy {
  grid-column: 3;
  min-width: 0;
  display: grid;
  gap: 1.05rem;
  padding-top: 0.15rem;
}

.page.page--about .about-intro__copy p {
  margin: 0;
  max-width: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(clamp(0.98rem, 1.35vw, 1.12rem) + 5pt);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-black);
}

.about-team__heading {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-black);
}

.about-team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--about-column-gap);
  row-gap: clamp(1.25rem, 3vw, 2.5rem);
}

.team-card {
  margin: 0;
  min-width: 0;
}

.team-card__figure {
  width: 90%;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.team-card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #c9c9c9;
}

/* Preserve the individual crops from the supplied portrait reference. */
.team-card__portrait--guillem {
  --portrait-width: 103.42%;
  --portrait-left: -2.67%;
  --portrait-top: -0.63%;
}

.team-card__portrait--bass {
  --portrait-width: 121.15%;
  --portrait-left: -13.39%;
  --portrait-top: 0.33%;
}

.team-card__portrait--giuseppe {
  --portrait-width: 97.02%;
  --portrait-left: 2.06%;
  --portrait-top: 4.36%;
}

.team-card__photo {
  position: absolute;
  display: block;
  width: var(--portrait-width);
  max-width: none;
  height: auto;
  left: var(--portrait-left);
  top: var(--portrait-top);
}

.team-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.team-card__name {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 0.22em 0.42em 0.2em;
  background: var(--color-black);
  color: var(--color-white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.2648rem, 2.142vw, 1.7136rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: normal;
}

.team-card__role {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.35vw, 1.125rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  white-space: normal;
  text-align: left;
}

@media (max-width: 900px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.75rem;
  }

  .about-intro > h1,
  .about-intro > h2,
  .about-intro__copy {
    grid-column: auto;
  }

  .page.page--about h1 {
    max-width: 12ch;
  }

  .about-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }

  .team-card__name {
    font-size: clamp(1.3872rem, 4.896vw, 1.6728rem);
  }
}

@media (max-width: 520px) {
  .about-team__grid {
    grid-template-columns: 1fr;
  }
}

/* Must follow .page — otherwise white max-width:46rem box wins on /contact/ */
.page.page--contact {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background: var(--color-black);
  color: var(--color-white);
}

.page.page--contact .contact-form {
  max-width: none;
  width: 100%;
}

.page h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}

.page .lede,
.page p {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
}

.page p + p {
  margin-top: 1rem;
}

.page .back {
  display: inline-block;
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page--manifesto {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-white);
}

.page--manifesto .back {
  position: fixed;
  left: var(--page-pad);
  top: clamp(4.5rem, 11vw, 6.5rem);
  z-index: 20;
  margin: 0;
  color: var(--color-black);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.35rem 0.55rem;
}

.manifesto__image {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  margin: 0;
}

.case {
  max-width: 58rem;
}

.case__media {
  margin: 2rem 0 1.5rem;
}

.case__media img {
  width: 100%;
  height: auto;
}

.case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 1.5rem 0 2rem;
  font-size: 0.9rem;
}

.case__meta a {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid currentColor;
}

.placeholder-note {
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ——— Responsive ——— */
@media (max-width: 900px) {
  .nav {
    font-size: 0.68rem;
  }

  .work__track {
    height: 120vh;
  }

  .work__title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
  }
}

@media (max-width: 600px) {
  .nav {
    font-size: 0.68rem;
  }

  .receipt {
    width: 100%;
  }

  .work__track {
    height: 120vh;
  }

  .work__title {
    bottom: clamp(1.25rem, 5vw, 2rem);
    font-size: clamp(1.55rem, 7vw, 2.15rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-link {
    transition: none !important;
  }

  .work-card,
  .work-recipe {
    transition: none !important;
  }

  .work__track {
    height: auto;
  }

  .work__sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .work-deck {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .work-card {
    position: relative;
    inset: auto;
    height: 100vh;
    height: 100dvh;
    transform: none !important;
    will-change: auto;
  }

  .work-recipe {
    position: relative;
    inset: auto;
    transform: none !important;
    will-change: auto;
    pointer-events: auto;
    overflow: visible;
  }

  .work-deck {
    position: relative;
    inset: auto;
  }

  .work__title {
    position: absolute;
    left: var(--page-pad);
    bottom: clamp(1.25rem, 5vw, 2rem);
    top: auto;
    color: var(--color-white);
    transform: none;
  }
}

/* Inner pages: compact fully-visible logo (+15% vs previous 14vw) */
body:has(.page) {
  --logo-scale: 1;
  --logo-left: 1vw;
  --logo-width: 27.209vw;
  --nav-top: 16px;
  background: var(--color-white);
}

/* Contact page only: full black chrome + white logo */
body:has(.page--contact) {
  background: var(--color-black);
}

body:has(.page--contact) .site-footer {
  border-top-color: #2a2a2a;
}

/* Home depth: original photo, fixed logo, traced banana, navigation.
   Both image copies share one grid cell, so resizing cannot misalign them. */
body:has([data-hero]) .site-chrome { display: contents; }
body:has([data-hero]) .logo-link { position: fixed; z-index: 9999; }
body:has([data-hero]) .nav { position: fixed; z-index: 10001; }
.hero__banana { grid-area: 1 / 1; }
.hero__banana--foreground {
  z-index: 10000;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: polygon(86.6211% 27.9861%, 86.5723% 27.9167%, 86.4258% 27.9167%, 86.3770% 27.7778%, 86.1328% 27.5000%, 86.1816% 27.3611%, 85.8398% 26.9444%, 85.8887% 26.8056%, 85.7422% 26.5972%, 85.6934% 26.2500%, 85.4492% 26.1111%, 85.0098% 25.4861%, 85.0098% 25.0694%, 84.8633% 24.7917%, 84.7656% 24.7222%, 84.5703% 24.7222%, 84.3750% 24.5139%, 84.3262% 24.3750%, 84.3262% 24.0278%, 84.0332% 23.6806%, 83.9844% 23.7500%, 83.9355% 23.6111%, 83.8867% 23.6806%, 83.7891% 23.6111%, 83.5449% 23.6111%, 83.4473% 23.6806%, 83.3008% 23.4722%, 82.9102% 23.4722%, 82.6172% 23.1250%, 82.4219% 23.1250%, 82.0312% 23.6111%, 82.0801% 23.7500%, 81.8359% 24.2361%, 81.8359% 24.3750%, 81.7383% 24.5139%, 81.6406% 24.8611%, 81.4453% 25.1389%, 81.3965% 25.3472%, 81.2988% 25.4861%, 81.2500% 25.7639%, 81.1523% 25.9028%, 81.0059% 25.9028%, 80.9082% 25.7639%, 80.7129% 25.6944%, 80.7129% 25.9028%, 80.6641% 25.9722%, 80.5176% 25.9722%, 80.3711% 26.4583%, 79.7852% 27.2222%, 79.7363% 27.3611%, 79.7363% 27.6389%, 79.6387% 27.7083%, 79.2969% 28.1944%, 79.2480% 28.4028%, 79.1016% 28.5417%, 79.1016% 28.8889%, 79.1992% 29.0278%, 79.4434% 29.8611%, 79.4434% 31.5278%, 79.3945% 31.5972%, 79.3945% 32.0139%, 79.2480% 32.5000%, 79.1992% 32.9167%, 79.0039% 33.4722%, 79.0039% 33.6806%, 78.8086% 34.1667%, 78.8086% 34.3750%, 78.7109% 34.5139%, 78.7109% 34.6528%, 78.6133% 34.7917%, 78.5156% 35.2083%, 78.2227% 35.9722%, 78.2227% 36.1111%, 77.9297% 36.7361%, 77.9297% 36.8750%, 77.8320% 37.0139%, 77.7832% 37.2222%, 77.5391% 37.6389%, 77.4902% 37.9167%, 77.3438% 38.1250%, 77.3438% 38.2639%, 76.4648% 39.8611%, 75.6836% 40.9722%, 75.2441% 41.4583%, 75.0000% 41.5972%, 74.8047% 41.8056%, 74.4629% 41.9444%, 74.3652% 42.0833%, 74.1211% 42.1528%, 73.7793% 42.4306%, 73.4375% 42.5694%, 73.0957% 42.8472%, 72.9492% 42.8472%, 72.6562% 43.1250%, 72.4609% 43.1944%, 71.6797% 43.8889%, 70.8008% 44.5139%, 70.6543% 44.7222%, 70.5078% 44.7917%, 69.9219% 45.3472%, 69.8242% 45.3472%, 69.5312% 45.6944%, 68.9941% 46.1111%, 68.8965% 46.1111%, 68.3105% 46.7361%, 67.7734% 47.0833%, 67.4316% 47.4306%, 67.1387% 47.6389%, 67.0410% 47.6389%, 66.6992% 48.0556%, 66.5527% 48.0556%, 66.3574% 48.2639%, 66.2598% 48.2639%, 66.1621% 48.4028%, 66.0645% 48.4028%, 65.9668% 48.5417%, 65.5762% 48.8194%, 65.4785% 48.8194%, 65.1855% 49.0972%, 65.0391% 49.0972%, 64.9414% 49.2361%, 64.8438% 49.2361%, 64.4043% 49.5833%, 64.3066% 49.5833%, 64.2090% 49.7222%, 63.9160% 49.7917%, 63.6230% 50.0694%, 63.4766% 50.0694%, 62.8418% 50.4861%, 62.3535% 50.6250%, 62.2559% 50.7639%, 62.0117% 50.8333%, 61.8652% 50.9722%, 61.5723% 51.1111%, 61.3770% 51.1111%, 61.2793% 51.2500%, 60.7422% 51.3889%, 60.6445% 51.5278%, 60.1074% 51.6667%, 59.8145% 51.8750%, 59.6191% 51.8750%, 59.5703% 51.9444%, 59.0332% 52.0833%, 58.8379% 52.2222%, 58.5938% 52.2222%, 58.3496% 52.4306%, 57.9102% 52.5000%, 57.4707% 52.7083%, 57.2754% 52.7083%, 57.0801% 52.8472%, 56.7383% 52.8472%, 56.6895% 52.9167%, 56.4453% 52.9167%, 56.3965% 52.9861%, 56.0547% 52.9861%, 55.8105% 53.1250%, 54.2969% 53.2639%, 54.0527% 53.4028%, 53.4180% 53.4028%, 53.3691% 53.4722%, 52.0508% 53.4722%, 52.0020% 53.5417%, 50.8301% 53.5417%, 50.7812% 53.4722%, 49.3164% 53.4722%, 49.2676% 53.4028%, 49.0234% 53.4028%, 48.9746% 53.3333%, 48.6328% 53.3333%, 48.5840% 53.2639%, 48.2910% 53.2639%, 48.2422% 53.1944%, 47.8516% 53.1944%, 47.8027% 53.1250%, 47.5586% 53.1250%, 47.5098% 53.0556%, 46.9727% 53.0556%, 46.9238% 52.9861%, 46.3867% 52.9167%, 46.1426% 52.7778%, 45.8008% 52.7778%, 45.6543% 52.6389%, 45.5078% 52.6389%, 45.4590% 52.5694%, 45.2148% 52.5694%, 45.1660% 52.5000%, 44.7266% 52.4306%, 44.5801% 52.2917%, 44.3848% 52.2917%, 44.1895% 52.1528%, 44.0430% 52.1528%, 43.9941% 52.0833%, 42.8711% 51.7361%, 42.7246% 51.5972%, 42.5781% 51.5972%, 42.3828% 51.4583%, 42.2363% 51.4583%, 41.9434% 51.2500%, 41.7969% 51.2500%, 41.6504% 51.1111%, 41.5039% 51.1111%, 41.3574% 50.9722%, 41.2109% 50.9722%, 40.9668% 50.7639%, 40.6250% 50.6944%, 40.3809% 50.4861%, 40.0879% 50.4167%, 39.6973% 50.1389%, 39.5508% 50.1389%, 39.1113% 49.7917%, 38.8184% 49.7222%, 38.7207% 49.5833%, 38.4766% 49.5139%, 38.2812% 49.3056%, 37.6953% 49.0278%, 37.4023% 48.7500%, 37.2559% 48.7500%, 37.0117% 48.4722%, 36.8652% 48.4722%, 36.5723% 48.1944%, 36.3281% 48.1250%, 35.4980% 47.5000%, 35.4004% 47.5000%, 35.3027% 47.3611%, 34.9609% 47.2222%, 34.7168% 46.9444%, 34.6191% 46.9444%, 34.2773% 46.6667%, 34.1797% 46.6667%, 34.0820% 46.5278%, 33.6914% 46.2500%, 33.5938% 46.2500%, 33.3496% 45.9722%, 33.1543% 45.9028%, 33.0566% 45.7639%, 32.9590% 45.7639%, 32.8613% 45.6250%, 32.3730% 45.2778%, 32.2754% 45.2778%, 32.1777% 45.1389%, 31.3965% 44.5833%, 31.2988% 44.5833%, 31.2012% 44.4444%, 31.0547% 44.4444%, 30.9570% 44.3056%, 30.8594% 44.3056%, 30.3223% 43.8889%, 30.2246% 43.8889%, 30.1270% 43.7500%, 29.6387% 43.5417%, 29.5410% 43.4028%, 29.2969% 43.3333%, 28.9551% 43.0556%, 28.8574% 43.0556%, 28.7598% 42.9167%, 28.6133% 42.9167%, 28.2715% 42.6389%, 28.1250% 42.6389%, 27.4902% 42.2222%, 27.3438% 42.2222%, 27.1484% 42.0833%, 26.6602% 41.9444%, 26.2207% 41.6667%, 25.5859% 41.5278%, 25.3906% 41.3889%, 25.0977% 41.3889%, 25.0488% 41.3194%, 24.5117% 41.2500%, 24.4629% 41.1806%, 24.0234% 41.1806%, 23.9746% 41.1111%, 23.5352% 41.1111%, 23.4863% 41.0417%, 21.2891% 41.1111%, 21.0449% 40.9722%, 20.6543% 40.9722%, 20.3613% 40.8333%, 19.5312% 40.8333%, 19.4824% 40.9028%, 19.2383% 40.9028%, 18.8965% 41.1806%, 18.5059% 41.1806%, 18.3594% 40.9028%, 18.1152% 40.9722%, 17.8223% 41.3889%, 17.3828% 42.7083%, 17.7734% 42.2917%, 17.8711% 42.3611%, 17.3828% 42.9167%, 16.9922% 43.5417%, 16.7969% 43.4722%, 16.6992% 43.6806%, 16.6016% 43.7500%, 16.4551% 43.6806%, 16.2598% 43.9583%, 16.2598% 44.0972%, 16.1621% 44.3056%, 16.1133% 45.0000%, 16.4551% 45.3472%, 16.3574% 45.7639%, 16.3574% 46.3889%, 16.5039% 47.0139%, 16.5039% 47.4306%, 16.6016% 47.5694%, 16.6992% 48.0556%, 16.8457% 48.3333%, 16.8945% 48.6111%, 17.1387% 49.0278%, 17.1875% 49.2361%, 17.3828% 49.5139%, 17.3828% 49.6528%, 17.5293% 49.8611%, 17.5781% 50.0694%, 17.6758% 50.2083%, 17.6758% 50.3472%, 17.8223% 50.5556%, 17.8711% 50.8333%, 18.4082% 51.9444%, 18.4570% 52.2222%, 18.6523% 52.5694%, 18.6523% 52.7083%, 19.1406% 53.6806%, 19.1895% 53.8889%, 19.8242% 54.9306%, 19.8242% 55.0694%, 20.2148% 55.6250%, 20.4102% 56.0417%, 20.8984% 56.7361%, 20.8984% 56.8056%, 21.8750% 58.1944%, 21.9238% 58.1944%, 23.2422% 59.9306%, 24.1211% 60.9028%, 24.4141% 61.3194%, 24.6094% 61.4583%, 24.9023% 61.8750%, 25.0488% 61.9444%, 25.1953% 62.1528%, 25.5371% 62.4306%, 25.9766% 62.9861%, 26.0742% 62.9861%, 26.2695% 63.2639%, 26.4648% 63.4028%, 26.9531% 63.9583%, 27.0508% 63.9583%, 27.7344% 64.5833%, 27.8809% 64.7917%, 27.9785% 64.7917%, 28.1250% 65.0000%, 28.6133% 65.3472%, 28.8574% 65.6250%, 28.9551% 65.6250%, 29.1992% 65.9028%, 29.2969% 65.9028%, 29.3945% 66.0417%, 29.7363% 66.2500%, 29.8828% 66.4583%, 29.9805% 66.4583%, 30.0781% 66.5972%, 30.1758% 66.5972%, 30.4688% 66.8750%, 30.6641% 66.9444%, 30.7617% 67.0833%, 32.4219% 68.2639%, 32.5195% 68.2639%, 32.8613% 68.5417%, 32.9590% 68.5417%, 33.0566% 68.6806%, 33.1543% 68.6806%, 33.9355% 69.2361%, 34.3262% 69.3750%, 34.5703% 69.5833%, 34.9609% 69.7222%, 35.8398% 70.2778%, 36.6699% 70.6250%, 36.8164% 70.7639%, 37.2559% 70.9722%, 37.4023% 70.9722%, 38.0371% 71.3194%, 38.2324% 71.3194%, 38.5742% 71.5278%, 39.0625% 71.6667%, 39.2578% 71.8056%, 39.5020% 71.8056%, 39.5508% 71.8750%, 39.6973% 71.8750%, 40.1367% 72.0833%, 40.3809% 72.0833%, 40.7715% 72.2917%, 41.0645% 72.2917%, 41.1133% 72.3611%, 41.2598% 72.3611%, 41.3086% 72.2917%, 41.7969% 72.2917%, 41.8945% 72.4306%, 42.0410% 72.4306%, 42.0898% 72.5000%, 42.5293% 72.5000%, 42.6270% 72.6389%, 43.0664% 72.6389%, 43.1641% 72.7778%, 43.4570% 72.7778%, 43.5059% 72.8472%, 44.4336% 72.8472%, 44.5312% 72.9861%, 44.7754% 72.9861%, 44.8242% 73.0556%, 46.0449% 73.0556%, 46.1914% 73.2639%, 46.4355% 73.2639%, 46.4844% 73.3333%, 46.7285% 73.3333%, 46.7773% 73.4028%, 48.2422% 73.4028%, 48.5352% 73.5417%, 50.2441% 73.5417%, 50.2930% 73.6111%, 52.2949% 73.6111%, 52.4902% 73.4722%, 56.4941% 73.5417%, 56.6406% 73.4028%, 57.9102% 73.4028%, 57.9590% 73.3333%, 58.5449% 73.3333%, 58.5938% 73.2639%, 59.6680% 73.1944%, 59.7656% 73.0556%, 60.7910% 72.9861%, 60.8887% 72.8472%, 61.3281% 72.8472%, 61.4258% 72.7083%, 62.1094% 72.7083%, 62.1582% 72.6389%, 62.4023% 72.6389%, 62.6465% 72.5000%, 62.8418% 72.5000%, 63.0859% 72.3611%, 63.3301% 72.3611%, 63.3789% 72.2917%, 63.7207% 72.2222%, 63.9160% 72.0833%, 64.1113% 72.0833%, 64.7949% 71.7361%, 64.9902% 71.7361%, 65.1367% 71.5972%, 65.2832% 71.5972%, 66.6504% 70.9028%, 66.7969% 70.9028%, 66.9434% 70.7639%, 67.3340% 70.6250%, 67.4316% 70.4861%, 67.6270% 70.4861%, 67.8711% 70.2778%, 68.2129% 70.1389%, 69.2383% 69.4444%, 69.3848% 69.4444%, 69.8730% 69.0972%, 69.9707% 68.9583%, 70.0684% 68.9583%, 71.0449% 68.2639%, 71.1914% 68.0556%, 71.9238% 67.5694%, 72.0215% 67.4306%, 72.1191% 67.4306%, 72.3633% 67.1528%, 72.7051% 66.9444%, 73.1445% 66.4583%, 73.2910% 66.3889%, 73.6328% 65.9722%, 73.7793% 65.9028%, 74.1211% 65.4861%, 74.4629% 65.2083%, 76.0742% 63.4028%, 77.6855% 61.2500%, 77.8809% 60.8333%, 78.2715% 60.2778%, 78.4668% 59.8611%, 78.7598% 59.4444%, 78.8574% 59.1667%, 79.2480% 58.5417%, 79.2480% 58.4028%, 79.4434% 58.1250%, 79.4434% 57.9167%, 79.7852% 57.4306%, 80.0293% 56.6667%, 80.1758% 56.4583%, 80.4199% 55.7639%, 80.4199% 55.6250%, 80.5176% 55.4861%, 80.5664% 55.1389%, 80.8105% 54.5139%, 80.8105% 54.3750%, 81.0547% 53.8194%, 81.0547% 53.6111%, 81.2012% 53.2639%, 81.2012% 52.8472%, 81.3965% 52.4306%, 81.3965% 52.0833%, 81.4941% 51.8750%, 81.4941% 51.6667%, 81.5430% 51.5972%, 81.5918% 50.8333%, 81.6406% 50.7639%, 81.6895% 50.0694%, 81.7383% 50.0000%, 81.7383% 47.7778%, 81.6895% 47.7083%, 81.6895% 47.0139%, 81.6406% 46.9444%, 81.5918% 46.4583%, 81.4941% 46.3194%, 81.2988% 45.0000%, 81.2012% 44.8611%, 81.2012% 42.5000%, 81.2500% 42.4306%, 81.2500% 42.0833%, 81.2988% 42.0139%, 81.3477% 41.3889%, 81.3965% 41.1806%, 81.4941% 41.0417%, 81.4941% 40.8333%, 81.5430% 40.7639%, 81.5430% 40.4167%, 81.6406% 40.2778%, 81.6895% 39.8611%, 81.9336% 39.2361%, 81.9824% 38.8889%, 82.1289% 38.5417%, 82.1289% 38.3333%, 82.3730% 37.6389%, 82.5195% 37.4306%, 82.5195% 37.2917%, 82.6660% 37.0139%, 82.8125% 36.5972%, 82.8125% 36.4583%, 82.9102% 36.3194%, 83.1055% 35.6944%, 83.4473% 35.1389%, 83.4473% 35.0000%, 83.5449% 34.7917%, 84.1797% 33.8194%, 84.5215% 33.5417%, 84.6680% 33.3333%, 84.8145% 33.2639%, 85.6445% 32.0139%, 85.5957% 31.8750%, 85.7910% 31.2500%, 85.7910% 30.9722%, 85.8398% 30.9028%, 85.8398% 30.6944%, 85.9375% 30.2778%, 86.0840% 29.9306%, 86.0840% 29.6528%, 86.5723% 28.6806%, 86.6211% 28.4722%);
}

/* Keep the complete recipe in one viewport, including its heading. */
.work-recipe.method {
  height: 100vh;
  height: 100dvh;
  padding: clamp(4rem, 8vh, 6rem) var(--page-pad) clamp(1rem, 3vh, 2rem);
  overflow: hidden;
}
.work-recipe .method__inner {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.5rem, 2vh, 1.25rem);
}
.work-recipe .method__title { margin-left: 0; }
.work-recipe .receipt {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: none;
}
.work-recipe .receipt__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.work-card__mobile-title { display: none; }

/* Touch and narrow screens: native scrolling, no pinned or translated deck.
   Keep this query identical to nativeFlow in main.js. */
@media (max-width: 900px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work__track { height: auto; }
  .work__sticky { position: relative; height: auto; overflow: visible; }
  .work-deck { position: relative; inset: auto; display: block; overflow: visible; }
  .work-card {
    position: relative;
    inset: auto;
    height: 100vh;
    height: 100svh;
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .work__title { display: none; }
  .work-card__mobile-title {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem var(--page-pad) max(1.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    color: #fff;
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
    pointer-events: none;
  }
  .work-recipe.method {
    position: relative;
    inset: auto;
    transform: none !important;
    transition: none;
    will-change: auto;
    pointer-events: auto;
    height: 100vh;
    height: 100svh;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  .hero { height: 100vh; height: 100svh; }
  .hero__stage { --banana-render-height: min(70.3125vw, 100svh); }
  .hero__banana {
    width: min(100%, calc(100vh * 2048 / 1440));
    width: min(100%, calc(100svh * 2048 / 1440));
  }
  .field input, .field textarea { font-size: 1rem; }
}
@media (max-width: 900px) {
  .logo-link { top: 0; }
  .nav {
    top: var(--nav-top);
    right: 0;
    flex-direction: column;
    gap: .18rem;
    font-size: .7rem;
  }
  .nav a {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .4rem .55rem;
  }
  .work-recipe.method {
    padding-top: calc(7rem + env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .page:not(.page--manifesto) { padding-top: calc(8rem + env(safe-area-inset-top)); }
  .page--manifesto .back { top: calc(7rem + env(safe-area-inset-top)); }
}

/* Manifesto: fit the viewport height; portrait framing keeps every text line visible. */
.page.page--manifesto {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #b5b1aa;
}
.manifesto__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}
@media (orientation: portrait) {
  .manifesto__image {
    /* The text occupies x=650–1010 in the 1920px original. */
    height: min(100svh, calc(100vw * 1080 / 440));
    object-fit: cover;
    object-position: 42% center;
  }
}

/* Inner pages match the home logo's final scroll size.
   Home continues to use the animated --logo-width and --logo-left. */
body:not(:has([data-hero])) .logo-link {
  width: 27.209vw;
  left: 1vw;
  top: 0;
}
@media (max-width: 900px) {
  body:not(:has([data-hero])) .logo-link { width: 47.32vw; }
}

/* Accessible document flow when navigating the home with a keyboard. */

  html:has(.keyboard-navigation) { scroll-behavior: auto; }
  .keyboard-navigation .work__track { height: auto; }
  .keyboard-navigation .work__sticky { position: relative; height: auto; overflow: visible; }
  .keyboard-navigation .work-deck { position: relative; inset: auto; display: block; overflow: visible; }
  .keyboard-navigation .work-card {
    position: relative;
    inset: auto;
    height: 100vh;
    height: 100svh;
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .keyboard-navigation .work__title { display: none; }
  .keyboard-navigation .work-card__mobile-title {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem var(--page-pad) max(1.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    color: #fff;
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
    pointer-events: none;
  }
  .keyboard-navigation .work-recipe.method {
    position: relative;
    inset: auto;
    transform: none !important;
    transition: none;
    will-change: auto;
    pointer-events: auto;
    height: 100vh;
    height: 100svh;
  }

.contact-form__submit:disabled { opacity: .5; cursor: not-allowed; }
.skip-link:focus { position: fixed; left: 0; top: 0; z-index: 10002; }

/* Each visit selects one fruit; both photo layers always use the same source. */
.hero__stage[data-fruit="fig"] {
  --banana-render-height: min(70.36789297658864vw, 100vh);
  --banana-render-height: min(70.36789297658864vw, 100dvh);
  background: linear-gradient(180deg, #908a86 calc(50% + var(--banana-render-height) * -0.5), #948e8b calc(50% + var(--banana-render-height) * -0.4), #98928f calc(50% + var(--banana-render-height) * -0.3), #9b9492 calc(50% + var(--banana-render-height) * -0.2), #9f9996 calc(50% + var(--banana-render-height) * -0.1), #a69f9e calc(50% + var(--banana-render-height) * 0.0), #b2abaa calc(50% + var(--banana-render-height) * 0.1), #c7c1c0 calc(50% + var(--banana-render-height) * 0.2), #c9c4c4 calc(50% + var(--banana-render-height) * 0.3), #c3bdbc calc(50% + var(--banana-render-height) * 0.4), #b9b3b3 calc(50% + var(--banana-render-height) * 0.5));
}
.hero__stage[data-fruit="fig"] .hero__banana {
  width: min(100%, calc(100vh * 1495 / 1052));
  width: min(100%, calc(100dvh * 1495 / 1052));
}
.hero__stage[data-fruit="fig"] .hero__banana:not([data-fruit="fig"]) { visibility: hidden; }
.hero__stage[data-fruit="fig"] .hero__banana--foreground {
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: polygon(55.85883% 12.75100%, 55.71932% 12.71880%, 55.51406% 12.74612%, 54.71096% 13.12656%, 54.51030% 13.26375%, 53.97518% 13.50679%, 53.77451% 13.64398%, 53.64073% 13.69690%, 52.56820% 14.45897%, 51.56593% 15.44726%, 51.23270% 15.59805%, 50.82891% 15.88513%, 50.62602% 16.14638%, 50.42202% 16.52751%, 50.22660% 16.81269%, 50.08757% 17.09786%, 49.89216% 17.38303%, 49.23821% 18.62074%, 48.56912% 20.04702%, 48.19743% 21.09265%, 47.63266% 22.23333%, 46.99340% 23.75402%, 46.54768% 24.41725%, 46.20797% 25.08265%, 45.74377% 25.74232%, 45.34244% 26.13001%, 44.94110% 26.69289%, 43.80535% 27.86230%, 43.53642% 28.21380%, 41.73040% 30.12241%, 41.46284% 30.49518%, 40.99461% 30.97792%, 40.72705% 31.35069%, 40.52638% 31.54827%, 40.32572% 31.82597%, 39.85749% 32.30872%, 39.25548% 33.15677%, 39.05481% 33.35435%, 38.18525% 34.58263%, 37.91708% 34.87265%, 37.71299% 35.25375%, 36.77986% 36.58365%, 36.57587% 36.96478%, 35.84534% 38.01040%, 35.30496% 39.05603%, 34.97577% 39.53132%, 34.70296% 40.10166%, 34.37376% 40.57694%, 34.23473% 40.86212%, 34.05427% 41.14925%, 33.74947% 41.81466%, 33.18472% 42.86049%, 33.08038% 43.14588%, 32.31494% 44.76185%, 32.14392% 45.23713%, 31.84671% 45.90253%, 31.30849% 47.42497%, 31.20633% 47.80693%, 31.04290% 48.28222%, 31.00566% 48.47233%, 30.44090% 50.18336%, 30.26988% 50.94381%, 30.10630% 51.51474%, 29.93528% 52.56037%, 29.77185% 53.22577%, 29.68837% 53.70460%, 29.68312% 53.89472%, 29.55459% 54.56013%, 29.54934% 54.94036%, 29.42081% 55.60576%, 29.41556% 56.08104%, 29.35392% 56.36622%, 29.34867% 56.84150%, 29.28703% 57.12667%, 29.28178% 57.98219%, 29.15062% 58.74488%, 29.15326% 61.40945%, 29.21489% 61.69462%, 29.22014% 62.16990%, 29.28178% 62.45507%, 29.28704% 63.12049%, 29.41556% 63.59578%, 29.43740% 64.45480%, 29.63807% 65.59552%, 29.73461% 65.97575%, 29.90563% 67.02138%, 30.03956% 67.59231%, 30.31017% 68.54462%, 30.47055% 68.92312%, 30.57468% 69.39839%, 31.04404% 70.73244%, 31.57935% 71.87357%, 31.80967% 72.25379%, 32.23329% 73.11127%, 32.36182% 73.30138%, 32.50085% 73.58656%, 32.76316% 73.96678%, 32.90219% 74.25195%, 33.36919% 74.91561%, 33.56986% 75.11320%, 33.77053% 75.39090%, 33.97121% 75.58848%, 34.10498% 75.77113%, 35.11001% 76.79578%, 35.77891% 77.36613%, 36.11335% 77.60916%, 36.24714% 77.74635%, 36.64955% 78.03594%, 37.92167% 78.79359%, 39.66121% 79.64931%, 39.86188% 79.70223%, 40.12945% 79.83943%, 40.33260% 79.87047%, 40.80083% 80.05312%, 40.93461% 80.06058%, 41.13529% 80.14819%, 41.33596% 80.15564%, 41.53662% 80.24324%, 41.67040% 80.25069%, 41.87108% 80.33829%, 42.07174% 80.34576%, 42.27242% 80.43335%, 42.47308% 80.44081%, 42.67375% 80.52841%, 42.87442% 80.53587%, 43.07509% 80.62347%, 43.34265% 80.63093%, 43.54332% 80.71852%, 44.07843% 80.72598%, 44.27911% 80.81358%, 45.01489% 80.82104%, 45.21556% 80.90864%, 46.68713% 80.91610%, 46.88780% 81.00369%, 48.35937% 81.01116%, 48.56004% 81.09875%, 51.70594% 81.10249%, 51.97508% 81.01116%, 53.44665% 81.00369%, 53.64732% 80.91610%, 55.11889% 80.90864%, 55.31956% 80.82104%, 56.05534% 80.81358%, 56.25602% 80.72598%, 56.79113% 80.71852%, 56.99180% 80.63093%, 57.39314% 80.62347%, 57.59380% 80.53587%, 57.92825% 80.52841%, 58.12892% 80.44081%, 58.46337% 80.43335%, 58.66404% 80.34576%, 58.86471% 80.33829%, 59.39984% 80.15563%, 59.53362% 80.14819%, 59.73428% 80.06058%, 59.86807% 80.05312%, 60.20501% 79.93449%, 60.60677% 79.74416%, 60.94121% 79.51191%, 61.07499% 79.45898%, 61.87996% 78.88704%, 63.68598% 77.22894%, 65.22444% 76.13039%, 65.62608% 75.74989%, 66.56392% 74.72549%, 66.76459% 74.44779%, 66.96526% 74.25021%, 67.16470% 73.96678%, 67.70507% 72.92115%, 67.83360% 72.73103%, 68.28688% 71.87356%, 68.45593% 71.49139%, 68.59187% 71.01761%, 68.79255% 70.54255%, 68.95576% 70.25736%, 69.02398% 70.06380%, 69.13011% 69.59050%, 69.28827% 69.30507%, 69.32898% 68.82774%, 69.62599% 67.97254%, 69.79701% 67.21208%, 69.89352% 66.92661%, 69.91554% 66.54253%, 70.04407% 65.97218%, 70.06477% 65.59580%, 70.16111% 65.31094%, 70.31162% 64.54633%, 70.31689% 63.97599%, 70.44540% 63.31059%, 70.45066% 62.07484%, 70.57919% 61.40945%, 70.57919% 59.02782%, 70.51756% 58.74264%, 70.51230% 57.88713%, 70.45066% 57.60196%, 70.44540% 57.12667%, 70.31689% 56.46127%, 70.31162% 55.60574%, 70.18311% 55.13046%, 70.17785% 54.84530%, 70.04932% 54.17991%, 70.04407% 53.89473%, 69.89369% 53.03566%, 69.79716% 52.65543%, 69.69303% 51.99003%, 69.49222% 51.13393%, 69.39568% 50.84875%, 69.22466% 50.08830%, 68.92745% 49.23278%, 68.89021% 49.04267%, 68.72678% 48.56738%, 68.62462% 48.18542%, 67.95262% 46.37782%, 67.85608% 46.18771%, 67.41729% 45.04681%, 66.71877% 43.71580%, 66.28018% 42.76522%, 65.89906% 42.19292%, 65.74504% 41.81485%, 65.49771% 41.43246%, 65.02423% 40.48189%, 64.69504% 40.00660%, 64.55600% 39.72143%, 64.22681% 39.24614%, 64.08778% 38.96098%, 63.42413% 38.01040%, 63.28510% 37.72523%, 60.61137% 33.92195%, 60.34318% 33.63206%, 59.54050% 32.49884%, 59.33984% 32.30126%, 58.93850% 31.73838%, 58.73783% 31.54080%, 58.53716% 31.26310%, 58.33649% 31.06552%, 57.93515% 30.50264%, 57.46692% 30.01989%, 57.13248% 29.55207%, 56.93181% 29.35449%, 56.66425% 28.98173%, 56.46358% 28.78415%, 55.06293% 26.79367%, 54.84206% 26.32036%, 54.67863% 26.03519%, 54.21370% 24.99150%, 53.94416% 24.04267%, 53.72825% 23.09625%, 53.72825% 21.39045%, 53.90693% 20.82425%, 54.07992% 20.06554%, 54.24137% 19.68358%, 54.34766% 19.11528%, 54.39359% 19.02842%, 54.65587% 18.76886%, 55.32248% 18.29518%, 55.45626% 18.24226%, 55.99116% 17.91523%, 56.32705% 17.85737%, 56.52924% 17.59797%, 56.66828% 17.31279%, 56.86368% 17.02745%, 56.93355% 16.82808%, 56.93895% 16.25736%, 57.00051% 15.97182%, 57.00051% 15.87228%, 56.91692% 15.39277%, 56.75372% 14.91749%, 56.64940% 14.34684%, 56.44740% 13.86788%, 56.15372% 13.39453%, 56.11100% 13.10936%, 55.99596% 12.91448%);
}
@media (max-width: 900px), (pointer: coarse) {
  .hero__stage[data-fruit="fig"] { --banana-render-height: min(70.36789297658864vw, 100svh); }
  .hero__stage[data-fruit="fig"] .hero__banana { width: min(100%, calc(100svh * 1495 / 1052)); }
}

/* Project categories: glass pills aligned to the right of the title. */
.work__title { right: var(--page-pad); flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.work__title-line { display: inline-flex; align-items: baseline; gap: .28em; }
.work-card__mobile-title { text-decoration: none; }
.work-card__title-line { display: block; text-decoration: underline; text-underline-offset: .15em; }
.work-category {
  display: table;
  width: max-content;
  max-width: 100%;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(45,45,45,.28);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 12px rgba(0,0,0,.12);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.work-card__mobile-title .work-category { margin-top: 0; }

.keyboard-navigation .work-card__mobile-title { text-decoration: none; }

.work__title > .work-category { flex-shrink: 0; }

@media (min-width: 901px) and (pointer: fine) {
  .work-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(8.1rem, 9.9vw, 12.6rem);
    min-height: clamp(2.7rem, 2.7vw, 3.6rem);
    padding: .625em 1.1em;
    font-size: clamp(.9rem, .945vw, 1.2375rem);
  }
}

.work-card__title-line { min-width: 0; overflow-wrap: normal; }
@media (max-width: 900px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .work-card__mobile-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
  }
}
.keyboard-navigation .work-card__mobile-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}


/* Minimal three-question contact module. */
.contact-flow { max-width: 48rem; margin: 0 auto; padding: clamp(1.4rem,4vw,3rem); color: #fff; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.contact-flow [hidden] { display: none !important; }
.contact-flow__stage { min-height: 10rem; }
.contact-flow__step { min-width: 0; margin: 0; padding: 0; border: 0; animation: contact-reveal .4s cubic-bezier(.22,1,.36,1); }
.contact-flow textarea, .contact-flow input { scroll-margin-top: 11rem; display: block; width: 100%; min-width: 0; border: 1px solid #444; border-radius: 999px; padding: 1rem 1.5rem; background: #101010; box-shadow: none; color: #fff; font: inherit; font-size: 1rem; line-height: 1.5; appearance: none; transition: border-color .25s,box-shadow .25s; }
.contact-flow textarea { border-radius: 2rem; min-height: 8rem; resize: vertical; }
.contact-flow input::placeholder, .contact-flow textarea::placeholder { color: #888; }
.contact-flow textarea:focus, .contact-flow input:focus { border-color: #c6c6c6; outline: 1px solid #c6c6c6; outline-offset: 2px; box-shadow: none; }
.contact-flow input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: none; caret-color: #fff; box-shadow: 0 0 0 1000px #101010 inset; }
.contact-flow .contact-flow__error { color: #ddd; font-size: .78rem; margin: .6rem 0 0; }
.contact-flow__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.contact-flow button { font: inherit; cursor: pointer; min-height: 52px; border-radius: 999px; transition: transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s; }
.contact-flow__back { width: 52px; font-size: 1.35rem !important; color: #bbb; background: #0b0b0b; border: 1px solid #333; box-shadow: none; }
.contact-flow__next { margin-left: auto; min-width: 112px; min-height: 62px !important; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; line-height: 1; padding: .65rem 1.35rem; color: #eee; border: 2px solid transparent; background: #171717; border-color: #888; box-shadow: none; }
.contact-flow__next [aria-hidden] { width: 2rem; height: 2rem; flex: 0 0 2rem; display: block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.contact-flow button:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
.contact-flow button:active:not(:disabled) { transform: scale(.95); }
.contact-flow button:disabled { cursor: not-allowed; opacity: .45; }
.contact-flow .contact-flow__status { margin: 1rem 0 0; color: #ddd; font-size: .8rem; line-height: 1.5; }
.contact-flow__status:empty { display: none; }
@media (hover:hover) { .contact-flow__next:not(:disabled):hover [aria-hidden] { transform: translateX(4px); } .contact-flow__back:not(:disabled):hover { color: #fff; border-color: #888; } }
@media (max-width: 600px) { .contact-flow__stage { min-height: 10rem; } }
@keyframes contact-reveal { from { opacity: 0; transform: translateX(12px); filter: blur(3px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .contact-flow *, .contact-flow *::before, .contact-flow *::after { animation: none !important; transition: none !important; } }

/* One field with its action inside the right edge. */
.contact-flow__field { position: relative; }
.contact-flow__stage { min-height: 0; }
.contact-flow input, .contact-flow textarea { min-height: 64px; padding: 1rem 4.75rem 1rem 1.5rem; }
.contact-flow textarea { min-height: 8rem; }
.contact-flow__actions { position: absolute; top: 8px; right: 8px; margin: 0; gap: 0; }
.contact-flow .contact-flow__next { width: 48px; height: 48px; min-width: 48px; min-height: 48px !important; padding: 0; border: 0; background: #eee; color: #101010; }
.contact-flow__next [aria-hidden] { width: 24px; height: 24px; flex-basis: 24px; }
.contact-flow .contact-flow__next:disabled { background: #222; color: #777; opacity: 1; }
.contact-flow .contact-flow__back { display: block; margin-top: 1rem; }

/* Enlarge both banana layers together on phones; keep the studio blend aligned. */
@media (max-width: 900px) {
  .hero__stage:not([data-fruit="fig"]) {
    --banana-render-height: min(80.859375vw, 115svh);
  }
  .hero__stage:not([data-fruit="fig"]) .hero__banana {
    transform: scale(1.15);
    transform-origin: center;
  }
}

/* Give the banana more presence on desktop and iPad, with both photo layers aligned. */
@media (min-width: 700px) and (pointer: fine),
       (min-width: 700px) and (min-height: 500px) and (pointer: coarse) {
  .hero__stage:not([data-fruit="fig"]) {
    --banana-render-height: min(91.40625vw, 130vh);
    --banana-render-height: min(91.40625vw, 130dvh);
  }
  .hero__stage:not([data-fruit="fig"]) .hero__banana {
    transform: scale(1.3);
    transform-origin: center;
  }
}
@media (min-width: 700px) and (min-height: 500px) and (pointer: coarse) {
  .hero__stage:not([data-fruit="fig"]) {
    --banana-render-height: min(91.40625vw, 130svh);
  }
}

/* Center the paper in the white viewport independently of its heading. */
.work-recipe.method { padding: 0 var(--page-pad); }
.work-recipe .method__inner { position: relative; display: block; }
.work-recipe .method__title {
  position: absolute;
  top: max(clamp(2.5rem, 6svh, 4rem), calc(27.209vw * 92 / 575 + .75rem));
  left: 0;
  margin: 0;
}
.work-recipe .receipt {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding-block: clamp(4.5rem, 12svh, 6.5rem);
}

.work-recipe .receipt__image { min-height: 0; min-width: 0; }

/* Scroll-driven paper, progressively enhanced only after its renderer is ready. */
.paper-viewport { height: 100%; }
.work-recipe.paper-ready .receipt { position: relative; }
.paper-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)) drop-shadow(0 10px 12px rgba(0,0,0,.16));
}
.paper-ready .receipt__image { opacity: 0; }
.paper-ready.paper-flat .receipt__image { opacity: 1; }
.paper-ready.paper-flat .paper-canvas { opacity: 0; }
.work-recipe .method__title { z-index: 2; }
@media (max-width: 900px), (pointer: coarse) {
  .work-recipe.paper-ready {
    height: 240svh;
    overflow: visible;
  }
  .work-recipe.paper-ready .paper-viewport {
    position: sticky;
    top: 0;
    height: 100svh;
  }
}
.keyboard-navigation .work-recipe.paper-ready { height: 240svh; overflow: visible; }
.keyboard-navigation .work-recipe.paper-ready .paper-viewport { position: sticky; top: 0; height: 100svh; }
@media (prefers-reduced-motion: reduce) {
  .work-recipe.paper-ready { height: 100svh; }
  .paper-ready .receipt__image { opacity: 1; }
  .paper-canvas { display: none; }
}

/* The photographed sequence already includes natural paper shadows. */
.paper-canvas--photo { filter: none; }

/* Neutral monochrome paper throughout the home recipe animation. */
.work-recipe .receipt { filter: grayscale(1); }


/* Center the footer inscription on mobile screens. */
@media (max-width: 900px) {
  .site-footer { text-align: center; }
  .site-footer p { text-wrap: balance; }
}

/* Give initial page headings breathing room below the fixed mobile menu. */
@media (max-width: 900px) {
  .page.page--about, .page.case {
    padding-top: calc(10rem + env(safe-area-inset-top));
  }
}

/* Mobile only: a miniature of the same three pills opens to their original size. */
.nav-toggle { display: none; }
.nav-toggle[hidden] { display: none !important; }
@media (max-width: 900px) {
  .nav[data-nav-expandable] { transform-origin: top right; }
  .nav[data-nav-animated] { transition: transform .26s var(--ease); }
  .nav[data-nav-expandable][data-nav-open="false"] {
    transform: scale(.55, .36);
    pointer-events: none;
  }
  .nav[data-nav-expandable][data-nav-open="true"] { transform: scale(1); pointer-events: auto; }
  .nav-toggle {
    display: block;
    position: fixed;
    z-index: 10002;
    top: var(--nav-top);
    right: 0;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
  }
  .nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  body:has(.page--contact) .nav-toggle,
  body.is-work-active .nav-toggle { color: #fff; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav[data-nav-expandable] { transition: none; }
}

/* Keep the compact mobile pills clean; their full labels return on expansion. */
@media (max-width: 900px) {
  .nav[data-nav-expandable][data-nav-open="false"] a {
    color: transparent !important;
    text-shadow: none;
  }
}

/* Keep the mobile menu anchored beside the logo, independent of scroll scaling. */
@media (max-width: 900px) {
  .nav[data-nav-expandable], .nav-toggle {
    top: max(8px, env(safe-area-inset-top));
  }
}

/* Keep the recipe heading below the enlarged compact mobile wordmark. */
@media (max-width: 900px) {
  .work-recipe .method__title {
    top: max(clamp(2.5rem, 6svh, 4rem), calc(47.32vw * 92 / 575 + .75rem));
  }
}


/* Use the original print at full detail for the last photographic state. */
.paper-canvas--sharp { filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)) drop-shadow(0 10px 12px rgba(0,0,0,.16)); }


/* Shared contact sizing: the same larger heading and pill in both placements. */
.contact .contact__heading {
  margin: 0 auto clamp(2.1rem, 4.8vw, 3.6rem);
  font-size: clamp(3.84rem, 12vw, 7.8rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
}
.contact-flow {
  --contact-base-width: min(48rem, calc(100vw - 2 * var(--page-pad)));
  max-width: calc((var(--contact-base-width) - 2 * clamp(1.4rem, 4vw, 3rem)) * 1.2);
  padding: clamp(1.68rem, 4.8vw, 3.6rem) 0;
}
.contact-flow input, .contact-flow textarea {
  min-height: 76.8px;
  padding: 1.2rem 5.7rem 1.2rem 1.8rem;
  font-size: 1.2rem;
}
.contact-flow textarea { min-height: 9.6rem; border-radius: 2.4rem; }
.contact-flow button { min-height: 62.4px; }
.contact-flow__actions { top: 9.6px; right: 9.6px; }
.contact-flow .contact-flow__next {
  width: 57.6px;
  height: 57.6px;
  min-width: 57.6px;
  min-height: 57.6px !important;
}
.contact-flow__next [aria-hidden] { width: 28.8px; height: 28.8px; flex-basis: 28.8px; }
.contact-flow .contact-flow__back { width: 62.4px; margin-top: 1.2rem; font-size: 1.62rem !important; }
.contact-flow .contact-flow__error { font-size: .936rem; margin-top: .72rem; }
.contact-flow .contact-flow__status { font-size: .96rem; margin-top: 1.2rem; }


/* The photographed paper itself is the open control; no extra card or pill. */
.paper-open {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 18%;
  background: transparent;
  color: #444;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.paper-open[hidden] { display: none; }
.paper-open:focus-visible { outline: 1px dashed #777; outline-offset: 8px; }
.paper-opening .paper-open { cursor: progress; }
.receipt[tabindex="-1"]:focus { outline: none; }


/* The outlined line belongs to the contact module in both placements. */
.contact .contact__statement {
  width: 92vw;
  max-width: 100%;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  font-family: "Barabbas", Georgia, serif;
  font-size: 13.248vw;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1pt rgba(255, 255, 255, .7);
  filter: drop-shadow(0 -.5px .5px rgba(255, 255, 255, .28))
          drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
  paint-order: stroke fill;
}

/* The original text remains accessible; SVG adds only the metallic outline. */
.contact .contact__statement { position: relative; }
.contact__metal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.contact .contact__statement--metal { color: transparent; -webkit-text-stroke: 0; filter: none; }
.contact__metal text, .contact__metal use { -webkit-text-stroke: 0; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .contact__metal-reflection { display: none; }
}

/* Shared section heading position, above the films and beneath the recipe. */
.work__heading {
  position: absolute;
  top: max(clamp(2.5rem, 6svh, 4rem), calc(27.209vw * 92 / 575 + .75rem));
  left: var(--page-pad);
  margin: 0;
  z-index: 8;
  color: #fff;
  text-shadow: none;
  pointer-events: none;
}
@media (max-width: 900px) {
  .work__heading { top: max(clamp(2.5rem, 6svh, 4rem), calc(47.32vw * 92 / 575 + .75rem)); }
}
.contact .contact__statement { max-width: none; justify-self: start; left: 50%; transform: translateX(-50%); margin-inline: 0; }

/* Keep the whole desktop film clickable while its visual layers transition. */
.work__project-link {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
}
.work__project-link[hidden] { display: none; }
.work__project-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.work[data-work-linked] .work-card { pointer-events: none; }

/* Project pages: read the complete story beside its image on desktop.
   Narrow screens retain the existing title, image and copy order. */
@media (min-width: 901px) {
  .page.case {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: repeat(4, auto);
    align-content: center;
    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: clamp(.75rem, 1.6svh, 1.1rem);
    width: 100%;
    max-width: 100rem;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(7rem, 14svh, 9rem) var(--page-pad) clamp(2rem, 4svh, 3rem);
  }
  .page.case > h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(2.4rem, min(4vw, 6.4svh), 4.5rem);
  }
  .case__disciplines { grid-column: 1; grid-row: 2; margin: 0; }
  .case__description { grid-column: 1; grid-row: 3; margin: 0; }
  .case__meta { grid-column: 1; grid-row: 4; align-self: start; align-items: flex-start; margin: .25rem 0 0; }
  .case__media {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
  }
  .case__media img {
    display: block;
    width: 100%;
    max-height: 68vh;
    max-height: 68svh;
    object-fit: contain;
  }
}

/* Four project stories live in one viewport; native arrows follow Home's order. */
html:has(body.project-screen), body.project-screen {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.project-screen .case {
  --case-title-size: clamp(2.4rem, min(4vw, 7.5svh), 5.4rem);
  --case-copy-size: clamp(1.1rem, min(1.7vw, 2.6svh), 1.5rem);
  --case-description-lines: 8;
  --case-visit-size: 1.8rem;
  grid-template-rows: calc(var(--case-title-size) * .95 * 2) calc(var(--case-copy-size) * 1.45 * var(--case-description-lines)) calc(var(--case-visit-size) * 1.5) 5rem;
  max-width: none;
  column-gap: clamp(2rem, 4vw, 5rem);
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-inline: max(4rem, 4.5vw);
}
.project-screen .case > h1 { grid-row: 1; font-size: var(--case-title-size); align-self: start; }
.project-screen .case__description { grid-row: 2; font-size: var(--case-copy-size); line-height: 1.45; align-self: start; }
.project-screen .case__meta { grid-row: 3; margin: 0; align-self: start; font-size: var(--case-visit-size); line-height: 1.2; }
.project-screen .case__disciplines { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; list-style: none; margin: 0; padding: 0; align-self: start; }
.project-screen .case__disciplines .work-category { display: inline-flex; align-items: center; min-width: 0; min-height: 0; padding: .55rem .95rem; border-color: rgba(0,0,0,.24); background: rgba(0,0,0,.025); color: #111; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 3px 12px rgba(0,0,0,.045); }
.project-screen .case__visit { display: inline-flex; align-items: baseline; gap: .28em; border-bottom: 0; white-space: nowrap; }
.project-screen .case__visit .work__title-prefix { font-size: 1.25em; }
.project-screen .case__visit > span:last-child { text-decoration: underline; text-underline-offset: .18em; }
.project-screen .case__media { min-width: 0; min-height: 0; height: 100%; align-self: stretch; }
.project-screen .case__media img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center top;
}
.project-switcher { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.project-switcher__link {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  pointer-events: auto;
  touch-action: manipulation;
  transition: color .18s;
}
.project-switcher__link--previous { left: max(.5rem, env(safe-area-inset-left)); }
.project-switcher__link--next { right: max(.5rem, env(safe-area-inset-right)); }
.project-switcher__link svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.project-switcher__link:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
@media (hover: hover) {
  .project-switcher__link:hover { color: #666; }
}
@media (max-width: 900px) {
  .project-screen .case {
    --case-title-size: clamp(1.7rem, 7vw, 3rem);
    --case-copy-size: clamp(.94rem, 3.9vw, 1.1rem);
    --case-copy-leading: 1.4;
    --case-description-lines: 6;
    --case-visit-size: 1.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(var(--case-title-size) * .95 * 2) minmax(0, min(32svh, 20rem)) calc(var(--case-copy-size) * var(--case-copy-leading) * var(--case-description-lines)) calc(var(--case-visit-size) * 1.5) 4rem;
    align-content: center;
    row-gap: clamp(.5rem, 1.25svh, .85rem);
    max-width: 58rem;
    width: 100%;
    padding: max(4rem, calc(47.32vw * 92 / 575 + 1.35rem + env(safe-area-inset-top))) var(--page-pad) calc(4.5rem + env(safe-area-inset-bottom));
  }
  .project-screen .case > h1 { grid-row: 1; margin: 0; }
  .project-screen .case__disciplines { grid-row: 5; gap: .375rem; }
  .project-screen .case__disciplines .work-category { padding: .375rem .65rem; font-size: .75rem; }
  .project-screen .case__media { grid-row: 2; margin: 0; align-self: stretch; display: grid; place-items: center; overflow: hidden; }
  .project-screen .case__media img { min-height: 0; max-height: 100%; }
  .project-screen .case__description { grid-row: 3; margin: 0; font-size: var(--case-copy-size); line-height: var(--case-copy-leading); }
  .project-screen .case__meta { grid-row: 4; margin: 0; align-self: start; align-items: flex-start; }
  .project-switcher__link { top: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: none; }
  .project-switcher__link--previous { left: var(--page-pad); }
  .project-switcher__link--next { right: var(--page-pad); }
}
@media (max-width: 900px) and (max-height: 700px) {
  .project-screen .case { --case-title-size: 1.6rem; --case-copy-size: .9rem; --case-copy-leading: 1.35; --case-visit-size: 1.5rem; padding-top: max(3.5rem, calc(47.32vw * 92 / 575 + 1rem + env(safe-area-inset-top))); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); row-gap: .5rem; }
  .project-switcher__link { bottom: max(.5rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .project-screen .case { --case-description-lines: 7; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .project-screen .case { --case-description-lines: 4; }
}
@media (min-width: 901px) and (max-height: 650px) {
  .project-screen .case { --case-copy-size: clamp(.9rem, 2.4svh, 1.05rem); --case-description-lines: 7; padding-top: max(4rem, calc(27.209vw * 92 / 575 + 1rem)); padding-bottom: 1.5rem; row-gap: .5rem; }
}
@media (max-width: 900px) and (max-height: 450px) and (orientation: landscape) {
  .project-screen .case { --case-title-size: 1.35rem; --case-copy-size: .8125rem; --case-copy-leading: 1.2; --case-visit-size: 1.4rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: calc(var(--case-title-size) * .95 * 2) calc(var(--case-copy-size) * var(--case-copy-leading) * 7) calc(var(--case-visit-size) * 1.5) 1.6rem; align-content: center; gap: .2rem 1.25rem; padding-top: 3rem; padding-bottom: 3.25rem; }
  .project-screen .case > h1 { grid-column: 1; grid-row: 1; }
  .project-screen .case__disciplines { grid-column: 1; grid-row: 4; gap: .25rem; }
  .project-screen .case__disciplines .work-category { padding: .25rem .5rem; font-size: .65rem; }
  .project-screen .case__description { grid-column: 1; grid-row: 2; }
  .project-screen .case__meta { grid-column: 1; grid-row: 3; }
  .project-screen .case__media { grid-column: 2; grid-row: 1 / span 4; }
}
@media (prefers-reduced-motion: reduce) {
  .project-switcher__link { transition: none; }
}