/* ==========================================================================
   studio enn — v2.3 · the slice, slower and softer
   Trunk: v2.1 excavation hero. Ink sinks, light leans, shadows blur.
   --p   : eased scroll progress through the hero scene
   --sun : angle of light
   ========================================================================== */

:root {
  --plaster-hi: #F5EFE4;
  --plaster-lo: #EAE1D0;
  --ink:        #2B2820;
  --ink-quiet:  #6F675A;
  --caption:    #97907F;
  --hairline:   rgba(43, 40, 32, 0.14);
  --terra:      #B65F38;
  --radius-img: 5px;
  --sun: 0.4;
  --p: 0;

  --display: "Marcellus", Georgia, serif;
  --text: "Jost", "Helvetica Neue", sans-serif;

  --gutter: clamp(1.4rem, 4.5vw, 5.5rem);
  --ease-soft: cubic-bezier(0.22, 0.8, 0.3, 1);
}

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;

  background-color: var(--plaster-lo);
  background-image:
    radial-gradient(
      120% 70vh at calc(18% + var(--sun) * 64%) -14%,
      rgba(255, 246, 226, 0.5),
      rgba(255, 246, 226, 0) 60%
    ),
    linear-gradient(172deg, var(--plaster-hi) 10%, var(--plaster-lo) 90%);
}

/* plaster tooth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { display: block; }

/* <picture> is a transparent wrapper — generate no box, so every rule
   targeting the inner <img> (floats, drift, media fills) is unaffected */
picture { display: contents; }

/* selected text stays in the room's palette — warm ink on pale stone */
::selection { background: rgba(43, 40, 32, 0.85); color: var(--plaster-hi); }

/* --------------------------------------------------------------------------
   Nav — always present, frosted
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.05rem var(--gutter);
  background: rgba(245, 239, 228, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(43, 40, 32, 0.06);
}

.wordmark {
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wordmark b { font-weight: 600; }

.nav nav { display: flex; gap: clamp(1.2rem, 2.6vw, 2.6rem); }

.nav nav a {
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  transition: color 0.6s ease;
}

.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--ink); }

/* hamburger — mobile only */
.menu-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.7s var(--ease-soft), opacity 0.5s ease;
}

.menu-btn span + span { margin-top: 0.42rem; }

.menu-open .menu-btn span:first-child { transform: translateY(0.25rem) rotate(45deg); }
.menu-open .menu-btn span:last-child  { transform: translateY(-0.25rem) rotate(-45deg); }

/* mobile menu — a quiet plaster overlay */
.menu-veil {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 2.2rem;
  padding: var(--gutter);
  background: rgba(245, 239, 228, 0.88);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}

.menu-veil a {
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}

.menu-open .menu-veil { opacity: 1; }

@media (max-width: 640px) {
  .nav nav { display: none; }
  .menu-btn { display: block; }
  .menu-veil { display: flex; pointer-events: none; }
  .menu-open .menu-veil { pointer-events: auto; }
}

/* --------------------------------------------------------------------------
   Ink — how text comes to exist
   -------------------------------------------------------------------------- */

.ink {
  opacity: 0;
  filter: blur(4px);
  color: rgba(43, 40, 32, 0.25);
  transform: translateY(0.3em);
  transition:
    opacity 2.2s var(--ease-soft),
    filter 2.4s var(--ease-soft),
    color 2.8s ease,
    transform 2.3s var(--ease-soft);
  transition-delay: var(--d, 0s);
}

.is-loaded .ink.arrived,
.ink.is-visible {
  opacity: 1;
  filter: none;
  color: var(--ink);
  transform: none;
}

/* quiet variants keep their resting colour after settling */
.ink--quiet.is-visible,
.is-loaded .ink--quiet.arrived { color: var(--ink-quiet); }
.ink--caption.is-visible,
.is-loaded .ink--caption.arrived { color: var(--caption); }

/* --------------------------------------------------------------------------
   Hero — the door ajar
   -------------------------------------------------------------------------- */

