/* =====================================================================
   Rotem Klaperman, portfolio. Same system as the CV:
   raspberry / butter / forest / bubblegum / powder / blush, Archivo + League Gothic.
   Logical properties everywhere so dir="rtl" mirrors the layout.
   ===================================================================== */

:root {
  --raspberry: #9E2548;
  --raspberry-hi: #D63A68;
  --butter: #F2EC94;
  --forest: #182B22;
  --forest-2: #20392d;
  --bubble: #F393C0;
  --powder: #A9C1DF;
  --powder-hi: #C3D5EB;
  --blush: #FBE6E4;
  --cream: #FBF7EC;

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --num: "League Gothic", "Archivo", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;

  --g: clamp(16px, 2.3vw, 40px);
  --hdr: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --hfg: var(--butter);
  --hbg: var(--forest);
}
html[lang="he"] {
  --sans: "Noto Sans Hebrew", "Archivo", system-ui, sans-serif;
  --display: "Noto Sans Hebrew", "Archivo", sans-serif;
  --serif: "Frank Ruhl Libre", "Instrument Serif", serif;
}
@media (max-width: 700px) { :root { --hdr: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--forest); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--cream); color: var(--forest);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, figure, p, h1, h2, h3 { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
bdi { unicode-bidi: isolate; direction: ltr; }
::selection { background: var(--butter); color: var(--forest); }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; box-shadow: 0 0 0 6px var(--butter); border-radius: 4px; }

.label {
  font-family: "Archivo", var(--sans); font-stretch: 125%; font-weight: 600;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3;
}
html[lang="he"] .label { font-family: var(--sans); font-stretch: 100%; letter-spacing: .02em; font-size: 12.5px; font-weight: 600; }

.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 200; padding: 10px 16px; background: var(--butter); color: var(--forest); border-radius: 99px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* --------------------------------------------------------------- grain, cursor, curtain, toast */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; contain: strict; }
.grain::before {
  content: ""; position: absolute; inset: -50%; opacity: .11; mix-blend-mode: multiply;
  background-image: url("../img/grain.png"); background-size: 220px; animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0) } 20% { transform: translate(-4%, 3%) } 40% { transform: translate(3%, -5%) }
  60% { transform: translate(-2%, 6%) } 80% { transform: translate(5%, 2%) } 100% { transform: translate(0, 0) }
}

html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; display: none; opacity: 0; transition: opacity .3s; }
.cursor.is-live { opacity: 1; }
html.has-cursor .cursor { display: block; }
.cursor-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--raspberry); transition: opacity .2s, transform .3s var(--ease); }
.cursor-ring {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid var(--raspberry); display: grid; place-items: center;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s;
}
.cursor-label { font-family: "Archivo"; font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--butter); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--ease); white-space: nowrap; }
html[lang="he"] .cursor-label { font-family: var(--sans); font-stretch: 100%; letter-spacing: 0; font-size: 13px; }
.cursor.on-dark .cursor-ring { border-color: var(--butter); }
.cursor.on-dark .cursor-dot { background: var(--butter); }
.cursor.is-label .cursor-ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--raspberry); border-color: var(--raspberry); }
.cursor.is-label .cursor-label { opacity: 1; transform: none; }
.cursor.is-label .cursor-dot { opacity: 0; }
.cursor.is-link .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: color-mix(in srgb, var(--raspberry) 14%, transparent); }
.cursor.is-hidden { opacity: 0; }
.cursor.is-down .cursor-ring { transform: scale(.85); }

.curtain { position: fixed; inset: 0; z-index: 110; pointer-events: none; visibility: hidden; }
.curtain-in { position: absolute; inset: 0; background: var(--cc, var(--raspberry)); color: var(--cink, var(--butter)); display: grid; place-items: center; clip-path: inset(100% 0 0 0); }
.curtain-label { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; font-size: clamp(54px, 13vw, 220px); text-transform: uppercase; line-height: .82; text-align: center; padding: 0 var(--g); }
html[lang="he"] .curtain-label { font-family: var(--display); font-stretch: 62.5%; }
html.is-entering .curtain { visibility: visible; }
html.is-entering .curtain-in { clip-path: inset(0 0 0 0); background: var(--enter-c); color: var(--enter-ink); }

.toast {
  position: fixed; z-index: 115; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 220%); visibility: hidden;
  background: var(--butter); color: var(--forest); padding: 12px 20px; border-radius: 99px; font-weight: 700; pointer-events: none;
  transition: transform .6s var(--ease);
}
.toast.show { transform: translate(-50%, 0) rotate(-2deg); visibility: visible; }

