/* ECLECT JAFFA — prototype base styles.
   Tokens mirror the Figma DSM (Primitives / Color / Layout / Size / Typography collections).
   Type sizes scale fluidly between the DSM's Mobile and Desktop text styles (desktop = the 1920 deck page). */

/* ---------- fonts ---------- */
@font-face { font-family: "Greta Text Pro HL"; src: url("../fonts/GretaTextPro_HL-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Greta Text Pro HL"; src: url("../fonts/GretaTextPro_HL-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Greta Text Pro HL"; src: url("../fonts/GretaTextPro_HL-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Italic-var.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
/* DM Sans (Google Fonts, OFL, self-hosted latin subset) — only the footer credit uses it */
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-var-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* Primitives */
  --c-charcoal: #1A1A1A; --c-white: #FFFFFF; --c-black: #000000; --c-mist: #F4F4F4;
  --c-green: #5C6F67; --c-sage: #8E9890; --c-gold: #FBB728; --c-sky: #A3C0D0;
  --c-cream: #EFE7D9; --c-travertine: #CDC5B9;
  --a-white-10: rgba(255,255,255,.10); --a-white-15: rgba(255,255,255,.15); --a-white-60: rgba(255,255,255,.60);
  --a-char-10: rgba(26,26,26,.10); --a-char-15: rgba(26,26,26,.15); --a-char-60: rgba(26,26,26,.60);
  /* Typography (font-family variables) */
  --font-hebrew: "Greta Text Pro HL", "Frank Ruhl Libre", serif;
  --font-english: "Newsreader", "Greta Text Pro HL", "Iowan Old Style", Georgia, serif; /* Greta catches any Hebrew set in an English style */
  /* DSM text styles: Mobile 390 → Desktop 1920 (font shorthand + tracking per role; uppercase roles add text-transform) */
  --f-display-xl: 300 clamp(56px, 6.6667vw, 128px)/clamp(62px, 7.9167vw, 152px) var(--font-english); --ls-display-xl: -0.02em;
  --f-display-l: 300 clamp(44px, 5.4167vw, 104px)/clamp(50px, 6.4584vw, 124px) var(--font-english); --ls-display-l: -0.02em;
  --f-display-m: 300 clamp(36px, 3.75vw, 72px)/clamp(42px, 4.375vw, 84px) var(--font-english); --ls-display-m: -0.01em;
  --f-numeral-xl: 300 clamp(88px, 7.7084vw, 148px)/clamp(88px, 7.7084vw, 148px) var(--font-english); --ls-numeral-xl: -0.02em;
  --f-numeral-l: 500 clamp(40px, 3.4375vw, 66px)/clamp(46px, 3.9584vw, 76px) var(--font-english); --ls-numeral-l: 0em;
  --f-numeral-m: 300 clamp(36px, 2.7084vw, 52px)/clamp(40px, 2.9167vw, 56px) var(--font-english); --ls-numeral-m: 0em;
  --f-title-l: italic 300 clamp(40px, 3.6459vw, 70px)/clamp(44px, 3.9584vw, 76px) var(--font-english); --ls-title-l: -0.01em;
  --f-title-m: italic 300 clamp(30px, 2.5vw, 48px)/clamp(36px, 2.9167vw, 56px) var(--font-english); --ls-title-m: -0.01em;
  --f-title-s: italic 300 clamp(24px, 1.6667vw, 32px)/clamp(30px, 2.0834vw, 40px) var(--font-english); --ls-title-s: 0em;
  --f-tagline: 500 clamp(28px, 3.125vw, 60px)/clamp(34px, 3.75vw, 72px) var(--font-english); --ls-tagline: 0.4em;
  --f-caps-label: 400 clamp(20px, 1.6667vw, 32px)/clamp(26px, 2.0834vw, 40px) var(--font-english); --ls-caps-label: 0.4em;
  --f-eyebrow: 500 clamp(13px, 0.8334vw, 16px)/clamp(20px, 1.25vw, 24px) var(--font-hebrew); --ls-eyebrow: 0.3em; /* Caps/Eyebrow: Greta Medium (Ori, 2026-11-02) */
  --f-h1: italic 300 clamp(40px, 3.6459vw, 70px)/clamp(48px, 4.375vw, 84px) var(--font-hebrew); --ls-h1: 0em;
  --f-h2: italic 300 clamp(32px, 2.5vw, 48px)/clamp(40px, 3.125vw, 60px) var(--font-hebrew); --ls-h2: 0em;
  --f-h3: italic 300 clamp(24px, 1.6667vw, 32px)/clamp(32px, 2.2917vw, 44px) var(--font-hebrew); --ls-h3: 0em;
  --f-h4: italic 300 clamp(20px, 1.25vw, 24px)/clamp(28px, 1.6667vw, 32px) var(--font-hebrew); --ls-h4: 0em;
  --f-body-l: 300 clamp(20px, 1.5625vw, 30px)/clamp(30px, 2.0834vw, 40px) var(--font-hebrew); --ls-body-l: 0.01em;
  --f-body-m: 300 clamp(18px, 1.4584vw, 28px)/clamp(28px, 2.0834vw, 40px) var(--font-hebrew); --ls-body-m: 0.01em;
  --f-body-s: 300 clamp(16px, 0.9375vw, 18px)/clamp(26px, 1.4584vw, 28px) var(--font-hebrew); --ls-body-s: 0em;
  --f-label-l: 300 clamp(20px, 1.5625vw, 30px)/clamp(20px, 1.6667vw, 32px) var(--font-hebrew); --ls-label-l: 0.01em;
  --f-label-m: 500 clamp(16px, 1.0417vw, 20px)/clamp(18px, 1.0417vw, 20px) var(--font-hebrew); --ls-label-m: 0em;
  --f-small: 300 clamp(15px, 0.8334vw, 16px)/clamp(22px, 1.25vw, 24px) var(--font-hebrew); --ls-small: 0em;
  --f-legal: 300 clamp(11px, 0.625vw, 12px)/clamp(15px, 0.8334vw, 16px) var(--font-hebrew); --ls-legal: 0em;
  /* Layout: fluid below 1024; desktop sits on the site-kit 16-column grid (see the ≥1024 block below).
     Spacing and sizes on 8, line heights on 4; exact at 1920 (and at 1440 for the Layout tokens). */
  --margin: clamp(20px, 3.646vw, 70px);
  --gutter: clamp(12px, 1.5625vw, 30px);
  --section-y: clamp(72px, calc(6.6667vw + 16px), 144px);
  --header-h: clamp(64px, 5vw, 96px);
  --hairline: 1px;
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .35s; --t-med: .7s; --t-slow: 1.2s;
}
/* semantic colour, Dark is the default (the deck) */
:root, [data-theme="dark"] {
  --bg: var(--c-charcoal); --surface: var(--c-black); --fg: var(--c-white); --fg-2: var(--a-white-60);
  --fg-dim: var(--a-white-10); --line: var(--a-white-15); --line-strong: var(--c-white);
}
[data-theme="light"] {
  --bg: var(--c-mist); --surface: var(--c-white); --fg: var(--c-charcoal); --fg-2: rgba(26,26,26,.62); /* 4.75:1 on mist (60% was 4.43) */
  --fg-dim: var(--a-char-10); --line: var(--a-char-15); --line-strong: var(--c-charcoal);
}
[data-theme="paper"] {
  --bg: var(--c-white); --surface: var(--c-mist); --fg: var(--c-charcoal); --fg-2: rgba(26,26,26,.62);
  --fg-dim: var(--a-char-10); --line: var(--a-char-15); --line-strong: var(--c-charcoal);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--c-green) var(--c-charcoal); } /* the ECLECT swatch on charcoal */
::-webkit-scrollbar { width: 12px; height: 12px; } /* Safari; Chrome and Firefox use scrollbar-color */
::-webkit-scrollbar-track { background: var(--c-charcoal); }
::-webkit-scrollbar-thumb { background: var(--c-green); border: 3px solid var(--c-charcoal); }
::-webkit-scrollbar-thumb:hover { background: var(--c-sage); }
body { margin: 0; background: var(--c-charcoal); color: var(--fg); font-family: var(--font-hebrew); font-weight: 300; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
html { scroll-padding-top: var(--header-h); } /* a focused element scrolled into view never lands under the fixed header */
::selection { background: var(--c-sage); color: var(--c-white); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-inline-start: var(--margin); top: -100px; z-index: 200; padding: 12px 18px; background: var(--c-white); color: var(--c-charcoal); }
.skip:focus { top: 12px; }
[lang="en"], .en { font-family: var(--font-english); }
/* inline English inside RTL runs keeps its own order ("3 Rooms", not "Rooms 3"); digit-only runs fall back to LTR */
span[lang="en"], b[lang="en"], small[lang="en"], sup[lang="en"], em[lang="en"], a[lang="en"] { unicode-bidi: plaintext; }

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- type scale (DSM text styles, Mobile → Desktop) ---------- */
.t-display-xl  { font: var(--f-display-xl); letter-spacing: var(--ls-display-xl); }
.t-display-l   { font: var(--f-display-l); letter-spacing: var(--ls-display-l); }
.t-display-m   { font: var(--f-display-m); letter-spacing: var(--ls-display-m); }
.t-numeral-xl  { font: var(--f-numeral-xl); letter-spacing: var(--ls-numeral-xl); font-variant-numeric: lining-nums; }
.t-numeral-l   { font: var(--f-numeral-l); letter-spacing: var(--ls-numeral-l); font-variant-numeric: lining-nums; }
.t-numeral-m   { font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); font-variant-numeric: lining-nums; }
.t-title-l     { font: var(--f-title-l); letter-spacing: var(--ls-title-l); }
.t-title-m     { font: var(--f-title-m); letter-spacing: var(--ls-title-m); }
.t-title-s     { font: var(--f-title-s); letter-spacing: var(--ls-title-s); }
.t-tagline     { font: var(--f-tagline); letter-spacing: var(--ls-tagline); text-transform: uppercase; }
.t-caps-label  { font: var(--f-caps-label); letter-spacing: var(--ls-caps-label); text-transform: uppercase; }
.t-eyebrow     { font: var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.t-h1          { font: var(--f-h1); letter-spacing: var(--ls-h1); }
.t-h2          { font: var(--f-h2); letter-spacing: var(--ls-h2); }
.t-h3          { font: var(--f-h3); letter-spacing: var(--ls-h3); }
.t-h4          { font: var(--f-h4); letter-spacing: var(--ls-h4); }
.t-body-l      { font: var(--f-body-l); letter-spacing: var(--ls-body-l); }
.t-body-m      { font: var(--f-body-m); letter-spacing: var(--ls-body-m); }
.t-body-s      { font: var(--f-body-s); letter-spacing: var(--ls-body-s); }
.t-label-l     { font: var(--f-label-l); letter-spacing: var(--ls-label-l); }
.t-label-m     { font: var(--f-label-m); letter-spacing: var(--ls-label-m); }
.t-small       { font: var(--f-small); letter-spacing: var(--ls-small); }
.t-legal       { font: var(--f-legal); letter-spacing: var(--ls-legal); }
.t-2 { color: var(--fg-2); }
.balance { text-wrap: balance; }
.br-d { display: none; }
@media (min-width: 768px) { .br-d { display: inline; } }
.pretty { text-wrap: pretty; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.section { position: relative; background: var(--bg); color: var(--fg); padding-block: var(--section-y); }
.section--flush { padding-block: 0; }
.grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gutter); }
.stack > * + * { margin-top: var(--stack, 24px); }
.media { position: relative; overflow: hidden; background: #222; }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media--contain > img { object-fit: contain; }
/* parallax images (data-parallax ≤ 14 → ±7% of their own height) overscan the frame both ways so no edge shows */
.media > img[data-parallax] { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding-inline: var(--margin); color: var(--c-white); transition: transform .6s var(--ease-out), color .4s ease; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -24px 0; background: linear-gradient(to bottom, rgba(26,26,26,.82) 0%, rgba(26,26,26,.5) 62%, rgba(26,26,26,0) 100%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-on-light { color: var(--c-charcoal); }
.site-header.is-on-light::before { background: linear-gradient(to bottom, rgba(244,244,244,.96) 0%, rgba(244,244,244,.7) 62%, rgba(244,244,244,0) 100%); }
.site-header__logo { position: relative; display: block; width: clamp(118px, 9.1667vw, 176px); height: auto; transition: opacity .5s ease; }
.site-header__logo svg { width: 100%; height: auto; fill: currentColor; }
.site-header__actions { position: relative; display: flex; align-items: center; gap: clamp(10px, 1.25vw, 24px); margin-inline-start: auto; } /* the menu box and the logo at the start, these at the end */
/* the language toggle: the other language's name in the body type (Ori's Header, Figma 75:316); its short form on a phone */
.site-header__lang { display: inline-flex; align-items: center; min-height: 44px; font: var(--f-body-s); letter-spacing: var(--ls-body-s); color: inherit; transition: opacity .3s ease; }
.site-header__lang:hover, .site-header__lang:focus-visible { opacity: .7; }
.site-header__lang-short { display: none; }
main:focus { outline: none; } /* the skip link's target (tabindex -1): focus moves there without a ring round the page */
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 clamp(14px, 1.25vw, 24px); border: var(--hairline) solid currentColor; font: var(--f-body-s); letter-spacing: var(--ls-body-s); transition: background .3s ease, color .3s ease; }
.btn-outline { white-space: nowrap; }
/* narrow phones: the menu button keeps its bars, its word stays for screen readers */
@media (max-width: 420px) { .site-header__logo { width: 112px; } }
@media (max-width: 767px) { .site-header__lang-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-header__lang-short { display: inline; } }
@media (max-width: 379px) { .site-header { gap: 12px; } .site-header__logo { width: 100px; } .site-header__actions { gap: 8px; } .site-header .btn-outline { padding: 0 12px; } } /* 360: the box, the logo, the toggle and the button still fit */
@media (max-width: 349px) { .site-header__lang { display: none; } } /* the menu and the footer keep the toggle */
.btn-outline:hover { background: currentColor; }
.btn-outline:hover span { color: var(--c-charcoal); }
.site-header.is-on-light .btn-outline:hover span { color: var(--c-white); }
/* the header's call to action is filled; hovering hollows it */
.btn-outline--fill { background: currentColor; }
.btn-outline--fill span { color: var(--c-charcoal); transition: color .3s ease; }
.site-header.is-on-light .btn-outline--fill span { color: var(--c-white); }
.site-header .btn-outline--fill:hover { background: transparent; }
.site-header .btn-outline--fill:hover span { color: var(--c-white); }
.site-header.is-on-light .btn-outline--fill:hover span { color: var(--c-charcoal); }
/* the menu button: the bars in a bordered square as tall as the call to action (Ori, 2026-11-03); its word
   (תפריט / סגירה, Menu / Close) stays for screen readers only */
.menu-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: var(--hairline) solid currentColor; transition: background .3s ease; }
.menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) { /* a mouse fills the box; on touch a tap would leave it filled */
  .menu-btn:hover { background: currentColor; }
  .menu-btn:hover .menu-btn__bars::before, .menu-btn:hover .menu-btn__bars::after { background: var(--c-charcoal); }
  .site-header.is-on-light .menu-btn:hover .menu-btn__bars::before, .site-header.is-on-light .menu-btn:hover .menu-btn__bars::after { background: var(--c-white); }
}
.menu-btn__bars { position: relative; width: 20px; height: 8px; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease-out), top .5s var(--ease-out), background .3s ease; }
.menu-btn__bars::before { top: 0; } .menu-btn__bars::after { top: 7px; }
.is-menu-open .menu-btn__bars::before { top: 3.5px; transform: rotate(45deg); }
.is-menu-open .menu-btn__bars::after { top: 3.5px; transform: rotate(-45deg); }
.home-hero-visible .site-header__logo { opacity: 0; pointer-events: none; }
.home-hero-visible .site-header__logo:focus-visible { opacity: 1; } /* reached by Tab over the hero: show what has focus */

/* ---------- index (the deck's contents page as navigation) ---------- */
.index { direction: ltr; }
.index__list { display: flex; flex-direction: column; }
.index__item { position: relative; }
.index__link { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); padding-block: clamp(2px, .4167vw, 8px); }
.index__line { transition: color .55s var(--ease-out); }
.index__line { display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.index__text { white-space: nowrap; }
.index__tail { display: inline-flex; align-items: center; gap: .08em; margin-inline-start: clamp(20px, 3.3334vw, 64px); }
.index__thumb { position: relative; width: clamp(64px, 8.75vw, 168px); aspect-ratio: 3 / 2; overflow: hidden; background: #2a2a2a; transform-origin: 0 50%; transition: transform .8s var(--ease-out), opacity .55s var(--ease-out); }
.index__thumb img, .index__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.index__thumb video { opacity: 0; transition: opacity .5s ease; }
.index__punct { align-self: flex-end; }
/* Discover Eclect (chapter ends + home): the titles a size down (Display/M), 32 to the picture; the comma keeps Display/L */
.next-nav .index__text, .home-index .index__text, .menu .index__text { font: var(--f-display-m); letter-spacing: var(--ls-display-m); }
.next-nav .index__tail, .home-index .index__tail, .menu .index__tail { margin-inline-start: clamp(16px, 1.6667vw, 32px); } /* the menu keeps the same proportions */
.index__he { direction: rtl; flex: none; font: var(--f-h4); letter-spacing: var(--ls-h4); color: var(--fg-2); transition: color .4s ease; }
.index.is-hovering .index__item:not(.is-active) :is(.index__line, .index__he),
.index .index__item.is-dim:not(.is-active) :is(.index__line, .index__he) { color: rgba(255,255,255,.5); }
.index.is-hovering .index__item:not(.is-active) .index__thumb,
.index .index__item.is-dim:not(.is-active) .index__thumb { opacity: .3; }
.index__item.is-active .index__thumb { transform: scale(1.18); }
.index__item.is-active .index__thumb video.is-ready { opacity: 1; }
.index__item.is-active .index__he { color: var(--fg); }

/* ---------- menu overlay ---------- */
.menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 2vh) var(--margin) clamp(24px, 3vw, 56px); background: var(--c-charcoal); color: var(--c-white); clip-path: inset(0 0 100% 0); visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu__index { flex: 1; display: flex; align-items: center; }
.menu__index .index { width: 100%; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 24px; border-top: var(--hairline) solid var(--line); }
.menu__contact { display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: center; }
.menu__contact a { position: relative; }
.menu__phone { font: 300 clamp(24px, 1.6667vw, 32px)/clamp(32px, 2.0834vw, 40px) var(--font-english); } /* smaller than the contact number */
.menu__wa, .menu__addr { display: inline-flex; align-items: center; gap: 8px; }
.menu__wa svg { color: #25D366; flex: none; } /* WhatsApp green */
.menu__addr svg { flex: none; color: var(--fg-2); }
.menu__lang { display: inline-flex; align-items: center; min-height: 44px; font: var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-2); transition: color .3s ease; }
.menu__lang:hover, .menu__lang:focus-visible { color: var(--c-white); }
.menu__lang[lang="he"] { letter-spacing: .02em; } /* the English pages' switch to עברית: Hebrew takes no caps tracking */
/* *8829: the asterisk is a raised glyph beside the numerals (Figma: 15 px over 52 px digits, lifted 9) */
.phone { display: inline-flex; align-items: center; gap: .1539em; direction: ltr; }
.phone__ast { flex: none; width: .28em; height: .2875em; margin-bottom: .1731em; fill: currentColor; }
.mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask > * { display: block; }

/* ---------- buttons & links ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 14px; font: var(--f-body-s); letter-spacing: var(--ls-body-s); padding-block: 10px; border-bottom: var(--hairline) solid currentColor; }
.link-arrow svg { width: 22px; height: 10px; transform: scaleX(-1); transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: scaleX(-1) translateX(6px); }
.btn-solid { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; background: var(--fg); color: var(--bg); font: var(--f-label-m); letter-spacing: var(--ls-label-m); transition: opacity .3s ease; }
.btn-solid:hover { opacity: .85; }

/* ---------- chapter frame (deck page furniture) ---------- */
.chapter-label { font-family: var(--font-english); font-style: italic; font-weight: 300; }
.eyebrow-row { display: flex; align-items: center; gap: 16px; direction: ltr; color: var(--fg-2); margin-bottom: clamp(28px, 2.9167vw, 56px); }
.eyebrow-row__label { font: var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; white-space: nowrap; }
.eyebrow-row .rule { flex: 1; min-width: 24px; height: 1px; background: var(--line); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; direction: ltr; padding-block: clamp(24px, 3vw, 56px); border-block: var(--hairline) solid var(--line); }
.marquee__track { display: inline-flex; gap: 0; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; gap: clamp(24px, 2.9167vw, 56px); padding-inline-end: clamp(24px, 2.9167vw, 56px); }
.marquee__item svg.wordmark-svg { height: clamp(18px, 2.0834vw, 40px); width: auto; max-width: none; fill: currentColor; }
.marquee__item [data-svg] { display: block; }
.marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); flex: none; }

