/* Self-hosted fonts (no requests to Google servers) */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  /* palette (unchanged identity: paper, soft blacks, warm greys, sand) */
  --paper: #faf9f6;
  --ink: #111;
  --ink-soft: #444;
  --ink-muted: #6b675f;
  --line: rgba(17, 17, 17, 0.08);
  --sand: #e4e0d7;
  --sand-ink: #33312c;
  --sand-muted: rgba(51, 49, 44, 0.72);
  --sand-line: rgba(51, 49, 44, 0.3);

  /* type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.6875rem;   /* legal, labels */
  --text-sm: 0.8125rem;   /* captions, footer */
  --text-base: 1rem;      /* body */
  --tracking-caps: 0.14em;

  /* type scale — every text on the site uses one of these levels (see "Typography system") */
  --type-h1: clamp(2.5rem, 4.6vw, 4.25rem);       /* page titles */
  --type-h2: clamp(1.875rem, 3.2vw, 3rem);        /* section titles, statements */
  --type-h3: clamp(1.375rem, 1.9vw, 1.75rem);     /* sub-titles, highlighted lines */
  --type-intro: clamp(1.0625rem, 1.2vw, 1.1875rem); /* introductory paragraphs */
  --type-body: 1rem;                              /* running text */
  --type-small: 0.8125rem;                        /* captions, credits, links lists */
  --type-xs: 0.6875rem;                           /* fine print, labels */
  --leading-title: 1.06;
  --leading-heading: 1.25;
  --leading-text: 1.7;
  --leading-small: 1.6;

  /* spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 7rem;
  --space-3xl: 10rem;

  /* 12-column editorial grid (invisible) */
  --margin: 2rem;
  --gutter: 1.5rem;

  /* header */
  --header-pad: 1.4rem;
  --header-pad-compact: 1rem;
  --logo-h: 30px;
  --logo-h-compact: 23px;
  --header-h: calc(var(--logo-h) + 2 * var(--header-pad));

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1024px) {
  :root {
    --gutter: 1rem;
    --space-2xl: 5.5rem;
    --space-3xl: 8rem;
    --logo-h: 24px;
    --logo-h-compact: 19px;
  }
}

