/* ECLECT JAFFA — page-level styles (home, chapters). Shared components live in base.css. */

/* =========================================================
   HOME
   ========================================================= */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; animation: preFail 0s 9s forwards; }
.preloader__bg { position: absolute; inset: 0; background: var(--c-charcoal); }
.preloader__cutouts { position: relative; width: min(34.5vh, 46.5vw); aspect-ratio: 1; } /* 75% of the first size */
.preloader__cutouts img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.preloader__logo { position: absolute; width: min(48vw, 696px); transform-origin: 50% 50%; }
.preloader__logo svg { width: 100%; height: auto; fill: var(--c-white); overflow: visible; }
.preloader__meta { position: absolute; inset-inline: var(--margin); bottom: var(--margin); display: flex; justify-content: space-between; align-items: baseline; color: var(--a-white-60); direction: ltr; }
.preloader__num { font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); font-variant-numeric: tabular-nums; color: var(--c-white); }
@keyframes preFail { to { opacity: 0; visibility: hidden; } }

.home-stage { position: relative; }
/* full-screen frames use the dynamic viewport: the visible area, so they still fill the screen once a phone's
   address bar and bottom toolbar slide away (100svh left a strip of the next section showing, e.g. Samsung Internet) */
.hero { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; display: grid; place-items: center; color: var(--c-white); background: var(--c-charcoal); z-index: 0; }
.hero__media { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The film is 2.33:1; on a tall phone covering the screen crops ~80% of its width. Don't leave that to object-fit alone
   (a browser that fits a playing video instead shows a thin band with charcoal above and below): the poster sits under the
   film, and both elements take the film's own proportions and overfill the frame, so they cover with or without object-fit. */
@supports (width: 1cqh) {
  .hero__media { container-type: size; }
  .hero__poster, .hero__video { inset: auto; max-width: none; width: max(100cqw, 100cqh * 2.327); height: max(100cqh, 100cqw / 2.327);
    left: calc((100cqw - max(100cqw, 100cqh * 2.327)) / 2); top: calc((100cqh - max(100cqh, 100cqw / 2.327)) / 2); }
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.05) 32%, rgba(26,26,26,.05) 62%, rgba(26,26,26,.6) 100%); }
.hero__dim { position: absolute; inset: 0; background: var(--c-charcoal); opacity: .18; }
.hero__center { position: relative; display: grid; justify-items: center; gap: clamp(12px, 0.8334vw, 16px); width: min(64vw, 928px); }
/* the lockup 648 wide at 1920, centred in its frame */
.hero__logo { width: min(48.6vw, 648px); display: grid; align-items: center; }
.hero__logo svg { width: 100%; height: auto; fill: var(--c-white); overflow: visible; }
/* the subheading sits under the lockup, centred (Greta Light 46 / 40 at 1920) */
.hero__line { font: 300 clamp(20px, 2.3959vw, 46px)/clamp(24px, 2.0834vw, 40px) var(--font-hebrew); letter-spacing: .01em; text-align: center; text-wrap: balance; }
.hero__cue { position: absolute; bottom: var(--margin); left: calc(var(--margin) - 4px); display: inline-flex; flex-direction: column; align-items: center; gap: 12px; min-width: 44px; padding: 4px; direction: ltr; }
/* the developer's mark, bottom centre on the cue's line (as on YOKO): 176 at 1920 */
.hero__dev { position: absolute; left: 50%; bottom: var(--margin); width: clamp(112px, 9.1667vw, 176px); translate: -50% 0; color: var(--c-white); pointer-events: none; }
.hero__dev svg { display: block; width: 100%; height: auto; }
/* the line runs down into a fixed arrowhead (the chevron's tip sits on the line's end) */
.hero__cue-track { display: flex; flex-direction: column; align-items: center; }
.hero__cue .t-eyebrow { margin-inline-end: -.3em; } /* drop the trailing tracking so the word's letters centre over the line */
.hero__cue i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,0), var(--c-white)); animation: cue 2.2s var(--ease-io) infinite; transform-origin: top; }
.hero__cue-track svg { display: block; margin-top: -6px; color: var(--c-white); overflow: visible; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.home-panel { position: relative; z-index: 2; background: var(--c-charcoal); color: var(--c-white); box-shadow: 0 -40px 80px rgba(0,0,0,.35); }
/* Meet Eclect Jaffa: the eyebrow, 32, the line */
.home-intro { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(18px, 1.6667vw, 32px); padding-block: var(--section-y); }
.home-intro > .t-eyebrow { grid-column: 1 / -1; }
.home-intro > h2 { grid-column: 1 / span 8; text-wrap: pretty; } /* no lone last word on a phone; the desktop break stays as drawn */
/* the project film (Ori, 2026-11-11; self-hosted, it replaced a YouTube embed): all 16 columns under the
   line. Its poster under a play box (the header's hairline box, filled on hover) until it's played; then the site's own
   controls, a bar that steps aside while the film plays (home.js). Without JS: the browser's own controls */
.home-intro > .film { grid-column: 1 / -1; margin-top: clamp(22px, calc(5vw - 32px), 64px); } /* with the row gap: 64 under the line at 1440, 96 at 1920 */
.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-black); color: var(--c-white); }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease-out); } /* `scale`, so the reveal's transform still applies */
.film__play[hidden], .film__bar[hidden] { display: none; }
.film__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(12px, calc(1.6667vw - 8px), 24px); background: rgba(26,26,26,.28); color: var(--c-white); cursor: pointer; transition: background .5s ease; }
.film__play:focus-visible { outline: none; }
.film__play:focus-visible .film__box { outline: 1px solid currentColor; outline-offset: 4px; }
.film__box { display: grid; place-items: center; width: clamp(56px, 5vw, 96px); aspect-ratio: 1; border: var(--hairline) solid currentColor; transition: background .3s ease; }
.film__box svg { width: 25%; height: auto; margin-left: 8%; fill: currentColor; transition: fill .3s ease; } /* a little right of centre so the triangle looks centred; a play sign is never mirrored */
.film__label { margin-inline-end: -.3em; } /* drop the trailing tracking so the words centre under the box */
@media (hover: hover) { /* as the menu box: a mouse fills it */
  .film__play:hover { background: rgba(26,26,26,.12); }
  .film:not(.is-started):hover .film__video { scale: 1.03; }
  .film__play:hover .film__box { background: currentColor; }
  .film__play:hover .film__box svg { fill: var(--c-charcoal); }
}
/* playing: the box goes; paused: it comes back, without its words; the poster returns when the film ends */
.film.is-on .film__play { visibility: hidden; }
.film.is-started .film__label { display: none; }
.film.is-started .film__play { background: rgba(26,26,26,.16); }
/* the bar: a media timeline runs left to right in Hebrew too */
.film__bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: clamp(4px, calc(1.6667vw - 16px), 16px); padding: 48px clamp(4px, calc(1.6667vw - 8px), 24px) clamp(0px, calc(1.6667vw - 16px), 16px); direction: ltr; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); transition: opacity .5s ease, visibility 0s; }
/* away: it fades, then leaves (visibility waits for the fade); back: there at once, so the focus can move into it */
.film:not(.is-started) .film__bar, .film.is-idle .film__bar { visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility 0s .5s; }
.film.is-idle { cursor: none; }
.film__btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--c-white); }
.film__btn:focus-visible { outline-offset: -4px; }
.film__ic { width: 20px; height: 20px; fill: currentColor; }
.film__ln { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; }
.film.is-on .film__ic--play, .film:not(.is-on) .film__ic--pause { display: none; }
.film.is-muted .film__ic--on, .film:not(.is-muted) .film__ic--off { display: none; }
.film.is-fs .film__ic--in, .film:not(.is-fs) .film__ic--out { display: none; }
.film__time { flex: none; font: var(--f-small); letter-spacing: var(--ls-small); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-white); }
/* the progress: a hairline, the part played 2 px and white, a small square to hold */
.film__seek { flex: 1; min-width: 48px; height: 44px; margin: 0 8px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.film__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--c-white) var(--p), rgba(255,255,255,.35) var(--p)); background-size: 100% 2px; }
.film__seek::-moz-range-track { height: 1px; background: rgba(255,255,255,.35); }
.film__seek::-moz-range-progress { height: 2px; background: var(--c-white); }
.film__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 0; border-radius: 0; background: var(--c-white); }
.film__seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--c-white); }
.film__seek:focus-visible { outline: 1px solid var(--c-white); outline-offset: -8px; }
@media (max-width: 479px) { .film__time { display: none; } } /* a phone keeps the progress line; the time stays on the slider for screen readers */
/* full screen: the whole film fits */
.film:fullscreen .film__video { object-fit: contain; }
.film:-webkit-full-screen .film__video { object-fit: contain; }
@media (min-width: 1024px) {
  .film__btn { width: 48px; height: 48px; }
}
/* the rooftop at dusk, full bleed, the story set justified in its darker corner */
.home-story { position: relative; height: clamp(560px, 49.1667vw, 944px); overflow: hidden; color: var(--c-white); background: #222; }
.home-story__media { position: absolute; inset: 0; }
.home-story__media img { width: 100%; height: 100%; object-fit: cover; }
.js-motion .home-story__media img { position: absolute; left: 0; top: -10%; height: 120%; } /* room for the parallax drift */
.home-story__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom left, rgba(0,0,0,.21), rgba(0,0,0,0) 55%); }
.home-story__inner { position: relative; padding-top: clamp(56px, 6.25vw, 120px); } /* 120 at 1920, as drawn */
.home-story__copy { max-width: 35vw; }
.home-story__text { text-align: justify; }
.home-story__mark { margin-top: clamp(24px, 3.125vw, 60px); color: var(--c-white); } /* UNPREDICTABLE, as wide as the paragraph */
.home-story__mark svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.home-index { padding-block: var(--section-y); }