/* --------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--g); padding-top: env(safe-area-inset-top); color: var(--hfg);
  transition: color .45s var(--ease), transform .6s var(--ease);
}
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hdr-bg, transparent); opacity: 0; transition: opacity .4s, background-color .45s; }
body.scrolled .hdr::before { opacity: 1; }
body.menu-open .hdr::before { opacity: 0; }
body.hdr-light { --hfg: var(--forest); --hbg: var(--butter); }
body.hdr-dark, body.hdr-busy { --hfg: var(--butter); --hbg: var(--forest); }
.hdr-nav, .logo-word { transition: background-color .45s, padding .45s var(--ease); border-radius: 99px; }
body.hdr-busy .hdr-nav, body.hdr-busy .logo-word { background: var(--forest); }
body.hdr-busy .hdr-nav { padding: 10px 20px; margin-top: -2px; }
body.hdr-busy .logo-word { padding: 8px 14px; }
body.hdr-busy .lang { background: var(--forest); }
.hdr-logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hfg); color: var(--hbg); font-family: "Archivo"; font-stretch: 62%; font-weight: 900; font-size: 22px; letter-spacing: -.02em;
  transition: background-color .45s, color .45s, transform .6s var(--ease);
}
.hdr-logo:hover .logo-mark { transform: rotate(-12deg) scale(1.06); }
.logo-word { font-family: "Archivo"; font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
html[lang="he"] .logo-word { font-family: var(--sans); font-stretch: 100%; font-size: 15px; letter-spacing: 0; }
.hdr-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(18px, 3vw, 48px); }
.hdr-link { display: flex; align-items: flex-start; gap: 6px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.hdr-link .n { font-family: var(--num); font-size: 12px; letter-spacing: .04em; opacity: .7; margin-top: -2px; }
.roll { position: relative; display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25; }
.roll-a, .roll-b { display: block; transition: transform .55s var(--ease); }
.roll-b { position: absolute; inset: 0; transform: translateY(105%); }
a:hover > .roll .roll-a, .hdr-link:focus-visible .roll-a { transform: translateY(-105%); }
a:hover > .roll .roll-b, .hdr-link:focus-visible .roll-b { transform: translateY(0); }
.hdr-end { display: flex; align-items: center; gap: 10px; }
.hdr-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 10px 6px; }
.hdr-back .i-arrow { width: 16px; transform: scaleX(-1); transition: transform .4s var(--ease); }
html[dir="rtl"] .hdr-back .i-arrow { transform: none; }
.hdr-back:hover .i-arrow { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .hdr-back:hover .i-arrow { transform: translateX(4px); }

.lang {
  position: relative; display: inline-grid; grid-auto-flow: column; align-items: center; height: 40px; padding: 4px; border-radius: 99px;
  border: 1.5px solid currentColor; font-weight: 800; font-size: 12px; letter-spacing: .04em;
}
.lang-o { position: relative; z-index: 1; width: 38px; text-align: center; transition: color .4s var(--ease); font-family: var(--sans); }
.lang-knob { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: 38px; border-radius: 99px; background: var(--hfg); transition: transform .55s var(--ease), background-color .45s; }
html[lang="en"] .lang-o[data-l="en"], html[lang="he"] .lang-o[data-l="he"] { color: var(--hbg); }
html[lang="he"] .lang-knob { transform: translateX(-38px); }
.lang:hover .lang-knob { transform: scaleX(1.12); }
html[lang="he"] .lang:hover .lang-knob { transform: translateX(-38px) scaleX(1.12); }

.cta {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 99px;
  background: var(--hfg); color: var(--hbg); font-weight: 800; font-size: 14px; transition: background-color .45s, color .45s;
}
.cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bubble); box-shadow: 0 0 0 0 var(--bubble); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble) 70%, transparent) } 70% { box-shadow: 0 0 0 9px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
.menu-btn { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 16px; border-radius: 99px; background: var(--hfg); color: var(--hbg); font-weight: 800; font-size: 14px; transition: background-color .45s, color .45s; }
html[dir="rtl"] .menu-btn { padding: 0 16px 0 8px; }
.menu-btn-i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--hbg); }
.menu-btn-i i { position: absolute; left: 7px; right: 7px; height: 2px; background: var(--hfg); border-radius: 2px; transition: transform .5s var(--ease); }
.menu-btn-i i:first-child { top: 10px; } .menu-btn-i i:last-child { top: 14px; }
.menu-open .menu-btn-i i:first-child { transform: translateY(2px) rotate(45deg); }
.menu-open .menu-btn-i i:last-child { transform: translateY(-2px) rotate(-45deg); }

@media (max-width: 1020px) {
  .hdr-nav, .cta, .logo-word { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 420px) { .hdr-back > span:not(.i-back) { display: none; } }

/* mobile menu: stacked folder tabs */
.menu { position: fixed; inset: 0; z-index: 65; background: var(--forest); color: var(--butter); visibility: hidden; display: flex; flex-direction: column; padding: calc(var(--hdr) + 20px) var(--g) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; clip-path: inset(0 0 100% 0); }
.menu-tabs { display: flex; flex-direction: column; margin-top: 10px; }
.menu-tab {
  position: relative; display: flex; align-items: baseline; gap: 14px; background: var(--c); color: var(--ink);
  padding: 18px 22px 30px; margin-top: -14px; border-radius: 18px 18px 0 0; font-family: "Archivo"; font-stretch: 62%; font-weight: 900;
  font-size: clamp(54px, 15vw, 96px); line-height: .86; text-transform: uppercase;
}
html[lang="he"] .menu-tab { font-family: var(--display); font-stretch: 62.5%; }
.menu-tab:first-child { margin-top: 0; }
.menu-tab .n { font-family: var(--num); font-size: 18px; font-weight: 400; letter-spacing: .04em; }
.menu-projects { margin-top: 28px; }
.menu-projects ul { margin-top: 10px; display: grid; gap: 6px; }
.menu-projects a { display: flex; gap: 12px; align-items: baseline; font-size: 20px; font-weight: 700; }
.menu-projects .n { font-family: var(--num); font-size: 15px; opacity: .6; }
.menu-foot { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; opacity: .85; }

/* --------------------------------------------------------------- shared atoms */
.sticker { width: var(--st, 124px); aspect-ratio: 1; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.st-bg { fill: var(--butter); }
.st-txt { fill: var(--forest); font-family: "Archivo"; font-stretch: 125%; font-weight: 800; font-size: 8.3px; letter-spacing: 1.2px; }
html[lang="he"] .st-txt { font-family: var(--sans); font-stretch: 100%; font-size: 9.6px; letter-spacing: .4px; }
.st-star { stroke: var(--raspberry); }

.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px; border-radius: 99px;
  border: 1.5px solid currentColor; font-weight: 800; font-size: 15px; transition: background-color .4s, color .4s;
}
.btn svg { width: 18px; }
.btn:hover { background: var(--forest); color: var(--butter); border-color: var(--forest); }
.i-arrow { width: 1em; height: 1em; flex: none; }
html[dir="rtl"] .i-arrow { transform: scaleX(-1); }

.tag { display: inline-block; padding: 5px 10px; border: 1px solid currentColor; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

/* split text masks */
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* --------------------------------------------------------------- HERO */
.hero {
  position: relative; height: 100svh; min-height: 600px; overflow: clip;
  background: var(--raspberry); color: var(--butter);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 70% 100%, transparent 40%, rgba(40, 6, 18, .28)); }