@media (max-width: 640px) {
  :root {
    --margin: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 5.5rem;
    --header-pad: 1.1rem;
    --header-pad-compact: 0.8rem;
    --logo-h: 18px;
    --logo-h-compact: 16px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* pages without the fullscreen hero start below the fixed header */
body:not(.has-hero) {
  padding-top: var(--header-h);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
}

input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.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;
}

/* viewport reveal: only when JS is running, never for reduced motion */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

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

/* ---------- Cursor ----------
   The bronze hand ("RATON") replaces the pointer on everything clickable; the hotspot is the tip of
   the middle finger. Plain url() first for older browsers, image-set() for sharp 2x screens. */
a[href],
button:not(:disabled),
label[for],
select,
summary,
[role="button"],
.pc-viewport {
  cursor: url("assets/cursor-hand.png") 20 1, pointer;
  cursor: -webkit-image-set(url("assets/cursor-hand.png") 1x, url("assets/cursor-hand@2x.png") 2x) 20 1, pointer;
  cursor: image-set(url("assets/cursor-hand.png") 1x, url("assets/cursor-hand@2x.png") 2x) 20 1, pointer;
}

/* a single photograph has nothing to navigate */
.pc.is-single .pc-viewport {
  cursor: default;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: var(--header-pad) var(--margin);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header.is-compact {
  padding-block: var(--header-pad-compact);
}

/* Intro: only the fullscreen reel is visible. The header stays in place but empty and
   transparent; at the end of the reel its logo takes over the reel's wordmark (see script.js). */
.site-header {
  transition: padding 0.45s var(--ease), background-color 0.6s var(--ease), border-color 0.6s var(--ease);
}

.site-header > * {
  transition: opacity 0.6s var(--ease), visibility 0s linear 0s;
}

.intro .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  pointer-events: none;
}

.intro .site-header > * {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

/* the logo appears instantly on top of the reel's own wordmark, so the swap is invisible */
.intro.intro-logo .site-header > .logo {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* freeze transitions while measuring the final header layout */
.site-header.no-anim,
.site-header.no-anim * {
  transition: none !important;
}

/* brand on the left, navigation and language switch on the right */
.site-header .logo {
  display: flex;
  align-items: center;
  order: -1;
  flex-shrink: 0;
  margin-right: auto;
  padding-right: var(--space-md);
}

/* the wordmark is a mask filled with currentColor, so the same element can change colour
   (terracotta of the intro reel → ink) while it travels into the header */
.logo-icon {
  display: block;
  height: var(--logo-h);
  aspect-ratio: 2383 / 276;
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url("assets/logo-wordmark-lg.png") center / contain no-repeat;
  mask: url("assets/logo-wordmark-lg.png") center / contain no-repeat;
  transition: height 0.45s var(--ease);
}

.is-compact .logo-icon {
  height: var(--logo-h-compact);
}

.main-nav {
  display: flex;
  gap: var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  padding-bottom: 3px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.main-nav a.active::after,
.main-nav a:hover::after {
  transform: scaleX(1);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: var(--space-xl);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #bbb;
}

.lang-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

.lang-btn.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.lang-btn:hover {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px 0;
  background: none;
  border: none;
}

.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--ink);
}

@media (max-width: 760px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid var(--line);
  }

  .main-nav.open {
    max-height: 300px;
  }

  .main-nav a {
    padding: var(--space-sm) var(--margin);
    border-top: 1px solid var(--line);
  }

  .main-nav a::after {
    display: none;
  }

  .lang-switch {
    order: 2;
    margin-left: 0;
  }

  .nav-toggle {
    display: flex;
    order: 3;
    margin-left: var(--space-md);
  }
}

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

/* full-screen intro reel; sand background = colour of the first frame, so no black/white flash */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--sand) url("assets/video/hero-poster-6.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* phones in portrait: the vertical cut of the reel and its first frame */
@media (max-width: 760px) and (orientation: portrait) {
  .hero {
    background-image: url("assets/video/hero-poster-6-mobile.jpg");
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the wordmark and main subject are centred in every shot of the reel */
  object-position: 50% 50%;
  background: transparent;
  pointer-events: none;
}

/* never show native controls or the iOS start-playback button */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* end of the reel: fade to paper before landing on the studio text */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}

.intro-out .hero::after {
  opacity: 1;
}

/* when the logo takes over the reel's wordmark, the reel clears quickly so the two never overlap */
.intro-logo .hero::after {
  transition-duration: 0.4s;
}

/* exceptional fallback when the browser refuses autoplay: the intro itself becomes the play button */
.intro-blocked .hero {
  cursor: url("assets/cursor-hand.png") 20 1, pointer;
  cursor: -webkit-image-set(url("assets/cursor-hand.png") 1x, url("assets/cursor-hand@2x.png") 2x) 20 1, pointer;
  cursor: image-set(url("assets/cursor-hand.png") 1x, url("assets/cursor-hand@2x.png") 2x) 20 1, pointer;
}

/* ---------- Statement (manifesto) ---------- */

/* the statement owns the pause before the first project; no fixed heights */
.statement {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-md);
  padding: clamp(var(--space-2xl), 18vh, var(--space-3xl)) var(--margin) calc(var(--space-2xl) + var(--space-md));
}

.statement-lead {
  grid-column: 1 / span 8;
  text-wrap: balance;
}

/* desktop keeps the editorial line break written into the copy; smaller screens let it flow */
@media (min-width: 1025px) {
  .statement-lead {
    white-space: pre-line;
  }
}

.statement-body {
  grid-column: 7 / span 5;
  max-width: 34rem;
}

.statement-body h1,
.statement-body p {
  margin-bottom: var(--space-sm);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* first sentence: a touch more presence (contrast + 400), never bold */
.statement-body h1 {
  color: var(--ink);
}

/* location line: the studio's signature, set apart from the text */
.statement-body .statement-locations {
  margin: var(--space-lg) 0 0;
  color: var(--ink-muted);
}

/* ---------- Portfolio ---------- */

/* every project sits on the same 12-column grid; each one has its own placement */
/* the same listing as its own page (/proyectos), below the page title */
.portfolio.portfolio--page {
  padding-top: var(--space-xl);
}

.portfolio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--margin) var(--space-3xl);
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
}

.project {
  display: block;
  color: inherit;
}

.project-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #eceae4;
  transition: opacity 0.5s var(--ease);
}

