/* =====================================================================
   Rotem Klaperman, portfolio. Calm editorial system:
   Newsreader (serif display) + Inter Tight (text) in Latin,
   Frank Ruhl Libre + Assistant in Hebrew. Palette from the CV, used with restraint.
   Logical properties everywhere so dir="rtl" mirrors the layout.
   ===================================================================== */

:root {
  --paper: #F3EEE6;
  --paper-2: #EAE3D8;
  --forest: #182B22;
  --forest-2: #22392D;
  --butter: #F2EC94;
  --pink: #F393C0;
  --rose: #9E2548;
  --line: rgba(24, 43, 34, .16);
  --line-l: rgba(243, 238, 230, .2);

  --sans: "Geist", "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);

  --g: clamp(18px, 2.6vw, 44px);
  --hdr: 74px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --hfg: var(--forest);
  --hbg: var(--paper);
}
html[lang="he"] { --sans: "Heebo", "Geist", system-ui, sans-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(--paper); color: var(--forest);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
html[lang="he"] body { font-size: 17px; letter-spacing: 0; }
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(--forest); color: var(--paper); }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; box-shadow: 0 0 0 6px var(--butter); border-radius: 4px; }

.label { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
html[lang="he"] .label { font-size: 13px; letter-spacing: .02em; font-weight: 600; text-transform: none; }

.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: .085; mix-blend-mode: multiply; background-image: url("../img/grain.png"); background-size: 220px; animation: grain 1.4s 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; mix-blend-mode: difference; color: #fff; }
html.has-cursor .cursor { display: block; }
.cursor.is-live { opacity: 1; }
.cursor-ring { position: absolute; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; will-change: transform; transition: scale .55s var(--ease), opacity .3s; }
.cursor-ring svg { width: 100%; height: 100%; overflow: visible; }
.cursor-ring text { fill: currentColor; font-family: var(--sans); font-weight: 600; font-size: 8.6px; letter-spacing: 1.4px; text-transform: uppercase; }
html[lang="he"] .cursor-ring text { font-size: 9.6px; letter-spacing: .6px; }
.cursor-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; transition: scale .45s var(--ease); will-change: transform; }
.cursor.is-link .cursor-ring { scale: .62; }
.cursor.is-link .cursor-dot { scale: 2.4; }
.cursor.is-label .cursor-ring { scale: 1.32; }
.cursor.is-label .cursor-dot { scale: 3.2; }
.cursor.is-down .cursor-ring { scale: .85; }
.cursor.is-hidden { opacity: 0; }
.cursor-dot::before, .cursor-dot::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; opacity: 0; transition: opacity .3s, translate .45s var(--ease); }
.cursor-dot::before { left: -10px; rotate: -45deg; translate: 5px -50%; }
.cursor-dot::after { right: -10px; rotate: 135deg; translate: -5px -50%; }
.cursor.is-strip .cursor-ring { scale: .35; opacity: 0; }
.cursor.is-strip .cursor-dot { scale: 1; }
.cursor.is-strip .cursor-dot::before, .cursor.is-strip .cursor-dot::after { opacity: 1; translate: 0 -50%; }
.cursor.is-strip.is-down .cursor-dot::before { translate: -3px -50%; }
.cursor.is-strip.is-down .cursor-dot::after { translate: 3px -50%; }