.hero-top {
  position: absolute; z-index: 6; top: calc(var(--hdr) + 3.2vh); inset-inline: var(--g);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.hero-name {
  font-family: "Archivo"; font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 76px); line-height: .9; letter-spacing: -.035em;
}
.hero-name .ln { display: block; }
html[lang="he"] .hero-name { font-family: var(--display); font-stretch: 100%; letter-spacing: -.02em; font-weight: 900; line-height: .95; }
.hero-side { text-align: end; display: grid; gap: 14px; justify-items: end; padding-top: 6px; }
.hero-role { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 36px); line-height: 1; }
html[lang="he"] .hero-role { font-style: normal; font-weight: 500; }
.hero-meta { display: grid; gap: 6px; justify-items: end; opacity: .9; }
.hero-meta .open { display: inline-flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--bubble); animation: pulse 2.2s infinite; }

.hero-stage { position: absolute; inset: 0; }
.giant { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; line-height: 1; }
.giant-w {
  display: block; font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: var(--giant, 34vw); line-height: .74; letter-spacing: -.012em; white-space: nowrap; transform-origin: 50% 100%;
}
html[lang="he"] .giant-w { font-family: var(--display); font-stretch: 62.5%; line-height: .8; letter-spacing: 0; }
.giant-solid { z-index: 1; color: var(--butter); }
.giant-ghost { z-index: 4; color: transparent; -webkit-text-stroke: 1.5px var(--butter); }
.giant .ch { display: inline-block; will-change: transform; }

.portrait-wrap { position: absolute; z-index: 3; bottom: var(--pb, -4svh); inset-inline-end: var(--px, 7vw); height: var(--ph, min(50svh, 40vw)); aspect-ratio: 1.1236; pointer-events: none; }
.portrait { width: 100%; height: 100%; object-fit: contain; object-position: bottom; transform-origin: 50% 100%; }
html[dir="rtl"] .portrait { transform: scaleX(-1); }

.teasers { position: absolute; inset: 0; z-index: 2; }
.teaser {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1vw); aspect-ratio: var(--ar);
  translate: -50% -50%; rotate: var(--r); border-radius: 4px; overflow: hidden; will-change: transform;
}
html[dir="rtl"] .teaser { left: auto; right: calc(var(--x) * 1%); translate: 50% -50%; }
.teaser img { width: 100%; height: 100%; object-fit: cover; }

.hero-sticker { position: absolute; z-index: 7; --st: clamp(92px, 8.4vw, 132px); top: 26%; inset-inline-start: 27%; }
.scroll-cue {
  position: absolute; z-index: 7; inset-inline-start: var(--g); bottom: calc(var(--g) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 99px; background: var(--raspberry); color: var(--butter);
}
.cue-line { position: relative; width: 1.5px; height: 22px; background: color-mix(in srgb, var(--butter) 30%, transparent); overflow: hidden; }
.cue-line::after { content: ""; position: absolute; inset: 0; background: var(--butter); animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%) } 60%, 100% { transform: translateY(100%) } }

@media (max-width: 700px) {
  .hero { min-height: 560px; }
  .hero-top { flex-direction: column; gap: 14px; top: calc(var(--hdr) + 2vh); }
  .hero-side { text-align: start; justify-items: start; }
  .hero-meta { justify-items: start; }
  .hero-name { font-size: clamp(34px, 10.6vw, 60px); }
  .portrait-wrap { --ph: min(50svh, 92vw); --px: -6vw; --pb: 0px; }
  .hero-sticker { --st: 78px; top: auto; bottom: 47%; inset-inline-start: auto; inset-inline-end: 4%; }
  .teaser { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1vw); }
  html[dir="rtl"] .teaser { right: calc(var(--mx) * 1%); }
  .teaser.no-m { display: none; }
  .scroll-cue { padding: 10px 14px; }
  .scroll-cue span:not(.cue-line) { display: none; }
}

/* --------------------------------------------------------------- ARCHIVE (collage -> order -> folders) */
.archive { position: relative; background: var(--forest); color: var(--butter); }
.archive-pin { position: relative; height: 100svh; overflow: clip; }
.archive-cards { position: absolute; inset: 0; }
.card {
  position: absolute; top: 0; left: 0; width: var(--cw, 260px); aspect-ratio: var(--ar);
  transform-origin: 50% 50%; will-change: transform; border-radius: 3px; overflow: hidden; background: var(--forest-2);
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.card.ph { background: var(--c); color: var(--ink); }
.ph-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8%; }
.ph-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: calc(var(--cw, 260px) * .2); line-height: .85; }
.ph-in .i-star { position: absolute; inset-inline-end: 8%; bottom: 8%; width: 22%; color: var(--accent, currentColor); }
.ph-n { opacity: .75; }

.archive-grid-lines { position: absolute; inset: 0; pointer-events: none; }
.archive-grid-lines i { position: absolute; background: color-mix(in srgb, var(--butter) 26%, transparent); transform-origin: 0 0; }
.archive-labels { position: absolute; inset: 0; pointer-events: none; }
.archive-labels span { position: absolute; font-family: "Archivo"; font-stretch: 125%; font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; white-space: nowrap; }
.archive-labels span b { font-weight: 800; color: var(--bubble); margin-inline-end: 6px; }
.archive-labels span i { font-style: normal; }
@media (max-width: 700px) { .archive-labels span i { display: none; } .stack-label { font-size: 11px; padding: 7px 10px; gap: 6px; } }
.archive-stacks { position: absolute; inset: 0; pointer-events: none; }
.stack-label {
  position: absolute; top: 0; left: 0; display: inline-flex; max-width: 46vw; overflow: hidden; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 12px 12px 0 0;
  background: var(--c); color: var(--ink); font-family: "Archivo"; font-stretch: 100%; font-weight: 800; font-size: 13px; text-transform: uppercase; white-space: nowrap;
  opacity: 0; translate: -50% 0; outline: 1.5px solid color-mix(in srgb, var(--butter) 40%, transparent);
}
html[lang="he"] .stack-label { font-family: var(--sans); }
.stack-label .n { font-family: var(--num); font-weight: 400; font-size: 14px; }
.stack-label .cnt { font-family: var(--num); font-weight: 400; font-size: 14px; opacity: .7; }

