@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

/* Studio Rara+ theme stylesheet */

/* 1. Design tokens & variables */
:root {
  /* Color Palette */
  --rara-bg: #FFFFFF;                         /* Pure white */
  --rara-text-main: #111111;                   /* Deep rich charcoal */
  --rara-text-muted: rgba(17, 17, 17, 0.50);   /* Quiet editorial metadata */
  --rara-text-dim: rgba(17, 17, 17, 0.38);     /* Secondary taxonomy */
  --rara-hairline: rgba(17, 17, 17, 0.12);     /* Thin architectural hairline */
  --rara-hairline-dark: rgba(17, 17, 17, 0.25);

  /* Typography Stack */
  --rara-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rara-font-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* Spacing System */
  --rara-gutter-x: clamp(2.5rem, 6.5vw, 7.5rem);
  --rara-section-gap: clamp(4rem, 9vw, 10rem);
  --rara-grid-gap-x: clamp(1.5rem, 3.5vw, 5rem);
  --rara-grid-gap-y: clamp(5rem, 10vw, 12rem);

  /* Transitions & easing */
  --rara-ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --rara-duration-hover: 700ms;
  --rara-duration-reveal: 700ms;
  --rara-duration-entrance: 800ms;
  --rara-duration-hover-soft: 240ms;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE ELEMENTS
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--rara-bg);
  color: var(--rara-text-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.rara-body {
  font-family: var(--rara-font-sans);
  background-color: var(--rara-bg);
  color: var(--rara-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* 100% Intrinsic aspect ratio preservation */
}

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

button {
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY & FOCUS
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 1px solid var(--rara-text-main);
  outline-offset: 4px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   4. STRUCTURAL HAIRLINES
   -------------------------------------------------------------------------- */
.rara-hairline {
  width: 100%;
  height: 1px;
  background-color: var(--rara-hairline);
}

/* --------------------------------------------------------------------------
   5. MINIMAL EDITORIAL HEADER (DIRECTION B - FINAL REFINEMENT)
   -------------------------------------------------------------------------- */
.rara-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
  padding: clamp(1rem, 2vh, 1.625rem) 0;
}

.rara-header-inner {
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--rara-gutter-x);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rara-brand,
.rara-nav {
  pointer-events: auto;
}

/* Global page entrance */
@keyframes raraPageEntrance {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.rara-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
  animation: raraPageEntrance var(--rara-duration-entrance) var(--rara-ease-editorial) 0ms both;
}

.rara-brand:hover {
  opacity: 0.55;
}

.rara-logo {
  display: block;
  width: auto;
  height: clamp(18px, 1.55vw, 22px);
  object-fit: contain;
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
  filter: drop-shadow(0 1px 4px rgba(243, 241, 235, 0.95)) drop-shadow(0 0 10px rgba(243, 241, 235, 0.85));
}

.rara-nav-list {
  display: flex;
  list-style: none;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  animation: raraPageEntrance var(--rara-duration-entrance) var(--rara-ease-editorial) 70ms both;
}

.rara-nav-link {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--rara-text-muted);
  text-decoration: none;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(243, 241, 235, 0.95), 0 0 10px rgba(243, 241, 235, 0.85);
  transition: color var(--rara-duration-hover-soft) var(--rara-ease-editorial), opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-nav-link:hover {
  color: var(--rara-text-main);
}

.rara-nav-link.active {
  color: var(--rara-text-main);
  font-weight: 500;
}

/* Filter navigation */
.rara-nav-filter {
  position: relative;
  min-width: 6.75rem; /* Stabilizes STUDIO / CONTACT position when label text varies */
}

.rara-nav-filter-trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.rara-nav-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0 0 10px; /* 10px subtle horizontal indentation */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--rara-ease-editorial), transform 160ms var(--rara-ease-editorial);
  z-index: 1010;
  white-space: nowrap;
}

/* Desktop hover & keyboard focus reveal */
@media (hover: hover) and (pointer: fine) {
  .rara-nav-filter:hover .rara-nav-filter-menu,
  .rara-nav-filter:focus-within .rara-nav-filter-menu {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile tap / programmatic toggle */
.rara-nav-filter.is-open .rara-nav-filter-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.rara-nav-filter:hover .rara-nav-filter-trigger,
.rara-nav-filter.is-open .rara-nav-filter-trigger {
  color: var(--rara-text-main);
}

.rara-nav-filter-menu li,
.rara-filter-item-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  line-height: 1;
}

.rara-filter-option {
  display: block;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--rara-text-muted);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1.35;
  text-align: left;
  text-shadow: 0 1px 4px rgba(243, 241, 235, 0.95), 0 0 10px rgba(243, 241, 235, 0.85);
  transition: color var(--rara-duration-hover-soft) var(--rara-ease-editorial), font-weight var(--rara-duration-hover-soft) var(--rara-ease-editorial);
  user-select: none;
  white-space: nowrap;
}