/* 1 — Casa Manila: large image left + smaller companion, bottom-aligned */
.project--manila {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}

.project--manila .project-img--main {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.project--manila .project-img--aside {
  grid-column: 9 / span 3;
  grid-row: 1;
  aspect-ratio: 2 / 3;
}

.project--manila .portfolio-caption {
  grid-column: 1 / span 7;
  grid-row: 2;
}

/* 2 + 3 — Akasa contained and displaced right, Villa Springs large and lower on the left */
.project--akasa {
  grid-column: 8 / span 4;
  grid-row: 2;
  align-self: start;
  margin-top: var(--space-2xl);
}

.project--villa {
  grid-column: 1 / span 6;
  grid-row: 2;
  align-self: start;
  margin-top: calc(var(--space-2xl) + var(--space-3xl));
}

/* 4 — B/L Office: centred, its own (squarer) proportion */
.project--bl {
  grid-column: 4 / span 6;
  grid-row: 3;
  margin-top: var(--space-3xl);
}

.project--bl .project-img {
  aspect-ratio: 1132 / 1390;
}

/* captions: small, precise, tied to the image's left edge */
.portfolio-caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: var(--space-sm);
  font-family: var(--font-text);
}

.caption-title {
  color: var(--ink);
}

.caption-meta {
  color: var(--ink-muted);
}

/* project blocks: photo and caption share a grid so the hover label sits on the photograph */
.project--akasa,
.project--villa,
.project--bl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.project--akasa > *,
.project--villa > *,
.project--bl > * {
  grid-column: 1;
}

.project--akasa .portfolio-caption,
.project--villa .portfolio-caption,
.project--bl .portfolio-caption {
  grid-row: 2;
}

.project .project-img {
  grid-row: 1;
}

.project-hover {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  z-index: 1;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

/* Casa Manila: the label sits on the main (left) photograph */
.project--manila .project-hover {
  grid-column: 1 / span 7;
}

.project .project-img {
  transition: filter 0.6s var(--ease), transform 0.8s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  a.project:hover .project-hover,
  a.project:focus-visible .project-hover {
    opacity: 1;
    transform: none;
  }

  a.project:hover .project-img {
    filter: brightness(0.84);
    transform: scale(1.008);
  }
}

/* touch screens: no hover label, the whole block simply opens the project */
@media (hover: none), (pointer: coarse) {
  .project-hover {
    display: none;
  }
}

.caption-cta {
  margin-top: var(--space-xs);
  color: var(--ink);
}

.caption-cta::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.35s var(--ease);
}

@media (hover: hover) {
  .caption-cta {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }

  a.project:hover .caption-cta,
  a.project:focus-visible .caption-cta {
    opacity: 1;
    transform: none;
  }

}

@media (max-width: 1024px) {
  .statement-lead {
    grid-column: 1 / span 10;
  }

  .statement-body {
    grid-column: 6 / span 6;
  }

  .project--manila .project-img--main {
    grid-column: 1 / span 8;
  }

  .project--manila .project-img--aside {
    grid-column: 9 / span 4;
  }

  .project--manila .portfolio-caption {
    grid-column: 1 / span 8;
  }

  .project--akasa {
    grid-column: 8 / span 5;
  }

  .project--villa {
    grid-column: 1 / span 6;
  }

  .project--bl {
    grid-column: 3 / span 8;
  }
}

/* mobile: the asymmetry simplifies to large images with alternating insets */
@media (max-width: 640px) {
  .statement {
    row-gap: var(--space-lg);
    padding-top: var(--space-3xl);
  }


  .statement-lead,
  .statement-body {
    grid-column: 1 / -1;
  }

  .portfolio {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .project--manila {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 0;
  }

  .project--manila .project-img--main,
  .project--manila .portfolio-caption {
    grid-column: 1 / -1;
  }

  .project--manila .project-img--aside {
    grid-column: 3 / -1;
    grid-row: 3;
    margin-top: var(--space-lg);
  }

  .project--akasa,
  .project--villa,
  .project--bl {
    margin-top: 0;
  }

  .project--akasa {
    width: 82%;
    margin-left: auto;
  }

  .project--bl {
    width: 82%;
  }
}

/* ---------- 404 page ---------- */

.not-found {
  max-width: 560px;
  margin: 0 auto;
  padding: 7rem 2rem 8rem;
  text-align: center;
}

.not-found-code {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 10vw, 6rem);
  line-height: 1;
  color: #723015;
  margin-bottom: 1rem;
}