.hero { height: 260vh; position: relative; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero__frame {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: calc(36% + var(--p) * 64%);
  overflow: hidden;
}

.hero__frame img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  float: right;
  transform: scale(calc(1.5 - var(--p) * 0.5));
  transform-origin: 64% 40%;
}

/* the visitor's light — a soft slit of warmth that trails the cursor
   across the vault, arriving late, like sun past a shifting curtain.
   --mx/--my are lerped cursor coords (0..1) inside the stage. */
.hero__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--light-on, 0);
  transition: opacity 1.8s ease;
  background:
    linear-gradient(
      105deg,
      rgba(46, 34, 20, 0) calc(var(--mx, 0.5) * 100% - 26%),
      rgba(255, 240, 208, 0.85) calc(var(--mx, 0.5) * 100% - 4%),
      rgba(255, 240, 208, 0.85) calc(var(--mx, 0.5) * 100% + 4%),
      rgba(46, 34, 20, 0.5) calc(var(--mx, 0.5) * 100% + 30%),
      rgba(46, 34, 20, 0) calc(var(--mx, 0.5) * 100% + 52%)
    ),
    radial-gradient(
      120% 90% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.4) * 100%),
      rgba(255, 244, 218, 0.5),
      rgba(255, 244, 218, 0) 60%
    );
  filter: blur(10px);
}

/* sun crossing the relief — barely there */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(43, 34, 24, 0.07) 0%,
    rgba(255, 241, 214, 0.08) calc(var(--sun) * 90% + 2%),
    rgba(43, 34, 24, 0.08) calc(var(--sun) * 90% + 46%)
  );
  mix-blend-mode: soft-light;
}

/* the slice casts a soft penumbra onto the plaster — a blurry line
   that travels with the door, never a sharp edge */
.hero__penumbra {
  position: absolute;
  top: -5%; bottom: -5%;
  right: calc(36% + var(--p) * 64%);
  width: clamp(3rem, 7vw, 7rem);
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(64, 50, 30, calc(0.13 - var(--p) * 0.1)),
    rgba(64, 50, 30, 0) 85%
  );
  filter: blur(14px);
}

/* light resting on the wall beside the opening */
.hero__bloom {
  position: absolute;
  top: 0; bottom: 0;
  right: calc(36% + var(--p) * 64%);
  width: 40vw;
  pointer-events: none;
  opacity: calc(0.7 - var(--p));
  background: radial-gradient(
    85% 60% at 100% calc(26% + var(--sun) * 32%),
    rgba(255, 240, 210, 0.34),
    rgba(255, 240, 210, 0) 72%
  );
  filter: blur(6px);
}

/* --------------------------------------------------------------------------
   The words — first thought large, second thought later and smaller
   -------------------------------------------------------------------------- */

.hero__copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(4rem, 13vh, 8rem);
  z-index: 2;
  max-width: 54%;
  opacity: calc(1 - var(--p) * 2.2);
  transform: translateY(calc(var(--p) * -3vh));
}

.hero__copy h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1rem + 4.7vw, 6rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.hero__copy .l2 {
  display: block;
  margin-top: 1.3em;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.7rem + 1.1vw, 1.7rem);
  line-height: 1.45;
  max-width: 26em;
}

@media (max-width: 760px) {
  .hero__frame { width: calc(44% + var(--p) * 56%); }
  .hero__penumbra, .hero__bloom { right: calc(44% + var(--p) * 56%); }
  .hero__copy { max-width: calc(56% - 1.2 * var(--gutter)); }
  .hero__copy h1 { font-size: clamp(1.5rem, 5.4vw, 2.1rem); }
  .hero__copy .l2 { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   Approach — air, then one thought
   -------------------------------------------------------------------------- */

.approach {
  padding: clamp(9rem, 26vh, 17rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gutter);
}

.label {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--caption);
}

.approach p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.1rem);
  line-height: 1.6;
  margin: 0;
  max-width: 25em;
}