.rara-filter-option:hover {
  color: var(--rara-text-main);
}

/* Completely remove the active category from flex layout to ensure 100% consistent vertical rhythm */
.rara-filter-item-wrap.is-active,
.rara-filter-option.is-active {
  display: none !important;
}

/* 6. Editorial intro section */
.rara-main {
  flex: 1;
  width: 100%;
}

.rara-intro {
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--rara-gutter-x) clamp(1.5rem, 3vw, 2.5rem);
}

.rara-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rara-grid-gap-x);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.rara-intro-title {
  font-size: clamp(1.625rem, 3.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rara-text-main);
}

.rara-intro-col-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 440px;
  justify-self: end;
}

.rara-intro-statement {
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  line-height: 1.6;
  color: var(--rara-text-muted);
  font-weight: 350;
}

/* --------------------------------------------------------------------------
   7. PROJECT INDEX (12-Column Art-Directed Canvas)
   -------------------------------------------------------------------------- */
.rara-project-index-section {
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(5rem, 6.5vw, 7.5rem) var(--rara-gutter-x) clamp(6rem, 12vw, 12rem);
  position: relative;
}

.rara-project-index {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--rara-grid-gap-x);
  row-gap: var(--rara-grid-gap-y);
  align-items: start;
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. PROJECT ATOMICS (Zero Dividers, 100% Image Opacity, Tactile Scale)
   -------------------------------------------------------------------------- */
.rara-project {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--rara-duration-hover) var(--rara-ease-editorial);
  will-change: transform, opacity;
}

.rara-exit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.rara-project.is-exiting {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: opacity, transform;
}

.rara-project-link {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  outline: none;
  width: 100%;
}

/* Media Container */
.rara-project-media {
  position: relative;
  overflow: hidden;
  background-color: rgba(17, 17, 17, 0.02);
  width: 100%;
}

.rara-project-figure {
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

/* 100% OPAQUE PHOTOGRAPHY */
.rara-project-image {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: transform var(--rara-duration-hover) var(--rara-ease-editorial);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   9. IMAGE SIZE HIERARCHY (HERO / SUPPORT / DETAIL)
   -------------------------------------------------------------------------- */
.role-hero {
  max-width: 680px;
  width: 100%;
  z-index: 2;
}

.role-support {
  max-width: 440px;
  width: 100%;
  z-index: 1;
}

.role-detail {
  max-width: 280px;
  min-width: 150px;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   10. QUIET EDITORIAL ANNOTATION (SR XX + CATEGORY)
   -------------------------------------------------------------------------- */
.rara-project-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.35rem;
  border: none;
  width: 100%;
  transition: opacity 0.4s var(--rara-ease-editorial);
}

.rara-project-header {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1.2;
}

.rara-project-code {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--rara-text-main);
  font-weight: 500;
  text-transform: uppercase;
  flex-shrink: 0;
}

.rara-card-title,
.rara-project-meta .rara-project-title {
  font-family: var(--rara-font-sans);
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em !important;
  color: var(--rara-text-main) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: baseline;
  transition: opacity 160ms var(--rara-ease-editorial), max-width 200ms var(--rara-ease-editorial);
  pointer-events: none;
}

.rara-card-sep {
  color: var(--rara-text-muted) !important;
  font-weight: 400 !important;
  user-select: none;
}

.rara-project-category {
  font-size: 0.5625rem;
  letter-spacing: 0.10em;
  color: var(--rara-text-dim);
  text-transform: capitalize;
  transition: color 0.4s var(--rara-ease-editorial);
  line-height: 1.2;
}

/* Label Placement Variations */
.rara-project.meta-above .rara-project-link {
  flex-direction: column-reverse;
}

.rara-project.meta-side-right .rara-project-link {
  flex-direction: row;
  align-items: flex-end;
  gap: 1.25rem;
}
.rara-project.meta-side-right .rara-project-media {
  flex-shrink: 0;
}
.rara-project.meta-side-right .rara-project-meta {
  width: auto;
  white-space: nowrap;
  padding-bottom: 0.25rem;
}

.rara-project.meta-side-left .rara-project-link {
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 1.25rem;
}
.rara-project.meta-side-left .rara-project-media {
  flex-shrink: 0;
}
.rara-project.meta-side-left .rara-project-meta {
  width: auto;
  white-space: nowrap;
  padding-bottom: 0.25rem;
}

/* Hover Interactions */
@media (hover: hover) and (pointer: fine) {
  .rara-project:hover .rara-project-image {
    transform: scale(1.02);
    opacity: 1;
  }

  .rara-project:hover .rara-card-title,
  .rara-project:hover .rara-project-title {
    opacity: 1;
    max-width: 350px;
  }

  .rara-project:hover .rara-project-category {
    color: var(--rara-text-muted);
  }
}

/* Scroll reveal system */
.rara-reveal-init:not(.rara-project) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--rara-duration-reveal) var(--rara-ease-editorial),
              transform var(--rara-duration-reveal) var(--rara-ease-editorial);
  will-change: opacity, transform;
}

