/* ============================================================
   זיו סול — Copywriter  |  retro-CRT portfolio (Hebrew / RTL)
   V2 — dark terminal palette, hero types itself out live.
   ============================================================ */

:root {
  --sky-top:    #070b12;
  --sky-mid:    #0b111b;
  --sky-bot:    #111a26;
  --ink:        #f2f6fb;   /* off-white text */
  --ink-dim:    #aebbcd;
  --ink-mute:   #7c8ca3;
  --bezel:      #000;
  --green:      #33ff66;   /* #3f6 accent */
  --line:       rgba(244, 247, 251, 0.2);
  --card-bg:    rgba(255, 255, 255, 0.045);
  --bezel-w:    14px;

  --mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sky-mid);
  overflow-x: hidden;               /* no horizontal body scroll */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   CRT OVERLAYS  (all fixed, pointer-events:none, cover viewport)
   ============================================================ */

/* Dark rounded bezel drawn as a thick fixed border via box-shadow inset */
.crt-bezel {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  border: var(--bezel-w) solid var(--bezel);
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 40px rgba(0,0,0,0.55);
}

/* Scanlines + a very subtle flicker */
.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.16) 0px,
    rgba(0,0,0,0.16) 1px,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0) 3px
  );
  mix-blend-mode: multiply;
  animation: flicker 5s steps(60) infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  48%      { opacity: 0.78; }
  50%      { opacity: 0.92; }
  52%      { opacity: 0.80; }
  70%      { opacity: 0.88; }
}

/* Soft radial vignette */
.crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(
    120% 100% at 50% 45%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.28) 100%
  );
}

/* ============================================================
   SKY BACKGROUND + CLOUDS
   ============================================================ */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-bot) 100%);
  overflow: hidden;
}

/* Dark version: the clouds become faint cold glows instead of white puffs */
.cloud {
  position: absolute;
  width: 520px;
  height: 300px;
  background: radial-gradient(closest-side, rgba(120, 170, 235, 0.5), rgba(120, 170, 235, 0) 72%);
  filter: blur(30px);
  opacity: 0.16;
}

.cloud--1 { top: 6%;  left: -8%;  transform: scale(1.2); }
.cloud--2 { top: 28%; right: -10%; transform: scale(1.5); opacity: 0.13; }
.cloud--3 { top: 60%; left: 4%;   transform: scale(1.1); opacity: 0.1; }
.cloud--4 { top: 80%; right: 2%;  transform: scale(1.3); opacity: 0.12; }

/* ============================================================
   MONO MICRO-COPY
   ============================================================ */

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* eased for Hebrew legibility */
  font-size: 0.95rem;
}

/* ============================================================
   NAV (fixed top)
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--bezel-w) + 7px) clamp(16px, 3vw, 36px) 7px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
}

.nav__mark {
  font-weight: 700;
  font-size: clamp(0.86rem, 1.1vw, 1.05rem);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Caret while the wordmark types itself out */
.nav__mark.is-typing::after {
  content: "▌";
  margin-inline-start: 0.06em;
  color: var(--green);
  animation: blink 1.05s steps(2) infinite;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
}
.nav__links a { opacity: 0.82; transition: opacity 0.2s; }
.nav__links a:hover { opacity: 1; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  opacity: 1 !important;
}
.nav__cta:hover { border-color: var(--green); }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
}

.hero__stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* Intro runs in phases, each unlocked by a body class from main.js:
   is-intro  → scroll locked, only the manifesto on screen
   is-mark   → the nav bar appears and its wordmark types itself out
   is-nav    → the rest of the nav joins it
   is-chrome → the chrome mark fades up in the centre
   Dropping is-intro at the end releases the page. */
body.is-intro { overflow: hidden; }
body.is-intro .nav,
body.is-intro .hero__hint,
body.is-intro main > .section,
body.is-intro .footer,
.chrome {
  opacity: 0;
  visibility: hidden;
}

