/* ─────────────────────────────────────────────────────────────
   Dolev Shilian — site styles
   Built on top of colors_and_type.css.
   New York gallery / editorial discipline.
   ───────────────────────────────────────────────────────────── */

/* Hebrew fallback faces (added to font stacks via inline import) */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');

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

html, body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Hebrew direction + font fallbacks */
html[dir="rtl"] body { font-family: 'Heebo', var(--font-body); }
html[dir="rtl"] .t-mega,
html[dir="rtl"] .t-display,
html[dir="rtl"] .t-hero,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: 'Heebo', var(--font-display);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

/* ── Layout shells ──────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.shell-wide {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main { display: block; }

/* ── Site header ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 245, 242, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand__mark {
  height: 40px;
  width: auto;
}
.brand__rule {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}
.brand__name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 36px;
  justify-self: center;
}
.site-nav a {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-base) var(--ease-arch);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active {
  color: var(--ink);
}
.site-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--ink);
}

.lang-switch {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-arch);
}
.lang-switch:hover { border-color: var(--ink); }
.lang-switch__opt {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-mute);
  cursor: pointer;
}
.lang-switch__opt.is-on { color: var(--ink); }
.lang-switch__sep { opacity: 0.5; }

/* ── Site footer ────────────────────────────────────────── */
.site-footer {
  margin-top: var(--s-11);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-9) 0 var(--s-7);
}
.site-footer .shell { width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  margin-bottom: 18px;
}
.site-footer__brand {
  display: flex; flex-direction: column; gap: 16px;
}
.site-footer__wordmark {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-footer__mark {
  height: 64px;
  width: auto;
}
.site-footer__rule {
  width: 1px;
  height: 46px;
  background: rgba(245, 242, 236, 0.28);
  flex: 0 0 auto;
}
.site-footer__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--paper);
}
.site-footer__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  max-width: 36ch;
  line-height: 1.6;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  transition: color var(--dur-base) var(--ease-arch);
}
.site-footer ul a:hover { color: var(--paper); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.site-footer__bottom a:hover { color: var(--paper); }

/* ── Reveal animation · cinematic, rounded, harmonious ────
   Text and blocks rise gently into place from a soft blur — the
   long rounded ease (--ease-arch) keeps the entrance from ever
   feeling "flat". Generous travel + a touch of blur reads as the
   content arriving "from within the screen".                  */
/* The hidden initial state is "armed" (by an inline <head> script +
   site.js) ONLY in a visible, motion-OK document. If it is never
   armed — reduced-motion, a backgrounded tab, JS disabled — .reveal
   stays fully visible, so content can NEVER be stuck invisible. */
html.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 880ms var(--ease-arch),
    transform 1000ms var(--ease-arch);
  /* site.js refines this into a document-order cascade per entering batch */
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── Parallax media layer ─────────────────────────────────
   The framed media sits in an over-sized layer (.media-par) that
   drifts vertically with scroll, so photographs glide INTO their
   frame rather than snapping in. --py is driven by site.js.    */
.media-par {
  position: absolute;
  inset: -14%;
  display: block;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
  transition: clip-path 1200ms var(--ease-arch);
}
/* Image unmasks bottom-up into its frame as the card enters (depth) */
html.reveal-armed .reveal:not(.is-in) .media-par { clip-path: inset(100% 0 0 0); }
html.reveal-armed .reveal.is-in .media-par { clip-path: inset(0 0 0 0); }
.media-par > image-slot,
.media-par > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* ── Auto-fit framed media ────────────────────────────────
   When a slot is `autosize`, site.js sets the frame's aspect-ratio
   to the photo's own ratio (.is-autofit). The image then fills the
   frame exactly — whole photo, no crop, no letterbox — so the
   parallax over-scale + drift are dropped and a soft backdrop sits
   behind any incidental margin during the reveal. */
.pcard__media.is-autofit {
  background: #ece6da;
}
.pcard__media.is-autofit .media-par {
  inset: 0;
  transform: none;
}
.pcard__media.is-autofit .media-par > image-slot {
  transform: none !important;
}

/* Entrance — media settles from a soft over-scale as the card
   rises (scale lives on the image, drift lives on .media-par,
   so the two never fight). */
.reveal .media-par > :is(image-slot, img) {
  transition: transform 1400ms var(--ease-arch);
}
html.reveal-armed .reveal:not(.is-in) .media-par > :is(image-slot, img) {
  transform: scale(1.12);
}
.reveal.is-in .media-par > :is(image-slot, img) {
  transform: none;
}

/* ── Hero title settles into the frame on load ──────────── */
html.reveal-armed .hero-rise {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1100ms var(--ease-arch),
    transform 1200ms var(--ease-arch);
  will-change: opacity, transform;
}
html.reveal-armed .hero-rise.is-in { opacity: 1; transform: none; }
.hero-rise[data-rise="0"] { transition-delay: 120ms; }
.hero-rise[data-rise="1"] { transition-delay: 320ms; }
.hero-rise[data-rise="2"] { transition-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-rise { opacity: 1; transform: none; filter: none; transition: none; clip-path: none; }
  .media-par { transform: none; }
  .reveal .media-par > :is(image-slot, img) { transform: none; transition: none; }
  .hero-film__media { transform: none; }
  .hero-film__inner { opacity: 1 !important; transform: none !important; }
}

/* Tweaks: motion off → reveal everything immediately, no drift */
html[data-motion="off"] .reveal,
html[data-motion="off"] .hero-rise {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  clip-path: none;
}
html[data-motion="off"] .media-par { transform: none; }
html[data-motion="off"] .reveal .media-par > :is(image-slot, img) { transform: none; }
html[data-motion="off"] .hero-film__media { transform: none; }
html[data-motion="off"] .hero-film__inner { opacity: 1 !important; transform: none !important; }

/* ── Chapter flow · home → studio → contact ───────────────
   One continuous document. No scroll-snap trap — scrolling stays
   free and the cinematic reveal/parallax carries each block into
   place. Smooth behaviour only governs the anchor jumps from the
   nav + chapter rail. scroll-padding-top clears the sticky head. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
  }
}
html[data-motion="off"] { scroll-behavior: auto; }
/* Momentum smooth-scroll owns the scroll position — disable CSS smoothing */
html.smooth-scroll { scroll-behavior: auto; }

.chapter { position: relative; }
/* Chapter dividers — a quiet strong rule announces a new chapter */
#studio, #contact { border-top: 1px solid var(--line-strong); }
.chapter-intro { position: relative; }
@media (max-width: 700px) {
  html { scroll-padding-top: 60px; }
}

/* ── Chapter rail · fixed wayfinding dots ──────────────────
   mix-blend-mode keeps it legible over both paper and ink bands. */
.chapter-rail {
  position: fixed;
  z-index: 45;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  mix-blend-mode: difference;
}
.chapter-rail__dot {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.chapter-rail__dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.65);
  background: transparent;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-arch),
              background var(--dur-base) var(--ease-arch),
              border-color var(--dur-base) var(--ease-arch);
}
.chapter-rail__lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-arch),
              transform var(--dur-base) var(--ease-arch);
}
.chapter-rail__dot:hover .chapter-rail__lbl { opacity: 0.6; transform: none; }
.chapter-rail__dot.is-active::before {
  background: #fff;
  border-color: #fff;
  transform: scale(1.35);
}
.chapter-rail__dot.is-active .chapter-rail__lbl { opacity: 1; transform: none; }
html[dir="rtl"] .chapter-rail { left: auto; right: 24px; }
html[dir="rtl"] .chapter-rail__lbl { transform: translateX(6px); }
html[dir="rtl"] .chapter-rail__dot:hover .chapter-rail__lbl,
html[dir="rtl"] .chapter-rail__dot.is-active .chapter-rail__lbl { transform: none; }