.not-found h1 {
  margin-bottom: 0.75rem;
}

.not-found p {
  color: #444;
  margin-bottom: 2rem;
}

.not-found-link {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background: #723015;
  color: #faf9f6;
  transition: opacity 0.2s ease;
}

.not-found-link:hover {
  opacity: 0.8;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 6rem 2rem 5rem;
}

.legal h1 {
  margin-bottom: 0.75rem;
}

.legal-updated {
  color: #666;
  margin-bottom: 2.5rem;
}

.legal h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal p {
  color: #444;
  margin-bottom: 1.25rem;
}

.legal ul {
  margin: 0 0 1.25rem 1.25rem;
  color: #444;
}

.legal li {
  margin-bottom: 0.4rem;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--sand);
  color: var(--sand-ink);
  scroll-margin-top: var(--space-lg);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl) var(--margin);
  padding-right: calc(var(--margin) + var(--space-xl));
}

.contact-panel > * {
  width: 100%;
  max-width: 30rem;
}

.contact-panel h2 {
  margin-bottom: var(--space-xl);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-field label {
  color: var(--sand-ink);
}

.form-optional {
  color: var(--sand-muted);
}

.form-field--secondary label {
  color: var(--sand-muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--space-xs) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sand-line);
  border-radius: 0;
  color: var(--sand-ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.5;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--sand-ink);
  box-shadow: 0 1px 0 0 var(--sand-ink);
}

.form-submit {
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 0 0 0.35rem;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--sand-ink);
}

.form-submit::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.6em;
  transition: transform 0.35s var(--ease);
}

.form-submit:hover::after,
.form-submit:focus-visible::after {
  transform: translateX(6px);
}

.form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-status {
  font-size: var(--text-sm);
  color: var(--sand-muted);
}

/* privacy: one short consent line; the full data-protection notice opens on demand */
.form-privacy {
  margin-top: var(--space-lg);
  max-width: 26rem;
  font-family: var(--font-text);
  color: var(--sand-ink);
}


.form-privacy a {
  text-decoration: underline;
  text-decoration-color: var(--sand-line);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}

.form-privacy a:hover {
  text-decoration-color: currentColor;
}

.legal-toggle {
  margin-top: var(--space-xs);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--sand-muted);
  transition: color 0.25s ease;
}

.legal-toggle::before {
  content: "+";
  display: inline-block;
  width: 0.9em;
}

.legal-toggle[aria-expanded="true"]::before {
  content: "\2212";
}

.legal-toggle:hover {
  color: var(--sand-ink);
}

/* accordion: closed takes no space; opens and closes smoothly on the same sand ground */
.legal-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.legal-panel.is-open {
  grid-template-rows: 1fr;
}

.legal-panel-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}

.legal-panel.is-open .legal-panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.legal-panel-inner p {
  color: var(--sand-muted);
}

.legal-panel-inner p:first-child {
  padding-top: var(--space-sm);
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--sand-line);
}

.contact-details a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}

.contact-details a:hover {
  text-decoration-color: currentColor;
}

.contact-photo {
  position: relative;
  overflow: hidden;
}

.contact-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the amphora sits in the middle of the frame */
  object-position: 50% 45%;
}

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

  .contact-panel {
    order: 2;
    padding: var(--space-xl) var(--margin) var(--space-2xl);
  }

  .contact-photo {
    order: 1;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 640px) {
  .contact-details {
    flex-direction: column;
  }
}

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

.site-footer {
  padding: var(--space-2xl) var(--margin) var(--space-md);
}

.footer-brand {
  padding-bottom: var(--space-xl);
}

.footer-wordmark {
  /* ~9 of 12 columns */
  width: 75%;
  max-width: 1200px;
}