@media (min-width: 1024px) {
  /* the centred marks get frames on the 8 (the vector keeps its own aspect inside) */
  .hero__logo, .finale__logo { height: 192px; }
  .hero__center { padding-bottom: 32px; } /* keeps the lockup where it was: 192 · 16 · 40, centred with 32 below */
  .finale__tag { height: 40px; object-fit: contain; }
  .hero__cue { bottom: clamp(32px, 3.75vw, 72px); left: clamp(16px, 3.125vw, 60px); min-width: 48px; gap: 16px; }
  .hero__dev { bottom: calc(clamp(32px, 3.75vw, 72px) + 4px); } /* its foot on the cue's chevron (the cue has 4 of padding) */
  .hero__cue i { height: 48px; }
  /* the film's height on the 8: 16:9 within 4px, within half a pixel at 1440 (1264 × 712) and 1920 (1648 × 928) */
  @supports (height: round(1px, 8px)) {
    .home-intro { container-type: inline-size; }
    .film { aspect-ratio: auto; height: round(calc(100cqw * 9 / 16), 8px); }
  }
}
@media (max-width: 1023px) {
  .home-intro > h2 { grid-column: 1 / -1; }
  .home-story__copy { max-width: 58vw; }
}
@media (max-width: 767px) {
  .hero__center { width: 84vw; }
  .hero__logo { width: 77vw; }

  /* phone: the copy runs the full width over the sky, so the shade comes from the top */
  .home-story { height: auto; min-height: 150vw; }
  .home-story__media img { object-position: 28% 50%; }
  .home-story__media::after { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%); }
  .home-story__copy { max-width: none; }
  .preloader__logo { width: 63vw; }
}

/* =========================================================
   CHAPTER PAGES — shared hero
   ========================================================= */
.ch-hero { position: relative; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; color: var(--c-white); background: var(--c-charcoal); }
.ch-hero__media { position: absolute; inset: 0; }
.ch-hero__media img, .ch-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-hero__media video { opacity: 0; transition: opacity 1.2s ease; }
.ch-hero__media video.is-playing { opacity: 1; }
.ch-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.5) 0%, rgba(26,26,26,0) 30%, rgba(26,26,26,0) 55%, rgba(26,26,26,.72) 100%); }
.ch-hero__content { position: absolute; inset: auto 0 0 0; padding: 0 var(--margin) clamp(32px, 3.75vw, 72px); display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.ch-hero__title { grid-column: 1 / span 11; }
.ch-hero__label { grid-column: 12 / -1; justify-self: end; direction: ltr; text-align: left; }
@media (min-width: 768px) { /* Project: the title on eight columns, the English line on one line beside it */
  .ch-hero__title--half { grid-column: 1 / span 8; }
  .ch-hero__title--half + .ch-hero__label { grid-column: 9 / -1; }
}
.ch-hero--top .ch-hero__content { inset: 0 0 auto 0; padding-top: calc(var(--header-h) + clamp(72px, 10.3704vh, 112px)); align-items: start; }

@media (max-width: 767px) {
  .ch-hero__title { grid-column: 1 / -1; }
  .ch-hero__label { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }
}

@media (min-width: 1024px) {
  .ch-hero--top .ch-hero__content { padding-top: calc(var(--header-h) + clamp(56px, 10.3704vh, 112px)); } /* the title at 208 (1080) */
}

.js-motion .ch-hero__title { visibility: hidden; }
.ch-hero--sky { color: var(--c-charcoal); }
.ch-hero--sky .ch-hero__shade { display: none; }
.ch-hero__corner { position: absolute; bottom: clamp(28px, 3.75vw, 72px); left: var(--margin); direction: ltr; color: var(--c-white); text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.ch-hero--top .ch-hero__title { grid-column: 1 / span 8; }

/* =========================================================
   01 LOCATION
   ========================================================= */
.ch-intro__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.ch-intro__text { grid-column: 1 / span 5; display: grid; gap: clamp(16px, 1.6667vw, 32px); position: sticky; top: calc(var(--header-h) + 24px); }
.triptych { grid-column: 6 / -1; display: grid; grid-template-columns: 1.75fr 1fr .86fr; gap: var(--gutter); align-items: end; }
.triptych__a { aspect-ratio: 834 / 827; }
.triptych__b { aspect-ratio: 478 / 696; }
.triptych__c { aspect-ratio: 402 / 827; }

.walk__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.walk__item { display: grid; gap: 14px; align-content: start; }
.walk__img { aspect-ratio: 4 / 3; }

.explorer { position: relative; background: var(--c-charcoal); color: var(--c-white); padding-block: var(--section-y); }
.explorer__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: clamp(28px, 3vw, 56px); align-items: end; }
.explorer__head h2 { grid-column: 9 / -1; grid-row: 1; direction: ltr; text-align: left; }
.explorer__head p { grid-column: 1 / span 8; grid-row: 1; }
.explorer__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: center; }
.places { grid-column: 1 / span 7; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: clamp(8px, 0.8334vw, 16px); text-align: left; } /* the names wrap like words, 16 apart, a line every 76 */
.place { display: inline; padding: 0; color: var(--c-white); text-align: left; white-space: nowrap; transition: opacity .45s var(--ease-out), color .3s ease; font: 300 clamp(36px, 2.9167vw, 56px)/clamp(42px, 3.9584vw, 76px) var(--font-english); letter-spacing: -0.01em; } /* 56 / 76 at 1920 */
.place__th { display: inline-block; width: 1.5em; height: .82em; margin-inline: .22em .04em; vertical-align: -.05em; overflow: hidden; transition: transform .5s var(--ease-out); }
.place__th img { width: 100%; height: 100%; object-fit: cover; }
.explorer.has-selection .place { opacity: .22; }
.explorer.has-selection .place.is-active, .place.is-active { opacity: 1; }
.place.is-active .place__th { transform: scale(1.35); }
.place:focus-visible { outline-offset: 2px; }
@media (max-width: 374px) { .place { white-space: normal; } } /* 320-wide screens: "Casino san remo" + its picture wrap instead of scrolling the page */