@media (max-width: 820px) {
  .approach { grid-template-columns: 1fr; padding-block: clamp(6rem, 18vh, 11rem); }
}

/* --------------------------------------------------------------------------
   Pictures — they develop, like prints in a tray
   -------------------------------------------------------------------------- */

.pic {
  opacity: 0;
  transform: translateY(1rem) scale(1.012);
  transition:
    opacity 1.8s var(--ease-soft),
    transform 2.1s var(--ease-soft);
  transition-delay: var(--d, 0s);
}

.pic.is-visible { opacity: 1; transform: none; }

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

/* rounded corners on framed content (never the full-bleed hero).
   Clipping containers get the radius too, so hover-zoom stays rounded. */
.pic img,
.project__media img,
.project__media video,
.about__portrait img,
.post__media, .post__media img,
.sheet__cover img,
.drift, .hand,
.slider, .slider__slide img, .slider__slide video {
  border-radius: var(--radius-img);
}

/* drift — pictures breathe against the scroll, a few px, never still.
   JS feeds translateY on [data-rate] imgs; the container clips,
   the slight oversize hides the travel. */
.drift { overflow: hidden; }
.drift img { transform: scale(1.06); }

/* the hand — a fainter cousin of the hero light, for photographs.
   JS feeds --mx/--my; the warmth follows the visitor's cursor. */
.hand { position: relative; overflow: hidden; }

.hand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--light-on, 0);
  transition: opacity 1.6s ease;
  background: radial-gradient(
    50% 65% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.45) * 100%),
    rgba(255, 242, 214, 0.55),
    rgba(255, 242, 214, 0) 72%
  );
  filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Services — a quiet list
   -------------------------------------------------------------------------- */

.services { padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(5rem, 12vh, 9rem); }

.services .label { display: block; margin-bottom: 2.6rem; }

.service {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 5vh, 3.2rem) 0;
  border-top: 1px solid var(--hairline);
}

.service:last-of-type { border-bottom: 1px solid var(--hairline); }

.service__n {
  font-family: var(--text);
  font-size: 0.8rem;
  color: var(--caption);
  padding-top: 0.55em;
}

.service h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem);
  line-height: 1.2;
}

.service__body p { margin: 0; color: var(--ink-quiet); max-width: 34em; }

/* hover: the entry warms and steps forward a breath */
.service h3 { transition: color 0.8s ease, transform 0.9s var(--ease-soft); }
.service__n { transition: color 0.8s ease; }
.service:hover h3 { color: #8A6A45; transform: translateX(0.35rem); }
.service:hover .service__n { color: var(--ink); }

.service__tags {
  margin-top: 1em !important;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--caption) !important;
}

@media (max-width: 820px) {
  .service { grid-template-columns: 2.4rem 1fr; }
  .service__body { grid-column: 2; margin-top: 0.8rem; }
}

/* --------------------------------------------------------------------------
   Projects — four rooms
   -------------------------------------------------------------------------- */

.projects-head { padding: clamp(8rem, 22vh, 14rem) var(--gutter) clamp(4rem, 10vh, 7rem); }

.projects-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 3.4vw, 4.4rem);
  line-height: 1.16;
  max-width: 14em;
  text-wrap: balance;
}

.projects { padding: 0 var(--gutter); }

.project {
  display: grid;
  gap: clamp(1.6rem, 4vw, 5rem);
  align-items: end;
}

/* every project block gets real air above it, whatever precedes it */
.projects > .project:not(:first-child) { margin-top: clamp(8rem, 22vh, 15rem); }

.project--left  { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.project--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.project--right .project__media { order: 2; }

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

.project__n {
  font-family: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--caption);
  display: block;
  margin-bottom: 1.6em;
}

.project h3 {
  margin: 0 0 0.35em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 1.9vw, 2.7rem);
  line-height: 1.18;
}

.project__place {
  display: block;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  color: var(--caption);
  margin-bottom: 2em;
}

.project__body { margin: 0; color: var(--ink-quiet); max-width: 29em; }