/* Progress thread — a hairline runs through the dots and fills as you
   travel the page, so the rail reads as a guided journey, not 3 marks. */
.chapter-rail__track {
  position: absolute;
  left: 3px;
  top: 4px; bottom: 4px;
  width: 2px;
  background: rgba(255,255,255,0.22);
  overflow: hidden;
  pointer-events: none;
}
.chapter-rail__fill {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 0;
  background: #fff;
  transition: height 120ms linear;
}
html[dir="rtl"] .chapter-rail__track { left: auto; right: 3px; }
@media (max-width: 1180px) { .chapter-rail { display: none; } }

/* ── Hero · FILM (cinematic video band) ─────────────────── */
.hero-film {
  position: relative;
  width: 100%;
  height: clamp(460px, 82vh, 860px);
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.hero-film__media {
  position: absolute;
  inset: -14%;
  z-index: 1;
  /* --py: scroll parallax drift (setupParallax). --hero-scale: the hero-exit
     gain applied as it scrolls past (setupHeroExit) — same element, two
     scroll-driven custom properties composed in one transform. */
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--hero-scale, 1));
  will-change: transform;
}
.hero-film__media video-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* guarantee black & white regardless of the clip dropped in */
  filter: grayscale(1) contrast(1.04) brightness(1.02);
}
/* Hero video is optional (Mode A: video dropped, Mode B: none). video-slot
   toggles [data-filled] the same way image-slot does; with no video, its own
   poster <img> already shows as a full-bleed fallback — this just gives that
   still frame its own quiet motion signature (a slow, barely-there drift)
   so Mode B never reads as merely "the video is missing". */