.footer-locations {
  margin-top: var(--space-md);
  color: var(--ink-muted);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.footer-nav a {
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.footer-bottom p {
  color: var(--ink-muted);
}

.footer-top-btn {
  background: none;
  border: none;
  padding: var(--space-2xs);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  transition: color 0.2s ease, transform 0.35s var(--ease);
}

.footer-top-btn:hover {
  color: var(--ink);
  transform: translateY(-3px);
}

@media (max-width: 640px) {
  .footer-wordmark {
    width: 100%;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #0f0f10;
  color: #fff;
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner p {
  color: #ccc;
  max-width: 640px;
}

.cookie-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 0.6rem 1.5rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  transition: opacity 0.2s ease;
}

.cookie-btn-primary {
  background: #faf9f6;
  color: #111;
}

.cookie-btn:hover {
  opacity: 0.75;
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Studio page ---------- */

/* Two chapters on the 12-column grid: the studio, then the founder, and a quiet invitation.
   Text and image share the same rows so they read as one composition, not stacked blocks.
   Columns shift slightly so not everything hangs from one axis. */

.studio-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* chapter 01: text on the left, the arch photograph on the right from the very first row */
.studio-chapter--studio {
  grid-template-rows: auto auto 1fr auto;
  padding-top: calc(var(--space-3xl) * 0.75);
}

/* the passage to the second chapter is still made of space only */
.studio-chapter--founder {
  grid-template-rows: 1fr auto auto 1fr;
  padding-top: calc(var(--space-3xl) * 1.2 - var(--statement-shift));
  padding-bottom: calc(var(--space-3xl) * 0.75);
}

.studio-label {
  color: var(--ink);
}

.studio-title {
  margin-top: var(--space-xs);
  color: var(--ink);
}

.studio-head {
  grid-column: 2 / span 4;
  grid-row: 1;
}

.studio-intro {
  grid-column: 2 / span 4;
  grid-row: 2;
  margin-top: var(--space-lg);
  max-width: 34rem;
}

.studio-intro,
.studio-text,
.founder-bio p {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.studio-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: #eceae4;
}

/* the arch: about 5 of 12 columns, slightly lowered so it doesn't sit on the title line */
.studio-photo--arch {
  grid-column: 7 / span 5;
  grid-row: 1 / span 3;
  max-width: 640px;
  margin-top: var(--space-lg);
}

/* philosophy: the sans sentence closes the left column at the foot of the photograph,
   the serif statement answers it just below, one step further right */
.studio-text {
  grid-column: 2 / span 4;
  grid-row: 3;
  align-self: end;
  margin-top: var(--space-xl);
  max-width: 28rem;
}

/* the closing statement sits optically centred between the arch block and the founder chapter:
   it moves down by --statement-shift and the space below shrinks by the same amount */
.studio {
  --statement-shift: 4rem;
}

.studio-statement {
  grid-column: 4 / span 6;
  grid-row: 4;
  margin-top: calc(var(--space-xl) + var(--statement-shift));
  max-width: 38rem;
  color: var(--ink);
  text-wrap: pretty;
}

/* chapter 02: portrait ≈ 58 %, text ≈ 33 %, a column of air between;
   the text block sits centred on the height of the portrait */
.studio-photo--founder {
  grid-column: 1 / span 7;
  grid-row: 1 / -1;
  max-width: 900px;
}

.founder-head {
  grid-column: 9 / span 4;
  grid-row: 2;
}

.founder-bio {
  grid-column: 9 / span 4;
  grid-row: 3;
  margin-top: var(--space-lg);
  max-width: 30rem;
}

.founder-bio p + p {
  margin-top: 0.75rem;
}

/* a short pause after the first sentence */
.founder-bio .founder-lead {
  margin-bottom: var(--space-md);
  color: var(--ink);
}

/* closing invitation before the footer: typography only */
.studio-cta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: var(--space-xl) var(--margin) var(--space-lg);
}

.studio-cta > * {
  grid-column: 2 / span 8;
}

.studio-cta__link {
  display: inline-block;
  justify-self: start;
  margin-top: var(--space-sm);
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 0.15em;
  transition: background-size 0.5s var(--ease);
}

.studio-cta__link::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 0.7em;
  transition: transform 0.4s var(--ease);
}

.studio-cta__link:hover,
.studio-cta__link:focus-visible {
  background-size: 100% 1px;
}

.studio-cta__link:hover::after,
.studio-cta__link:focus-visible::after {
  transform: translateX(4px);
}

/* text reveals travel a little further than images */
.js .studio .reveal:not(figure) {
  transform: translateY(20px);
}

.js .studio .reveal.is-visible {
  transform: none;
}

/* tablet: keep the asymmetry, the founder chapter stacks */
@media (max-width: 1024px) {
  .studio-head,
  .studio-intro,
  .studio-text {
    grid-column: 1 / span 6;
  }

  .studio-photo--arch {
    grid-column: 7 / -1;
  }

  .studio-statement {
    grid-column: 3 / -1;
  }

  .studio {
    --statement-shift: 0.75rem;
  }

  .studio-chapter--founder {
    grid-template-rows: none;
    padding-top: calc(var(--space-2xl) - var(--statement-shift));
  }

  .founder-head,
  .studio-photo--founder,
  .founder-bio {
    grid-row: auto;
  }

  .founder-head {
    grid-column: 1 / -1;
  }

  .studio-photo--founder {
    grid-column: 1 / span 9;
    margin-top: var(--space-lg);
  }

  .founder-bio {
    grid-column: 4 / -1;
    margin-top: var(--space-xl);
  }

  .studio-cta > * {
    grid-column: 1 / -1;
  }
}

/* mobile: one column, wide photographs, same rhythm with less air */
@media (max-width: 640px) {
  .studio-chapter {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-chapter--studio {
    grid-template-rows: none;
    padding-top: var(--space-xl);
  }

  .studio-chapter > *,
  .studio-chapter--studio > * {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .studio-intro {
    margin-top: var(--space-md);
  }

  .studio-photo--arch {
    max-width: none;
    margin-top: var(--space-lg);
  }

  .studio-text {
    margin-top: var(--space-lg);
  }

  .studio {
    --statement-shift: 1.5rem;
  }

  .studio-statement {
    margin-top: calc(var(--space-md) + var(--statement-shift));
  }

  .studio-chapter--founder {
    padding-top: calc(var(--space-2xl) - var(--statement-shift));
    padding-bottom: var(--space-xl);
  }

  .studio-photo--founder {
    margin-top: var(--space-md);
  }

  .founder-bio {
    margin-top: var(--space-lg);
  }

  .studio-cta {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-lg);
  }

  /* keeps the arrow on the same line as the question */
}

/* ---------- Project pages ---------- */

/* Shared system: head → hero → info → photographic sequence → credits → next project.
   Each project curates its own sequence by placing images on the 12-column grid with
   --col (desktop), --col-t (tablet), --col-m (mobile, 6 columns), --shift / --shift-m
   (vertical offset), and optional crop via .is-crop + --ratio / --pos. */

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* head */
.project-head {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.project-back {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: var(--space-md);
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

.project-back:hover {
  color: var(--ink);
}

.project-head h1 {
  grid-column: 1 / span 9;
  font-variant-numeric: lining-nums;
}

.project-location {
  grid-column: 1 / span 6;
  margin-top: var(--space-sm);
  color: var(--ink-muted);
}

/* images (hero, sequence, next project) */
.p-img {
  grid-column: var(--col, 1 / -1);
  margin-top: var(--shift, 0);
}

.p-img img {
  width: 100%;
  height: auto;
  background: #eceae4;
}

.p-img.is-crop img {
  aspect-ratio: var(--ratio);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* hero: wide crop (height-led) or a portrait image kept whole */
.project-hero .is-wide img {
  height: min(85vh, 56vw);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.project-hero .is-portrait img {
  max-height: 88vh;
  object-fit: cover;
}

/* info */
.project-info {
  padding-top: var(--space-xl);
}

.project-facts {
  grid-column: 1 / span 4;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}

.project-summary {
  grid-column: 6 / span 6;
  max-width: 38rem;
  color: var(--ink);
  text-wrap: pretty;
}

/* photographic sequence */
.project-sequence {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-top: var(--space-3xl);
}

.p-row {
  align-items: start;
}

.p-row.is-bottom {
  align-items: end;
}

/* a longer pause marks the passage from one zone of the house to the next */
.p-row.is-pause {
  margin-top: var(--space-xl);
}

/* project with a lead text and no hero image (Casa Manila) */
.project-info--lead {
  padding-top: var(--space-md);
}

.project-info--lead .project-summary {
  grid-column: 1 / span 6;
}

/* ---- Editorial image rail (Casa Manila) ----
   A continuous horizontal sequence across the full width. Every photo shares one visual height and
   keeps its own proportions (verticals narrower, horizontals wider). The active photo is anchored
   near the left edge, the previous one only hinted at, the next ones running off the right edge.
   The track is rendered three times so the sequence can loop endlessly (script.js). */
.pc {
  --pc-h: min(80vh, 100vw);
  --pc-gap: 14px;
  --pc-ease: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  padding-top: var(--space-2xl);
}

.pc-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.pc-viewport:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.pc-viewport.is-dragging {
  cursor: grabbing;
}

.pc-track {
  display: flex;
  align-items: flex-end;
  gap: var(--pc-gap);
  width: max-content;
  will-change: transform;
}

.pc-track.is-animated {
  transition: transform 1s var(--pc-ease);
}

.pc-slide {
  flex: none;
  margin: 0;
}

.pc-slide img,
.pc-slide video {
  display: block;
  height: var(--pc-h);
  width: auto;
  max-width: none;
  background: #eceae4;
  pointer-events: none;
}

/* desktop: the left half goes back, the right half goes forward; a small arrow follows the cursor */


.pc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pc-cursor.is-visible {
  opacity: 0.85;
}

/* previous / next stay available to keyboard and screen-reader users, visible only on focus */
.pc-control {
  position: absolute;
  top: calc(var(--space-2xl) + var(--pc-h) / 2);
  z-index: 3;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.pc-control:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.pc-prev {
  left: var(--margin);
}

.pc-next {
  right: var(--margin);
}

.pc-counter {
  margin-top: var(--space-sm);
  padding-inline: var(--margin);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 640px) {
  .project-info--lead .project-summary {
    grid-column: 1 / -1;
  }

  .pc {
    --pc-gap: 8px;
    padding-top: var(--space-xl);
  }

  /* mobile: like desktop, every photo shares one height and keeps its own proportion
     (a 2:3 photo is 72vw wide, so the next one still shows at the right edge) */
  .pc-slide img,
  .pc-slide video {
    height: min(108vw, 72vh);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-track.is-animated {
    transition-duration: 0.01ms;
  }
}

/* credits */
.project-credits {
  padding-top: var(--space-3xl);
}

.project-credits::before {
  content: "";
  grid-column: 1 / -1;
  margin-bottom: var(--space-md);
  border-top: 1px solid var(--line);
}

.project-credits h2 {
  grid-column: 1 / span 4;
  color: var(--ink-muted);
}

.project-credits dl {
  grid-column: 6 / span 6;
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: var(--space-xs) var(--gutter);
}

.project-credits dt {
  color: var(--ink-muted);
}

.project-credits dd {
  color: var(--ink);
}

/* next project: one project, the whole block is the link; same sand ground as the contact section */
.next-project {
  margin-top: var(--space-3xl);
  padding-block: var(--space-2xl);
  background: var(--sand);
  color: var(--sand-ink);
}

.next-label {
  grid-column: 1 / -1;
  margin-bottom: var(--space-md);
  color: var(--sand-muted);
}

/* the photograph is shown whole, at its own proportion (never cropped) */
.next-project .p-img {
  align-self: end;
}

.next-project .p-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  background: transparent;
  transition: opacity 0.5s var(--ease);
}

.next-text {
  grid-column: 10 / span 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.next-name {
  font-variant-numeric: lining-nums;
}

.next-location {
  color: var(--sand-muted);
}

@media (hover: hover) {
  a.next-project:hover .p-img img {
    opacity: 0.9;
  }

  a.next-project:hover .caption-cta,
  a.next-project:focus-visible .caption-cta {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .p-img {
    grid-column: var(--col-t, var(--col, 1 / -1));
  }

  .project-facts {
    grid-column: 1 / span 4;
  }

  .project-summary,
  .project-credits dl {
    grid-column: 5 / -1;
  }

  .next-text {
    grid-column: 9 / -1;
  }
}

@media (max-width: 640px) {
  .project-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .project-head h1,
  .project-location,
  .project-facts,
  .project-summary,
  .project-credits h2,
  .project-credits dl,
  .next-text {
    grid-column: 1 / -1;
  }

  .p-img {
    grid-column: var(--col-m, 1 / -1);
    margin-top: var(--shift-m, 0);
  }

  .project-hero .is-wide img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .project-summary {
    margin-top: var(--space-md);
  }

  .project-credits dl {
    margin-top: var(--space-sm);
  }

  .next-text {
    margin-top: var(--space-md);
  }
}

/* ---------- Typography system ----------
   One definition per level; components only set colour, width and spacing.
   h1 · h2 · h3 → Cormorant Garamond | intro · body · small · xs · label → Hanken Grotesk */

/* H1 — page titles */
.project-head h1,
.legal h1,
.not-found h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

/* H2 — section titles and statements */
.statement-lead,
.contact-panel h2,
.next-name,
.studio-title {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

/* the two editorial chapter titles of the Studio page keep their italic */
.studio-title {
  font-style: italic;
}

/* H3 — sub-titles and highlighted lines */
.legal h2,
.studio-statement,
.studio-cta__link {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Intro — the first paragraph that introduces a page */
.project-summary,
.studio-intro {
  font-family: var(--font-text);
  font-size: var(--type-intro);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Body — running text */
.statement-body h1,
.statement-body p,
.studio-text,
.founder-bio p,
.legal p,
.legal ul,
.not-found p {
  font-family: var(--font-text);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--leading-text);
  letter-spacing: 0;
  text-wrap: pretty;
}

/* the first sentence of a text block is set apart by weight and colour, never bold */
.statement-body h1,
.founder-bio .founder-lead {
  font-weight: 400;
  color: var(--ink);
}

/* Small — captions, credits, link lists, contact details */
.caption-meta,
.footer-nav,
.contact-details,
.project-credits dl,
.cookie-banner p {
  font-family: var(--font-text);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: var(--leading-small);
  letter-spacing: 0;
}

/* XS — fine print */
.footer-bottom p,
.form-consent,
.legal-toggle,
.legal-panel-inner p,
.form-optional {
  font-family: var(--font-text);
  font-size: var(--type-xs);
  font-weight: 400;
  line-height: var(--leading-small);
  letter-spacing: 0;
  text-transform: none;
}

/* Label — small caps-style identifiers, metadata and text links */
.studio-label,
.caption-title,
.caption-cta,
.project-hover,
.project-location,
.project-back,
.statement-body .statement-locations,
.footer-locations,
.next-label,
.next-location,
.project-credits h2,
.form-field label,
.legal .legal-updated,
.form-submit,
.not-found-link,
.cookie-btn,
.pc-counter {
  font-family: var(--font-text);
  font-size: var(--type-xs);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ---------- Vertical rhythm for text ---------- */

/* label → title */
.studio-title {
  margin-top: var(--space-xs);
}

/* title → metadata line */
.project-location,
.legal .legal-updated {
  margin-top: var(--space-sm);
}

/* consecutive paragraphs */
.statement-body h1,
.statement-body p,
.studio-intro + p,
.founder-bio p + p,
.legal p {
  margin-bottom: 0;
}

.statement-body > * + *,
.founder-bio p + p,
.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--space-sm);
}

/* sub-title → its text, and between sub-sections */
.legal h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

/* ---------- Reduced motion ---------- */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* videos in a project rail keep their own proportion (16:9 here) and never show controls */
.pc-video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* a horizontal video never runs wider than the screen allows: whole, never cut by the edge */
.pc-slide .pc-video {
  height: auto;
  width: min(calc(var(--pc-h) * 16 / 9), calc(100vw - 2 * var(--margin) - 6rem));
}

@media (max-width: 640px) {
  .pc-slide .pc-video {
    width: 86vw;
    max-height: none;
  }
}

.pc-video::-webkit-media-controls,
.pc-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* cover videos (Villa Springs 11): same box and crop as the photograph they replace */
.cover-video {
  display: block;
  object-fit: cover;
  /* the crop of the former cover: sofa, cushion, vases and the wooden chair */
  object-position: 72% 50%;
  pointer-events: none;
}

.cover-video::-webkit-media-controls,
.cover-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* listing (home, /proyectos): the 4:5 box every project card uses */
.project .cover-video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}

/* next-project block: the vertical proportion of the former cover photograph */
.next-project .next-video {
  width: auto;
  max-width: 100%;
  height: min(80vh, 100%);
  max-height: 80vh;
  aspect-ratio: 1090 / 1443;
  transition: opacity 0.5s var(--ease);
}