/* secondary material strip — the architect's eye.
   Arrangements stagger deliberately: offsets and widths vary per strip
   so no two strips repeat and pictures never touch. */
.project__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  margin-top: clamp(3rem, 8vh, 6rem);
}

.project__details .down { margin-top: clamp(2.5rem, 8vh, 6.5rem); }

/* arrangement b: mirrored ratio, second image narrower and pulled in */
.project__details--b { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.project__details--b > div:last-child { max-width: 88%; }

/* arrangement c: first image narrower, hung lower */
.project__details--c > div:first-child { max-width: 82%; justify-self: end; }

/* arrangement solo: one floating print, the empty track is intentional air */
.project__details--solo { grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.18fr); }

/* arrangement d: two modest images, second pulled right (collab "quiet pair") */
.project__details--d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project__details--d > div { max-width: 86%; }
.project__details--d > div:last-child { margin-left: auto; }

@media (max-width: 820px) {
  .project--left, .project--right, .project__details { grid-template-columns: minmax(0, 1fr); }
  .project--right .project__media { order: 0; }
  .project__details .down { margin-top: 0; }
  .project__details--d > div { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Slider — a quiet carousel on a project's main frame.
   Crossfade only (dissolve grammar), never a sliding motion.
   The container's aspect is set by JS from the first slide, so the frame
   never jumps between images of different proportions.
   -------------------------------------------------------------------------- */

/* The frame breathes, the image never does: every slide fills the full
   column width, and the frame's height glides to meet each slide's own
   proportion (JS sets an explicit height, capped at 74vh). Like prints
   being turned on a wall — constant width, no mats, no crops. */
.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;               /* pre-JS fallback only */
  overflow: hidden;
  transition: height 0.7s var(--ease-soft);
}

.slider__track { position: absolute; inset: 0; }

.slider__slide {
  display: block;              /* override the global picture{display:contents} */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}

.slider__slide.is-current { opacity: 1; }

.slider__slide img,
.slider__slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* never crop a composition */
  display: block;
}

/* if a video is ever forced into a mismatched frame, protect its bottom */
.slider__slide video { object-position: 50% 100%; }

/* a slide with data-ratio wider than its media: crop the top, keep the ground */
.slider__slide--trim-top video { object-fit: cover; object-position: 50% 100%; }

/* arrows — circular plaster buttons, same family as the article close */
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 248, 242, 0.85);
  box-shadow: 0 4px 18px rgba(43, 34, 22, 0.12);
  cursor: pointer;
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.9;
  transition: opacity 0.5s ease, transform 0.6s var(--ease-soft);
}

.slider__arrow:hover { opacity: 1; }
.slider__arrow--prev { left: 0.9rem; }
.slider__arrow--next { right: 0.9rem; }
.slider__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.slider__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

/* meta row — counter + progress dashes, on the plaster below the frame */
.slider__meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7rem;
}

.slider__count {
  font-family: var(--text);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--caption);
}

.slider__dashes { display: flex; gap: 0.4rem; align-items: center; }

.slider__dashes i {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hairline);
  cursor: pointer;
  transition: background 0.6s ease;
}

.slider__dashes i.is-active { background: var(--terra); }

@media (prefers-reduced-motion: reduce) {
  .slider__slide { transition: none; }
  .slider { transition: none; }
}

/* --------------------------------------------------------------------------
   Catalogue note + collaboration line
   -------------------------------------------------------------------------- */

.catalogue { padding: clamp(10rem, 28vh, 18rem) var(--gutter); }

.catalogue p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.55;
  max-width: 23em;
}