.hero-film__media video-slot:not([data-filled]) img {
  animation: heroPosterDrift 24s var(--ease-arch) infinite alternate;
}
@keyframes heroPosterDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film__media video-slot:not([data-filled]) img { animation: none; }
}
html[data-motion="off"] .hero-film__media video-slot:not([data-filled]) img { animation: none; }

/* ── Hero media modes · video / image / none ──────────────
   .hero-film[data-media] is set from hero-config.json (site.js reads
   it at load; the Tweaks panel writes it). Same B&W treatment applies
   to whichever layer is active, so switching modes never changes the
   hero's visual signature — only what's behind the typography. */
.hero-film__media image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
}
.hero-film__media image-slot img {
  animation: heroPosterDrift 26s var(--ease-arch) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-film__media image-slot img { animation: none; }
}
html[data-motion="off"] .hero-film__media image-slot img { animation: none; }

.hero-film[data-media="video"] .hero-film__media image-slot { display: none; }
.hero-film[data-media="image"] .hero-film__media video-slot { display: none; }
.hero-film[data-media="none"] .hero-film__media { display: none; }
/* Clean mode: no video, no image — a deliberate quiet gradient instead of
   an empty black band, so it reads as a designed option. */
.hero-film[data-media="none"] {
  background: linear-gradient(135deg, #1A1A17 0%, #242019 55%, #1A1A17 100%);
}
.hero-film__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,18,15,0.28) 0%, rgba(20,18,15,0) 32%, rgba(20,18,15,0) 52%, rgba(20,18,15,0.72) 100%),
    linear-gradient(90deg, rgba(20,18,15,0.45) 0%, rgba(20,18,15,0) 55%);
}
.hero-film__inner {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 6vh, 72px);
  pointer-events: none;
}
.hero-film__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.82);
}
.hero-film__eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
}
.hero-film__sep { color: rgba(246,245,242,0.5); }

/* Rotating scroll badge — the hero's continuous-motion signature */
.hero-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px; height: 104px;
  margin-top: 38px;
  pointer-events: auto;
  color: var(--paper);
}
.hero-badge__ring {
  width: 100%; height: 100%;
  fill: none;
  transform-origin: 50% 50%;
}
.hero-badge__ring text {
  font-family: var(--font-mono);
  font-size: 7.4px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: rgba(246,245,242,0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-badge__ring { animation: badgeSpin 18s linear infinite; }
}
html[data-motion="off"] .hero-badge__ring { animation: none; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
.hero-badge__arrow {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--clay);
  transition: transform var(--dur-base) var(--ease-arch);
}
.hero-badge:hover .hero-badge__arrow { transform: translateY(3px); }
.hero-film__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--paper);
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  max-width: 18ch;
}
/* Title unveils bottom-up via mask, same clip-path convention as the
   project photos (.media-par) — one reveal language, not a bespoke one
   just for the hero. */
.hero-film__title.hero-rise {
  transition: opacity 1100ms var(--ease-arch), transform 1200ms var(--ease-arch), clip-path 1200ms var(--ease-arch);
}
html.reveal-armed .hero-film__title.hero-rise {
  clip-path: inset(100% 0 0 0);
}
html.reveal-armed .hero-film__title.hero-rise.is-in {
  clip-path: inset(0 0 0 0);
}
.hero-film__title em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
  color: var(--clay);
}
html[dir="rtl"] .hero-film__inner { text-align: right; }
html[dir="rtl"] .hero-film__scrim {
  background:
    linear-gradient(180deg, rgba(20,18,15,0.28) 0%, rgba(20,18,15,0) 32%, rgba(20,18,15,0) 52%, rgba(20,18,15,0.72) 100%),
    linear-gradient(270deg, rgba(20,18,15,0.45) 0%, rgba(20,18,15,0) 55%);
}