.archive-lines { position: absolute; z-index: 5; inset-inline: var(--g); top: calc(var(--hdr) + 3vh); pointer-events: none; }
.a-line {
  position: absolute; inset-inline: 0; top: 0; font-family: "Archivo"; font-stretch: 100%; font-weight: 800;
  font-size: clamp(34px, 5.6vw, 96px); line-height: 1; letter-spacing: -.04em; text-align: center; opacity: 0;
}
html[lang="he"] .a-line { font-family: var(--display); letter-spacing: -.02em; }
.a-line .hl { background: var(--forest); color: var(--butter); padding: 0 .16em .04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.16; }
.a-line em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--bubble); }
html[lang="he"] .a-line em { font-style: normal; }

.archive-hud { position: absolute; z-index: 6; inset-inline: var(--g); bottom: calc(var(--g) * .8 + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hud-l, .hud-steps { background: var(--forest); padding: 10px 16px; border-radius: 99px; }
.hud-count { font-family: var(--num); font-size: 18px; letter-spacing: .02em; }
.hud-steps { display: flex; gap: 18px; }
.hud-steps span { opacity: .35; transition: opacity .4s; position: relative; }
.hud-steps span.on { opacity: 1; }
.hud-steps span.on::before { content: ""; position: absolute; inset-inline-start: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--bubble); }
.archive-save {
  position: absolute; z-index: 6; left: 50%; bottom: 13vh; translate: -50% 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 10px; background: color-mix(in srgb, var(--cream) 82%, transparent); color: var(--forest);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; opacity: 0;
}
.save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--raspberry); }
@media (max-width: 700px) {
  .hud-steps { gap: 14px; }
  .hud-l { display: none; }
  .hud-steps { margin-inline-start: auto; margin-inline-end: auto; }
  .archive-save { bottom: 11vh; font-size: 10px; }
}