.curtain { position: fixed; inset: 0; z-index: 110; pointer-events: none; visibility: hidden; }
.curtain-in { position: absolute; inset: 0; background: var(--cc, var(--forest)); color: var(--cink, var(--paper)); display: grid; place-items: center; clip-path: inset(100% 0 0 0); }
.curtain-label { font-family: var(--sans); font-weight: 500; font-size: clamp(48px, 9vw, 150px); line-height: .95; letter-spacing: -.03em; text-align: center; padding: 0 var(--g); }
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(--forest); color: var(--paper); padding: 12px 20px; border-radius: 99px; font-weight: 500; font-size: 14px; pointer-events: none; transition: transform .6s var(--ease); }
.toast.show { transform: translate(-50%, 0); 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); }
.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(--paper); }
body.hdr-dark, body.hdr-busy { --hfg: var(--paper); --hbg: var(--forest); }
.hdr-logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -.04em; transition: transform .7s var(--ease); }
.hdr-logo:hover .logo-mark { transform: rotate(-14deg); }
.logo-word { font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; transition: background-color .45s, padding .45s var(--ease); border-radius: 99px; }
.hdr-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(20px, 3vw, 46px); border-radius: 99px; transition: background-color .45s, padding .45s var(--ease); }
.hdr-link { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; }
.hdr-link .n { font-size: 10px; opacity: .55; margin-top: 1px; font-variant-numeric: tabular-nums; }
body.hdr-busy .hdr-nav, body.hdr-busy .logo-word { background: rgba(24, 43, 34, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.hdr-busy .hdr-nav { padding: 9px 20px; }
body.hdr-busy .logo-word { padding: 8px 14px; }
.roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.roll-a, .roll-b { display: block; transition: transform .6s 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: 500; font-size: 14px; padding: 10px 6px; }
.hdr-back .i-arrow { width: 15px; transform: scaleX(-1); transition: transform .4s var(--ease); }
html[dir="rtl"] .hdr-back .i-arrow { transform: none; }
.lang { position: relative; display: inline-grid; grid-auto-flow: column; align-items: center; height: 38px; padding: 3px; border-radius: 99px; border: 1px solid currentColor; font-weight: 600; font-size: 12px; letter-spacing: .04em; }
body.hdr-busy .lang { background: rgba(24, 43, 34, .82); }
.lang-o { position: relative; z-index: 1; width: 36px; text-align: center; transition: color .4s var(--ease); }
.lang-knob { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: 36px; 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(-36px); }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 99px; background: var(--hfg); color: var(--hbg); font-weight: 500; font-size: 14px; transition: background-color .45s, color .45s; }
.cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--butter); animation: pulse 2.2s infinite; }
body.hdr-dark .cta-dot, body.hdr-busy .cta-dot { background: var(--forest); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 236, 148, .6) } 70% { box-shadow: 0 0 0 8px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
.menu-btn { display: none; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 16px; border-radius: 99px; background: var(--hfg); color: var(--hbg); font-weight: 500; font-size: 14px; transition: background-color .45s, color .45s; }
html[dir="rtl"] .menu-btn { padding: 0 16px 0 6px; }
.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: 1.5px; background: var(--hfg); transition: transform .5s var(--ease); }
.menu-btn-i i:first-child { top: 10px; } .menu-btn-i i:last-child { top: 14.5px; }
.menu-open .menu-btn-i i:first-child { transform: translateY(2.25px) rotate(45deg); }
.menu-open .menu-btn-i i:last-child { transform: translateY(-2.25px) 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; } }

.menu { position: fixed; inset: 0; z-index: 65; background: var(--forest); color: var(--paper); 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: 8px; }
.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: var(--sans); font-weight: 500; font-size: clamp(46px, 13vw, 84px); line-height: .95; letter-spacing: -.03em; }
.menu-tab:first-child { margin-top: 0; }
.menu-tab .n { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.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-family: var(--sans); font-weight: 500; font-size: 24px; }
.menu-projects .n { font-family: var(--sans); font-size: 11px; opacity: .6; }
.menu-foot { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; opacity: .85; }