body.is-intro.is-mark .nav { opacity: 1; visibility: visible; }
body.is-intro.is-mark .nav__links { opacity: 0; visibility: hidden; }
body.is-intro.is-mark.is-nav .nav__links { opacity: 1; visibility: visible; }
body.is-chrome .chrome { opacity: 1; visibility: visible; }

.nav,
.nav__links,
.hero__hint,
main > .section,
.footer,
.chrome {
  transition: opacity 0.7s ease;
}

body.is-intro .hero__stage { justify-content: center; }

/* Hero manifesto — centered, oversized; the lines type themselves out */
.hero__manifesto {
  margin-top: clamp(24px, 5vh, 56px);
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.hero__manifesto p {
  font-size: clamp(1.6rem, 5.6vw, 5.2rem);
  color: var(--ink);
}
.hero__manifesto p.hero__punch { color: var(--green); }

/* Typing mode (JS adds .hero--type). Lines start hidden and are revealed one
   by one as each begins typing, so the block grows like an incoming chat. */
.hero--type .hero__manifesto {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 16px);
}
/* Dot-matrix intro type. There is no monospaced Hebrew pixel font on the system
   and no webfont is loaded, so instead of a typeface the glyphs are *filled* with
   a dot grid — background-clip:text paints the pattern only inside the letters,
   which is exactly how an LED / dot-matrix panel builds a character. The grid is
   sized in em so it scales with the type. */
.hero--type .hero__manifesto {
  --dot-ink: #eef4fb;
  --dot-pitch: 0.062em;      /* tight enough that each stroke is 2–3 dots wide */
}
.hero--type .hero__manifesto p {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  min-height: 1.12em;              /* hold the row before its first character */
  letter-spacing: 0.05em;          /* evens out the rhythm, closer to fixed-pitch */
  color: transparent;
  background-image: radial-gradient(circle, var(--dot-ink) 0 42%, transparent 46%);
  background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 0.06em rgba(51, 255, 102, 0.4));
}
.hero--type .hero__manifesto p.hero__punch { --dot-ink: var(--green); }
.hero--type .hero__manifesto p.is-live { display: block; }
.hero--type .hero__manifesto p.is-shown { opacity: 1; transform: none; }

/* Closing line leaves by dissolving upward instead of being backspaced */
.hero--type .hero__manifesto p.is-fading {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

/* Blinking caret rides the line currently being typed */
.hero--type .hero__manifesto p.is-typing::after {
  content: "▌";
  margin-inline-start: 0.06em;
  color: var(--green);
  animation: blink 1.05s steps(2) infinite;
}

/* ============================================================
   CHROME MARK — centred over the hero, docks into the nav on scroll
   ============================================================ */

.chrome {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 70;                      /* over content, under the CRT overlays */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  padding: 0.62em 1.75em;
  border-radius: 50%;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 3.4rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 78%);
  perspective: 1100px;              /* gives the spin below its sense of depth */
  will-change: transform, opacity;
}

/* The badge turns on its own axis forever. It lives on an inner element so the
   scroll dock can keep writing its own transform on .chrome without the two
   overwriting each other. */
.chrome__spin {
  display: block;
  position: relative;
  transform-style: preserve-3d;
  animation: chrome-spin 20s linear infinite;
}
@keyframes chrome-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Brushed-metal ring drawn as a gradient border (mask trick keeps the ellipse).
   Negative inset pushes it out to .chrome's padding edge so it rings the text. */