/* --------------------------------------------------------------- WORK (folders) */
.work { position: relative; background: var(--powder); color: var(--forest); padding: calc(var(--hdr) + 10vh) var(--g) 0; overflow: clip; }
.work-head { text-align: center; display: grid; justify-items: center; gap: 18px; }
.work-k span, .about-k span { font-family: var(--num); font-size: 14px; letter-spacing: .04em; margin-inline-end: 4px; }
.work-title { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 12.5vw, 220px); line-height: .86; letter-spacing: -.035em; }
.work-title em { font-style: italic; }
html[lang="he"] .work-title { letter-spacing: -.02em; font-weight: 500; }
html[lang="he"] .work-title em { font-style: normal; font-weight: 300; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.filter {
  height: 38px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--forest); font-weight: 700; font-size: 14px;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.filter:hover { transform: translateY(-2px); }
.filter[aria-pressed="true"] { background: var(--forest); color: var(--powder); }

.folders {
  --fh: clamp(360px, 60vh, 640px); --tab-h: 58px;
  position: relative; max-width: 1480px; margin: 10vh auto 0;
}
/* static fallback (no JS / reduced motion): a plain list of folders */
.folder {
  position: relative; display: block; height: var(--fh); margin-top: calc(var(--tab-h) + 18px);
  color: var(--ink); --tabx: calc(4% + var(--i) * 21%); --dark: color-mix(in srgb, var(--c) 84%, #000);
  transition: filter .6s var(--ease), opacity .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.folders.is-js .folder { position: absolute; top: 0; left: 0; right: 0; margin: 0; will-change: transform; }
.folder-back { position: absolute; inset: 0; background: var(--dark); border-radius: 0 16px 0 0; }
html[dir="rtl"] .folder-back { border-radius: 16px 0 0 0; }
.folder-tab {
  position: absolute; bottom: 100%; inset-inline-start: var(--tabx); height: var(--tab-h); padding: 0 30px;
  display: flex; align-items: center; gap: 12px; background: var(--dark); border-radius: 18px 18px 0 0;
  font-family: "Archivo"; font-stretch: 100%; font-weight: 800; font-size: clamp(13px, 1.15vw, 17px); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
  transition: translate .6s var(--ease);
}
html[lang="he"] .folder-tab { font-family: var(--sans); font-size: clamp(15px, 1.25vw, 19px); }
.folder-tab .n { font-family: var(--num); font-weight: 400; font-size: 1.15em; opacity: .75; }
.folder-tab::before, .folder-tab::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 18px; }
.folder-tab::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 17.5px, var(--dark) 18px); }
.folder-tab::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--dark) 18px); }
.folder-front {
  position: absolute; z-index: 1; inset: 20px 0 0 0; background: var(--c); border-radius: 6px 6px 0 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 14px 2.4vw;
  padding: clamp(18px, 3.2vh, 34px) clamp(18px, 3vw, 44px);
}
.folder-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 30%); pointer-events: none; }
.folder-no { grid-row: 1 / span 3; font-family: var(--num); font-size: clamp(44px, 6vw, 96px); line-height: .8; }
.folder-main { display: grid; gap: 10px; max-width: 54%; }
.folder-title { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 7.6vw, 136px); line-height: .82; letter-spacing: -.005em; }
html[lang="he"] .folder-title { font-family: var(--display); font-stretch: 62.5%; line-height: .9; }
.folder-sub { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 30px); line-height: 1.1; opacity: .92; }
html[lang="he"] .folder-sub { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.5vw, 22px); }
.folder-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: 52%; }
.folder-go {
  grid-column: 2; justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 99px;
  background: var(--ink); color: var(--c); font-weight: 800; font-size: 15px;
}
.folder-go .i-arrow { width: 18px; transition: transform .5s var(--ease); }
.folder:hover .folder-go .i-arrow { transform: translateX(5px); }
html[dir="rtl"] .folder:hover .folder-go .i-arrow { transform: scaleX(-1) translateX(5px); }
.folder-papers { position: absolute; z-index: 2; inset: 20px 0 0 0; pointer-events: none; }
.paper {
  position: absolute; bottom: 12%; width: clamp(130px, 15vw, 240px); aspect-ratio: .8; border-radius: 3px; overflow: hidden;
  background: var(--cream); outline: 6px solid var(--cream); opacity: 0; transform: translateY(30%) rotate(0deg);
  transition: transform 1s var(--ease), opacity .6s var(--ease);
}
.paper img { width: 100%; height: 100%; object-fit: cover; }
.paper:nth-child(1) { inset-inline-end: 27%; transition-delay: .05s; }
.paper:nth-child(2) { inset-inline-end: 15%; bottom: 20%; transition-delay: .12s; }
.paper:nth-child(3) { inset-inline-end: 4%; transition-delay: .19s; }
.paper-ph { display: grid; place-items: center; color: var(--forest); }
.paper-ph .label { position: absolute; top: 12px; inset-inline-start: 12px; }
.paper-ph .i-star { width: 34%; color: var(--c); }
/* contents show on the open folder only (the others are tabs in the drawer) */
.folders.is-js .folder-front { padding-bottom: calc(var(--tab-h) + 16px); }
.folders.is-js .paper { bottom: calc(var(--tab-h) + 9%); }
.folders.is-js .paper:nth-child(2) { bottom: calc(var(--tab-h) + 16%); }
.folders.is-js .folder-front > * { opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.folders.is-js .folder.is-open .folder-front > * { opacity: 1; transform: none; }
.folders.is-js .folder.is-open .folder-front > :nth-child(2) { transition-delay: .06s; }
.folders.is-js .folder.is-open .folder-front > :nth-child(3) { transition-delay: .12s; }
.folders.is-js .folder.is-open .folder-front > :nth-child(4) { transition-delay: .18s; }
.folders.is-js .folder.is-open .paper, .folders:not(.is-js) .paper { opacity: 1; }
.folders.is-js .folder.is-open .paper:nth-child(1), .folders:not(.is-js) .paper:nth-child(1) { transform: rotate(-7deg); }
.folders.is-js .folder.is-open .paper:nth-child(2), .folders:not(.is-js) .paper:nth-child(2) { transform: rotate(3deg); }
.folders.is-js .folder.is-open .paper:nth-child(3), .folders:not(.is-js) .paper:nth-child(3) { transform: rotate(9deg); }
.folder.is-dim { opacity: .38; filter: saturate(.25); }
@media (hover: hover) {
  .folder:hover .folder-tab { translate: 0 -6px; }
  .folders.is-js .folder.is-open:hover .paper:nth-child(1) { transform: rotate(-11deg) translate(-14px, -18px); }
  .folders.is-js .folder.is-open:hover .paper:nth-child(2) { transform: rotate(1deg) translateY(-26px); }
  .folders.is-js .folder.is-open:hover .paper:nth-child(3) { transform: rotate(13deg) translate(14px, -14px); }
}

@media (max-width: 800px) {
  .folders { margin-top: 7vh; }
  .folder { --tabx: calc(3% + var(--i) * 14%); }
  .folder-tab { padding: 0 16px; font-size: 12px; gap: 8px; }
  html[lang="he"] .folder-tab { font-size: 14px; }
  .folder-front { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 12px; inset: 14px 0 0 0; }
  .folder-papers { inset: 14px 0 0 0; }
  .folder-no { display: none; }
  .folder-main, .folder-tags, .folder-go { grid-column: 1; max-width: none; }
  .folder-title { font-size: clamp(46px, 14vw, 72px); }
  .folder-go { height: 44px; padding: 0 18px; font-size: 14px; }
  .paper { width: clamp(92px, 27vw, 140px); bottom: 16%; }
  .paper:nth-child(1) { inset-inline-end: 44%; } .paper:nth-child(2) { inset-inline-end: 24%; bottom: 22%; } .paper:nth-child(3) { inset-inline-end: 5%; }
  .tag { font-size: 10.5px; padding: 4px 8px; }
  .folders.is-js .paper { bottom: calc(var(--tab-h) + 78px); }
  .folders.is-js .paper:nth-child(2) { bottom: calc(var(--tab-h) + 96px); }
}

/* --------------------------------------------------------------- ABOUT */
.about { position: relative; background: var(--blush); color: var(--forest); padding: 20vh var(--g) 16vh; }
.about-big {
  margin-top: 26px; max-width: 1300px; font-family: "Archivo"; font-stretch: 100%; font-weight: 700;
  font-size: clamp(32px, 5.1vw, 92px); line-height: 1.02; letter-spacing: -.045em;
}
html[lang="he"] .about-big { font-family: var(--display); letter-spacing: -.025em; line-height: 1.08; }
.about-big em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--raspberry); }
html[lang="he"] .about-big em { font-style: normal; font-weight: 500; }
.about-big .w { opacity: .14; }
.about-grid { margin-top: 13vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; border-top: 1.5px solid var(--forest); padding-top: 26px; }
.about-col { display: grid; align-content: start; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.about-col h3 { color: var(--raspberry); }
.about-strong { font-weight: 800; font-size: 19px; line-height: 1.2; }
.about-list li { font-weight: 600; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--forest) 18%, transparent); }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.tool { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; font-family: "Archivo"; transition: rotate .6s var(--ease), scale .6s var(--ease); }
.ic.c1 { background: var(--raspberry); color: var(--butter); }
.ic.c2 { background: var(--forest); color: var(--butter); }
.ic.c3 { background: var(--bubble); color: var(--forest); }
.ic.c5 { background: var(--butter); color: var(--forest); outline: 1.5px solid var(--forest); outline-offset: -1.5px; }
.tool:hover .ic { rotate: -12deg; scale: 1.12; }
.cv-row { margin-top: 9vh; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; } .about { padding-top: 14vh; } }

/* --------------------------------------------------------------- MARQUEE */
.marquee { background: var(--raspberry); color: var(--butter); overflow: clip; padding: 2.4vh 0; }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-group { display: flex; align-items: center; flex: none; }
.mq-w { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 9vw, 150px); line-height: .9; padding: 0 .28em; white-space: nowrap; }
html[lang="he"] .mq-w { font-family: var(--display); font-stretch: 62.5%; }
.mq-group .i-star { width: clamp(30px, 4vw, 64px); color: var(--bubble); flex: none; }
html[dir="rtl"] .mq-track { flex-direction: row-reverse; }