.rara-reveal-in:not(.rara-project) {
  opacity: 1;
  transform: translateY(0);
}

/* On Index constellation cards: animate inner link to preserve article micro-drift */
.rara-project.rara-reveal-init {
  opacity: 0;
  transition: opacity var(--rara-duration-reveal) var(--rara-ease-editorial);
  will-change: opacity;
}

.rara-project.rara-reveal-init .rara-project-link {
  transform: translateY(8px);
  transition: transform var(--rara-duration-reveal) var(--rara-ease-editorial);
  will-change: transform;
}

.rara-project.rara-reveal-in {
  opacity: 1;
}

.rara-project.rara-reveal-in .rara-project-link {
  transform: translateY(0);
}

/* Fallback / single project sequence gallery cards */
.rara-seq-card.rara-reveal-init {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--rara-duration-reveal) var(--rara-ease-editorial),
              transform var(--rara-duration-reveal) var(--rara-ease-editorial);
  will-change: opacity, transform;
}

.rara-seq-card.rara-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.rara-reveal-in {
  opacity: 1;
}

/* Progressive Loading Sentinel */
.rara-index-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rara-brand,
  .rara-nav-list {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .rara-reveal-init,
  .rara-reveal-init:not(.rara-project),
  .rara-seq-card.rara-reveal-init,
  .rara-studio-section,
  .rara-contact-section,
  .rara-contact-image-col,
  .rara-footer-simple,
  .rara-project-sheet,
  .rara-sheet-body,
  .rara-sheet-code {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .rara-project.rara-reveal-init .rara-project-link {
    transform: none !important;
    transition: none !important;
  }

  .rara-nav-filter-menu {
    transition: none !important;
    transform: none !important;
  }
}

/* 11. Base compositions: A, B, C */

/* Pattern A — Monograph Hero & Staggered Field */
.pattern-a .rara-project:nth-child(10n + 1) { grid-column: 1 / span 9; margin-bottom: 2rem; }
.pattern-a .rara-project:nth-child(10n + 2) { grid-column: 10 / span 3; margin-top: clamp(2rem, 5vw, 6rem); }
.pattern-a .rara-project:nth-child(10n + 3) { grid-column: 2 / span 5; margin-top: clamp(-2rem, -3vw, -4rem); }
.pattern-a .rara-project:nth-child(10n + 4) { grid-column: 8 / span 5; }
.pattern-a .rara-project:nth-child(10n + 5) { grid-column: 1 / span 4; margin-top: clamp(1rem, 3vw, 4rem); }
.pattern-a .rara-project:nth-child(10n + 6) { grid-column: 6 / span 7; }
.pattern-a .rara-project:nth-child(10n + 7) { grid-column: 3 / span 4; }
.pattern-a .rara-project:nth-child(10n + 8) { grid-column: 8 / span 4; margin-top: clamp(-3rem, -4vw, -5rem); }
.pattern-a .rara-project:nth-child(10n + 9) { grid-column: 1 / span 7; }
.pattern-a .rara-project:nth-child(10n + 10) { grid-column: 9 / span 4; margin-top: clamp(2rem, 4vw, 5rem); }

/* PATTERN B (Beta) — ASYMMETRICAL BILATERAL SPLIT */
.pattern-b .rara-project:nth-child(10n + 1) { grid-column: 2 / span 5; }
.pattern-b .rara-project:nth-child(10n + 2) { grid-column: 8 / span 5; margin-top: clamp(4rem, 8vw, 9rem); }
.pattern-b .rara-project:nth-child(10n + 3) { grid-column: 1 / span 6; margin-top: clamp(-2rem, -4vw, -5rem); }
.pattern-b .rara-project:nth-child(10n + 4) { grid-column: 8 / span 4; }
.pattern-b .rara-project:nth-child(10n + 5) { grid-column: 3 / span 4; margin-top: clamp(2rem, 4vw, 5rem); }
.pattern-b .rara-project:nth-child(10n + 6) { grid-column: 8 / span 5; }
.pattern-b .rara-project:nth-child(10n + 7) { grid-column: 1 / span 5; }
.pattern-b .rara-project:nth-child(10n + 8) { grid-column: 7 / span 6; margin-top: clamp(3rem, 6vw, 7rem); }
.pattern-b .rara-project:nth-child(10n + 9) { grid-column: 2 / span 5; margin-top: clamp(-2rem, -3vw, -4rem); }
.pattern-b .rara-project:nth-child(10n + 10) { grid-column: 8 / span 4; }

/* PATTERN C (Gamma) — CURATED CONSTELLATION */
.pattern-c .rara-project:nth-child(10n + 1) { grid-column: 2 / span 7; margin-bottom: 1.5rem; }
.pattern-c .rara-project:nth-child(10n + 2) { grid-column: 10 / span 3; margin-top: clamp(2rem, 5vw, 6rem); }
.pattern-c .rara-project:nth-child(10n + 3) { grid-column: 1 / span 3; margin-top: clamp(-4rem, -3vw, -2rem); }
.pattern-c .rara-project:nth-child(10n + 4) { grid-column: 5 / span 5; margin-top: clamp(1rem, 3vw, 4rem); }
.pattern-c .rara-project:nth-child(10n + 5) { grid-column: 11 / span 2; margin-top: clamp(-8rem, -7vw, -4.5rem); }
.pattern-c .rara-project:nth-child(10n + 6) { grid-column: 3 / span 7; margin-top: clamp(4rem, 8vw, 8rem); }
.pattern-c .rara-project:nth-child(10n + 7) { grid-column: 1 / span 3; margin-top: clamp(-3rem, -5vw, -6rem); }
.pattern-c .rara-project:nth-child(10n + 8) { grid-column: 8 / span 4; margin-top: clamp(2rem, 4vw, 5rem); }
.pattern-c .rara-project:nth-child(10n + 9) { grid-column: 3 / span 4; }
.pattern-c .rara-project:nth-child(10n + 10) { grid-column: 8 / span 3; margin-top: clamp(-2rem, -3vw, -4rem); }

.rara-empty-state {
  grid-column: 1 / -1;
  padding: 5rem 0;
  text-align: center;
  color: var(--rara-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   12. SINGLE PROJECT PAGE: THE EDITORIAL ROOM
   -------------------------------------------------------------------------- */
.rara-editorial-room {
  flex: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  position: relative;
}

/* ACT 01 — PROJECT OPENING & INFORMATION (EDITORIAL PROJECT SHEET) */
.rara-project-sheet {
  --sheet-font-size: 0.9375rem;
  --sheet-code-size: calc(var(--sheet-font-size) * 1.6);
  font-family: 'Roboto', var(--rara-font-sans);
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(5.5rem, 8vw, 7.5rem) var(--rara-gutter-x) clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
  position: relative;
}

.rara-sheet-code {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-code-size);
  font-weight: 700;
  color: var(--rara-text-main);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.3;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
}

/* Left-side Project Information Column Track (Persistent Sticky Frame on Desktop) */
@media (min-width: 769px) {
  .rara-project-sticky-track {
    position: absolute;
    top: clamp(5.5rem, 8vw, 7.5rem);
    bottom: 0;
    left: var(--rara-gutter-x);
    width: clamp(160px, 18vw, 240px);
    pointer-events: none;
    z-index: 100;
  }

  .rara-sheet-code-wrap {
    position: sticky;
    top: clamp(5.5rem, 8vw, 7.5rem);
    display: inline-block;
    pointer-events: auto;
    transform: translateZ(0);
  }

  .rara-sheet-code {
    position: relative;
    pointer-events: auto;
  }
}

.rara-control-label {
  display: inline-block;
  transition: opacity 180ms var(--rara-ease-editorial), visibility 180ms var(--rara-ease-editorial);
  white-space: nowrap;
}

.rara-label-code {
  opacity: 1;
  visibility: visible;
}

.rara-label-index {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* END STATE (< ALL PROJECTS) */
.rara-sheet-code.is-end-state .rara-label-code {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rara-sheet-code.is-end-state .rara-label-index {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Scrolling Content Area: Aligned horizontally with the centered gallery sequence */
.rara-sheet-body {
  max-width: clamp(340px, 50vw, 840px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Title & Typology */
.rara-sheet-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 1.5rem;
}

.rara-sheet-title {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 700;
  color: var(--rara-text-main);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.rara-sheet-sep {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 400;
  color: var(--rara-text-muted);
  user-select: none;
  line-height: 1.3;
}

.rara-sheet-typology {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 400;
  color: var(--rara-text-muted);
  line-height: 1.3;
}

/* Description: Three paragraphs with intentional paragraph spacing */
.rara-sheet-description {
  margin-bottom: 1.25rem;
}

.rara-sheet-description p {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
  margin: 0 0 1.15rem 0;
}

.rara-sheet-description p:last-child {
  margin-bottom: 0;
}

/* Metadata: Clean 3-column inline grid with same font size */
.rara-sheet-meta {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  align-items: baseline;
  width: max-content;
  max-width: 100%;
}

.rara-meta-label {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 700;
  color: var(--rara-text-main);
  line-height: 1.5;
}

.rara-meta-dash {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 400;
  color: var(--rara-text-muted);
  user-select: none;
  line-height: 1.5;
}

.rara-meta-val {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: var(--sheet-font-size);
  font-weight: 400;
  color: var(--rara-text-main);
  line-height: 1.5;
}

/* ACT 03 — CURATED IMAGE SEQUENCE */
.rara-act-sequence {
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 1.75rem) var(--rara-gutter-x) clamp(3.5rem, 6vw, 5.5rem);
}

.rara-sequence-canvas {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rara-seq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(6rem, 11vw, 12rem);
}

.rara-seq-card:last-child {
  margin-bottom: 0;
}

/* Landscape Scales */
.rara-seq-card.orientation-landscape.scale-large { width: clamp(340px, 50vw, 840px); }
.rara-seq-card.orientation-landscape.scale-medium { width: clamp(280px, 36vw, 600px); }
.rara-seq-card.orientation-landscape.scale-detail { width: clamp(220px, 25vw, 420px); }

/* Portrait Scales */
.rara-seq-card.orientation-portrait.scale-large { width: clamp(280px, 38vw, 620px); }
.rara-seq-card.orientation-portrait.scale-medium { width: clamp(220px, 28vw, 460px); }
.rara-seq-card.orientation-portrait.scale-detail { width: clamp(180px, 20vw, 340px); }

/* Invisible Alignment Axes */
.rara-seq-card.axis-left { align-self: flex-start; margin-left: 0; }
.rara-seq-card.axis-offset-left { align-self: flex-start; margin-left: clamp(2rem, 12vw, 16rem); }
.rara-seq-card.axis-center { align-self: center; margin-left: auto; margin-right: auto; }
.rara-seq-card.axis-offset-right { align-self: flex-end; margin-right: clamp(2rem, 12vw, 16rem); }
.rara-seq-card.axis-right { align-self: flex-end; margin-right: 0; }

.rara-seq-media {
  position: relative;
  overflow: hidden;
  background-color: rgba(17, 17, 17, 0.02);
  width: 100%;
}

.rara-seq-figure {
  width: 100%;
  height: auto;
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

.rara-seq-image {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  transform: none;
}

.rara-seq-caption {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--rara-text-muted);
  margin-top: 0.625rem;
  line-height: 1.4;
  max-width: 480px;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.rara-footer {
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--rara-gutter-x) clamp(1.5rem, 2.5vw, 2.25rem);
  border: none;
}

.rara-footer-simple {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem clamp(2.5rem, 5vw, 5rem);
  padding: 0;
  border: none;
}

.rara-footer-item {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  letter-spacing: 0;
}

.rara-footer-link {
  color: var(--rara-text-main);
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-footer-link:hover {
  opacity: 0.55;
}

.rara-footer-copy {
  margin-left: auto;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--rara-text-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* TABLET (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .rara-seq-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 4.5rem;
  }

  /* Simplified 2-column flow on tablet */
  .pattern-a .rara-project,
  .pattern-b .rara-project,
  .pattern-c .rara-project {
    grid-column: span 6 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none;
  }

  .rara-project:nth-child(1) { grid-column: 1 / span 8 !important; }
  .rara-project:nth-child(2) { grid-column: 9 / span 4 !important; }
  .rara-project:nth-child(3) { grid-column: 1 / span 5 !important; }
  .rara-project:nth-child(4) { grid-column: 7 / span 6 !important; }

}

/* MOBILE STRATEGY (< 768px) */
@media (max-width: 768px) {
  :root {
    --rara-gutter-x: 1.25rem;
    --rara-section-gap: 3.5rem;
    --rara-grid-gap-y: 3.5rem;
  }

  .rara-header {
    padding: 0.875rem 0 1.5rem;
    background: linear-gradient(
      180deg,
      rgba(243, 241, 235, 0.90) 0%,
      rgba(243, 241, 235, 0.65) 45%,
      rgba(243, 241, 235, 0.20) 80%,
      rgba(243, 241, 235, 0) 100%
    );
  }

  .rara-header-inner {
    padding: 0 clamp(1rem, 3.5vw, 1.5rem);
  }

  .rara-nav-filter {
    min-width: 5.75rem;
  }

  .rara-logo {
    height: 18px;
  }

  .rara-nav-list {
    gap: clamp(0.75rem, 2.5vw, 1.25rem);
  }

  .rara-nav-link {
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  .rara-intro {
    padding: 2.25rem var(--rara-gutter-x) 1.75rem;
  }

  .rara-intro-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .rara-intro-title {
    font-size: 1.875rem;
  }

  .rara-intro-col-right {
    justify-self: start;
    max-width: 100%;
  }

  .rara-project-sticky-track {
    position: static;
    width: 100%;
    height: auto;
    padding: 5rem var(--rara-gutter-x) 0;
    pointer-events: auto;
  }

  .rara-project-sheet {
    padding: 0 var(--rara-gutter-x) 1rem;
  }

  .rara-sheet-code-wrap {
    position: static;
    display: block;
    margin-bottom: 0.85rem;
  }

  .rara-sheet-code {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
    margin-bottom: 0;
  }

  .rara-sheet-body {
    max-width: 100%;
  }

  .rara-sheet-header {
    margin-bottom: 1.25rem;
  }

  .rara-sheet-description {
    margin-bottom: 1.25rem;
  }

  .rara-sheet-description p {
    margin-bottom: 1rem;
  }

  .rara-sheet-meta {
    column-gap: 1rem;
    width: 100%;
  }

  /* Mobile index constellation: asymmetric spatial rhythm */
  .rara-project-index {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .rara-project {
    position: relative;
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 220px;
    margin-top: 0 !important;
    transform: none;
  }

  /* Role-Driven Width Hierarchy (Option B Proportions) */
  .rara-project-index .rara-project.role-hero {
    width: 100%;
    align-self: center;
    margin-bottom: clamp(4rem, 11vw, 5.5rem);
  }

  .rara-project-index .rara-project.role-support {
    width: 82%;
    margin-bottom: clamp(2.75rem, 8vw, 3.75rem);
  }

  .rara-project-index .rara-project.role-support[data-orientation="portrait"] {
    width: 76%;
  }

  .rara-project-index .rara-project.role-detail {
    width: 66%;
    margin-bottom: clamp(2.25rem, 6vw, 3rem);
  }

  .rara-project-index .rara-project.role-detail[data-orientation="portrait"] {
    width: 60%;
  }

  /* Asymmetric Horizontal Placement (Organic 8-Card Constellation Cycle) */
  .rara-project-index .rara-project:nth-child(8n + 1) {
    align-self: flex-start;
    margin-left: 0;
  }

  .rara-project-index .rara-project:nth-child(8n + 2) {
    align-self: flex-end;
    margin-right: 0;
  }

  .rara-project-index .rara-project:nth-child(8n + 3) {
    align-self: flex-start;
    margin-left: 7%;
  }

  .rara-project-index .rara-project:nth-child(8n + 4) {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .rara-project-index .rara-project:nth-child(8n + 5) {
    align-self: flex-end;
    margin-right: 6%;
  }

  .rara-project-index .rara-project:nth-child(8n + 6) {
    align-self: flex-start;
    margin-left: 0;
  }

  .rara-project-index .rara-project:nth-child(8n + 7) {
    align-self: flex-end;
    margin-right: 0;
  }

  .rara-project-index .rara-project:nth-child(8n + 8) {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero cards always command full width and centered balance */
  .rara-project-index .rara-project.role-hero {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .rara-project-index .rara-project:last-child {
    margin-bottom: 0 !important;
  }

  /* Quiet Editorial Annotation: keep mobile metadata stacked below image */
  .rara-project.meta-side-right .rara-project-link,
  .rara-project.meta-side-left .rara-project-link {
    flex-direction: column;
    align-items: flex-start;
  }

  .rara-act-arrival {
    min-height: auto;
    padding: 2.25rem var(--rara-gutter-x) 2rem;
  }

  .rara-opening-figure {
    width: 100%;
    max-height: none;
  }

  .rara-opening-image {
    max-height: none;
  }

  .rara-id-inner {
    width: 100%;
  }

  .rara-project-title {
    font-size: 2.125rem;
  }

  .rara-act-story {
    padding: 0 var(--rara-gutter-x) 2.5rem;
  }

  .rara-story-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2.5rem 0;
  }

  .rara-detail-item {
    grid-template-columns: 90px 1fr;
  }

  .rara-act-sequence {
    padding: 1rem var(--rara-gutter-x) 2.5rem;
  }

  /* Single project gallery: ordered editorial sequence */
  .rara-sequence-canvas {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .rara-act-sequence .rara-seq-card {
    position: relative;
    box-sizing: border-box;
    max-width: 100% !important;
    margin-bottom: clamp(3.25rem, 9vw, 4.5rem);
  }

  .rara-act-sequence .rara-seq-card:last-child {
    margin-bottom: 0 !important;
  }

  /* Sizing: Ordered hierarchy, slightly calmer than Index constellation */
  .rara-act-sequence .rara-seq-card.scale-large {
    width: 100%;
    align-self: center;
    margin-bottom: clamp(4.25rem, 12vw, 5.5rem);
  }

  .rara-act-sequence .rara-seq-card.scale-medium {
    width: 86%;
  }

  .rara-act-sequence .rara-seq-card.scale-medium.orientation-portrait {
    width: 80%;
  }

  .rara-act-sequence .rara-seq-card.scale-detail {
    width: 72%;
    margin-bottom: clamp(2.75rem, 7vw, 3.5rem);
  }

  .rara-act-sequence .rara-seq-card.scale-detail.orientation-portrait {
    width: 66%;
  }

  /* Subtle Lateral Bias (reusing PHP axis classes) */
  .rara-act-sequence .rara-seq-card.axis-center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .rara-act-sequence .rara-seq-card.axis-left {
    align-self: flex-start;
    margin-left: 0;
  }

  .rara-act-sequence .rara-seq-card.axis-offset-left {
    align-self: flex-start;
    margin-left: 5%;
  }

  .rara-act-sequence .rara-seq-card.axis-right {
    align-self: flex-end;
    margin-right: 0;
  }

  .rara-act-sequence .rara-seq-card.axis-offset-right {
    align-self: flex-end;
    margin-right: 5%;
  }

  .rara-footer {
    padding: 0 var(--rara-gutter-x) 1.5rem;
  }

  .rara-footer-simple {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding-top: 0;
  }

  .rara-footer-link {
    line-height: 1.65;
  }

  .rara-footer-copy {
    margin-left: 0;
    margin-top: 0.75rem;
    font-family: 'Roboto', var(--rara-font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

/* 14. Studio / About Page
   Two-column editorial information sheet with restrained typography */
.rara-studio-page {
  flex: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(6.5rem, 9vw, 9rem) var(--rara-gutter-x) clamp(4.5rem, 7vw, 6.5rem);
  box-sizing: border-box;
}

.rara-studio-container {
  width: 100%;
}

/* Invisible 2-Column Editorial Section Grid with compact section spacing */
.rara-studio-section {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 240px) minmax(320px, clamp(520px, 52vw, 840px));
  column-gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
  align-items: start;
}

/* Left Column: Section Label */
.rara-studio-col-label {
  padding-top: 0.1rem;
}

.rara-studio-label {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rara-text-main);
  letter-spacing: 0;
  line-height: 1.65;
  margin: 0;
}

/* Right Column: Content Body */
.rara-studio-col-content {
  width: 100%;
}

/* Section 1: ABOUT (Continuous editorial narrative with moderate paragraph spacing) */
.rara-studio-narrative p {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
  margin: 0 0 0.85rem 0;
}

.rara-studio-narrative p:last-child {
  margin-bottom: 0;
}

.rara-studio-location {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
  margin-top: 1.25rem !important;
}

/* Section 2: THE PEOPLE (Compact 4-Column CSS Grid) */
.rara-people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  row-gap: clamp(1rem, 1.75vw, 1.5rem);
  width: 100%;
}

.rara-person-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rara-person-name {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--rara-text-main);
  line-height: 1.35;
}

.rara-person-role {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--rara-text-muted);
  line-height: 1.4;
}

/* Section 3: PUBLICATIONS (Clean Compact Editorial List) */
.rara-publications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.rara-publication-item {
  display: grid;
  grid-template-columns: clamp(50px, 5vw, 70px) 1fr;
  column-gap: 1.5rem;
  align-items: baseline;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.rara-pub-year {
  color: var(--rara-text-muted);
  font-weight: 400;
}

.rara-pub-entry {
  color: var(--rara-text-main);
}

.rara-pub-link {
  color: var(--rara-text-main);
  text-decoration: none;
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-pub-link:hover {
  opacity: 0.6;
}

.rara-pub-sep {
  color: var(--rara-text-muted);
  margin: 0 0.35rem;
}

.rara-pub-title {
  color: var(--rara-text-main);
}

/* Section 4: INSTAGRAM */
.rara-studio-section.rara-studio-instagram {
  margin-bottom: 0;
}

.rara-studio-instagram-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-muted);
  text-decoration: none;
  transition: color var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-studio-instagram-link .rara-insta-text {
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.30);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.rara-studio-instagram-link:hover {
  color: var(--rara-text-main);
}

.rara-insta-arrow {
  display: inline-block;
  transition: transform 180ms var(--rara-ease-editorial);
}

.rara-studio-instagram-link:hover .rara-insta-arrow {
  transform: translateX(3px);
}

/* Responsive Rules for Studio Page */
@media (max-width: 900px) {
  .rara-people-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.15rem;
  }
}

@media (max-width: 768px) {
  .rara-studio-page {
    padding: clamp(5rem, 8vh, 6.5rem) var(--rara-gutter-x) clamp(3.5rem, 6vh, 4.5rem);
  }

  .rara-studio-section {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    margin-bottom: clamp(2rem, 4.5vh, 2.75rem);
  }

  .rara-studio-col-label {
    padding-top: 0;
  }

  .rara-studio-narrative p {
    margin: 0 0 0.75rem 0;
  }

  .rara-studio-location {
    margin-top: 1.15rem !important;
  }

  .rara-people-grid {
    grid-template-columns: 1fr;
    row-gap: 0.95rem;
  }

  .rara-publication-item {
    grid-template-columns: 48px 1fr;
    column-gap: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rara-studio-instagram-link:hover .rara-insta-arrow {
    transform: none;
  }
}

/* 15. Contact Page
   Two-column editorial layout with secondary thumbnail in open space */
.rara-contact-page {
  flex: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(6.5rem, 9vw, 9rem) var(--rara-gutter-x) clamp(6rem, 10vw, 10rem);
  box-sizing: border-box;
}

.rara-contact-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.rara-contact-main-flow {
  flex: 1;
  max-width: clamp(520px, 58vw, 920px);
}

/* Sections inside Contact share Studio label/content grid with compact spacing */
.rara-contact-section {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 240px) minmax(280px, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}

.rara-contact-section.rara-contact-instagram {
  margin-bottom: 0;
}

.rara-contact-col-label {
  padding-top: 0.1rem;
}

.rara-contact-col-content {
  width: 100%;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
}

/* Contact Details: tight vertical spacing between email, phone, location */
.rara-contact-details {
  display: flex;
  flex-direction: column;
}

.rara-contact-line {
  margin: 0 0 0.25rem 0;
  line-height: 1.5;
}

.rara-contact-line:last-child {
  margin-bottom: 0;
}

.rara-contact-col-content p {
  margin: 0;
}

.rara-contact-link {
  color: var(--rara-text-main);
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.30);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-contact-link:hover {
  opacity: 0.6;
}

/* Right Column: Contact Photograph
   Small and secondary (~10-15% of desktop width, ~140-200px), floating lower in open space */
.rara-contact-image-col {
  width: clamp(140px, 12.5vw, 200px);
  flex-shrink: 0;
  margin-left: clamp(2rem, 4vw, 5rem);
  margin-top: clamp(6rem, 12vw, 13rem);
}

.rara-contact-image-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.rara-contact-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tablet: Stack layout */
@media (max-width: 900px) {
  .rara-contact-container {
    flex-direction: column;
  }

  .rara-contact-main-flow {
    max-width: 100%;
  }

  .rara-contact-image-col {
    width: clamp(140px, 20vw, 180px);
    margin-top: clamp(2.5rem, 5vh, 3.5rem);
    margin-left: 0;
  }
}

/* Mobile: Single column collapse */
@media (max-width: 768px) {
  .rara-contact-page {
    padding: clamp(5rem, 8vh, 6.5rem) var(--rara-gutter-x) clamp(3.5rem, 6vh, 4.5rem);
  }

  .rara-contact-section {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
  }

  .rara-contact-col-label {
    padding-top: 0;
  }

  .rara-contact-details {
    gap: 0.375rem;
  }

  .rara-contact-line {
    margin: 0;
    line-height: 1.65;
  }

  .rara-contact-image-col {
    width: clamp(120px, 32vw, 160px);
    margin-top: 2rem;
    margin-left: 0;
  }
}

/* 16. Dedicated 404 Page
   Two-column editorial layout matching Studio and Contact geometry */
.rara-404-page {
  flex: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(6.5rem, 9vw, 9rem) var(--rara-gutter-x) clamp(4.5rem, 7vw, 6.5rem);
  box-sizing: border-box;
}

.rara-404-container {
  width: 100%;
}

.rara-404-section {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 240px) minmax(320px, clamp(520px, 52vw, 840px));
  column-gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

/* Left Column: 404 Label */
.rara-404-col-label {
  padding-top: 0.1rem;
}

.rara-404-label {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rara-text-main);
  letter-spacing: 0;
  line-height: 1.65;
  margin: 0;
  display: block;
}

/* Right Column: Error Details & Recovery Link */
.rara-404-col-content {
  width: 100%;
}

.rara-404-title {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rara-text-main);
  letter-spacing: 0;
  line-height: 1.65;
  margin: 0 0 0.85rem 0;
}

.rara-404-message {
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
  margin: 0 0 1.75rem 0;
}

.rara-404-action {
  margin-top: 0.5rem;
}

.rara-404-link {
  display: inline-block;
  font-family: 'Roboto', var(--rara-font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rara-text-main);
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.30);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: opacity var(--rara-duration-hover-soft) var(--rara-ease-editorial);
}

.rara-404-link:hover {
  opacity: 0.6;
}

/* Responsive Rules for 404 Page */
@media (max-width: 768px) {
  .rara-404-page {
    padding: clamp(5rem, 8vh, 6.5rem) var(--rara-gutter-x) clamp(3.5rem, 6vh, 4.5rem);
  }

  .rara-404-section {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }

  .rara-404-col-label {
    padding-top: 0;
  }

  /* 404 Label: Identical scale and weight as Studio/Contact section labels */
  .rara-404-label {
    font-family: 'Roboto', var(--rara-font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.65;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  /* PAGE NOT FOUND: Identical scale and weight as Studio/Contact section labels (not a display heading) */
  .rara-404-title,
  h1.rara-404-title {
    font-family: 'Roboto', var(--rara-font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.65;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 0.75rem 0;
  }

  /* Message: Identical body font-size and line-height as Contact Careers body text */
  .rara-404-message {
    font-family: 'Roboto', var(--rara-font-sans);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    margin: 0 0 1.5rem 0;
  }

  /* < ALL PROJECTS: Identical scale as Contact/Studio editorial links with 30% black underline */
  .rara-404-link {
    font-family: 'Roboto', var(--rara-font-sans);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: rgba(17, 17, 17, 0.30);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
  }
}