.chrome__spin::before {
  content: "";
  position: absolute;
  inset: -0.62em -1.75em;
  border-radius: 50%;
  padding: 0.11em;
  background: linear-gradient(150deg, #ffffff 0%, #9fb0c2 16%, #55636f 32%, #ffffff 48%,
                                       #6d7b89 62%, #c9d4df 80%, #ffffff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

.chrome__text {
  background: linear-gradient(180deg, #ffffff 0%, #e2e9f0 24%, #93a1b0 45%, #ffffff 55%,
                                       #7f8d9c 70%, #d9e2ea 88%, #ffffff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Bottom mono hint */
.hero__hint {
  position: absolute;
  inset-inline-start: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 8vh, 72px);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.blink { color: var(--green); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ============================================================
   SECTIONS (shared)
   ============================================================ */

.section {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}

.section__head { margin-bottom: clamp(28px, 5vh, 56px); }
.kicker { color: var(--ink-mute); margin-bottom: 14px; }

.section__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Scroll-reveal initial state (JS adds .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   WORK LIST — a plain list of titles. Nothing expands in place;
   clicking a title opens the project in a popup (see MODAL below).
   ============================================================ */

.section.work { max-width: none; }

.rows {
  --row-ease: cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 1px solid var(--line);
}

.row { border-bottom: 1px solid var(--line); }

.row__head { margin: 0; font-weight: inherit; }
.row__head button {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 34px);
  width: 100%;
  padding: clamp(14px, 2.2vh, 26px) 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* The whole row lifts slightly toward the reader on hover */
.row__head button:hover { padding-inline-start: 10px; }
.row__head button { transition: padding-inline-start 0.3s var(--row-ease); }

.row__dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.3s var(--row-ease), box-shadow 0.3s var(--row-ease);
}
.row__head button:hover .row__dot,
.row__head button:focus-visible .row__dot {
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.row__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;          /* dot-filled glyphs need a little air */
  /* Same dot-matrix treatment as the intro lines: the glyphs are filled with a
     dot grid rather than a flat colour. `color` no longer paints anything, so
     hover swaps --dot-ink instead. */
  --dot-ink: var(--ink);
  --dot-pitch: 0.062em;
  color: transparent;
  background-image: radial-gradient(circle, var(--dot-ink) 0 50%, transparent 54%);
  background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-background-clip: text;
          background-clip: text;
  transition: filter 0.3s var(--row-ease);
}
.row__head button:hover .row__title,
.row__head button:focus-visible .row__title {
  --dot-ink: var(--green);
  filter: drop-shadow(0 0 0.09em rgba(51, 255, 102, 0.55));
}

/* Arrow sits at the far end and leans out on hover */
.row__go {
  margin-inline-start: auto;
  flex: none;
  color: var(--ink-mute);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  transition: transform 0.3s var(--row-ease), color 0.3s var(--row-ease);
}
.row__head button:hover .row__go,
.row__head button:focus-visible .row__go {
  color: var(--green);
  transform: translateX(-8px);      /* RTL: the arrow points leftward */
}

/* The project's copy and artwork live in the markup but are only ever shown
   inside the popup, which clones them on open. */
.row__more,
.row__media { display: none; }
.row__storyboards[hidden] { display: none; }

.row__desc {
  color: var(--ink-dim);
  line-height: 1.75;
  max-width: 62ch;
  padding-top: clamp(14px, 2.4vh, 30px);
}
.row__quote {
  margin-top: 12px;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 700;
  color: var(--green);
}
/* Bulleted brief (used where a project lists its parts) */
.row__list {
  margin-top: 14px;
  padding-inline-start: 1.1em;
  max-width: 62ch;
  color: var(--ink-dim);
  line-height: 1.9;
  list-style: none;
}
.row__list li { position: relative; }
.row__list li::before {
  content: "—";
  position: absolute;
  inset-inline-start: -1.1em;
  color: var(--green);
}

.row__more .tag { margin-top: 18px; margin-bottom: 6px; }

/* ============================================================
   PROJECT POPUP — opened from a work row, filled from its markup
   ============================================================ */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 130;                     /* above the nav and the chrome mark */
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 48px);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.78);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(22px, 3.4vw, 52px);
  background: rgba(11, 17, 27, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: clamp(12px, 1.6vw, 22px);
  inset-inline-end: clamp(12px, 1.6vw, 22px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.modal__close:hover { border-color: var(--green); color: var(--green); }

.modal__kicker {
  width: max-content;
  margin-bottom: 12px;
  padding: 5px 10px;
  border: 1px solid rgba(51, 255, 102, 0.5);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.72rem;
  line-height: 1;
}
.modal__kicker[hidden] { display: none; }

.modal__title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(2.15rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: clamp(20px, 3vh, 34px);
  padding-inline-end: 52px;         /* clear of the close button */
  --dot-ink: #ffffff;
  --dot-pitch: 0.058em;
  color: transparent;
  background-image: radial-gradient(circle, var(--dot-ink) 0 56%, transparent 60%);
  background-size: var(--dot-pitch) var(--dot-pitch);
  -webkit-background-clip: text;
          background-clip: text;
}

/* The popup copy favors comfortable Hebrew reading; terminal typography stays
   reserved for small labels and controls. */
.modal__body {
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}
.modal__body > div {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal__body .row__desc,
.modal__body .row__quote,
.modal__body .row__list {
  max-width: 34ch;
  margin: 0;
  padding-top: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.modal__body .row__desc {
  color: rgba(242, 246, 251, 0.9);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.72;
}
.modal__body .row__quote {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.6;
}
.modal__body .row__list {
  color: rgba(242, 246, 251, 0.84);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}
.modal__body .row__desc:first-child::before,
.modal__body .row__quote::before {
  display: block;
  margin-bottom: 7px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}
.modal__body .row__desc:first-child::before { content: "הבריף"; }
.modal__body .row__quote::before { content: "הרעיון"; }

/* Image-linked text storyboards. These replace the general project copy while
   the corresponding Kaviskal campaign image is active. */
.storyboard {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: rgba(242, 246, 251, 0.9);
}
.storyboard__header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.storyboard__label,
.storyboard__shot-label {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
}
.storyboard__title {
  margin-top: 8px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.12;
}
.storyboard__section {
  display: grid;
  gap: 10px;
}
.storyboard__section-title {
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.07em;
}
.storyboard__section p,
.storyboard__shots {
  font-size: clamp(0.96rem, 1.18vw, 1.07rem);
  line-height: 1.68;
}
.storyboard__characters {
  display: grid;
  gap: 9px;
}
.storyboard__characters strong { color: var(--ink); }
.storyboard__shots {
  display: grid;
  gap: 0;
  list-style: none;
}
.storyboard__shots li {
  display: grid;
  gap: 9px;
  padding: 17px 0;
  border-top: 1px solid rgba(244, 247, 251, 0.13);
}
.storyboard__shots li:first-child { border-top: 0; padding-top: 6px; }
.storyboard__shots blockquote {
  padding: 9px 12px;
  border-inline-start: 2px solid var(--green);
  background: rgba(51, 255, 102, 0.055);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.55;
}
.storyboard__note {
  color: var(--ink-dim);
  font-size: 0.92rem !important;
}
.storyboard__endline {
  color: var(--green);
  font-weight: 750;
}

/* Script and concept treatments for projects whose audio/video is forthcoming. */
.radio-script {
  display: grid;
  gap: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.script__line {
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 247, 251, 0.12);
  color: rgba(242, 246, 251, 0.9);
  font-size: clamp(0.96rem, 1.18vw, 1.07rem);
  line-height: 1.65;
}
.script__line strong { color: var(--green); }
.script__line--button {
  color: var(--ink);
  font-weight: 700;
}
.script__cue {
  margin: 14px 0;
  padding: 10px 12px;
  border-inline-start: 2px solid var(--green);
  background: rgba(51, 255, 102, 0.055);
  color: var(--ink-dim);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
}
.script__cue span {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.script__cue--whisper { color: var(--ink); font-weight: 650; }

.concept-copy {
  display: grid;
  gap: 18px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.concept-copy__contrast {
  display: grid;
  gap: 9px;
}
.concept-copy__contrast p {
  padding: 12px 14px;
  border: 1px solid rgba(244, 247, 251, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 246, 251, 0.88);
  font-size: 1rem;
  line-height: 1.55;
}
.concept-copy__summary {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  font-weight: 650;
  line-height: 1.65;
}

/* Long-form press copy keeps its hierarchy when it shares the narrow text pane
   with the shorter campaign brief. */
.press-release {
  display: grid;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.press-release__label {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 700;
}
.press-release__title {
  color: var(--ink);
  font-size: clamp(1.2rem, 1.65vw, 1.55rem);
  line-height: 1.35;
}
.press-release__subtitle {
  color: rgba(242, 246, 251, 0.9);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.65;
}
.press-release__body {
  display: grid;
  gap: 14px;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.75;
}
.press-release__signoff {
  color: var(--green);
  font-weight: 750;
}

.modal__visuals {
  position: relative;
  margin-top: clamp(18px, 3vh, 34px);
}
.modal__media {
  display: grid;
  gap: clamp(10px, 1.6vw, 20px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.modal__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: zoom-in;
}

/* Full-screen look at one visual. Portrait artwork is height-limited inside the
   popup's landscape pane — it renders at well under half the pane's width — so
   text-heavy pieces need somewhere bigger to be read. */
.imgzoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 2vmin;
  background: rgba(2, 5, 10, 0.94);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.imgzoom.is-open { opacity: 1; }
.imgzoom img {
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
.imgzoom__hint {
  position: absolute;
  bottom: 3vmin;
  inset-inline-start: 50%;
  transform: translateX(50%);
  color: var(--ink-mute);
  pointer-events: none;
}
.modal__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal__media audio { width: min(520px, 90%); }

.media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed rgba(51, 255, 102, 0.46);
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(51, 255, 102, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.025);
  color: var(--ink-dim);
  text-align: center;
}
.media-placeholder__icon {
  color: var(--green);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  text-shadow: 0 0 22px rgba(51, 255, 102, 0.35);
}
.media-placeholder strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.media-placeholder span:last-child { font-size: 0.92rem; }

/* Shared split layout: copy occupies the right third; artwork stacks and scrolls
   in the left two-thirds. Each image is contained within the visible pane. */
.modal--split .modal__panel {
  width: min(1320px, 100%);
  height: 88vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
}
.modal--split .modal__kicker {
  grid-column: 1;
  grid-row: 1;
}
.modal--split .modal__title {
  grid-column: 1;
  grid-row: 2;
}
.modal--split .modal__body {
  grid-column: 1;
  grid-row: 3;
}
.modal--split .modal__visuals {
  grid-column: 2;
  grid-row: 1 / 4;
  min-height: 0;
  margin-top: 0;
}
.modal--split .modal__media {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-snap-type: y mandatory;
  scrollbar-color: var(--green) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}
.modal--split .modal__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 0;
  padding: clamp(4px, 0.6vw, 9px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Only slides holding a picture advertise the zoom — audio and placeholders
   cannot honour it. */
.modal--split .modal__slide:has(img)::after {
  content: "לחצו להגדלה";
  position: absolute;
  inset-inline-start: 50%;
  top: clamp(10px, 1.4vw, 18px);
  transform: translateX(50%);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: rgba(7, 11, 18, 0.82);
  border: 1px solid rgba(51, 255, 102, 0.45);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.9;
}

/* Cover mode: the opening frame is the only route to the rest of the set, so
   its invitation is loud rather than a quiet corner label. */
.modal--cover .modal__slide:has(img)::after {
  content: "לחצו עלי";
  top: auto;
  bottom: clamp(14px, 2vw, 24px);
  padding: 9px 20px;
  font-size: clamp(0.84rem, 1.1vw, 0.98rem);
  color: var(--ink);
  background: rgba(7, 11, 18, 0.9);
  border-color: var(--green);
  box-shadow: 0 0 22px rgba(51, 255, 102, 0.3);
  opacity: 1;
}

.modal--split .modal__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
}
.modal--split .modal__media audio,
.modal--split .modal__media video,
.modal--split .modal__media .media-placeholder {
  align-self: center;
}

.modal__counter {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(51, 255, 102, 0.55);
  border-radius: 999px;
  background: rgba(7, 11, 18, 0.86);
  box-shadow: 0 0 18px rgba(51, 255, 102, 0.2);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1;
  pointer-events: none;
}
.modal__counter[hidden] { display: none; }
.modal__counter-arrow { color: var(--green); }

/* Bio popup. Each line is its own short statement, so they are spaced as a list
   rather than run together as prose, and the opening line carries the name. */
.about-copy {
  display: grid;
  gap: 11px;
  max-width: 56ch;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: rgba(242, 246, 251, 0.88);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.7;
}
.about-copy p { margin: 0; }
.about-copy p:first-child {
  color: var(--ink);
  font-weight: 650;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

/* A popup with no artwork keeps the panel a single readable column. */
.modal:not(.modal--split) .modal__panel { width: min(760px, 100%); }
.modal__visuals[hidden] { display: none; }

/* Sideways gallery (ביסלי סביח). Only above 900px: below that the split panel
   already collapses to a plain vertical stack, and a row of 23 full-width slides
   inside an overflow:visible track would simply run off the page. In RTL the row
   starts at the right, so frame 1 sits where the eye already is. */
@media (min-width: 901px) {
  /* scroll-snap-stop: always pins the track to the very next snap point, which
     caps every programmatic jump at one slide and makes the wrap from the last
     frame back to the first impossible. The sideways gallery is 23 frames long,
     so it trades that for being able to move freely. */
  .modal--split.modal--hgallery .modal__slide { scroll-snap-stop: normal; }

  .modal--split.modal--hgallery .modal__media {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
}

/* Gallery controls, in the popup and in the full-screen view. Both sets are
   round green-edged pills so they read as one control language. */
.modal__nav,
.modal__auto,
.imgzoom__nav,
.imgzoom__auto {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(51, 255, 102, 0.5);
  border-radius: 999px;
  background: rgba(7, 11, 18, 0.86);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.modal__nav:hover,
.modal__auto:hover,
.imgzoom__nav:hover,
.imgzoom__auto:hover {
  border-color: var(--green);
  color: var(--green);
}
.modal__nav[hidden],
.modal__auto[hidden] { display: none; }

/* At either end the arrow has nowhere to go, so it says so rather than
   swallowing the click. */
.modal__nav:disabled,
.imgzoom__nav:disabled {
  opacity: 0.28;
  cursor: default;
  border-color: rgba(51, 255, 102, 0.22);
}
.modal__nav:disabled:hover,
.imgzoom__nav:disabled:hover { color: var(--ink); border-color: rgba(51, 255, 102, 0.22); }

.modal__nav,
.imgzoom__nav {
  top: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-50%);
}
.modal__nav { width: 44px; height: 44px; font-size: 1.05rem; }
.imgzoom__nav { width: 52px; height: 52px; font-size: 1.3rem; }
.modal__nav--prev { inset-inline-start: clamp(8px, 1vw, 16px); }
.modal__nav--next { inset-inline-end: clamp(8px, 1vw, 16px); }
.imgzoom__nav--prev { inset-inline-start: clamp(10px, 2vw, 30px); }
.imgzoom__nav--next { inset-inline-end: clamp(10px, 2vw, 30px); }

/* Sits opposite the counter. The counter carries dir="ltr" so its digits read
   correctly, which also flips its own inline axis and pins it physically right;
   these buttons inherit RTL, so inset-inline-end puts them physically left. */
.modal__auto {
  bottom: clamp(18px, 2vw, 28px);
  inset-inline-end: clamp(18px, 2vw, 28px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 0.76rem;
  line-height: 1;
}
.imgzoom__auto {
  top: clamp(10px, 2vw, 30px);
  inset-inline-end: clamp(10px, 2vw, 30px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
  line-height: 1;
}
.modal__auto.is-on,
.imgzoom__auto.is-on {
  border-color: var(--green);
  color: var(--green);
  background: rgba(51, 255, 102, 0.14);
}
.imgzoom__count {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 2vw, 30px);
  inset-inline-end: clamp(10px, 2vw, 30px);
  color: var(--ink-dim);
  pointer-events: none;
}

/* Below 900px the popup gallery is a plain stack, so its controls have nothing
   to drive. The full-screen view still pages, so its controls stay. */
@media (max-width: 900px) {
  .modal__nav,
  .modal__auto { display: none; }
}

body.modal-open { overflow: hidden; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
}
/* placeholder marker on the sample rows */
.tag--ph {
  margin-inline-start: 8px;
  border-style: dashed;
  color: var(--ink-mute);
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact { text-align: center; padding-bottom: clamp(90px, 14vh, 160px); }
.contact .section__head { margin-bottom: 24px; }
.contact .kicker { color: var(--ink-mute); }

.contact__email {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  word-break: break-word;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.contact__email:hover { color: var(--green); text-shadow: 0 0 24px rgba(51,255,102,0.5); }

.contact__social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 40px);
  margin-top: clamp(28px, 5vh, 48px);
  color: var(--ink-dim);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.contact__social a { transition: color 0.2s ease; }
.contact__social a:hover { color: var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 24px clamp(20px, 5vw, 80px) calc(var(--bezel-w) + 20px);
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hero__stage { justify-content: flex-start; padding-top: 22vh; }
  .hero__hint { position: static; margin-top: 24px; }
  .modal__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .modal--split .modal__panel {
    height: auto;
    overflow-y: auto;
    display: block;
  }
  .modal--split .modal__visuals {
    margin-top: clamp(18px, 3vh, 34px);
  }
  .modal--split .modal__media {
    overflow: visible;
  }
  .modal--split .modal__slide {
    padding: 0;
  }
  .modal--split .modal__media img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .modal__counter { display: none; }
}

@media (max-width: 620px) {
  .modal__panel { padding: 20px 16px; max-height: 92vh; }
  .modal__media { grid-template-columns: 1fr; }
  .nav__links { gap: 12px; }
  .nav__links a:not(.nav__cta) { display: none; }   /* keep nav uncluttered on phones */

  /* Header pared right back on phones. The full wordmark plus the pill needs
     more room than a phone has, so both are small and neither may wrap. */
  .nav { padding: calc(var(--bezel-w) + 4px) 12px 4px; font-size: 0.64rem; }
  .nav__mark { font-size: 0.68rem; letter-spacing: 0.02em; }
  .nav__cta { font-size: 0.6rem; padding: 4px 9px; gap: 5px; }
  .nav__mark,
  .nav__cta { white-space: nowrap; }
  .dot { width: 6px; height: 6px; }

  /* Titles carry the same dot fill, so they need the same coarsening at phone
     sizes — the desktop pitch would land under 2px and smear. */
  .row__title { --dot-pitch: 0.11em; }
  .modal__title { --dot-pitch: 0.1em; }

  /* Intro type much smaller too. The dot grid is coarsened here on purpose: at
     this size the desktop pitch lands under a pixel and smears into a blur, so
     the dots are spread out enough to still read as dots. */
  .hero__manifesto p { font-size: 1rem; }
  .hero--type .hero__manifesto { --dot-pitch: 0.13em; }
}

@media (max-width: 375px) {
  :root { --bezel-w: 10px; }
}

/* ============================================================
   REDUCED MOTION — kill marquee, reveals, flicker, pulses.
   (main.js also checks this and prints the manifesto without typing.)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chrome__spin,
  .crt-scanlines,
  .dot,
  .blink { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}