/* --------------------------------------------------------------- CONTACT */
.contact { position: relative; background: var(--forest); color: var(--butter); overflow: clip; padding: calc(var(--hdr) + 6vh) var(--g) 8vh; min-height: 100svh; display: grid; grid-template-rows: auto auto; }
.contact-stage { position: relative; height: max(86svh, 640px); }
.contact-giant { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.cg { display: block; font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(110px, 22vw, 420px); line-height: .76; letter-spacing: -.01em; }
html[lang="he"] .cg { font-family: var(--display); font-stretch: 62.5%; line-height: .84; }
.cg-2 { align-self: flex-end; color: transparent; -webkit-text-stroke: 1.5px var(--butter); }
.halftone-wrap { position: absolute; z-index: 2; top: 4%; bottom: 0; left: 64%; width: min(50vh, 92vw); translate: -50% 0; }
html[dir="rtl"] .halftone-wrap { left: 36%; }
.halftone { width: 100%; height: 100%; touch-action: pan-y; }
.halftone-fallback { position: absolute; inset: auto 0 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; pointer-events: none; }
html:not(.js) .halftone-fallback, .no-canvas .halftone-fallback { opacity: 1; }
.contact-sticker { position: absolute; z-index: 3; --st: clamp(90px, 8vw, 130px); inset-inline-end: 6%; top: 34%; }
.contact-sticker .st-bg { fill: var(--bubble); }
.contact-info {
  position: relative; z-index: 3; display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 32px 6vw;
  margin-top: 5vh; padding-top: 28px; border-top: 1.5px solid color-mix(in srgb, var(--butter) 35%, transparent);
}
.contact-lead { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.8vw, 46px); line-height: 1.06; max-width: 18ch; }
html[lang="he"] .contact-lead { font-style: normal; font-weight: 500; }
.email { grid-column: 1; text-align: start; display: grid; gap: 6px; }
.email-t { font-family: "Archivo"; font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 2.7vw, 46px); letter-spacing: -.04em; line-height: 1; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); padding-bottom: 6px; }
html[dir="rtl"] .email-t { background-position: 100% 100%; }
.email:hover .email-t { background-size: 100% 2px; }
.email-hint { opacity: .6; }
.contact-links { grid-column: 2; grid-row: 1 / span 2; display: grid; }
.contact-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--butter) 28%, transparent); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); transition: color .3s, padding .5s var(--ease); }
.contact-links a:hover { color: var(--bubble); padding-inline-start: 10px; }
.contact-links .i-arrow { width: 20px; transform: rotate(-45deg); transition: transform .5s var(--ease); }
html[dir="rtl"] .contact-links .i-arrow { transform: scaleX(-1) rotate(-45deg); }
.contact-links a:hover .i-arrow { transform: rotate(0); }
html[dir="rtl"] .contact-links a:hover .i-arrow { transform: scaleX(-1); }
@media (max-width: 800px) {
  .contact-stage { height: min(132vw, 76svh); }
  .halftone-wrap { top: 15%; left: 62%; width: min(66vw, 46svh); }
  html[dir="rtl"] .halftone-wrap { left: 38%; }
  .contact-sticker { inset-inline-end: 2%; top: 46%; }
  .contact-info { grid-template-columns: 1fr; }
  .contact-links { grid-column: 1; grid-row: auto; }
}

/* --------------------------------------------------------------- FOOTER */
.ftr { background: var(--forest); color: var(--butter); padding: 0 var(--g) calc(22px + env(safe-area-inset-bottom)); }
.ftr-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--butter) 22%, transparent); opacity: .85; }
.ftr-top { display: inline-flex; align-items: center; gap: 8px; }
.ftr-top .i-arrow { width: 14px; transform: rotate(-90deg); }
@media (max-width: 700px) { .ftr-mid { display: none; } }

/* --------------------------------------------------------------- PROJECT PAGES */
body[data-page="project"] { background: var(--c, var(--cream)); }
.proj { background: var(--cream); }
.p-hero { position: relative; background: var(--c); color: var(--ink); padding: calc(var(--hdr) + 9vh) var(--g) 6vh; }
.p-tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px 12px 0 0; border: 1.5px solid currentColor; border-bottom: 0; }
.p-tab .n { font-family: var(--num); font-size: 16px; letter-spacing: .02em; }
.p-title { margin-top: 3vh; font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(76px, 15.5vw, 300px); line-height: .8; letter-spacing: -.005em; }
html[lang="he"] .p-title { font-family: var(--display); font-stretch: 62.5%; line-height: .9; }
.p-title-in { display: block; }
.p-sub { margin-top: 3vh; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 44px); line-height: 1.05; }
html[lang="he"] .p-sub { font-style: normal; font-weight: 500; }
.p-meta { margin-top: 7vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 3vw; border-top: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); padding-top: 22px; }
.p-meta dt { opacity: .7; margin-bottom: 8px; }
.p-meta dd { font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.p-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-hero-media { background: linear-gradient(var(--c) 50%, var(--cream) 50%); padding: 0 var(--g); }
.p-hero-fig { position: relative; overflow: clip; border-radius: 4px; aspect-ratio: 16 / 9; max-height: 92svh; width: 100%; }
.p-hero-fig img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform-origin: 50% 50%; }
.p-hero-ph { background: color-mix(in srgb, var(--c) 80%, #fff); color: var(--ink); display: grid; place-items: center; }
.p-hero-ph .i-star { position: absolute; width: 14%; inset-inline-end: 5%; bottom: 8%; color: var(--accent); }

.p-body { padding: 0 var(--g); }
.p-sec { padding: 14vh 0 0; }
.p-k { color: var(--raspberry); margin-bottom: 22px; }
.p-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 3vw; }
.p-intro .p-k { margin: 10px 0 0; }
.p-intro-body { display: grid; gap: 34px; }
.p-lead { font-family: "Archivo"; font-stretch: 100%; font-weight: 700; font-size: clamp(30px, 3.8vw, 66px); line-height: 1.04; letter-spacing: -.04em; max-width: 20ch; }
html[lang="he"] .p-lead { font-family: var(--display); letter-spacing: -.02em; line-height: 1.12; }
.p-text { font-size: clamp(17px, 1.35vw, 20.5px); line-height: 1.62; max-width: 58ch; }
html[lang="he"] .p-text { line-height: 1.7; }
.temp { display: inline-block; margin-inline-start: 8px; padding: 3px 8px; border-radius: 99px; background: var(--butter); color: var(--forest); vertical-align: middle; }
.p-pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--g); align-items: end; }
.p-fig { position: relative; overflow: clip; border-radius: 4px; background: color-mix(in srgb, var(--forest) 8%, var(--cream)); aspect-ratio: var(--ar); }
.p-fig img { width: 100%; height: 100%; object-fit: cover; }
.p-statement { text-align: center; display: grid; justify-items: center; }
.p-big { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(70px, 13vw, 240px); line-height: .82; }
html[lang="he"] .p-big { font-family: var(--display); font-stretch: 62.5%; line-height: .92; }
.p-big em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-stretch: 100%; color: var(--raspberry); letter-spacing: -.03em; }
html[lang="he"] .p-big em { font-style: normal; font-weight: 500; }
.p-big .w { opacity: .14; }
.p-text-narrow { margin-top: 5vh; text-align: start; }