.collab {
  margin: 0 var(--gutter);
  padding: clamp(2.2rem, 6vh, 3.6rem) 0 clamp(5rem, 14vh, 9rem);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.collab p {
  margin: 0;
  color: var(--ink-quiet);
  max-width: 26em;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  line-height: 1.5;
}

.collab p em {
  font-style: normal;
  color: var(--terra);
}

.collab a {
  font-family: var(--display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 0.25em;
  transition: border-color 0.6s ease, color 0.6s ease;
}

.collab a:hover { color: var(--terra); }

/* --------------------------------------------------------------------------
   About — the story
   -------------------------------------------------------------------------- */

.about {
  padding: clamp(7rem, 18vh, 12rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about .label { display: block; margin-bottom: 2.4rem; }

.about h2 {
  margin: 0 0 1em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1rem + 2.9vw, 3.7rem);
  line-height: 1.2;
  max-width: 14em;
}

.about__text { max-width: 33em; color: var(--ink-quiet); }
.about__text p { margin: 0 0 1.2em; }

.about__credential {
  margin: 2.4rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--caption);
}

/* her: given real presence, centered on the grid line */
.about__portrait {
  justify-self: end;
  width: min(100%, 30rem);
}

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about__portrait { justify-self: start; width: min(80%, 24rem); order: -1; }
}

/* --------------------------------------------------------------------------
   The last room — dusk, her, two ways in
   -------------------------------------------------------------------------- */

.last-room {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}

.last-room__inner { max-width: 46em; }

/* dusk settles: the plaster deepens, the light comes in low */
.last-room::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 12% 108%, rgba(255, 214, 160, 0.22), rgba(255, 214, 160, 0) 55%),
    linear-gradient(to bottom, rgba(101, 78, 48, 0) 0%, rgba(101, 78, 48, 0.1) 70%, rgba(101, 78, 48, 0.16) 100%);
}

.last-room > * { position: relative; }

.last-room h2 {
  margin: 0 0 0.6em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 3vw, 4.2rem);
  line-height: 1.16;
}

.last-room .voice {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem);
  line-height: 1.5;
  max-width: 24em;
  margin: 0 0 1.6em;
}

.last-room .promise {
  margin: 0 0 3rem;
  color: var(--ink-quiet);
  max-width: 30em;
}

.way {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--hairline);
  transition: padding-left 0.9s var(--ease-soft);
}

.way:last-of-type { border-bottom: 1px solid var(--hairline); }
.way:hover { padding-left: 1rem; }

.way .label { font-size: 0.74rem; }

.way strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
}

/* the catalogue's quiet door to the last room */
.catalogue a {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.08em;
  transition: border-color 0.7s ease, color 0.7s ease;
}

.catalogue a:hover { color: #8A6A45; border-color: #8A6A45; }

/* glow — the light passing over words. Display headings carry a
   terracotta warmth exactly where the cursor is; everywhere else
   they stay ink. JS feeds --gx/--gy as percentages of the element. */
.glow-on .glow {
  background-image: radial-gradient(
    42% 160% at calc(var(--gx, -80) * 1%) calc(var(--gy, 50) * 1%),
    var(--terra) 0%,
    var(--ink) 62%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ambient — the faintest presence of the light, everywhere.
   A fixed warm breath that trails the cursor across the plaster;
   strongest light still belongs to the hero and the photographs. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--light-on, 0);
  transition: opacity 2.2s ease;
  background: radial-gradient(
    52vw 44vh at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%),
    rgba(255, 241, 210, 0.32),
    rgba(255, 241, 210, 0) 70%
  );
  filter: blur(18px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 2.2rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.6rem;
  font-size: 0.8rem;
  color: var(--caption);
}

.footer .wordmark { font-size: 0.95rem; color: var(--ink); display: block; margin-bottom: 0.3em; }

.footer__social { display: flex; gap: 1.6rem; }

.footer__social a { transition: color 0.5s ease; }
.footer__social a:hover { color: var(--ink); }

.footer__fine { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   Reduced motion — the room at rest
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --p: 0; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .ink, .pic {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .ink { color: var(--ink) !important; }
  .hand::after, .hero__light, .ambient { display: none !important; }
  .drift img { transform: none !important; }
  .glow-on .glow {
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ink) !important;
  }
  .ink--quiet { color: var(--ink-quiet) !important; }
  .ink--caption { color: var(--caption) !important; }
}