/* the window crops the deck p.9 map to the band that holds the cut-outs (layer x 14–89%, y 25–88%) so they read at ~70% of deck scale */
.jmap { grid-column: 8 / -1; position: relative; direction: ltr; }
.jmap__window { position: relative; aspect-ratio: 795.05 / 639.06; overflow: hidden; background: #100F0D; }
/* the art is placed off the window's width (margin % is of the width), so a taller window only shows more of the map below */
.jmap__layer { position: absolute; left: -18.667%; top: 0; margin-top: -31.746%; width: 133.333%; aspect-ratio: 1060.06 / 1014.38; transform-origin: 0 0; }
.jmap__base { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the light rail (the map's own red dashes, on the map's own coordinates): the dashes run along the route, south to north
   then east, about 20 px a second; held by the pause toggle, still with reduced motion */
.jmap__rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jmap__rail path { fill: none; stroke: #ED163A; stroke-width: .999; stroke-linecap: round; stroke-linejoin: round; }
.jmap__rail-a { stroke-dasharray: 4.972 4.972; }
.jmap__rail-b { stroke-dasharray: 5.077 5.077; }
.js-motion .jmap__rail-a { animation: rail-a .9s linear infinite; }
.js-motion .jmap__rail-b { animation: rail-b .919s linear infinite; } /* its dash is 2% longer: the same speed */
@keyframes rail-a { to { stroke-dashoffset: -19.888; } }
@keyframes rail-b { to { stroke-dashoffset: -20.308; } }
.cut { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transition: opacity .45s ease, transform .6s var(--ease-out), filter .45s ease; transform-origin: 50% 100%; cursor: pointer; }
.cut img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transform-origin: 50% 100%; }
.jmap.is-filtering .cut:not(.is-lit) { opacity: .16; filter: grayscale(.7); }
.cut.is-lit { transform: scale(1.3); z-index: 3; }
.jmap__home { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; z-index: 4; }
.jmap__home i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 0 rgba(251,183,40,.6); animation: pin 2.2s ease-out infinite; }
@keyframes pin { 0% { box-shadow: 0 0 0 0 rgba(251,183,40,.55); } 70%, 100% { box-shadow: 0 0 0 22px rgba(251,183,40,0); } }
.jmap__photo { position: absolute; left: 3%; top: 4%; width: 27%; margin: 0; background: var(--c-charcoal); padding: 8px 8px 10px; box-shadow: 0 30px 60px rgba(0,0,0,.35); transition: opacity .26s ease, transform .5s var(--ease-out); }
.jmap__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.jmap__photo figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; }
.jmap__photo-name { font: var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.jmap__photo-kind { font: var(--f-small); letter-spacing: var(--ls-small); color: var(--fg-2); }
[dir="rtl"] .jmap__photo-kind { direction: rtl; } /* the map runs LTR; a Hebrew caption keeps its own order */
.jmap__photo.is-swapping { opacity: 0; transform: translateY(8px); }
.explorer:not(.has-selection) .jmap__photo { opacity: 0; pointer-events: none; transform: translateY(8px); }
.jmap__tip { position: absolute; left: var(--tx); top: var(--ty); transform: translate(-50%, calc(-100% - 10px)); padding: 6px 12px; background: var(--c-white); color: var(--c-charcoal); font: var(--f-small); letter-spacing: var(--ls-small); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 6; direction: rtl; }
.jmap__tip.is-on { opacity: 1; }

.hs { position: relative; background: var(--c-charcoal); color: var(--c-white); overflow: hidden; }
.hs__viewport { overflow: hidden; }
/* without motion the strip isn't pinned: let it scroll natively so every photo stays reachable */
.hs:not(.is-pinned) .hs__viewport { overflow-x: auto; scrollbar-width: thin; }
.hs__track { display: flex; align-items: center; gap: var(--gutter); padding: var(--section-y) var(--margin); width: max-content; }
.hs.is-pinned .hs__track { height: 100vh; padding-block: 0; }
.hs__intro { flex: none; width: clamp(280px, 26.25vw, 504px); display: grid; gap: 20px; margin-inline-end: clamp(20px, 5.4167vw, 104px); }
.hs__progress { height: 1px; background: var(--line); margin-top: 24px; }
.hs__progress i { display: block; height: 100%; background: var(--c-white); transform: scaleX(0); transform-origin: right; }
.hs__item { flex: none; display: grid; gap: 12px; }
.hs__item--tall .media { height: min(66.6667vh, 720px); aspect-ratio: 2 / 3; }
.hs__item--wide .media { height: min(53.3334vh, 576px); aspect-ratio: 3 / 2; }

/* desktop: the triptych sits on eleven of the sixteen columns (5 · 3 · 3); the walk row is an equal three-up with a double gutter */
@media (min-width: 1024px) {
  .triptych { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .triptych__a { grid-column: span 5; aspect-ratio: 1; }
  .triptych__b { grid-column: span 3; aspect-ratio: 296 / 424; }
  .triptych__c { grid-column: span 3; aspect-ratio: 296 / 504; }
  .walk__list { column-gap: calc(var(--gutter) * 2); }
  /* on a pointer, the hovered picture opens an eighth wider over the gutter and its neighbours give way on the facing
     side. Nothing moves: the tiles keep their places and the pictures stay put; only the windows onto them change.
     The pictures are overscanned 12.5% each side so there is picture to open onto. Items run right to left (RTL). */
  @media (hover: hover) {
    .walk__img { position: relative; overflow: visible; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out); }
    .walk__img img { position: absolute; top: 0; left: -12.5%; width: 125%; max-width: none; height: 100%; transition: transform 1.1s var(--ease-out); }
    .walk__item:hover .walk__img { position: relative; z-index: 1; }
    .walk__item:hover .walk__img img { transform: scale(1.03); }
    .walk__list:has(> :nth-child(1):hover) > :nth-child(1) .walk__img { clip-path: inset(0 0 0 -12.5%); }
    .walk__list:has(> :nth-child(1):hover) > :nth-child(2) .walk__img { clip-path: inset(0 12.5% 0 0); }
    .walk__list:has(> :nth-child(2):hover) > :nth-child(2) .walk__img { clip-path: inset(0 -6.25% 0 -6.25%); }
    .walk__list:has(> :nth-child(2):hover) > :nth-child(1) .walk__img { clip-path: inset(0 0 0 6.25%); }
    .walk__list:has(> :nth-child(2):hover) > :nth-child(3) .walk__img { clip-path: inset(0 6.25% 0 0); }
    .walk__list:has(> :nth-child(3):hover) > :nth-child(3) .walk__img { clip-path: inset(0 -12.5% 0 0); }
    .walk__list:has(> :nth-child(3):hover) > :nth-child(2) .walk__img { clip-path: inset(0 0 0 12.5%); }
  }
  .walk__item { gap: 16px; }
  .walk__img { aspect-ratio: 528 / 400; }
  .jmap__window { aspect-ratio: 920 / 832; }
  .jmap__photo { left: 24px; top: 24px; width: 248px; padding: 8px; }
  .jmap__photo img { aspect-ratio: 232 / 288; }
  .jmap__home i { left: -8px; top: -8px; width: 16px; height: 16px; }
  .place__th { width: 1.8572em; height: 1em; margin-inline: .2857em .0714em; margin-top: .0715em; vertical-align: top; } /* 104 × 56, 16 before, 4 after, 4 down the 76 line (Place component) */
  .hs__intro { gap: 24px; }
  .hs__progress { margin-top: 23px; }
  .explorer__grid { align-items: start; }
  .hs__item { gap: 16px; }
}
@media (max-width: 1023px) {
  .ch-intro__text { grid-column: 1 / -1; position: static; }
  .ch-hero--top .ch-hero__title { grid-column: 1 / span 13; }
  .triptych { grid-column: 1 / -1; }
  .places, .jmap, .explorer__head h2, .explorer__head p { grid-column: 1 / -1; }
  .explorer__head h2 { text-align: right; }
  .explorer__head h2, .explorer__head p { grid-row: auto; }
  /* the map sticks under the header while the names scroll beneath it; the solid band covers the header strip when the header hides */
  .jmap { order: -1; position: sticky; top: 0; z-index: 2; align-self: start; padding: var(--header-h) 0 14px; background: var(--c-charcoal); }
  .explorer__head { margin-bottom: 0; }
  .jmap__photo { top: calc(var(--header-h) + 3%); }
  .hs__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hs__viewport::-webkit-scrollbar { display: none; }
  /* swipe row: the intro holds still on top (sticky inside the scroller), the photos swipe under it */
  .hs__track { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: end; row-gap: clamp(24px, 4vw, 40px); }
  .hs__intro { grid-row: 1; grid-column: 1; position: sticky; inset-inline-start: var(--margin); width: min(84vw, 560px); margin: 0; }
  .hs__item { grid-row: 2; scroll-snap-align: start; }
  .hs__item--tall .media { height: min(56vh, 93vw); }
  .hs__item--wide .media { height: min(40vh, 56vw); }
}
@media (max-width: 767px) {
  .ch-hero--top .ch-hero__title { grid-column: 1 / -1; }
  .ch-hero--top .ch-hero__title { text-wrap: balance; }
  .ch-hero--top .ch-hero__shade { background: linear-gradient(180deg, rgba(26,26,26,.62) 0%, rgba(26,26,26,.2) 42%, rgba(26,26,26,0) 60%, rgba(26,26,26,.72) 100%); }
  .walk__list { grid-template-columns: 1fr; }
  .triptych { grid-template-columns: 1fr 1fr; }
  .triptych__a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .jmap__photo { width: 36%; }
}

/* =========================================================
   02 PROJECT
   ========================================================= */
/* deck p.12 (RTL grid: column 1 is the right edge) — 1 + aerial on the right, rooftop + 4 in the middle, 23 + living room on the left */
.figures__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.fig { display: grid; row-gap: clamp(16px, 1.6667vw, 32px); }
.fig--a, .fig--c { row-gap: 0; } /* the 1 and the 23 sit right on their pictures */
.fig--c { grid-column: 1 / span 4; }
.fig--b { grid-column: 5 / span 4; align-self: start; margin-bottom: clamp(72px, 8.75vw, 168px); }
.fig--a { grid-column: 9 / -1; }
.fig__stat { display: flex; align-items: center; gap: clamp(10px, 0.8334vw, 16px); }
.fig--a .fig__stat, .fig--b .fig__stat { justify-self: end; }
.fig__n { font: var(--f-numeral-xl); letter-spacing: var(--ls-numeral-xl); font-variant-numeric: lining-nums tabular-nums; }
.fig__l { font: var(--f-body-m); letter-spacing: var(--ls-body-m); }
.fig--c .fig__img { aspect-ratio: 404 / 564; }
.fig--b .fig__img { aspect-ratio: 480 / 566; }
.fig--a .fig__img { aspect-ratio: 835 / 467; }

/* deck p.14 — mobile: a plain stack; desktop: the deck spread in a 100vh stage that pins */
.arch { position: relative; background: var(--c-charcoal); color: var(--c-white); }
.arch__stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: var(--section-y) var(--margin); }
.arch__render { overflow: hidden; background: #222; }
.arch__render img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 50%; }
.arch__brow { grid-column: 1 / -1; }
.arch__col { display: contents; } /* below desktop its two parts join the stage's grid */
.arch__brow .eyebrow-row { margin-bottom: 0; }
.arch__text { grid-column: 1 / -1; margin-bottom: 12px; }
.arch__render { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.arch__ph--house, .arch__ph--stairs { aspect-ratio: 3 / 4; }
.arch__ph--port { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.arch__cap { grid-column: 1 / -1; display: flex; gap: 16px; align-items: baseline; color: var(--fg-2); }
.arch__kw { font-style: italic; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: color .5s ease, background-size .8s var(--ease-out); }
.arch.has-step .arch__kw { color: var(--fg-2); }
.arch .arch__kw.is-on { color: var(--c-white); background-size: 100% 1px; }
.arch__ph img, .arch__render img { transition: filter .7s ease; }
.arch.has-step .arch__ph:not(.is-lit) img, .arch.has-step .arch__render:not(.is-lit) img { filter: brightness(.38) saturate(.7); }
@media (min-width: 1024px) {
  .arch__stage { display: block; height: 100vh; height: 100svh; min-height: 640px; padding: 0; overflow: hidden; }
  .arch__stage > * { position: absolute; }
  /* geometry of deck p.14 (1920×1080) as % of the stage */
  /* Ori's spread (eyebrow at 32, photos 104 → 912) moved 72 down so the persistent header never covers the eyebrow:
     the eyebrow 8 under the header · columns 1–8 render · 9–12 house over port · 13–16 text over stairs; photos 176 → 984 */
  .arch__brow { left: 7.0833%; right: 7.0833%; top: calc(var(--header-h) + 8px); }
  .arch__render { inset: 0; aspect-ratio: auto; clip-path: inset(16.2963% 50.4167% 8.8889% 7.0833%); }
  .arch__ph--house { left: 50.4167%; top: 16.2963%; width: 20.8333%; height: 45.9259%; aspect-ratio: auto; }
  .arch__ph--port { left: 50.4167%; top: 63.7037%; width: 20.8333%; height: 27.4074%; aspect-ratio: auto; }
  /* the last column holds the text and the stairs: the text 32 off the house photo, the stairs 56 below the text, to the foot */
  .arch__col { left: 72.0833%; top: 16.2963%; width: 20.8333%; bottom: 8.8889%; display: flex; flex-direction: column; gap: clamp(32px, 2.9167vw, 56px); }
  .arch__col > * { position: relative; }
  .arch__text { margin: 0; padding-inline-end: clamp(16px, 1.6667vw, 32px); }
  .arch__ph--stairs { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .arch__p { font: var(--f-body-m); letter-spacing: var(--ls-body-m); }
  .arch__cap { right: 7.0833%; top: calc(91.1111% + 16px); color: var(--c-white); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
  .js-motion .arch__cap { opacity: 0; }
}

/* deck p.15 (RTL): balcony on the right, the text over the garden in the middle, the building on the left */
.green__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(28px, 2.5vw, 48px); align-items: end; }
.green__a { grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 400 / 824; }
.green__text { grid-column: 5 / span 4; grid-row: 1; align-self: start; }
.green__b { grid-column: 5 / span 4; grid-row: 2; aspect-ratio: 400 / 536; }
.green__c { grid-column: 9 / -1; grid-row: 1 / span 2; aspect-ratio: 816 / 808; }
.green__c img { object-position: 38% 60%; }

/* deck p.16 — the street floor as panels: the hovered one opens */
.lifestyle__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; margin-bottom: clamp(28px, 3vw, 56px); }
.lifestyle__head h2 { grid-column: 9 / -1; grid-row: 1; direction: ltr; text-align: left; }
.lifestyle__head p { grid-column: 1 / span 7; grid-row: 1; }
.panels { display: flex; gap: var(--gutter); height: clamp(420px, 66.6667vh, 720px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow .9s var(--ease-out); cursor: pointer; }
.panel.is-open { flex-grow: 3.4595; } /* 3 · 3 · 10 columns */
.panel__media { position: absolute; inset: 0; background: #222; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s ease; }
.panel__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 52%, rgba(26,26,26,.72) 100%); }
.panel:not(.is-open) .panel__media img { filter: brightness(.6) saturate(.75); }
.panel__cap { position: absolute; inset-inline: clamp(16px, 1.6667vw, 32px); bottom: clamp(16px, 1.6667vw, 32px); z-index: 1; display: flex; align-items: baseline; gap: 14px; color: var(--c-white); white-space: nowrap; }

/* deck p.17 — a window on the street opens to full bleed while the stage sticks */
.welcome { position: relative; height: 200vh; height: 200svh; background: var(--c-charcoal); }
html:not(.js-motion) .welcome { height: 100vh; height: 100dvh; }
.welcome__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.welcome__frame { position: absolute; inset: 0; }
.welcome__frame img { width: 100%; height: 100%; object-fit: cover; }
.welcome__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 45%, rgba(26,26,26,.66) 100%); }
.welcome__title { position: absolute; inset-inline-start: var(--margin); bottom: clamp(40px, 5.8334vw, 112px); z-index: 1; color: var(--c-white); }
.js-motion .welcome__title { opacity: 0; }