/* --------------------------------------------------------------- shared atoms */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; border-radius: 99px; border: 1px solid currentColor; font-weight: 500; font-size: 15px; transition: background-color .4s, color .4s, border-color .4s; }
.btn svg { width: 17px; }
.btn:hover { background: var(--forest); color: var(--paper); 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 11px; border: 1px solid currentColor; border-radius: 99px; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; opacity: .9; }
.split-line { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

/* --------------------------------------------------------------- OPENING: "Hi, I'm Rotem", a classic portrait, and a moving strip of work under them */
.op { --strip-h: clamp(150px, 25svh, 270px); --strip-y: calc(var(--g) * .8 + 50px + env(safe-area-inset-bottom)); position: relative; height: 100svh; min-height: 600px; overflow: clip; background: var(--paper); color: var(--forest); }
.op-type { position: absolute; z-index: 1; inset: 0 0 calc(var(--strip-h) + var(--strip-y)) 0; display: flex; flex-direction: column; justify-content: center; padding: var(--hdr) var(--g) 0; pointer-events: none; }
.op-hi { font-weight: 500; font-size: min(15vw, 21svh); line-height: .84; letter-spacing: -.065em; }
.op-hi .ln { display: block; }
html[lang="he"] .op-hi { letter-spacing: -.03em; line-height: .95; font-weight: 600; }
.op-role { margin-top: 3svh; max-width: 30ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.45; opacity: .8; }
.op-me { position: absolute; z-index: 3; will-change: transform, clip-path; top: calc(var(--hdr) + 4svh); height: min(calc(100% - var(--hdr) - 8svh - var(--strip-h) - var(--strip-y)), 40vw); inset-inline-end: calc(var(--g) + 5vw); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; box-shadow: 0 40px 90px -45px rgba(24, 43, 34, .55); }
.op-me img { width: 100%; height: 100%; object-fit: cover; }
.op-foot { position: absolute; z-index: 4; 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; }
/* the strip: one height for every image, two calm shapes (4:5 and 5:4), a steady pace */
.op-strip { position: absolute; z-index: 2; inset-inline: 0; bottom: var(--strip-y); height: var(--strip-h); overflow: hidden; direction: ltr; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.op-strip-track { display: flex; gap: clamp(10px, 1vw, 16px); height: 100%; width: max-content; will-change: transform; }
.op-s-item { position: relative; flex: none; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--paper-2); -webkit-tap-highlight-color: transparent; }
.op-s-item.is-wide { aspect-ratio: 5 / 4; }
.op-s-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: scale 1s var(--ease); }
.op-s-item:hover img { scale: 1.035; }
.op-strip.is-drag .op-s-item img { scale: 1; }
.op-s-cap { position: absolute; inset-inline-start: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; background: rgba(243, 238, 230, .94); color: var(--forest); opacity: 0; translate: 0 6px; transition: opacity .35s, translate .5s var(--ease); pointer-events: none; }
html[dir="rtl"] .op-s-cap { direction: rtl; }
.op-s-arr { font-size: 1.1em; line-height: 1; }
.op-s-item:hover .op-s-cap, .op-s-item.is-peek .op-s-cap, .op-s-item:focus-visible .op-s-cap { opacity: 1; translate: 0 0; }
.op-strip.is-drag .op-s-cap { opacity: 0; }
.op-s-item:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.op-scroll { display: inline-flex; align-items: center; gap: 10px; }
.op-scroll i { position: relative; width: 1px; height: 26px; background: var(--line); overflow: hidden; }
.op-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--forest); animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%) } 60%, 100% { transform: translateY(100%) } }
@media (max-width: 700px) {
  .op { --strip-h: clamp(118px, 19svh, 190px); }
  .op-type { justify-content: flex-start; padding-top: calc(var(--hdr) + 5svh); }
  .op-hi { font-size: min(24vw, 13svh); }
  .op-role { max-width: 58vw; }
  .op-me { top: auto; bottom: calc(var(--strip-h) + var(--strip-y) + 2.5svh); height: min(22svh, 60vw); inset-inline-end: var(--g); }
  .op-foot .op-hide-m { display: none; }
  .op-foot { justify-content: center; }
}