.p-reveal { position: relative; margin-top: 14vh; background: var(--forest); color: var(--butter); }
.p-reveal-pin { height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 4vw; align-items: center; padding: calc(var(--hdr) + 3vh) var(--g) 6vh; }
.p-reveal .p-k { color: var(--bubble); }
.p-reveal .p-text { font-size: clamp(16px, 1.2vw, 19px); }
.p-reveal-caps { margin-top: 5vh; display: grid; gap: 10px; }
.p-reveal-caps li { display: flex; gap: 12px; opacity: .3; transition: opacity .5s; }
.p-reveal-caps li.on { opacity: 1; }
.p-reveal-caps .n { font-family: var(--num); font-size: 15px; color: var(--bubble); }
.p-reveal-bar { margin-top: 3vh; height: 2px; background: color-mix(in srgb, var(--butter) 20%, transparent); }
.p-reveal-bar i { display: block; height: 100%; background: var(--bubble); transform: scaleX(0); transform-origin: 0 0; }
html[dir="rtl"] .p-reveal-bar i { transform-origin: 100% 0; }
.p-reveal-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: clip; background: #0c1610; }
.p-reveal-fig { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); }
html[dir="rtl"] .p-reveal-fig { clip-path: inset(0 100% 0 0); }
.p-reveal-stage .p-reveal-fig:first-child { clip-path: inset(0); }
.p-reveal-fig img { width: 100%; height: 100%; object-fit: cover; }

.p-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 3vw; align-items: start; }
.p-chapter-no { font-family: var(--serif); font-style: italic; font-size: clamp(110px, 14vw, 250px); line-height: .8; color: var(--c); letter-spacing: -.04em; }
html[lang="he"] .p-chapter-no { font-family: "Instrument Serif", serif; }
.proj[data-theme="light"] .p-chapter-no { color: var(--accent); }
.p-chapter-body { display: grid; gap: 26px; padding-top: 1vh; }
.p-chapter-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 7.4vw, 130px); line-height: .84; }
html[lang="he"] .p-chapter-t { font-family: var(--display); font-stretch: 62.5%; line-height: .92; }

.p-full { padding: 14vh 0 0; }
.p-full-fig { position: relative; overflow: clip; border-radius: 4px; aspect-ratio: 16 / 9; }
.p-full.is-tall .p-full-fig { aspect-ratio: 4 / 5; max-height: 120svh; width: min(100%, 92svh); margin-inline: auto; }
.p-full-fig img { width: 100%; height: 118%; object-fit: cover; }

.p-sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4vw; }
.p-sticky-aside { position: relative; }
.p-sticky-note { position: sticky; top: calc(var(--hdr) + 4vh); max-width: 22ch; font-size: 13px; }
.p-sticky-imgs { display: grid; gap: var(--g); }

.p-h { position: relative; margin-top: 12vh; background: var(--c); color: var(--ink); }
.p-h-pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; padding-top: var(--hdr); }
.p-h-track { display: flex; gap: 3vw; padding-inline: var(--g); width: max-content; will-change: transform; }
.p-h-fig { position: relative; height: 64svh; aspect-ratio: var(--ar); flex: none; overflow: clip; border-radius: 4px; }
.p-h-fig img { width: 100%; height: 100%; object-fit: cover; }
.p-h-fig figcaption { position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 8px; border-radius: 99px; background: var(--c); color: var(--ink); }
.p-h-progress { margin: 4vh var(--g) 0; height: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.p-h-progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 0; }
html[dir="rtl"] .p-h-progress i { transform-origin: 100% 0; }

.p-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.p-grid .p-fig { aspect-ratio: var(--ar); }
.p-grid .g0 { grid-column: 1 / span 2; }
.p-grid .g1 { grid-column: 3 / span 2; margin-top: 14vh; }
.p-grid .g2 { grid-column: 5 / span 2; margin-top: 5vh; }
.p-grid .g3 { grid-column: 2 / span 2; }
.p-grid .g4 { grid-column: 4 / span 3; margin-top: 10vh; }
.p-grid .g5 { grid-column: 1 / span 2; margin-top: -20vh; }