@media (min-width: 1024px) {
  .fig--c .fig__img { aspect-ratio: 400 / 560; }
  .fig__stat { align-items: flex-start; }
  .fig--b { row-gap: clamp(16px, 2.0834vw, 40px); margin-bottom: clamp(64px, 8.3334vw, 160px); } /* 8 less below, so the spread stays 820 tall */
  .fig--b .fig__stat { margin-inline-end: 16px; } /* Ori's nudge: the 4 sits 16 in from the picture's edge */
  .fig__l { margin-top: 1.6667vw; } /* centred on the numeral (148) to the 8: (148 − 80) / 2 − 2 */
  .fig--b .fig__img { aspect-ratio: 400 / 472; }
  .fig--a .fig__img { aspect-ratio: 816 / 456; }
  .lifestyle__head { row-gap: 24px; }
  .panel__cap { gap: 16px; }
}
@media (max-width: 1023px) {
  .figures__grid { grid-template-columns: 1fr 1fr; row-gap: 48px; align-items: start; }
  .fig--a { grid-column: 1 / -1; order: -1; }
  .fig--b, .fig--c { grid-column: auto; margin: 0; align-self: start; }
  .fig--b .fig__stat { order: -1; }
  .fig--a .fig__stat, .fig--b .fig__stat { justify-self: start; }
  .arch__brow { order: 1; } .arch__text { order: 2; } .arch__render { order: 3; } .arch__ph--house { order: 4; } .arch__ph--stairs { order: 5; } .arch__ph--port { order: 6; } .arch__cap { order: 7; }
  .green__grid { grid-template-columns: 1fr 1fr; }
  .green__text { grid-column: 1 / -1; grid-row: auto; order: -1; }
  .green__c { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .green__a, .green__b { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
  .lifestyle__head h2, .lifestyle__head p { grid-column: 1 / -1; grid-row: auto; }
  .lifestyle__head h2 { text-align: right; }
  .panels { height: clamp(380px, 56vh, 620px); }
}
@media (max-width: 767px) {
  .panels { flex-direction: column; height: auto; }
  .panel, .panel.is-open { flex: none; aspect-ratio: 4 / 3; }
  .panel:not(.is-open) .panel__media img { filter: none; }
}

/* =========================================================
   03 APARTMENTS
   ========================================================= */
/* deck p.19 (RTL columns): blue sofa | text over the living room | kitchen over the terrace */
/* desktop: 6 · 5 · 5 columns, 816 tall; the middle picture takes what the text leaves */
.collage { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--gutter); }
.collage__a { grid-column: 1 / span 6; grid-row: 1 / span 2; aspect-ratio: 608 / 816; }
.collage__b { grid-column: 7 / span 5; grid-row: 1 / span 2; display: grid; grid-template-rows: auto 1fr; row-gap: clamp(24px, 2.9167vw, 56px); }
.collage__b .media { aspect-ratio: 482 / 642; align-self: end; }
.collage__c { grid-column: 12 / -1; grid-row: 1; aspect-ratio: 504 / 432; }
.collage__d { grid-column: 12 / -1; grid-row: 2; aspect-ratio: 504 / 368; }

/* interiors: inset cards on the margins, 96 apart; each sticks, the next slides over it */
.istack { position: relative; background: var(--c-charcoal); padding-bottom: clamp(64px, 6.6667vw, 128px); }
.istack__item { position: sticky; top: 0; height: 100vh; height: 100dvh; margin: 0 var(--margin); overflow: hidden; background: var(--c-charcoal); }
.istack__item + .istack__item { margin-top: clamp(48px, 5vw, 96px); }
.istack__item { transform-origin: 50% 0; }
.istack__media { position: absolute; inset: 0; }
.istack__dim { position: absolute; inset: 0; background: var(--c-charcoal); opacity: 0; pointer-events: none; }
.istack__media img { width: 100%; height: 100%; object-fit: cover; }
.istack__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 55%, rgba(26,26,26,.62) 100%); }
.istack__cap { position: absolute; inset-inline: clamp(20px, 4.1667vw, 80px); bottom: clamp(28px, 3.75vw, 72px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(16px, 2.0834vw, 40px); color: var(--c-white); }

/* plan finder (light) — deck p.25: data on the right, the plan on a white card on the left */
.finder__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.finder__head p { order: 2; }
.finder__bar { margin-top: clamp(24px, 2.5vw, 48px); }
.pfilter { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: var(--hairline) solid var(--line-strong); color: var(--fg); font: var(--f-small); letter-spacing: var(--ls-small); transition: background .3s ease, color .3s ease; }
.pchip:hover { background: var(--fg-dim); }
.pchip.is-on { background: var(--c-charcoal); color: var(--c-white); }
.ptabs { display: flex; margin-block: clamp(26px, 2.5vw, 48px) clamp(26px, 2.5vw, 48px); border-block: var(--hairline) solid var(--line); }
.ptab { position: relative; flex: 0 0 calc(100% / 11); display: grid; justify-items: start; gap: 6px; padding: clamp(10px, .8334vw, 16px) 0; padding-inline-end: 10px; color: var(--fg); text-align: start; }
.ptab[hidden] { display: none; }
/* unselected tabs dim by colour, not opacity (38% opacity took their text to 1.6–2.3:1): the letter at 50% (3.3:1, large
   type), the line in the second text colour (4.75:1) */
.ptab .ptab__type { color: rgba(26,26,26,.5); transition: color .35s ease; }
.ptab:hover .ptab__type { color: rgba(26,26,26,.75); }
.ptab.is-active .ptab__type { color: var(--fg); }
.ptab::after { content: ''; position: absolute; inset-inline: 0 10px; bottom: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease-out); }
.ptab.is-active::after { transform: scaleX(1); }
.ptab__type { direction: ltr; display: flex; align-items: baseline; gap: .3em; font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); }
.ptab__meta { display: grid; font: var(--f-small); letter-spacing: var(--ls-small); color: var(--fg-2); white-space: nowrap; } /* rooms, then area */
.plans { display: grid; }
.plan { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.plan[hidden] { display: none; }
.plan__side { grid-column: 1 / span 5; display: grid; gap: clamp(22px, 2.2vw, 40px); }
.plan__type { direction: ltr; display: flex; justify-content: flex-end; align-items: baseline; gap: .35em; font-family: var(--font-english); font-weight: 300; line-height: .8; }
.plan__type small { font: var(--f-caps-label); letter-spacing: var(--ls-caps-label); text-transform: uppercase; }
.plan__type span { font: var(--f-numeral-xl); letter-spacing: var(--ls-numeral-xl); }
.plan__data { margin: 0; }
.plan__facts { margin-top: clamp(8px, 0.8334vw, 16px); } /* 56 under the type letter */
.plan__data > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: clamp(10px, .9vw, 16px); border-bottom: var(--hairline) solid var(--line); }
.plan__data dt { font: var(--f-body-s); letter-spacing: var(--ls-body-s); color: var(--fg-2); }
.plan__data dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plan__data dd b { font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); }
.plan__data dd b.is-word { font: var(--f-body-m); letter-spacing: var(--ls-body-m); }
.plan__data dd small { font: var(--f-small); letter-spacing: var(--ls-small); color: var(--fg-2); }
.plan__vals { display: flex; flex-direction: column; align-items: flex-end; } /* several balconies: one line each */
.plan__val { display: flex; align-items: baseline; gap: 6px; }
/* the key plan closes the facts as a row of its own: the label on the right, the plan (with its north) on the left */
.plan__key { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-block: clamp(16px, 1.25vw, 24px) calc(clamp(24px, 2.2917vw, 44px) - 1px); border-bottom: var(--hairline) solid var(--line); }
.plan__keymap { display: block; flex: none; width: clamp(118px, 10vw, 192px); aspect-ratio: 1; margin-top: 8px; object-fit: contain; object-position: 50% 0; } /* the PDF's key plan, rendered */
.plan__note { margin-top: 16px; max-width: 48ch; }
.plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
[data-theme="light"] .btn-outline:hover span, [data-theme="paper"] .btn-outline:hover span { color: var(--c-white); }
.plan__card { grid-column: 7 / -1; margin: 0; } /* ten columns; the sixth stays empty */
.plan__zoom { position: relative; display: block; width: 100%; aspect-ratio: 1024 / 824; padding: clamp(20px, 4%, 70px); background: var(--c-white); border: var(--hairline) solid var(--line); cursor: zoom-in; }
.plan__zoom img { width: 100%; height: 100%; object-fit: contain; }
.plan__zoom-ic { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: var(--hairline) solid var(--line); border-radius: 50%; transition: background .3s ease, color .3s ease; }
.plan__zoom:hover .plan__zoom-ic { background: var(--c-charcoal); color: var(--c-white); }
.plan__legal { margin-top: 12px; color: var(--fg-2); max-width: 110ch; }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--c-mist); color: var(--c-charcoal); }
.lightbox::backdrop { background: rgba(26,26,26,.6); }
.lightbox__stage { position: absolute; inset: 76px var(--margin) 40px; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; }
.lightbox__stage img { max-width: 100%; max-height: 100%; cursor: zoom-in; }
.lightbox.is-zoomed .lightbox__stage { place-items: start; }
.lightbox.is-zoomed .lightbox__stage img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.lightbox__close { position: absolute; top: 14px; inset-inline-end: var(--margin); width: 48px; height: 48px; display: grid; place-items: center; color: inherit; }
.lightbox__cap { position: absolute; top: 24px; inset-inline-start: var(--margin); font: var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* deck p.31 — the terrace through the word, then the word opens; then the interior rises over the terrace (2026-11-11).
   About 280 screen-heights of scrolling drive it (js/pages/apartments.js). Without motion: the two pictures one under the other,
   the title on the terrace */
.ph { position: relative; height: 380vh; height: 380svh; background: var(--c-charcoal); }
html:not(.js-motion) .ph { height: auto; }
.ph__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
html:not(.js-motion) .ph__sticky { position: relative; height: auto; }
.ph__media { position: absolute; inset: 0; }
html:not(.js-motion) .ph__media { position: relative; height: 100vh; height: 100dvh; }
.js-motion .ph__media--in { clip-path: inset(100% 0 0 0); }
.ph__media img { width: 100%; height: 100%; object-fit: cover; }
.ph__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 50%, rgba(26,26,26,.66) 100%); }
.ph__mask { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
html:not(.js-motion) .ph__mask { display: none; }
.ph__word { font-family: var(--font-english); font-weight: 300; font-size: 13.5vw; letter-spacing: -.02em; }
.ph__copy { position: absolute; inset-inline-start: var(--margin); bottom: clamp(36px, 5vw, 96px); display: grid; gap: 8px; color: var(--c-white); }
html:not(.js-motion) .ph__copy { bottom: calc(100vh + clamp(36px, 5vw, 96px)); bottom: calc(100dvh + clamp(36px, 5vw, 96px)); }
.js-motion .ph__copy { opacity: 0; }

/* deck p.24 (paper): the list on the right, the lobby on the left */
.spec__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-auto-flow: dense; column-gap: var(--gutter); row-gap: 40px; align-items: start; }
.spec__body { grid-column: 1 / span 8; display: grid; gap: 12px; align-content: start; }
.spec__media { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + 24px); }
.spec__pics > img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.spec__pics > img.is-on { opacity: 1; }
.js-motion .spec__pics[data-reveal="img"] > img:not(:first-child) { transform: none; } /* the reveal settles the first picture only */
.spec__media .media { aspect-ratio: 712 / 888; }
.acc { margin-top: clamp(24px, 2.6vw, 48px); border-top: var(--hairline) solid var(--line); }
.acc__item { border-bottom: var(--hairline) solid var(--line); }
.acc__item summary { display: flex; align-items: baseline; gap: 18px; padding-block: clamp(18px, 1.6667vw, 32px); padding-inline-start: 8px; list-style: none; cursor: pointer; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__ic { position: relative; flex: none; width: 16px; height: 16px; margin-inline-start: auto; align-self: center; }
.acc__ic::before, .acc__ic::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .5s var(--ease-out); }
.acc__ic::after { transform: rotate(90deg); }
.acc__item[open] .acc__ic::after { transform: rotate(0deg); }
.acc__panel { overflow: hidden; }
.spec__list { display: grid; gap: 10px; padding-bottom: clamp(22px, 1.6667vw, 32px); padding-inline-start: 8px; } /* titles and list 8 in from the edge (Ori's spec) */
.spec__list li { position: relative; padding-inline-start: 24px; font: var(--f-body-s); letter-spacing: var(--ls-body-s); }
.spec__list li::before { content: ''; position: absolute; inset-inline-start: 0; top: .78em; width: 12px; height: 1px; background: currentColor; opacity: .45; }
.spec__list b { font-weight: 500; } /* the brand names, bold in the client's spec: Greta Medium */
.spec__notes { display: grid; gap: 8px; margin-top: clamp(16px, 1.6667vw, 32px); padding-inline-start: 8px; max-width: 712px; }