/* --------------------------------------------------------------- WORK (folders) */
.work { position: relative; background: var(--paper); 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-title { font-family: var(--sans); font-weight: 500; font-size: clamp(60px, 11vw, 196px); line-height: .88; letter-spacing: -.045em; }
html[lang="he"] .work-title { letter-spacing: -.02em; }
.work-by { opacity: .7; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.filter { height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--forest); font-weight: 500; font-size: 13.5px; transition: background-color .4s var(--ease), color .4s var(--ease); }
.filter[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.folders { --fh: clamp(360px, 60vh, 640px); --tab-h: 56px; position: relative; max-width: 1480px; margin: 10vh auto 0; }
.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) 86%, #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 28px; display: flex; align-items: center; gap: 10px; background: var(--dark); border-radius: 18px 18px 0 0; font-weight: 500; font-size: clamp(13px, 1.05vw, 15.5px); white-space: nowrap; transition: translate .6s var(--ease); }
.folder-tab .n { font-size: .78em; opacity: .65; font-variant-numeric: tabular-nums; }
.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(20px, 3.4vh, 38px) clamp(20px, 3vw, 46px); }
.folder-no { grid-row: 1 / span 3; font-weight: 400; font-size: clamp(13px, 1vw, 15px); padding-top: .6em; opacity: .7; font-variant-numeric: tabular-nums; }
.folder-main { display: grid; gap: 12px; max-width: 54%; }
.folder-title { font-family: var(--sans); font-weight: 500; font-size: clamp(46px, 6.6vw, 118px); line-height: .9; letter-spacing: -.04em; }
html[lang="he"] .folder-title { letter-spacing: -.015em; line-height: 1; }
.folder-sub { font-size: clamp(15px, 1.15vw, 18px); opacity: .85; }
.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: 48px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: var(--c); font-weight: 500; font-size: 14.5px; }
.folder-go .i-arrow { width: 16px; 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; box-shadow: 0 22px 40px -24px rgba(24, 43, 34, .55); 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); background: var(--paper); }
.paper-ph .label { position: absolute; top: 12px; inset-inline-start: 12px; }
.paper-ph .i-star { width: 26%; color: var(--c); }
.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.all-closed .folder-front > .folder-main, .folders.is-js.all-closed .folder-front > .folder-no { opacity: 1; transform: none; }
.folders.is-js.all-closed .folder-front > .folder-main .folder-title { font-size: clamp(40px, 5vw, 86px); transition: font-size .6s var(--ease); }
.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 15px; font-size: 12px; gap: 7px; }
  .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(44px, 13vw, 66px); }
  .folder-go { height: 44px; padding: 0 18px; font-size: 14px; }
  .folder-tags { display: none; }
  .paper { width: clamp(64px, 19vw, 104px); }
  .paper:nth-child(1) { inset-inline-end: 30%; } .paper:nth-child(2) { inset-inline-end: 16%; } .paper:nth-child(3) { inset-inline-end: 3%; }
  .folders.is-js .paper { bottom: calc(var(--tab-h) + 16px); }
  .folders.is-js .paper:nth-child(2) { bottom: calc(var(--tab-h) + 28px); }
  .tag { font-size: 11px; padding: 4px 9px; }
}