.p-video { display: grid; justify-items: center; gap: 18px; }
.p-video-frame { position: relative; width: min(100%, 70svh); aspect-ratio: 3 / 4; border-radius: 4px; overflow: clip; background: #000; }
.p-video-el { width: 100%; height: 100%; object-fit: cover; }
.p-video-btn { position: absolute; inset-inline-end: 14px; bottom: 14px; padding: 9px 14px; border-radius: 99px; background: var(--butter); color: var(--forest); }
.p-video-cap { opacity: .7; }

.p-soon { display: grid; gap: 6vh; }
.p-soon-card { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 8vh 4vw; border-radius: 6px; background: var(--c); color: var(--ink); }
.p-soon-card .i-star { width: 64px; color: var(--accent); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.p-soon-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 7vw, 120px); line-height: .86; }
html[lang="he"] .p-soon-t { font-family: var(--display); font-stretch: 62.5%; }
.p-soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.p-dummy {
  position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: clip; display: flex; flex-direction: column; justify-content: space-between; padding: 18px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, var(--cream)) 0 14px, color-mix(in srgb, var(--c) 18%, var(--cream)) 14px 28px); color: var(--forest);
}
.p-dummy:nth-child(3n+2) { aspect-ratio: 1; margin-top: 8vh; }
.p-dummy-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4vw, 70px); line-height: .85; opacity: .5; }

.p-credits { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 14vh 0 10vh; border-bottom: 1.5px solid var(--forest); opacity: .8; }

.p-next { position: relative; display: block; height: 100svh; margin-top: 12vh; color: var(--nink); }
.p-next-k { position: absolute; top: 0; inset-inline-start: var(--g); color: var(--forest); }
.p-next-tab {
  position: absolute; top: 9vh; inset-inline-start: calc(var(--g) + 4%); height: 58px; display: flex; align-items: center; gap: 12px;
  padding: 0 28px; border-radius: 18px 18px 0 0; background: var(--nc); font-weight: 800; text-transform: uppercase; font-size: 15px;
}
.p-next-tab .n { font-family: var(--num); font-weight: 400; font-size: 17px; }
.p-next-sheet { position: absolute; inset: calc(9vh + 58px) 0 0; background: var(--nc); display: grid; place-items: center; align-content: center; gap: 20px; border-radius: 0 16px 0 0; overflow: clip; }
html[dir="rtl"] .p-next-sheet { border-radius: 16px 0 0 0; }
.p-next-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(80px, 17vw, 320px); line-height: .8; text-align: center; padding: 0 var(--g); }
html[lang="he"] .p-next-t { font-family: var(--display); font-stretch: 62.5%; }
.p-next-fill { position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: var(--nink); transform: scaleX(0); transform-origin: 0 0; }
html[dir="rtl"] .p-next-fill { transform-origin: 100% 0; }

@media (max-width: 800px) {
  .p-intro, .p-chapter, .p-sticky { grid-template-columns: minmax(0, 1fr); }
  .p-chapter-no { font-size: 96px; }
  .p-pair { grid-template-columns: minmax(0, 1fr); }
  .p-reveal-pin { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4vh; }
  .p-reveal .p-text { display: none; }
  .p-reveal-stage { order: -1; }
  .p-reveal-caps { margin-top: 2vh; }
  .p-h-fig { height: 52svh; }
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .p-grid .p-fig { grid-column: auto !important; margin-top: 0 !important; }
  .p-grid .p-fig:nth-child(even) { margin-top: 8vh !important; }
  .p-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-dummy-t { font-size: 30px; }
  .p-sticky-note { position: static; }
}

/* --------------------------------------------------------------- 404 */
.nf { min-height: 100svh; background: var(--raspberry); color: var(--butter); display: grid; align-content: center; justify-items: start; gap: 30px; padding: var(--hdr) var(--g); }
.nf-t { font-family: "Archivo"; font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(70px, 13vw, 230px); line-height: .82; }
.nf .btn:hover { background: var(--butter); color: var(--raspberry); border-color: var(--butter); }
.nf .btn .i-arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .grain::before, .cue-line::after, .pulse, .cta-dot, .p-soon-card .i-star { animation: none; }
  .about-big .w, .p-big .w { opacity: 1 !important; }
}

/* --------------------------------------------------------------- loader */
.loader { position: fixed; inset: 0; z-index: 105; display: none; background: var(--butter); color: var(--forest); clip-path: inset(0 0 0 0); }
html.first .loader, .loader.on { display: block; }
.loader-frames { position: absolute; left: 50%; top: 50%; width: min(26vw, 300px); aspect-ratio: 4 / 5; translate: -50% -55%; overflow: clip; border-radius: 4px; background: var(--forest); }
.loader-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.loader-frames img.on { opacity: 1; }
.loader-top { position: absolute; top: calc(22px + env(safe-area-inset-top)); inset-inline: var(--g); display: flex; justify-content: space-between; }
.loader-num { position: absolute; inset-inline-start: var(--g); bottom: calc(var(--g) * .4); font-family: var(--num); font-size: clamp(110px, 22vw, 360px); line-height: .8; letter-spacing: -.01em; }
.loader-word { position: absolute; inset-inline-end: var(--g); bottom: calc(var(--g) + 10px); }
@media (max-width: 700px) { .loader-frames { width: 52vw; } }

/* before the scripts take over, keep the animated parts still */
html.js .hero-stage, html.js .hero-top, html.js .hero-sticker, html.js .scroll-cue { visibility: hidden; }
html.ready .hero-stage, html.ready .hero-top, html.ready .hero-sticker, html.ready .scroll-cue { visibility: visible; }
html.js body[data-page="project"] .p-hero, html.js body[data-page="project"] .p-hero-media { visibility: hidden; }
html.ready body[data-page="project"] .p-hero, html.ready body[data-page="project"] .p-hero-media { visibility: visible; }

/* --------------------------------------------------------------- lightbox */
.lb { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: color-mix(in srgb, var(--forest) 96%, transparent); color: var(--butter); padding: 6vh 6vw; }
.lb.on { display: grid; }
.lb img { max-width: 100%; max-height: 86svh; width: auto; object-fit: contain; border-radius: 3px; }
.lb-x { position: absolute; top: calc(18px + env(safe-area-inset-top)); inset-inline-end: var(--g); padding: 12px 18px; border-radius: 99px; background: var(--butter); color: var(--forest); z-index: 2; }
.lb-n { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 0; width: 18vw; z-index: 1; }
.lb-prev { inset-inline-start: 0; } .lb-next { inset-inline-end: 0; }
html.has-cursor .lb-prev:hover ~ img, html.has-cursor .lb-next:hover ~ img { opacity: .92; }