/* ── Hero (typographic on paper) ────────────────────────── */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--ink);
}
.hero__title em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -0.045em;
}
.hero__foot {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
  align-items: start;
}
.hero__lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 38ch;
}
.hero__lede strong { color: var(--ink); font-weight: 500; }

/* ── Section ────────────────────────────────────────────── */
.section {
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--line);
}
.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}
.section--tint {
  background: var(--sand);
  border-bottom: 0;
}
.section--compact { padding: var(--s-7) 0; }

.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}
.section__title em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
}
.section__lede {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 48ch;
}
.section--dark .section__lede { color: rgba(255,255,255,0.7); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section--dark .eyebrow { color: rgba(255,255,255,0.45); }

/* ── Project card ───────────────────────────────────────── */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur-slow) var(--ease-arch);
}
.pcard:hover {
  box-shadow: var(--shadow-2);
}
.pcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--gray-50);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pcard .pcard__media image-slot {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--r-lg);
  filter: grayscale(1) contrast(1.02) saturate(1) brightness(0.99);
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease-arch), filter var(--dur-slow) var(--ease-arch);
}
.pcard:hover .pcard__media image-slot {
  transform: scale(1.028);
  filter: grayscale(0) contrast(1.05) saturate(1.1) brightness(1.01);
}
.pcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-arch);
  pointer-events: none;
  border-radius: var(--r-lg);
}
.pcard:hover .pcard__media::after { opacity: 1; }
.pcard__media-arrow {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  opacity: 0;
  transform: translate(8px, 0);
  transition: opacity var(--dur-slow) var(--ease-arch), transform var(--dur-slow) var(--ease-arch);
  z-index: 2;
}
.pcard:hover .pcard__media-arrow { opacity: 1; transform: none; }

.pcard__media-tags {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; gap: 6px;
  z-index: 2;
}
.pcard__media-tags span {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(246,245,242,0.92);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: lowercase;
}

.pcard__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pcard__title {
  position: relative;
  font-family: var(--font-mid);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink);
  transition: transform var(--dur-slow) var(--ease-arch);
}
.pcard:hover .pcard__title {
  transform: translateY(-4px);
}
.pcard__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 1px;
  width: 0;
  background: var(--clay);
  transition: width var(--dur-slow) var(--ease-arch);
}
.pcard:hover .pcard__title::after {
  width: 28px;
}
.pcard__cap {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 38ch;
}

/* ── Studio profile · portrait + bio ──────────────────────
   A controlled, modest-width editorial portrait rather than a fluid
   half-width image — capped so it reads as a considered photograph,
   not a column that happens to contain one. Object-position is biased
   toward the upper frame (typical portrait/headshot framing) rather
   than a default centre crop. */