/* --------------------------------------------------------------- ABOUT */
.about { background: var(--paper); color: var(--forest); padding: 0 var(--g) 16vh; }
.about-top { height: 100svh; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 5vw; align-items: end; padding: calc(var(--hdr) + 5svh) 0 6svh; background: var(--paper); overflow: hidden; }
.about-copy { align-self: end; min-width: 0; }
.about-k { margin-bottom: 22px; opacity: .7; }
.about-big { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, min(3.4vw, 6svh), 60px); line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; }
.about-body { margin-top: 3.4svh; display: grid; gap: 1em; max-width: 56ch; font-size: clamp(15px, min(1.2vw, 2.2svh), 20px); line-height: 1.55; }
html[lang="he"] .about-body { line-height: 1.65; }
html[lang="he"] .about-big { letter-spacing: -.01em; line-height: 1.15; }
.about-big em, .p-big em { font-style: normal; color: var(--rose); }
.about-big .w { opacity: .14; }
.about-photo { position: relative; overflow: clip; border-radius: 4px; aspect-ratio: 4 / 5; justify-self: end; align-self: end; height: calc(100svh - var(--hdr) - 11svh); max-width: 100%; }
.about-photo img { width: 100%; height: 112%; object-fit: cover; }
.about-photo figcaption { position: absolute; inset-inline-start: 14px; bottom: 12px; color: var(--paper); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.about-grid { margin-top: 10vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; border-top: 1px solid var(--line); padding-top: 26px; }
.about-grid .tools { max-width: 420px; }
.about-col { display: grid; align-content: start; gap: 12px; font-size: 15.5px; line-height: 1.6; }
.about-col h3 { opacity: .6; }
.about-strong { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.about-list li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.tool { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; font-family: var(--sans); border: 1px solid var(--line); background: var(--paper-2); transition: rotate .6s var(--ease), scale .6s var(--ease); }
.tool:hover .ic { rotate: -12deg; scale: 1.1; }
.cv-row { margin-top: 9vh; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .about-top { height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: end; row-gap: 3svh; padding-top: calc(var(--hdr) + 2svh); padding-bottom: 5svh; } .about-photo { order: -1; justify-self: start; height: 30svh; } .about-big { font-size: clamp(24px, 6.6vw, 38px); } .about-body { margin-top: 2.4svh; font-size: 15.5px; } .about-grid { margin-top: 7vh; gap: 36px 24px; } }
@media (max-width: 560px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- MARQUEE */
.marquee { background: var(--forest); color: var(--paper); overflow: clip; padding: 14px 0; border-bottom: 1px solid var(--line-l); }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-group { display: flex; align-items: center; flex: none; }
.mq-w { font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.5vw, 24px); line-height: 1; letter-spacing: -.01em; padding: 0 1.1em; white-space: nowrap; }
.mq-group .i-star { width: clamp(9px, .75vw, 12px); color: var(--pink); flex: none; }
html[dir="rtl"] .mq-track { flex-direction: row-reverse; }

/* --------------------------------------------------------------- CONTACT: one short screen */
/* with the footer it is exactly one screen at the end of the page: compact content, nothing peeking under the header */
.contact { position: relative; background: var(--forest); color: var(--paper); overflow: clip; padding: calc(var(--hdr) + 4svh) var(--g) 5svh; min-height: calc(100svh - 54px); display: grid; align-content: center; }
.ct { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto; column-gap: 5vw; row-gap: 3.2svh; align-items: end; } /* spare height goes above the label, so label and title stay together */
.ct-k { grid-column: 1; grid-row: 1; opacity: .65; }
.ct-title { grid-column: 1; grid-row: 2; min-width: 0; font-family: var(--sans); font-weight: 500; }
.ct-t-sm { display: block; font-size: clamp(26px, min(3.3vw, 5.6svh), 60px); line-height: 1.02; letter-spacing: -.035em; }
.ct-t-xl { display: block; margin-top: .07em; color: var(--butter); font-size: clamp(54px, min(10vw, 16.5svh), 190px); line-height: .84; letter-spacing: -.055em; white-space: nowrap; }
html[lang="he"] .ct-t-sm { letter-spacing: -.01em; }
html[lang="he"] .ct-t-xl { letter-spacing: -.02em; line-height: .96; }
.ct-photo { grid-column: 2; grid-row: 1 / span 3; align-self: end; position: relative; height: min(60svh, 540px); aspect-ratio: 4 / 5; overflow: clip; border-radius: 4px; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct-links { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.2vw; border-top: 1px solid var(--line-l); }
@media (max-width: 560px) { .ct-links { grid-template-columns: minmax(0, 1fr); } }
.ct-link { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-l); transition: color .3s; }
/* a thin line icon in a hairline circle; on hover the circle fills with butter */
.ct-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--paper); border: 1px solid rgba(250, 245, 236, .3); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.ct-ic svg { width: 19px; height: 19px; }
.ct-link:hover .ct-ic { background: var(--pink); border-color: var(--pink); color: var(--forest); }
.ct-txt { display: grid; gap: 4px; min-width: 0; }
.ct-name { opacity: .6; }
.ct-val { font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-link .i-arrow { flex: none; margin-inline-start: auto; width: 16px; opacity: .55; transform: rotate(-45deg); transition: transform .5s var(--ease), opacity .3s; }
html[dir="rtl"] .ct-link .i-arrow { transform: scaleX(-1) rotate(-45deg); }
.ct-link:hover .i-arrow { opacity: 1; transform: rotate(0); }
html[dir="rtl"] .ct-link:hover .i-arrow { transform: scaleX(-1); }
@media (max-width: 860px) {
  .contact { padding: calc(var(--hdr) + 2svh) var(--g) 4svh; }
  /* phone: like the desktop, the text with the photo beside it on the same line, the links under both */
  .ct { column-gap: 14px; row-gap: 2.2svh; }
  .ct-t-sm { font-size: clamp(19px, 5.4vw, 30px); }
  .ct-t-xl { font-size: min(13.5vw, 8.5svh); }
  html[lang="he"] .ct-t-xl { font-size: min(17vw, 10svh); }
  .ct-photo { grid-column: 2; grid-row: 1 / span 2; height: min(19svh, 180px); }
  .ct-links { grid-column: 1 / -1; grid-row: 3; }
  .ct-link { gap: 14px; padding: 11px 0; }
  .ct-ic { width: 40px; height: 40px; }
  .ct-ic svg { width: 18px; height: 18px; }
  .ct-txt { gap: 2px; }
  .ct-val { font-size: 15px; }
}

/* --------------------------------------------------------------- FOOTER */
.ftr { background: var(--forest); color: var(--paper); 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 var(--line-l); opacity: .75; }
.ftr-top { display: inline-flex; align-items: center; gap: 8px; }
.ftr-top .i-arrow { width: 13px; transform: rotate(-90deg); }
@media (max-width: 700px) { .ftr-mid { display: none; } }

html.js .op-type, html.js .op-me, html.js .op-foot, html.js .op-strip { visibility: hidden; }
html.ready .op-type, html.ready .op-me, html.ready .op-foot, html.ready .op-strip { 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; }

/* --------------------------------------------------------------- PROJECT PAGES */
body[data-page="project"] { background: var(--c, var(--paper)); }
.proj { background: var(--paper); }
.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: 9px 16px; border-radius: 12px 12px 0 0; border: 1px solid currentColor; border-bottom: 0; }
.p-tab .n { font-variant-numeric: tabular-nums; }
/* previous / next folder, beside the tab at the top of every project */
.p-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* the cue under the header: scrolling up past the top leads to the previous folder */
.p-up-cue { display: inline-flex; align-items: center; gap: 10px; opacity: .75; transition: opacity .3s; }
.p-up-cue:hover { opacity: 1; }
.p-up-cue-t { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 0 0 12px 12px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.p-up-cue-t .n { opacity: .7; }
.p-up-arr { display: inline-block; animation: up-cue 1.8s var(--ease-io) infinite; }
@keyframes up-cue { 0%, 100% { translate: 0 2px; } 50% { translate: 0 -3px; } }
@media (max-width: 700px) { .p-up-cue-t { display: none; } }
/* the zone above the hero: the previous folder, its tab hanging down toward the page */
.p-up { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; height: 64svh; padding: var(--hdr) var(--g) 70px; background: var(--pc); color: var(--pink); overflow: clip; text-align: center; }
.p-up-k { opacity: .7; }
.p-up-t { font-family: var(--sans); font-weight: 500; font-size: clamp(56px, 10vw, 190px); line-height: .9; letter-spacing: -.045em; }
html[lang="he"] .p-up-t { letter-spacing: -.02em; line-height: 1; }
.p-up-hint { display: inline-flex; align-items: center; gap: 8px; opacity: .8; }
.p-up-fill { position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--pink); transform: scaleX(0); transform-origin: 0 0; }
html[dir="rtl"] .p-up-fill { transform-origin: 100% 0; }
.p-up-tab { position: absolute; bottom: 0; inset-inline-end: calc(var(--g) + 4%); height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-radius: 16px 16px 0 0; background: var(--c, var(--paper)); color: var(--ink, var(--forest)); font-weight: 500; font-size: 15px; }
.p-up-tab .n { font-size: .8em; opacity: .7; }
.p-title { margin-top: 3vh; font-family: var(--sans); font-weight: 500; font-size: clamp(64px, 11.5vw, 220px); line-height: .88; letter-spacing: -.045em; }
html[lang="he"] .p-title { letter-spacing: -.02em; line-height: .98; }
.p-title-in { display: block; }
.p-sub { margin-top: 3vh; font-size: clamp(18px, 1.6vw, 26px); opacity: .9; max-width: 40ch; }
.p-meta { margin-top: 7vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 3vw; border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding-top: 22px; }
.p-meta dt { opacity: .65; margin-bottom: 8px; }
.p-meta dd { font-size: 15.5px; line-height: 1.5; }
.p-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-hero-media { background: linear-gradient(var(--c) 50%, var(--paper) 50%); padding: 0 var(--g); }
.p-hero-fig { position: relative; overflow: clip; border-radius: 2px; 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%, var(--paper)); color: var(--ink); display: grid; place-items: center; }
.p-hero-ph .i-star { position: absolute; width: 10%; inset-inline-end: 5%; bottom: 8%; color: var(--accent); }
.p-body { padding: 0 var(--g); }
.p-sec { padding: 14vh 0 0; }
.p-k { opacity: .6; margin-bottom: 22px; }
.p-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 3vw; }
.p-intro .p-k { margin: 12px 0 0; }
.p-intro-body { display: grid; gap: 34px; }
.p-lead { font-family: var(--sans); font-weight: 500; font-size: clamp(30px, 3.6vw, 62px); line-height: 1.08; letter-spacing: -.03em; max-width: 22ch; }
html[lang="he"] .p-lead { letter-spacing: -.01em; line-height: 1.18; }
.p-text { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; max-width: 58ch; }
html[lang="he"] .p-text { line-height: 1.75; }
.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: 2px; background: var(--paper-2); 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: var(--sans); font-weight: 500; font-size: clamp(60px, 10vw, 190px); line-height: .9; letter-spacing: -.045em; }
html[lang="he"] .p-big { letter-spacing: -.02em; line-height: 1; }