@media (min-width: 1024px) {
  .collage__b { grid-template-rows: auto minmax(0, 1fr); }
  .collage__b .media { aspect-ratio: auto; height: 100%; }
  .finder__head { gap: 16px 24px; }
  .pfilter { gap: 16px; }
  .pchip { min-height: 48px; padding: 0 16px; gap: 8px; }
  .ptab { gap: 8px; padding-block: calc(clamp(10px, .8334vw, 16px) - 1px); } /* 144 tall with its rules (two meta lines) */
  .plan__keymap { width: 192px; }
  .plan__actions { margin-top: 8px; }
  .spec__media .media { aspect-ratio: 712 / 1040; } /* from the heading's top to the accordion's foot, with the first item open */
  .spec__list { padding-inline-end: 72px; } /* the items keep a 712 measure */
  .plan { row-gap: 32px; }
  .plan__data > div { padding-bottom: calc(clamp(10px, .9vw, 16px) - 1px); }
  .plan__data dd, .plan__val { gap: 8px; }
  .plan__actions { gap: 16px 24px; }
  .plan__zoom { padding: calc(clamp(20px, 2.5vw, 48px) - 1px); } /* the 1px card border sits inside the 48 */
  .plan__zoom-ic { width: 48px; height: 48px; top: 15px; left: 15px; }
  .plan__zoom-ic svg { width: 24px; height: 24px; }
  .plan__legal { margin-top: 16px; }
  .lightbox__stage { inset: 80px var(--margin) 40px; }
  .lightbox__close { top: 16px; }
  .spec__body { gap: 16px; }
  .acc__item:first-child, .work:first-child { margin-top: -1px; } /* the list's top rule overlays its first row */
  .acc__item:not([open]) summary { padding-bottom: calc(clamp(18px, 1.6667vw, 32px) - 1px); }
  .acc__item[open] .spec__list { padding-bottom: calc(clamp(22px, 1.6667vw, 32px) - 1px); }
  .spec__list { gap: 8px; }
  .spec__list li::before { width: 16px; }
}
@media (max-width: 1023px) {
  .collage { grid-template-columns: 1fr 1fr; }
  .collage__a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .collage__b { grid-column: 1 / -1; grid-row: auto; }
  .collage__b .media { aspect-ratio: 4 / 3; }
  .collage__c, .collage__d { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .plan__side, .plan__card { grid-column: 1 / -1; }
  .plan__card { order: -1; }
  .plan__type { justify-content: flex-end; }
  .spec__body, .spec__media { grid-column: 1 / -1; }
  .spec__media { position: static; order: -1; }
  .spec__media .media { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .lightbox__stage { inset: 70px 12px 20px; }
}

/* =========================================================
   04 DEVELOPERS & ARCHITECTS
   ========================================================= */
/* deck p.33 */
.dev__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; align-items: center; }
.dev__brand { grid-column: 1 / span 7; display: grid; justify-items: center; gap: clamp(18px, 2.0834vw, 40px); }
.dev__logo { width: min(100%, 520px); color: var(--c-white); }
.dev__logo svg { display: block; width: 100%; height: auto; }
.dev__motto { color: var(--fg-2); }
.dev__text { grid-column: 9 / -1; display: grid; gap: clamp(18px, 1.8vw, 32px); }

/* deck p.34 — the projects as an index; a picture floats with the pointer */
.works__list { border-top: var(--hairline) solid var(--line); }
.work { display: flex; justify-content: space-between; align-items: baseline; gap: clamp(16px, 2.0834vw, 40px); padding-block: clamp(18px, 2.0834vw, 40px); border-bottom: var(--hairline) solid var(--line); transition: opacity .45s var(--ease-out); }
.work__img { display: none; }
.work__name { font: var(--f-h1); letter-spacing: var(--ls-h1); }
.work__name [lang="en"] { font-family: var(--font-hebrew); font-style: normal; } /* "OM" in Greta Light, upright */
.work__tag { font: var(--f-title-s); letter-spacing: var(--ls-title-s); color: var(--fg-2); }
@media (hover: hover) and (min-width: 1024px) {
  .works__list:hover .work { opacity: .28; }
  .works__list .work:hover { opacity: 1; }
}
/* the whole render, in its own proportions (Ori, 2026-11-10: "not cut in the hovers"): the width is fixed, team.js sets
   the height from the picture shown (all four are 16:9 now: 560 × 315 at 1920) */
.works__float { position: fixed; left: 0; top: 0; z-index: 5; width: clamp(320px, 29.1667vw, 560px); aspect-ratio: 16 / 9; pointer-events: none; visibility: hidden; opacity: 0; }
.works__float-inner { position: absolute; inset: 0; overflow: hidden; background: #222; }
.works__float-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* deck p.35: the building on the left, the studio on the right */
.studio__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-auto-flow: dense; column-gap: var(--gutter); row-gap: 40px; align-items: start; }
.studio__photo { grid-column: 9 / -1; margin: 0; display: grid; gap: 10px; position: sticky; top: calc(var(--header-h) + 24px); }
.studio__photo .media { aspect-ratio: 600 / 560; }
.studio__text { grid-column: 1 / span 7; display: grid; gap: 16px; justify-items: start; }
.studio__logo { width: clamp(64px, 5vw, 96px); height: auto; margin-bottom: 8px; }

/* deck p.36–37 — the aerial at dusk; the logo assembles, then UNPREDICTABLE *8829 */
.finale { position: relative; height: 220vh; height: 220svh; background: var(--c-charcoal); }
html:not(.js-motion) .finale { height: 100vh; height: 100dvh; }
.finale__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.finale__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale__shade { position: absolute; inset: 0; background: rgba(26,26,26,.55); }
/* the lockup 632 over the wordmark 624 (1920): 48 between them, 80 down to the number */
.finale__center { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(24px, 2.5vw, 48px); padding-top: clamp(0px, 3.3334vw, 64px); color: var(--c-white); text-align: center; } /* the group sits 32 below the middle, as drawn */
.finale__logo { width: min(48vw, 632px); display: grid; align-items: center; }
.finale__logo svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.finale__tag { width: min(47.4vw, 624px); height: auto; }
.finale__phone { font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); margin-top: clamp(16px, 1.6667vw, 32px); }
.js-motion .finale__tag, .js-motion .finale__phone { opacity: 0; }
.finale__phone:focus-visible { opacity: 1 !important; } /* reached by Tab before its entrance: show it */