/* ---------- chapter-end navigation ---------- */
.next-nav { background: var(--c-charcoal); color: var(--c-white); padding-block: var(--section-y); }

/* ---------- contact (vertical form, SHE-like) ---------- */
.contact { background: var(--c-black); color: var(--c-white); padding-block: var(--section-y); }
.contact__inner { max-width: 640px; margin-inline: auto; }
.contact__head { text-align: center; margin-bottom: clamp(32px, 3.3334vw, 64px); }
.contact__head .t-h2 { margin-top: 14px; }
.contact__head p { color: var(--fg-2); }
.form { display: grid; gap: 8px; }
.field { position: relative; display: grid; gap: 8px; }
.field__label { font: var(--f-body-s); letter-spacing: var(--ls-body-s); color: var(--fg-2); }
.field__label b { color: var(--c-gold); font-weight: 500; }
.field input { width: 100%; min-height: 48px; padding: 6px 0; background: transparent; border: 0; border-bottom: var(--hairline) solid var(--a-white-60); border-radius: 0; font: var(--f-body-s); letter-spacing: var(--ls-body-s); color: var(--c-white); outline: none; transition: border-color .3s ease; text-align: start; }
.field input::placeholder { color: rgba(255,255,255,.5); } /* text/tertiary, 5.3:1 on black (40% was 3.7) */
.field input:focus { border-bottom-color: var(--c-white); box-shadow: 0 1px 0 var(--c-white); } /* focus: the underline doubles to 2 px (60% → 100% alone was too faint to see) */
[dir="rtl"] .field input[type="tel"], [dir="rtl"] .field input[type="email"] { direction: ltr; text-align: right; }
.field__error { min-height: 1em; font: var(--f-small); letter-spacing: var(--ls-small); color: #F28B6E; }
.field.is-invalid input { border-bottom-color: #F28B6E; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: var(--hairline) solid var(--a-white-60); font: var(--f-small); letter-spacing: var(--ls-small); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.chip input:checked + span { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.chip input:focus-visible + span { outline: 1px solid var(--c-white); outline-offset: 3px; }
.check { display: flex; gap: 12px; align-items: flex-start; font: var(--f-small); letter-spacing: var(--ls-small); color: var(--fg-2); cursor: pointer; }
.check input { flex: none; appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: var(--hairline) solid var(--a-white-60); background: transparent; cursor: pointer; }
.check input:checked { background: var(--c-white); box-shadow: inset 0 0 0 4px var(--c-black); }
.check input:focus-visible { outline: 1px solid var(--c-white); outline-offset: 3px; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.form .btn-solid { width: 100%; }
/* sending a lead (api/lead.php): the button waits; if it fails, the message says so under it */
.form.is-sending .btn-solid { opacity: .6; cursor: progress; }
.form__fail { font: var(--f-small); letter-spacing: var(--ls-small); color: #F28B6E; text-align: center; margin-top: 16px; }
.form__fail:empty { display: none; }
.form__ts { display: flex; justify-content: center; } /* Turnstile: invisible; it only shows a box when it has to ask */
.form__ts:not(:empty) iframe { margin-bottom: 16px; }
.form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the bots' field */
.field--group { border: 0; margin: 0; padding: 0; }
.field--group legend { margin-bottom: 10px; }
.form__checks { display: grid; gap: 32px; padding-block: 24px; }
.form__privacy { position: relative; }
.form__privacy-error { position: absolute; top: calc(100% + 4px); inset-inline: 0; min-height: 0; } /* sits in the 32 gap, so nothing moves when it shows */
.form__sent { display: none; text-align: center; padding-block: 40px; }
.form__sent .t-h3 { margin-top: 12px; }
.contact.is-sent .form { display: none; }
.contact.is-sent .form__sent { display: block; }
.contact__direct { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px; margin-top: clamp(40px, 4vw, 72px); padding-top: clamp(28px, 2.5vw, 48px); border-top: var(--hairline) solid var(--line); }
.contact__phone { font: var(--f-numeral-m); letter-spacing: var(--ls-numeral-m); }
.contact__direct a:not(.contact__phone) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: var(--f-small); letter-spacing: var(--ls-small); }

.next-nav, .contact, .site-footer { position: relative; z-index: 2; }

/* ---------- lead dialog (the contact form over the page) ---------- */
.lead { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-white); display: none; place-items: center; overflow: hidden; }
.lead[open] { display: grid; }
.lead::backdrop { background: rgba(26,26,26,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead__panel { position: relative; width: min(calc(100% - 2 * var(--margin)), 736px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(48px, 3.3334vw, 64px) clamp(20px, 3.3334vw, 64px); background: var(--c-black); scrollbar-width: thin; }
.lead__close { position: absolute; top: 16px; inset-inline-end: 16px; width: 48px; height: 48px; display: grid; place-items: center; color: inherit; }
.lead .contact__head { margin-bottom: clamp(32px, 2.5vw, 48px); }
.lead .form__sent { padding-block: 24px; }
.lead.is-sent .form { display: none; }
.lead.is-sent .form__sent { display: block; }
@media (max-width: 767px) {
  .lead__panel { width: 100%; max-height: 100dvh; height: 100dvh; padding-top: 72px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--c-black); color: var(--fg-2); padding: clamp(28px, 2.5vw, 48px) var(--margin) clamp(24px, 2.0834vw, 40px); border-top: var(--hairline) solid var(--a-white-15); }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.site-footer .altnoyland-svg { width: clamp(150px, 10.8334vw, 208px); height: auto; color: var(--c-white); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 26px; font: var(--f-small); letter-spacing: var(--ls-small); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--c-white); }
.site-footer__lang { font-family: var(--font-hebrew); } /* "English" in the links' Greta, not the English display face its lang tag would give it */
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; margin-top: 22px; }
.site-footer .t-legal { max-width: 940px; color: var(--fg-2); }
.credits { display: flex; align-items: center; gap: 8px; font: 300 clamp(11px, 0.625vw, 12px)/clamp(15px, 0.8334vw, 16px) "DM Sans", var(--font-hebrew); color: rgba(255,255,255,.5); white-space: nowrap; } /* 5.3:1 (40% was 3.7) */
.credits b { font-weight: 700; line-height: 0; } /* TOOLBOX and BRAVE: DM Sans Bold (Ori, 2026-11-02); the 16 line box stays */
.credits__sep { font-family: var(--font-hebrew); }
.credits a { color: inherit; transition: color .3s ease; }
.credits a:hover, .credits a:focus-visible { color: rgba(255,255,255,.85); }

/* ---------- desktop on the site-kit grid (≥1024) ----------
   16 columns, 16px gutters, centred: margins 88 at 1440 and 136 at 1920 (columns 64 → 88), content capped at 1648.
   Component sizes and spacing on 8. A 1px rule sits inside its padding (like a Figma stroke), so rows keep the rhythm.
   Mobile keeps its own values until the mobile pass. */
@media (min-width: 1024px) {
  :root { --margin: max(calc(10vw - 56px), calc(50vw - 824px)); --gutter: 16px; }
  .btn-outline, .chip span, .contact__direct a:not(.contact__phone) { min-height: 48px; }
  .btn-outline { gap: 8px; }
  .menu-btn { width: 48px; height: 48px; }
  .site-header, .site-header__actions { gap: clamp(24px, 1.6667vw, 32px); } /* the box and the logo, the toggle and the button a little apart: 24 at 1440, 32 at 1920 */
  .menu-btn__bars { width: 24px; }
  .menu { padding-top: calc(var(--header-h) + 24px); }
  .menu__foot { gap: 16px 40px; padding-top: 23px; }
  .menu__contact { gap: 16px 40px; }
  .btn-solid { padding: 0 32px; }
  .marquee { padding-block: calc(clamp(24px, 2.9167vw, 56px) - 1px); }
  .contact__inner { max-width: calc((100% - 15 * var(--gutter)) * 6 / 16 + 5 * var(--gutter)); } /* six columns, centred */
  .contact__head .t-h2 { margin-top: 16px; }
  .field--group legend { margin-bottom: 8px; }
  .form__sent .t-h3 { margin-top: 16px; }
  .chips { gap: 8px; }
  .chip span { padding: 0 16px; }
  .check { gap: 16px; }
  .check input { width: 24px; height: 24px; margin: 0; }
  .check input:checked { box-shadow: inset 0 0 0 6px var(--c-black); }
  .contact__direct { gap: 16px 40px; padding-top: calc(clamp(28px, 2.5vw, 48px) - 1px); }
  .contact__direct a:not(.contact__phone) { gap: 8px; }
  .contact__direct svg { width: 16px; height: 16px; }
  .site-footer { padding-top: calc(clamp(28px, 2.5vw, 48px) - 1px); }
  .site-footer__row { gap: 16px 40px; }
  .site-footer nav { gap: 8px 24px; }
  .site-footer__base { gap: 16px 40px; margin-top: 24px; }
}

/* ---------- reveals (initial states only when JS + motion are on) ---------- */
.js-motion [data-hero-part] { visibility: hidden; } /* hero parts stay hidden until their entrance (no show-hide-show) */
.js-motion [data-reveal="img"] { clip-path: inset(0 0 100% 0); }
.js-motion [data-reveal="img"] > img, .js-motion [data-reveal="img"] > video { transform: scale(1.18); }
.js-motion [data-reveal="fade"] { opacity: 0; transform: translateY(28px); }
.js-motion [data-reveal="lines"], .js-motion [data-reveal="words"], .js-motion [data-reveal="track"], .js-motion [data-reveal="mark"] { opacity: 0; } /* not visibility: what hasn't scrolled in stays readable to screen readers */
.rw { display: inline-block; } /* a word of a words reveal */
.split-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }

/* ---------- page transition cover ---------- */
.cover { position: fixed; z-index: 90; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; background: var(--c-charcoal); }
.cover img, .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.is-active { visibility: visible; pointer-events: auto; }
/* arriving through a transition: the cover is up from the first paint (lifted by consumeCover; gone by itself if JS fails) */
html.is-arriving .cover { visibility: visible; background: var(--c-charcoal) var(--arrive-img, none) 50% 50% / cover no-repeat; animation: arriveFail 0s 6s forwards; }
@keyframes arriveFail { to { visibility: hidden; } }

/* ---------- utilities ---------- */
.hide-mobile { } .show-mobile { display: none; }
@media (max-width: 767px) {
  .hide-mobile { display: none !important; } .show-mobile { display: initial; }
  .index__link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 12px; border-top: var(--hairline) solid var(--line); }
  .index__he { order: -1; justify-self: end; }
  .index__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 14px; }
  .index__text { white-space: normal; }
  .index .t-display-l { font: var(--f-display-m); letter-spacing: var(--ls-display-m); }
  /* phones (Ori's Next chapter, Mobile): titles 20 on a 42 line, no comma — the menu and Discover Eclect alike */
  .index .index__text { font: 300 20px/42px var(--font-english); letter-spacing: -0.01em; }
  .index__punct { display: none; }
  .index__tail { margin-inline-start: 0; align-self: end; padding-bottom: .12em; }
  .index__thumb { width: 72px; }
  .index__item.is-active .index__thumb { transform: none; }
  .menu__foot { flex-direction: column; align-items: flex-start; }
  /* phone footer: one centred column — the Altnoyland mark, the links, ©, the fine print, the credits */
  .site-footer__row, .site-footer__base { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer__row { gap: 12px; }
  .site-footer nav { justify-content: center; gap: 0 24px; }
  .site-footer__base { gap: 16px; margin-top: 16px; }
  .site-footer .t-legal { max-width: 36em; }
  .credits { justify-content: center; }
}
/* ---------- motion pause (WCAG 2.2.2): a tiny toggle in the bottom-right corner of each film (Ori: "as tiny as possible");
   just the icon, 8 px, on a 24 px target; like any media control it doesn't mirror in English ---------- */
.motion-toggle { position: absolute; z-index: 3; bottom: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--c-white); opacity: .45; transition: opacity .3s ease; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; }
.motion-toggle:focus-visible { outline-offset: 0; }
/* pause = two hairline bars; play (when paused) = a small triangle pointing right */
.motion-toggle__ic { display: block; width: 5px; height: 8px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.motion-toggle[aria-pressed="true"] .motion-toggle__ic { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; margin-left: 1px; }
html.is-paused *, html.is-paused *::before, html.is-paused *::after { animation-play-state: paused !important; }

/* ---------- cookie notice, as on Altnoyland's YOKO site: shown on entry until "OK" (continuing to browse after it counts as
   consent: Privacy Protection Authority opinion, 25 Feb 2026, §42). A white card 32 from the reading-start corner —
   bottom right in Hebrew, as on YOKO, bottom left in English, where the home hero's scroll cue isn't. 32 keeps it just
   clear of the films' pause toggle (24 square, 8 in from the corner; Ori: "further to the bottom right"); a bar across
   the foot on phones. Under the menu (55) and the header,
   the page-transition cover and the preloader; it steps aside while the menu or a dialog is open and while the contact
   form is on screen (.is-aside, set by app.js). ---------- */
.cookie-notice { position: fixed; z-index: 50; inset-inline-start: 32px; bottom: 32px; display: flex; align-items: center; gap: 16px; width: 440px; max-width: calc(100vw - 64px); padding: 16px 24px; background: var(--c-white); color: var(--c-charcoal); border: var(--hairline) solid rgba(92,111,103,.35); box-shadow: 0 8px 24px rgba(26,26,26,.1); font: 300 14px/20px var(--font-hebrew); letter-spacing: 0; text-align: start; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s ease, transform .5s var(--ease-out), visibility 0s linear .5s; }
.cookie-notice[hidden] { display: none; }
.cookie-notice.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cookie-notice.is-shown.is-aside, body.is-menu-open .cookie-notice.is-shown, body:has(dialog[open]) .cookie-notice.is-shown { opacity: 0; visibility: hidden; transform: translateY(16px); transition-delay: 0s, 0s, .5s; }
.cookie-notice p { flex: 1 1 auto; min-width: 0; }
.cookie-notice a { color: var(--c-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; } /* the ECLECT swatch: 5.3:1 on white */
.cookie-notice__ok { flex: none; min-height: 40px; padding: 0 16px; border: var(--hairline) solid var(--c-green); color: var(--c-green); font: 500 14px/20px var(--font-hebrew); transition: background .2s ease, color .2s ease; }
.cookie-notice__ok:hover, .cookie-notice__ok:focus-visible { background: var(--c-green); color: var(--c-white); }
.cookie-notice :focus-visible { outline: 1px solid var(--c-charcoal); outline-offset: 3px; }
html.has-cookie-notice { scroll-padding-bottom: var(--cookie-h, 0px); } /* a control focused by Tab never comes to rest under it */
html:not(.js-motion) .cookie-notice { transform: none; transition: none; }
@media (max-width: 479px) {
  .cookie-notice { inset-inline: var(--margin); bottom: var(--margin); width: auto; max-width: none; gap: 12px; padding: 12px 16px; }
  .cookie-notice__ok { padding: 0 12px; }
  /* while it shows, the films' pause toggle and the home hero's scroll cue ride up above it */
  .motion-toggle { transition: opacity .3s ease, translate .5s var(--ease-out); }
  .hero__cue { transition: translate .5s var(--ease-out); }
  .hero__dev { transition: translate .5s var(--ease-out); }
  html.has-cookie-notice .motion-toggle, html.has-cookie-notice .hero__cue { translate: 0 calc(-1 * var(--cookie-h, 0px)); }
  html.has-cookie-notice .hero__dev { translate: -50% calc(-1 * var(--cookie-h, 0px)); } /* -50%: it is centred by its translate */
}
@media print { .cookie-notice { display: none; } }

/* ---------- English (en/, LTR) ----------
   Grids, flex rows and logical properties mirror by themselves; these are the few physical rules that don't. */
[dir="ltr"] .link-arrow svg { transform: none; }
[dir="ltr"] .link-arrow:hover svg { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}