.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(--paper); }
.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-text { font-size: clamp(16px, 1.15vw, 18px); }
.p-reveal-caps { margin-top: 5vh; display: grid; gap: 10px; }
.p-reveal-caps li { display: flex; gap: 12px; opacity: .32; transition: opacity .5s; }
.p-reveal-caps li.on { opacity: 1; }
.p-reveal-caps .n { color: var(--butter); font-variant-numeric: tabular-nums; }
.p-reveal-bar { margin-top: 3vh; height: 1px; background: var(--line-l); }
.p-reveal-bar i { display: block; height: 100%; background: var(--butter); 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: 2px; overflow: clip; background: var(--forest); }
.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(--sans); font-weight: 200; font-size: clamp(100px, 12vw, 220px); line-height: .8; color: color-mix(in srgb, var(--c) 70%, var(--paper)); letter-spacing: -.04em; }
.proj[data-theme="light"] .p-chapter-no { color: var(--accent); }
.p-chapter-body { display: grid; gap: 24px; padding-top: 1vh; }
.p-chapter-t { font-family: var(--sans); font-weight: 500; font-size: clamp(46px, 6vw, 108px); line-height: .92; letter-spacing: -.04em; }
html[lang="he"] .p-chapter-t { letter-spacing: -.015em; line-height: 1.02; }
.p-full { padding: 14vh 0 0; }
.p-full-fig { position: relative; overflow: clip; border-radius: 2px; 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; }
.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: 2px; }
.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 9px; border-radius: 99px; background: var(--c); color: var(--ink); }
.p-h-progress { margin: 4vh var(--g) 0; height: 1px; background: color-mix(in srgb, var(--ink) 25%, 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 .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; }
/* scattered squares of projection loops: uneven sizes, columns and heights */
.p-clips { display: grid; gap: 22px; }
.p-clips-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 3vw; align-items: start; }
.p-clip { position: relative; aspect-ratio: 1; overflow: clip; border-radius: 2px; background: var(--forest); translate: 0 var(--dy, 0); }
.p-clip video { width: 100%; height: 100%; object-fit: cover; }
.p-clip::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; } /* white frames still read as a square */
.p-clip.c0 { grid-column: 1 / span 4; }
.p-clip.c1 { grid-column: 6 / span 3; --dy: 9vw; }
.p-clip.c2 { grid-column: 10 / span 3; --dy: 2vw; }
.p-clip.c3 { grid-column: 2 / span 3; --dy: -3vw; }
.p-clip.c4 { grid-column: 5 / span 4; --dy: 6vw; }
.p-clip.c5 { grid-column: 10 / span 3; --dy: -1vw; }
.p-clip.c6 { grid-column: 1 / span 3; --dy: 4vw; }
.p-clip.c7 { grid-column: 6 / span 4; --dy: 7vw; }
.p-clips .p-video-cap { margin-top: 8vw; opacity: .65; }
@media (max-width: 800px) {
  .p-clips-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px; }
  .p-clip.c0, .p-clip.c3, .p-clip.c4, .p-clip.c7 { grid-column: 1 / span 4; }
  .p-clip.c1, .p-clip.c2, .p-clip.c5, .p-clip.c6 { grid-column: 3 / span 4; }
  .p-clip.c0, .p-clip.c1, .p-clip.c2, .p-clip.c3, .p-clip.c4, .p-clip.c5, .p-clip.c6, .p-clip.c7 { --dy: 0; }
  .p-clip:nth-child(odd) { grid-column: 1 / span 4; }
  .p-clip:nth-child(even) { grid-column: 3 / span 4; margin-top: -5vw; }
  .p-clips .p-video-cap { margin-top: 4vh; }
}
/* frames from the projections: a contact sheet */
.p-frames { display: grid; gap: 22px; }
.p-frames-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.p-frame { aspect-ratio: 1; overflow: clip; border-radius: 2px; }
.p-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .p-frames-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } }
.p-video-frame { position: relative; width: min(100%, 70svh); aspect-ratio: 3 / 4; border-radius: 2px; overflow: clip; background: var(--forest); }
.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(--paper); color: var(--forest); }
.p-video-cap { opacity: .65; }
.p-soon { display: grid; gap: 6vh; }
.p-soon-card { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 9vh 4vw; border-radius: 4px; background: var(--c); color: var(--ink); }
.p-soon-card .i-star { width: 40px; color: var(--accent); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.p-soon-t { font-family: var(--sans); font-weight: 500; font-size: clamp(42px, 5.6vw, 96px); line-height: .95; letter-spacing: -.035em; }
.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: 2px; overflow: clip; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; background: color-mix(in srgb, var(--c) 22%, var(--paper)); color: var(--forest); }
.p-dummy:nth-child(3n+2) { aspect-ratio: 1; margin-top: 8vh; }
.p-dummy-t { font-family: var(--sans); font-weight: 500; font-size: clamp(30px, 3vw, 54px); line-height: .95; letter-spacing: -.03em; opacity: .45; }
.p-credits { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 14vh 0 10vh; border-bottom: 1px solid var(--line); opacity: .75; }
/* the way back: the previous folder, just before the pull into the next one */
.p-prev { display: grid; gap: 14px; padding: 6vh 0; border-bottom: 1px solid var(--line); color: var(--forest); }
.p-prev-k { opacity: .65; }
.p-prev-t { display: inline-flex; align-items: center; gap: .35em; font-family: var(--sans); font-weight: 500; font-size: clamp(30px, 4vw, 64px); line-height: 1; letter-spacing: -.035em; }
html[lang="he"] .p-prev-t { letter-spacing: -.01em; }
.p-prev-t .i-arrow { width: .62em; flex: none; transform: scaleX(-1); transition: translate .5s var(--ease); }
html[dir="rtl"] .p-prev-t .i-arrow { transform: none; }
.p-prev:hover .p-prev-t .i-arrow { translate: -.2em 0; }
html[dir="rtl"] .p-prev:hover .p-prev-t .i-arrow { translate: .2em 0; }
.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); opacity: .7; }
.p-next-tab { position: absolute; top: 9vh; inset-inline-start: calc(var(--g) + 4%); height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 26px; border-radius: 18px 18px 0 0; background: var(--nc); font-weight: 500; font-size: 15px; }
.p-next-tab .n { font-size: .8em; opacity: .7; }
.p-next-sheet { position: absolute; inset: calc(9vh + 56px) 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: var(--sans); font-weight: 500; font-size: clamp(64px, 12vw, 230px); line-height: .88; letter-spacing: -.045em; text-align: center; padding: 0 var(--g); }
.p-next-fill { position: absolute; inset-inline: 0; bottom: 0; height: 3px; 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: 90px; }
  .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-sticky-note { position: static; }
}

/* --------------------------------------------------------------- lightbox, 404 */
.lb { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(24, 43, 34, .97); color: var(--paper); padding: 6vh 6vw; }
.lb.on { display: grid; }
.lb img { max-width: 100%; max-height: 86svh; width: auto; object-fit: contain; border-radius: 2px; }
.lb-x { position: absolute; top: calc(18px + env(safe-area-inset-top)); inset-inline-end: var(--g); padding: 11px 18px; border-radius: 99px; background: var(--paper); 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; }
.nf { min-height: 100svh; background: var(--forest); color: var(--paper); display: grid; align-content: center; justify-items: start; gap: 30px; padding: var(--hdr) var(--g); }
.nf-t { font-family: var(--sans); font-weight: 500; font-size: clamp(60px, 10vw, 190px); line-height: .9; letter-spacing: -.045em; }
.nf .btn:hover { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.nf .btn .i-arrow { transform: scaleX(-1); }

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