/* desktop: the project rows sit on the columns — number, name from column 2, tag on the far side */
@media (min-width: 1024px) {
  .work { padding-bottom: calc(clamp(18px, 2.0834vw, 40px) - 1px); }
  .work__name [lang="en"] { line-height: 0; } /* the Latin run keeps the Hebrew line box (84), not a taller mixed one */
  .studio__photo { gap: 8px; }
  .studio__photo .media { aspect-ratio: 816 / 760; }
}
@media (max-width: 1023px) {
  .dev__brand, .dev__text, .studio__photo, .studio__text { grid-column: 1 / -1; }
  .dev__logo { width: min(80%, 420px); }
  .work { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .work__img { display: block; aspect-ratio: 16 / 10; }
  .work__tag { display: none; }
  .works__float { display: none; }
  .studio__photo { order: -1; position: static; }
}
@media (max-width: 767px) {
  .finale__logo { width: 77vw; }
  .finale__tag { width: 76vw; }
  .eyebrow-row__end { display: none; } /* two labels and a rule don't fit a phone; the start label stays */
}

/* wide desktop: the eleven types (G1–G3, A–F, PH1–PH2) share the row evenly: 150 at 1920, 115 at 1440, where the widest
   line ("4 חד׳ · 109.20 מ״ר") takes 100 */
@media (min-width: 1440px) {
  .ptabs { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .ptab { padding-inline-end: 0; }
  .ptab::after { inset-inline: 0; }
}
/* the type tabs swipe below wide desktop (eleven tabs stop fitting) */
@media (max-width: 1439px) {
  .ptabs { overflow-x: auto; scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { flex: 0 0 auto; min-width: 100px; padding-inline-end: 22px; }
}

/* =========================================================
   LEGAL PAGES (accessibility statement, privacy policy)
   ========================================================= */
.legal { background: var(--c-charcoal); color: var(--c-white); padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y); }
.legal__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(28px, 2.9167vw, 56px); }
.legal__head { grid-column: 1 / span 10; display: grid; gap: clamp(18px, 1.6667vw, 32px); }
.legal__body { grid-column: 1 / span 8; font: var(--f-body-s); letter-spacing: var(--ls-body-s); color: rgba(255,255,255,.8); }
.legal__body h2 { font: var(--f-h3); letter-spacing: var(--ls-h3); color: var(--c-white); margin: clamp(40px, 3.3334vw, 64px) 0 clamp(12px, .8334vw, 16px); }
.legal__body h3 { font: var(--f-h4); letter-spacing: var(--ls-h4); color: var(--c-white); margin: clamp(24px, 2.0834vw, 40px) 0 8px; }
.legal__body h4 { font: var(--f-label-m); letter-spacing: var(--ls-label-m); color: var(--c-white); margin: 24px 0 8px; }
.legal__body > :first-child { margin-top: 0; }
.legal__body p { margin: 0 0 16px; }
.legal__body ul, .legal__body ol { margin: 0 0 16px; display: grid; gap: 8px; }
.legal__body li { position: relative; padding-inline-start: 24px; }
.legal__body li::before { content: ''; position: absolute; inset-inline-start: 0; top: .8em; width: 16px; height: 1px; background: currentColor; opacity: .45; }
.legal__body a { color: var(--c-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; } /* long bare URLs wrap on a phone */
.legal__body hr { border: 0; border-top: var(--hairline) solid var(--line); margin: clamp(40px, 3.3334vw, 64px) 0; }
.legal__body hr + h2 { margin-top: 0; } /* the Cookies Policy opens after a rule */
.legal__body [tabindex="-1"]:focus { outline: none; } /* #cookies takes the focus when it's landed on (not a control: no ring) */
.legal__body strong { font-weight: 500; color: var(--c-white); }
/* the accessibility vendor's template instructions, still to be filled in (kept visible, not passed off as content) */
.legal__todo, .legal__body ul.legal__todo li { color: var(--c-gold); font-style: normal; }
@media (max-width: 1023px) {
  .legal__head, .legal__body { grid-column: 1 / -1; }
}

/* =========================================================
   ENGLISH (en/, LTR) — the spreads mirror with their grids; these rules mirror what is placed physically.
   Not mirrored, because the photos aren't: the map art and what sits on it, the rooftop story (its copy stays in the
   photo's darker corner) and the Location hero (its title stays over the sky).
   ========================================================= */
[dir="ltr"] .hero__cue { left: auto; right: calc(var(--margin) - 4px); }
[dir="ltr"] .ch-hero__corner { left: auto; right: var(--margin); }
[dir="ltr"] .home-story__copy { margin-left: auto; } /* the photo's dark corner is top right in both languages */
/* the Location hero keeps the Hebrew composition too: the title over the sky (top right), the corner line over the sand */
[dir="ltr"] .ch-hero--top .ch-hero__title { grid-column: 9 / -1; text-align: right; } /* the lines end over the sky, as the Hebrew ones do */
@media (max-width: 1023px) { [dir="ltr"] .ch-hero--top .ch-hero__title { grid-column: 4 / -1; } }
@media (max-width: 767px) { [dir="ltr"] .ch-hero--top .ch-hero__title { grid-column: 1 / -1; } }
[dir="ltr"] .ch-hero--top .ch-hero__corner { right: auto; left: var(--margin); }
[dir="ltr"] .home-story__text { hyphens: auto; -webkit-hyphens: auto; } /* justified English needs its breaks */
[dir="ltr"] .explorer__head h2, [dir="ltr"] .lifestyle__head h2 { text-align: right; } /* the English title on the outer edge, as in Hebrew */
[dir="ltr"] .jmap__tip { direction: ltr; }
[dir="ltr"] .hs__progress i { transform-origin: left; }
[dir="ltr"] .ptab::after { transform-origin: 0 50%; }
[dir="ltr"] .plan__type { justify-content: flex-start; }
[dir="ltr"] .plan__zoom-ic { left: auto; right: 16px; }
@media (min-width: 1024px) {
  [dir="ltr"] .hero__cue { left: auto; right: clamp(16px, 3.125vw, 60px); }
  [dir="ltr"] .plan__zoom-ic { left: auto; right: 15px; }
  /* deck p.14 mirrored: text over stairs on the left (columns 1–4), house over port next (5–8), the render's window on
     the right (9–16). The picture is shifted under the window so the same part of it shows; project.js slides it home
     as the window opens to full bleed. */
  [dir="ltr"] .arch__render { clip-path: inset(16.2963% 7.0833% 8.8889% 50.4167%); }
  html:not(.js-motion)[dir="ltr"] .arch__render img { translate: 43.3333% 0; } /* with motion, project.js sets the shift (GSAP folds a CSS translate into its own transform) */
  [dir="ltr"] .arch__ph--house, [dir="ltr"] .arch__ph--port { left: auto; right: 50.4167%; }
  [dir="ltr"] .arch__col { left: 7.0833%; }
  [dir="ltr"] .arch__cap { right: auto; left: 7.0833%; }
  /* the walk tiles run left to right: the hovered window still opens toward its neighbour, which gives way on that side */
  @media (hover: hover) {
    [dir="ltr"] .walk__list:has(> :nth-child(1):hover) > :nth-child(1) .walk__img { clip-path: inset(0 -12.5% 0 0); }
    [dir="ltr"] .walk__list:has(> :nth-child(1):hover) > :nth-child(2) .walk__img { clip-path: inset(0 0 0 12.5%); }
    [dir="ltr"] .walk__list:has(> :nth-child(2):hover) > :nth-child(1) .walk__img { clip-path: inset(0 6.25% 0 0); }
    [dir="ltr"] .walk__list:has(> :nth-child(2):hover) > :nth-child(3) .walk__img { clip-path: inset(0 0 0 6.25%); }
    [dir="ltr"] .walk__list:has(> :nth-child(3):hover) > :nth-child(3) .walk__img { clip-path: inset(0 0 0 -12.5%); }
    [dir="ltr"] .walk__list:has(> :nth-child(3):hover) > :nth-child(2) .walk__img { clip-path: inset(0 12.5% 0 0); }
  }
}
@media (max-width: 1023px) {
  [dir="ltr"] .explorer__head h2, [dir="ltr"] .lifestyle__head h2 { text-align: left; }
}