.studio-profile {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--s-10);
  align-items: start;
}
.studio-profile__portrait {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.studio-portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--gray-50);
}
.studio-portrait-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .studio-profile {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .studio-profile__portrait {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ── Motion frames · Services + Selected Projects ─────────
   Both driven by createMotionFrame() in site.js — a shared,
   replayable enter/exit controller. Unlike a one-shot reveal, .is-in
   here gets ADDED on enter and REMOVED on exit, every time; the CSS
   below only ever needs to define the two states (hidden ⇄ settled)
   and let the transition play in reverse when the class comes off —
   no separate "exit animation" rules are needed anywhere in this
   block. Same --ease-arch easing and --dur-* tokens as the rest of
   the site throughout. */

/* — Services ("what we really do") — only the <h2> is masked; the
   eyebrow above it and the section container are left alone. */
.services-heading h2 {
  clip-path: inset(100% 0 0 0);
  transform: translateY(32px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
  will-change: clip-path, transform;
}
.services-heading.is-in h2 {
  clip-path: inset(0 0 0 0);
  transform: none;
}

.services-item {
  opacity: 0;
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
  will-change: opacity, transform;
}
/* Subtle directional variation so the four blocks don't all move
   identically — left column drifts very slightly from the left,
   right column very slightly from the right, under the shared
   upward settle. */
.services-item:nth-child(odd)  { transform: translate(-8px, 20px); }
.services-item:nth-child(even) { transform: translate(8px, 20px); }
.services-item.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .services-heading h2 { transform: translateY(20px); }
  .services-item:nth-child(odd)  { transform: translate(-5px, 13px); }
  .services-item:nth-child(even) { transform: translate(5px, 13px); }
}

/* — Selected Projects — title masks in, lede/link follow, then each
   card slides in from its own assigned edge while its photo mask
   opens; the card's own title/meta follow a beat later via a fixed
   CSS transition-delay (the beat BETWEEN cards is timed in JS). */
.projects-head-a h2 {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
  will-change: clip-path, transform;
}
.projects-head-a.is-in h2 {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.projects-head-b {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.projects-head-b.is-in {
  opacity: 1;
  transform: none;
}

.projects-card {
  opacity: 0;
  transition: opacity var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
  will-change: opacity, transform;
}
.projects-card[data-edge="left"]   { transform: translateX(-70px); }
.projects-card[data-edge="right"]  { transform: translateX(70px); }
.projects-card[data-edge="bottom"] { transform: translateY(50px); }
.projects-card[data-edge="left"].is-in,
.projects-card[data-edge="right"].is-in,
.projects-card[data-edge="bottom"].is-in {
  opacity: 1;
  transform: none;
}

.projects-card .pcard__media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-cinematic) var(--ease-arch);
  will-change: clip-path;
}
.projects-card.is-in .pcard__media {
  clip-path: inset(0 0 0 0);
}
.projects-card .pcard__title,
.projects-card .pcard__meta,
.projects-card .pcard__cap {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-compose) var(--ease-arch) 150ms,
              transform var(--dur-compose) var(--ease-arch) 150ms;
}
.projects-card.is-in .pcard__title,
.projects-card.is-in .pcard__meta,
.projects-card.is-in .pcard__cap {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .projects-head-a h2 { transform: translateY(18px); }
  .projects-head-b { transform: translateY(12px); }
  /* Horizontal entries collapse to vertical — removes any risk of
     horizontal overflow on narrow viewports rather than just
     reducing it. */
  .projects-card[data-edge="left"],
  .projects-card[data-edge="right"],
  .projects-card[data-edge="bottom"] { transform: translateY(32px); }
  .projects-card .pcard__title,
  .projects-card .pcard__meta,
  .projects-card .pcard__cap { transform: translateY(10px); }
}

/* — Studio · page intro — */
.studio-intro-heading {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
  will-change: clip-path, transform;
}
.studio-intro-heading.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* — Studio · portrait + biography — portrait is mask-only, no slide,
   per the approved editorial direction (no portrait parallax/slide). */
.studio-profile__portrait .media-par {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-cinematic) var(--ease-arch);
}
.studio-profile__portrait.is-in .media-par {
  clip-path: inset(0 0 0 0);
}
.studio-bio__lead {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.studio-bio__lead.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.studio-bio__para {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.studio-bio__para.is-in { opacity: 1; transform: none; }
.studio-bio__link {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-arch),
              transform var(--dur-base) var(--ease-arch);
}
.studio-bio__link.is-in { opacity: 1; transform: none; }

/* — Studio · four principles (same shape as Services) — */
.principles-heading {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.principles-heading.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.principles-item {
  opacity: 0;
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.principles-item:nth-child(odd)  { transform: translate(-8px, 20px); }
.principles-item:nth-child(even) { transform: translate(8px, 20px); }
.principles-item.is-in { opacity: 1; transform: none; }

/* — Contact — heading masks, aside and form each settle as one block — */
.contact-heading {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.contact-heading.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.contact-aside,
.contact-form {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.contact-aside.is-in,
.contact-form.is-in { opacity: 1; transform: none; }

/* — Works page intro — */
.works-intro-heading {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.works-intro-heading.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.works-intro-support {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.works-intro-support.is-in { opacity: 1; transform: none; }

/* — Project page intro (repeated per project article) — */
.project-intro__crumb {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-arch),
              transform var(--dur-base) var(--ease-arch);
}
.project-intro__crumb.is-in { opacity: 1; transform: none; }
.project-intro__title {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  transition: clip-path var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.project-intro__title.is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.project-intro__lede,
.project-intro__chips {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-compose) var(--ease-arch),
              transform var(--dur-compose) var(--ease-arch);
}
.project-intro__lede.is-in,
.project-intro__chips.is-in { opacity: 1; transform: none; }

/* — Project galleries — direction varies by the frame's existing
   --wide/--left/--right modifier, so consecutive photos don't all
   move the same way. */
.pgallery__frame {
  opacity: 0;
  transition: opacity var(--dur-cinematic) var(--ease-arch),
              transform var(--dur-cinematic) var(--ease-arch);
}
.pgallery__frame--wide  { transform: translateY(36px); }
.pgallery__frame--left  { transform: translateX(-48px); }
.pgallery__frame--right { transform: translateX(48px); }
.pgallery__frame.is-in { opacity: 1; transform: none; }
.pgallery__frame .pcard__media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-cinematic) var(--ease-arch);
}
.pgallery__frame.is-in .pcard__media {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 700px) {
  .studio-intro-heading { transform: translateY(18px); }
  .studio-bio__lead { transform: translateY(16px); }
  .studio-bio__para { transform: translateY(12px); }
  .principles-heading { transform: translateY(18px); }
  .principles-item:nth-child(odd)  { transform: translate(-5px, 13px); }
  .principles-item:nth-child(even) { transform: translate(5px, 13px); }
  .contact-heading { transform: translateY(18px); }
  .contact-aside, .contact-form { transform: translateY(13px); }
  .works-intro-heading { transform: translateY(18px); }
  .works-intro-support { transform: translateY(12px); }
  .project-intro__title { transform: translateY(18px); }
  .project-intro__lede, .project-intro__chips { transform: translateY(11px); }
  /* Horizontal gallery entries collapse to vertical — removes overflow
     risk structurally rather than just shrinking it. */
  .pgallery__frame--wide,
  .pgallery__frame--left,
  .pgallery__frame--right { transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .services-heading h2,
  .services-item,
  .projects-head-a h2,
  .projects-head-b,
  .projects-card,
  .projects-card .pcard__media,
  .projects-card .pcard__title,
  .projects-card .pcard__meta,
  .projects-card .pcard__cap,
  .studio-intro-heading,
  .studio-profile__portrait .media-par,
  .studio-bio__lead,
  .studio-bio__para,
  .studio-bio__link,
  .principles-heading,
  .principles-item,
  .contact-heading,
  .contact-aside,
  .contact-form,
  .works-intro-heading,
  .works-intro-support,
  .project-intro__crumb,
  .project-intro__title,
  .project-intro__lede,
  .project-intro__chips,
  .pgallery__frame,
  .pgallery__frame .pcard__media {
    transition: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
html[data-motion="off"] .services-heading h2,
html[data-motion="off"] .services-item,
html[data-motion="off"] .projects-head-a h2,
html[data-motion="off"] .projects-head-b,
html[data-motion="off"] .projects-card,
html[data-motion="off"] .projects-card .pcard__media,
html[data-motion="off"] .projects-card .pcard__title,
html[data-motion="off"] .projects-card .pcard__meta,
html[data-motion="off"] .projects-card .pcard__cap,
html[data-motion="off"] .studio-intro-heading,
html[data-motion="off"] .studio-profile__portrait .media-par,
html[data-motion="off"] .studio-bio__lead,
html[data-motion="off"] .studio-bio__para,
html[data-motion="off"] .studio-bio__link,
html[data-motion="off"] .principles-heading,
html[data-motion="off"] .principles-item,
html[data-motion="off"] .contact-heading,
html[data-motion="off"] .contact-aside,
html[data-motion="off"] .contact-form,
html[data-motion="off"] .works-intro-heading,
html[data-motion="off"] .works-intro-support,
html[data-motion="off"] .project-intro__crumb,
html[data-motion="off"] .project-intro__title,
html[data-motion="off"] .project-intro__lede,
html[data-motion="off"] .project-intro__chips,
html[data-motion="off"] .pgallery__frame,
html[data-motion="off"] .pgallery__frame .pcard__media {
  transition: none !important;
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Pills / filter ─────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-8);
}
.filter-pill {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-arch);
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink); }
.filter-pill.is-on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink);
  transition: all var(--dur-base) var(--ease-arch);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 26px;
  border-radius: 999px;
}
.btn-primary:hover { background: #000; }
.btn-primary:active { transform: scale(.985); }

/* Clay (terracotta) primary — for "commission a project" CTAs */
.btn-clay {
  background: var(--clay);
  color: var(--paper);
  padding: 14px 26px;
  border-radius: 999px;
}
.btn-clay:hover { background: #a4502f; }
.btn-clay:active { transform: scale(.985); }

.btn-link {
  position: relative;
  padding: 6px 0;
  color: var(--ink);
}
.btn-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  width: 50%;
  transition: width var(--dur-base) var(--ease-arch);
}
.btn-link:hover::after { width: 100%; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 13px 24px;
  border-radius: 999px;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--on-dark {
  background: var(--paper);
  color: var(--ink);
}
.btn--on-dark:hover { background: var(--white); }

/* ── Field ──────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 0;
  outline: none;
  width: 100%;
  resize: vertical;
  transition: border-color var(--dur-base) var(--ease-arch);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--ink);
}

/* ── Marquee suppressed (per brief: no ticker) ──────────── */

/* ── Utilities ──────────────────────────────────────────── */
.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.italic-fr {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
}

/* ── Accent · clay touches ──────────────────────────────────
   The studio's one warm note, used as a recurring signature.
   All driven by --clay so the Tweaks "Accent" control governs
   every instance at once.                                    */

/* Editorial italic words in display headings carry the accent */
.hero__title em,
.section__title em,
.italic-fr {
  color: var(--clay);
}
/* On the dark sections keep editorial italics legible (paper) */
.section--dark .italic-fr,
.section--dark .section__title em { color: var(--paper); }

/* Card hover arrow: clay disc instead of plain paper */
.pcard__media-arrow {
  background: var(--clay);
  color: var(--paper);
}

/* Link under-rule picks up the accent on hover */
.btn-link::after { background: var(--clay); }

/* Active nav marker in accent */
.site-nav a.is-active::after { background: var(--clay); }

/* Eyebrow leading mark — color the asterisk run via accent class */
.eyebrow .mk,
.hero__eyebrow .mk { color: var(--clay); }

/* Section header asterisk accents */
.accent { color: var(--clay); }

/* hide an element when its current lang is the active one's opposite */
[data-lang-only="en"] { display: none; }
[data-lang-only="he"] { display: none; }
html[lang="en"] [data-lang-only="en"] { display: inline; }
html[lang="he"] [data-lang-only="he"] { display: inline; }

/* When RTL, keep the header in LTR visual order so the brand
   (logo · rule · name) stays pinned to the LEFT exactly as in EN,
   while nav text order stays natural Hebrew (rtl). */
html[dir="rtl"] .site-header__inner { direction: ltr; }
html[dir="rtl"] .site-nav { direction: rtl; }
html[dir="rtl"] .hero__title,
html[dir="rtl"] .section__title { text-align: start; }

/* Footer — mirror the header in RTL: keep the column row in LTR visual
   order so the brand (logo · rule · name) pins to the LEFT exactly as up
   top, while the link columns restore natural Hebrew (rtl) text. */
html[dir="rtl"] .site-footer__grid { direction: ltr; }
html[dir="rtl"] .site-footer h4,
html[dir="rtl"] .site-footer ul { direction: rtl; }

/* Phone numbers always read left-to-right, even inside RTL text. */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto; gap: 16px; }
  .site-nav { display: none; }
  .brand__rule { display: none; }

  .hero { padding: var(--s-9) 0 var(--s-8); }
  .hero__foot { grid-template-columns: 1fr; gap: var(--s-5); }

  .section { padding: var(--s-7) 0; }
  .section__head { grid-template-columns: 1fr; margin-bottom: var(--s-7); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__wordmark { font-size: 44px; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* ── Project gallery · editorial scroll sequence ──────────
   Replaces the old click-through carousel. Each photo keeps its own
   natural ratio — image-slot's `autosize` + the existing .is-autofit
   mechanism (see setupAutofit in site.js) already solves this with no
   new code, since these frames are plain .pcard__media like the works
   grid, not wrapped in the old [data-gallery] carousel. Width and
   alignment alternate so a run of frames reads as composed, not listed,
   and each settles in with the same mask-reveal used everywhere else
   on the site (.reveal + .media-par). */
.pgallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-11);
}
.pgallery__frame { width: 100%; }
.pgallery__frame .pcard__media {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #ece6da;
}
.pgallery__frame--wide { max-width: 1180px; }
.pgallery__frame--narrow { max-width: 640px; }
.pgallery__frame--left { align-self: flex-start; }
.pgallery__frame--right { align-self: flex-end; }
@media (max-width: 700px) {
  .pgallery { gap: var(--s-9); }
  .pgallery__frame--narrow { max-width: 100%; }
  .pgallery__frame--left, .pgallery__frame--right { align-self: center; }
}

/* The owner-lock UI (a lock/unlock pill button) has been removed along
   with owner.js's passcode gate — editing is always available now, so
   there is no lock state left to render a control for. */