/* ============================================================
   YAI — ידיעות AI · The Living Edition
   Quiet Premium: ink on warm paper, color strictly rationed.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Karantina';
  src: url('../assets/fonts/woff2/Karantina-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../assets/fonts/woff2/FrankRuhlLibre-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../assets/fonts/woff2/FrankRuhlLibre-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../assets/fonts/woff2/FrankRuhlLibre-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  src: url('../assets/fonts/woff2/Heebo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  src: url('../assets/fonts/woff2/Heebo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Metric-adjusted fallback to soften CLS for the condensed display face */
@font-face {
  font-family: 'Karantina-fallback';
  src: local('Arial Hebrew'), local('Arial');
  size-adjust: 72%;
  ascent-override: 100%;
}

/* ---------- Tokens ---------- */
:root {
  /* ground */
  --paper: #FAF8F4;
  --card: #F4F1EB;
  --quote-panel: #F1EEE8;
  --dark: #100F0E;
  /* text */
  --ink: #121110;
  --platinum: #F3F2EF;
  --stone: #BDB8B0;
  /* house accent */
  --graphite: #4A443C;
  --graphite-45: rgba(74, 68, 60, 0.45);
  --quiet: rgba(74, 68, 60, 0.85); /* micro-type: AA-contrast quiet text (headroom above 4.5:1); 0.45 stays for rules/tracks */
  --gold-text: #8A5C13; /* AA on card/wash; --gold remains for rules/washes */
  --graphite-16: rgba(74, 68, 60, 0.16);
  --graphite-12: rgba(74, 68, 60, 0.12);
  --graphite-08: rgba(74, 68, 60, 0.08);
  --graphite-06: rgba(74, 68, 60, 0.06);
  --rule: rgba(74, 68, 60, 0.7);
  /* the triad — marks only */
  --aubergine: #6A3D6E;
  --aubergine-08: rgba(106, 61, 110, 0.08);
  --aubergine-12: rgba(106, 61, 110, 0.12);
  --aubergine-45: rgba(106, 61, 110, 0.45);
  --gold: #9E6B1B;
  --gold-08: rgba(158, 107, 27, 0.08);
  --gold-45: rgba(158, 107, 27, 0.45);
  --green: #3E6B4E;
  --green-08: rgba(62, 107, 78, 0.08);
  --green-45: rgba(62, 107, 78, 0.45);
  /* type */
  --display: 'Karantina', 'Karantina-fallback', 'Noto Serif Hebrew', serif;
  --serif: 'Frank Ruhl Libre', 'Noto Serif Hebrew', Georgia, serif;
  --sans: 'Heebo', 'Noto Sans Hebrew', -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
  /* shape & space */
  --r-control: 14px;
  --r-panel: 16px;
  --r-card: 20px;
  --gutter: 22px;
  --measure: 640px;
  /* motion */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring: cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

img { display: block; max-inline-size: 100%; }

.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.mono { font-family: var(--mono); }

.container {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--measure { max-inline-size: calc(var(--measure) + 2 * var(--gutter)); }
.container--narrow { max-inline-size: 820px; }

.section { padding-block: clamp(96px, 14vh, 160px); }

/* ---------- Shared editorial furniture ---------- */

/* Section seal: mono dateline over a rule that draws from the right */
.seal { margin-block-end: 48px; }
.seal__dateline {
  font-size: 13px;
  color: var(--quiet);
  margin-block-end: 12px;
}
.seal__rule {
  display: block;
  block-size: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: 100% 50%; /* draws from the right — RTL reading start */
}
.is-visible .seal__rule, .seal.is-visible .seal__rule { transform: scaleX(1); }

/* Kicker flag: short accent rule + bold label */
.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 20px;
}
.kicker__flag {
  inline-size: 18px;
  block-size: 2px;
  background: var(--graphite);
  flex-shrink: 0;
}

.section__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-block-end: 20px;
}

.section__sub {
  font-size: 19px;
  max-inline-size: 34rem;
  margin-block-end: 40px;
}

/* AI transparency pill */
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--graphite);
  background: var(--graphite-06);
  border: 1px solid var(--graphite-16);
  border-radius: 999px;
  padding: 8px 16px;
}
.ai-pill__spark { inline-size: 11px; block-size: 11px; fill: var(--graphite); flex-shrink: 0; }
.ai-pill--dark { color: var(--stone); background: rgba(243, 242, 239, 0.06); border-color: rgba(243, 242, 239, 0.16); }
.ai-pill--dark .ai-pill__spark { fill: var(--stone); }

/* Pull-quote panel */
.pull-quote {
  position: relative;
  background: var(--quote-panel);
  border-inline-start: 3px solid var(--graphite);
  border-radius: var(--r-panel);
  padding: 32px 36px;
  margin-block-start: 48px;
  overflow: clip;
}
.pull-quote__mark {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: 16px;
  font-family: var(--serif);
  font-size: 110px;
  line-height: 1;
  color: var(--graphite-12);
  pointer-events: none;
}
.pull-quote__label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  color: var(--quiet);
  margin-block-end: 10px;
}
.pull-quote__text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
}
.pull-quote--aubergine { border-inline-start-color: var(--aubergine); }
.pull-quote--aubergine .pull-quote__mark { color: var(--aubergine-12); }

/* YAI wordmark via CSS mask — ink on paper, platinum on dark */
.yai-mark, .yai-mask {
  display: inline-block;
  background-color: var(--ink);
  -webkit-mask-image: url('../assets/brand/YAIMark.png');
  mask-image: url('../assets/brand/YAIMark.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.yai-mark--masthead { inline-size: 140px; block-size: 64px; margin-block-end: 28px; }
.yai-mark--bar { inline-size: 62px; block-size: 28px; }

/* App Store badge: תג שחור בפרופורציות התג הרשמי של אפל,
   לוגו אפל ראשון (ימין ב-RTL) ושתי שורות טקסט, בשפת העיצוב של האתר */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-control);
  padding: 12px 26px 13px;
  text-decoration: none;
  min-block-size: 58px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(18, 17, 16, 0.18);
  transition: transform 0.18s var(--spring), opacity 0.18s var(--spring), box-shadow 0.18s var(--spring);
}
.appstore-badge:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 22px rgba(18, 17, 16, 0.22), 0 0 0 2px var(--aubergine-45);
}
.appstore-badge:active { transform: translateY(0) scale(0.985); opacity: 0.85; }
.appstore-badge__apple { inline-size: 23px; block-size: 28px; fill: var(--paper); flex-shrink: 0; margin-block-start: -2px; }
.appstore-badge__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.12; text-align: start; }
.appstore-badge__text small { font-family: var(--sans); font-size: 12px; font-weight: 400; opacity: 0.82; letter-spacing: 0.01em; }
.appstore-badge__text strong { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.appstore-badge--dark { background: var(--platinum); color: var(--dark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.appstore-badge--dark:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--aubergine);
}
.appstore-badge--dark .appstore-badge__apple { fill: var(--dark); }

/* גרסת המאסטהד: גלולה נמוכה שחיה בתוך כרטיס הניווט */
.appstore-badge--bar { padding: 0 17px; min-block-size: 42px; gap: 9px; border-radius: 999px; }
.appstore-badge--bar .appstore-badge__apple { inline-size: 14px; block-size: 17px; margin-block-start: -1px; }
.appstore-badge--bar .appstore-badge__text { gap: 0; }
.appstore-badge--bar .appstore-badge__text small { font-size: 10px; }
.appstore-badge--bar .appstore-badge__text strong { font-size: 13.5px; }
@media (max-width: 640px) {
  /* במובייל: עיגול עם לוגו אפל בלבד, ה-aria-label נשאר */
  .appstore-badge--bar { padding: 0; inline-size: 40px; min-block-size: 40px; justify-content: center; }
  .appstore-badge--bar .appstore-badge__text { display: none; }
  .appstore-badge--bar .appstore-badge__apple { inline-size: 16px; block-size: 19px; }
}

/* Anatomy labels (§6) */
.anatomy-label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--quiet);
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--graphite-16);
}

:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 3px;
}
.tomorrow :focus-visible, .masthead-bar.on-dark :focus-visible { outline-color: var(--stone); }

/* Skip-link (a11y: WCAG 2.4.1 Bypass Blocks) */
.skip {
  position: absolute; right: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 0 0 0 8px; z-index: 200;
  font-family: var(--sans); font-size: 14px; text-decoration: none;
}
.skip:focus { right: 0; }
/* Keyboard-focusable horizontal carousels: keep the focus ring visible even
   though .triad/.headline-wall bleed to the viewport edge on mobile */
.voices__strip:focus-visible, .triad:focus-visible, .headline-wall:focus-visible {
  outline: 2px solid var(--aubergine); outline-offset: -3px; border-radius: 6px;
}

/* ---------- Reading-progress rule (right edge) ---------- */
.progress-rule {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  right: 0; /* physical: the machine voice lives on the right edge */
  inline-size: 1.5px;
  background: var(--graphite-08);
  z-index: 90;
  pointer-events: none;
}
.progress-rule__fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--graphite-45);
  transform: scaleY(0);
  transform-origin: top;
}

/* ---------- Masthead bar ----------
   Visual base (the floating pill card) lives in chrome.css (shared with
   the sub-pages); here only the homepage behavior: fixed, hidden until
   the hero fold, and the dark-band flip. */
.masthead-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  transform: translateY(-110%);
  transition: transform 0.3s var(--ease-out);
}
.masthead-bar.is-shown { transform: translateY(0); }
.masthead-bar__cta { flex-shrink: 0; }
.masthead-bar.on-dark .yai-mark--bar { background-color: var(--platinum); }
.masthead-bar.on-dark .appstore-badge--bar { background: var(--platinum); color: var(--dark); }
.masthead-bar.on-dark .appstore-badge--bar .appstore-badge__apple { fill: var(--dark); }

/* ============================================================
   §1 HERO — השער
   ============================================================ */
.hero {
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 64px 32px;
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
  inline-size: 100%;
}
.hero__seal { margin-block-end: 32px; }
.hero__kicker { margin-block-end: 24px; }
.hero__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 6.6vw, 88px);
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin-block-end: 28px;
  white-space: nowrap;
}
.hero__headline-line { display: block; }
.hero__subtitle {
  font-size: 20px;
  line-height: 1.6;
  max-inline-size: 34rem;
  margin-block-end: 28px;
}
.hero__pill { margin-block-end: 36px; }
.hero__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__ios { font-size: 12px; color: var(--quiet); }
.hero__credit {
  font-size: 11px;
  color: var(--quiet);
  margin-block-start: 40px;
}
.hero__sentinel { position: absolute; inset-block-end: 0; block-size: 1px; inline-size: 1px; }

/* Cover story card — Home cover recipe */
.cover-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  aspect-ratio: 1;
  border: 1px solid var(--graphite-16);
}
.cover-card__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.cover-card__chip {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 18px;
  z-index: 2;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--aubergine);
  border-radius: 999px;
  padding: 6px 14px;
}
.cover-card__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  padding: 24px;
}
.cover-card__kicker {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-block-end: 10px;
}
.cover-card__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.5px;
  line-height: 1.12;
  color: #fff;
}

/* ============================================================
   §2 דבר המערכת
   ============================================================ */
.editorial__body { margin-block-start: 8px; }

/* ============================================================
   §3 הקולות
   ============================================================ */
.voices__strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-x: contain;
  padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  padding-block: 8px 16px;
  scrollbar-width: none;
}
.voices__strip::-webkit-scrollbar { display: none; }
.voice-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  inline-size: 168px;
  background: var(--card);
  border: 1px solid var(--graphite-16);
  border-radius: var(--r-panel);
  padding: 24px 20px;
  text-align: center;
}
.voice-card__avatar {
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  margin-block-end: 14px;
  border: 1px solid var(--graphite-16);
}
.voice-card__name { font-family: var(--serif); font-size: 18px; font-weight: 500; margin-block-end: 4px; }
.voice-card__handle { font-size: 12px; color: var(--quiet); }
.voice-card--endcap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--graphite-06);
}
.voice-card__more { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--graphite); }
.voices__stats {
  font-size: 13px;
  color: var(--quiet);
  margin-block-start: 16px;
}
/* Real "המקורות" app screen, framed as a device (product demonstration) */
.voices__shot-wrap { display: flex; justify-content: center; margin-block-start: 40px; }
.voices__shot {
  margin: 0;
  inline-size: min(300px, 78vw);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--graphite-16);
  box-shadow: 0 24px 60px rgba(18, 17, 16, 0.16), 0 4px 14px rgba(18, 17, 16, 0.08);
  background: var(--paper);
}
.voices__shot img { display: block; inline-size: 100%; block-size: auto; }

/* ============================================================
   §4 חדר המכונות — pressroom
   ============================================================ */
.pressroom__arith {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--quiet);
  margin-block-start: -8px;
}

.pressroom__scene { block-size: 300vh; block-size: 300svh; position: relative; margin-block-start: 48px; }
.pressroom__pin {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: clip;
  display: flex;
  align-items: center;
}
.pressroom__pin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
  inline-size: 100%;
}

/* Step cards crossfade in place */
.pressroom__steps { position: relative; min-block-size: 480px; }
.press-step {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(calc(-50% + 32px));
  inset-inline: 0;
  max-inline-size: var(--measure);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.press-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  pointer-events: auto;
  transition-delay: 0s;
}
.press-step__num {
  font-size: 28px;
  color: var(--quiet);
  margin-block-end: 12px;
}
.press-step__label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--graphite);
  margin-block-end: 16px;
}
.press-step__body { font-size: 19px; line-height: 1.6; }
.press-step__verdict {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  margin-block-start: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.press-step__verdict--2 { transition-delay: 0.15s; margin-block-start: 8px; }
.press-step.show-verdicts .press-step__verdict { opacity: 1; transform: translateY(0); }
.press-step__gateline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  margin-block-start: 16px;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.press-step.show-gateline .press-step__gateline { opacity: 1; }

/* Silence beat */
.press-step--silence { text-align: center; }
.press-silence__time { font-size: 18px; color: var(--quiet); margin-block-end: 16px; }
.press-silence__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.press-silence__cta {
  margin-block-start: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.press-silence__caption { font-size: 12px; color: var(--quiet); }

.appstore-badge--compact { padding: 10px 18px; min-block-size: 48px; gap: 10px; }
.appstore-badge--compact .appstore-badge__apple { inline-size: 18px; block-size: 22px; }
.appstore-badge--compact .appstore-badge__text small { font-size: 11px; }
.appstore-badge--compact .appstore-badge__text strong { font-size: 16px; }

/* Page-scale print-run rule */
.pressroom__printrule {
  position: absolute;
  inset-block-end: 48px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}
.pressroom__printrule.is-drawn { transform: scaleX(1); }

/* Stage progress rule under the phone */
.pressroom__stagerule {
  display: block;
  inline-size: 100%;
  block-size: 1.5px;
  background: var(--graphite-08);
  margin-block-start: 24px;
  overflow: clip;
}
.pressroom__stagerule-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--graphite-45);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

/* ---------- The CSS iPhone ---------- */
.pressroom__device { inline-size: 330px; }
.iphone {
  padding: 1px;
  background: linear-gradient(135deg, #555 0%, #000 100%);
  border-radius: 56px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.09),
    0 8px 16px rgba(0, 0, 0, 0.07),
    0 16px 32px rgba(0, 0, 0, 0.05),
    0 32px 64px rgba(0, 0, 0, 0.03);
}
.iphone__casing {
  background: #181818;
  border-radius: 55px;
  padding: 5px;
}
.iphone__screen {
  position: relative;
  border-radius: 50px;
  overflow: clip;
  aspect-ratio: 1206 / 2622;
  background: var(--dark);
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.4);
}
/* Dynamic Island */
.iphone__screen::before {
  content: '';
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 32%;
  block-size: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #1a1a1a 0%, #050505 100%);
  z-index: 10;
}
/* Glass glint */
.iphone__screen::after {
  content: '';
  position: absolute;
  inset: -25%;
  background: linear-gradient(155deg, transparent 35%, rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0.02) 60%, transparent 60%);
  pointer-events: none;
  z-index: 11;
}

/* Phone screens — stacked, crossfaded */
.phone-lock, .phone-feed {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.phone-lock {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: 26%;
  opacity: 1;
}
.phone-lock__ghost {
  position: absolute;
  inset-block-end: 14%;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 44%;
  block-size: 18%;
  background-color: rgba(243, 242, 239, 0.12);
}
.phone-lock__clock { position: relative; block-size: 64px; inline-size: 100%; text-align: center; }
.phone-lock__time {
  position: absolute;
  inset-inline: 0;
  font-size: 56px;
  font-weight: 300;
  color: var(--platinum);
  line-height: 1;
  transition: opacity 0.25s var(--ease-out);
}
.phone-lock__time--publish { opacity: 0; }
.iphone.time-published .phone-lock__time--morning { opacity: 0; }
.iphone.time-published .phone-lock__time--publish { opacity: 1; }
.phone-lock__date {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--stone);
  margin-block-start: 12px;
}

/* Push banner */
.push-banner {
  position: absolute;
  inset-block-start: 34%;
  inset-inline: 10px;
  background: rgba(26, 25, 23, 0.92);
  border: 1px solid rgba(243, 242, 239, 0.16);
  border-radius: var(--r-card);
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s var(--spring), transform 0.4s var(--spring);
}
.iphone.push-arrived .push-banner { opacity: 1; transform: translateY(0); }
.push-banner__head { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; }
.push-banner__icon {
  inline-size: 22px;
  block-size: 14px;
  background-color: var(--platinum);
  flex-shrink: 0;
}
.push-banner__app { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--stone); flex: 1; }
.push-banner__time { font-size: 10px; color: var(--stone); opacity: 0.7; }
.push-banner__title { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--platinum); margin-block-end: 3px; }
.push-banner__body { font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--stone); }

/* S2 — the issue feed */
.phone-feed {
  background: var(--paper);
  opacity: 0;
  transform: scale(0.98);
  display: flex;
  flex-direction: column;
  padding: 44px 12px 10px;
}
.iphone[data-state="s2"] .phone-lock { opacity: 0; pointer-events: none; }
.iphone[data-state="s2"] .phone-feed { opacity: 1; transform: scale(1); }
.phone-feed__status {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 24px;
  font-size: 11px;
  color: var(--ink);
}
.phone-feed__masthead { display: block; margin-block-end: 10px; }
.phone-feed__mark { inline-size: 46px; block-size: 21px; margin-inline: auto; display: block; }
/* The arrival beat: the edition rule draws inside the phone when the issue opens */
.phone-feed__masthead::after {
  content: '';
  display: block;
  block-size: 1px;
  background: var(--rule);
  margin-block-start: 9px;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out) 0.15s;
}
.iphone[data-state="s2"] .phone-feed__masthead::after { transform: scaleX(1); }
.phone-feed__sources { margin-block-end: 10px; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.iphone[data-state="s2"] .phone-feed__sources { opacity: 1; transition-delay: 0.5s; }
.phone-feed__sources-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--graphite-45);
  margin-block-end: 6px;
}
.phone-feed__avatars { display: flex; gap: 5px; }
.phone-feed__avatars img {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--graphite-16);
}
.phone-feed__cards { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow: clip; justify-content: flex-start; padding-block-end: 4px; }
.feed-card {
  display: flex;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--graphite-16);
  border-radius: 14px;
  padding: 11px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.iphone[data-state="s2"] .feed-card--1 { transition-delay: 0.65s; }
.iphone[data-state="s2"] .feed-card--2 { transition-delay: 0.78s; }
.iphone[data-state="s2"] .feed-card--3 { transition-delay: 0.91s; }
.iphone[data-state="s2"] .feed-card--4 { transition-delay: 1.0s; }
.iphone[data-state="s2"] .feed-card { opacity: 1; transform: translateY(0); }
.feed-card__thumb {
  inline-size: 68px;
  block-size: 68px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.feed-card__text { min-inline-size: 0; }
.feed-card__chip {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 9.5px;
  border-radius: 999px;
  padding: 2px 8px;
  margin-block-end: 5px;
  border: 1px solid;
}
.feed-card__chip--ai { color: var(--aubergine); background: var(--aubergine-08); border-color: var(--aubergine-45); }
.feed-card__chip--ent { color: var(--gold); background: var(--gold-08); border-color: var(--gold-45); }
.feed-card__chip--sport { color: var(--green); background: var(--green-08); border-color: var(--green-45); }
.feed-card__headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.38;
}
.feed-card__dek {
  font-family: var(--serif);
  font-size: 10.5px;
  line-height: 1.42;
  color: var(--graphite);
  margin-block-start: 4px;
}
.phone-feed__dock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(244, 241, 235, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--graphite-16);
  border-radius: 999px;
  padding: 7px 12px;
  position: absolute;
  inset-block-end: 12px;
  inset-inline: 12px;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.iphone[data-state="s2"] .phone-feed__dock { opacity: 1; transition-delay: 1.05s; }
.dock-tab {
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--graphite-45);
  padding: 5px 7px;
}
.dock-tab--active {
  color: var(--paper);
  background: var(--graphite);
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 700;
}
.dock-tab--ai { color: var(--aubergine); }
.dock-tab--ent { color: var(--gold); }
.dock-tab--sport { color: var(--green); }

/* ---------- Ethics box coda ---------- */
.ethics { padding-block-start: 96px; }
.ethics__box {
  background: var(--card);
  border: 1px solid var(--graphite-16);
  border-radius: var(--r-panel);
  padding: 40px;
  max-inline-size: 760px;
  margin-inline: auto;
}
.ethics__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-block-end: 28px;
}
.ethics__row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  padding-block: 18px;
  border-block-start: 1px solid var(--graphite-16);
}
.ethics__row dt { font-family: var(--sans); font-weight: 700; font-size: 16px; }
.ethics__row dd { font-size: 19px; line-height: 1.55; }
.ethics__row dd { min-inline-size: 0; }
.ethics__imprint {
  font-size: 11px;
  color: var(--quiet);
  margin-block-start: 20px;
  text-align: start;
}
.ethics__stats {
  font-size: 13px;
  color: var(--quiet);
  text-align: center;
  margin-block-start: 40px;
}

/* ============================================================
   §5 המדורים — triad
   ============================================================ */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block-start: 48px;
}
.triad-card {
  background: var(--card);
  border: 1px solid var(--graphite-16);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.15s var(--spring), opacity 0.15s var(--spring);
}
.triad-card:active { transform: scale(0.985); opacity: 0.82; }
.triad-card__kicker { margin-block-end: 0; }
.triad-card__chip {
  align-self: flex-start;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid;
  padding: 4px 12px;
}
.triad-card__headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  flex: 1;
}
/* Real app screenshot inside a triad card (replaces the illustrative headline) */
.triad-card__shot {
  flex: 1;
  margin-block: 4px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--graphite-16);
  box-shadow: 0 10px 28px rgba(18, 17, 16, 0.10);
  background: var(--paper);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari corner clip */
}
.triad-card__shot img { display: block; width: 100%; height: auto; }
.triad-card__handle { font-size: 12px; color: var(--quiet); }
.triad-card__credit {
  font-size: 11px;
  color: var(--quiet);
  padding-block-start: 14px;
  border-block-start: 1px solid var(--graphite-16);
}
.triad-card--ai .kicker__flag { background: var(--aubergine); }
.triad-card--ai .triad-card__kicker { color: var(--aubergine); }
.triad-card--ai .triad-card__chip { color: var(--aubergine); background: var(--aubergine-08); border-color: var(--aubergine-45); }
.triad-card--ai .triad-card__credit { border-block-start-color: var(--aubergine-45); }
.triad-card--ent .kicker__flag { background: var(--gold); }
.triad-card--ent .triad-card__kicker { color: var(--gold-text); }
.triad-card--ent .triad-card__chip { color: var(--gold-text); background: var(--gold-08); border-color: var(--gold-45); }
.triad-card--ent .triad-card__credit { border-block-start-color: var(--gold-45); }
.triad-card--sport .kicker__flag { background: var(--green); }
.triad-card--sport .triad-card__kicker { color: var(--green); }
.triad-card--sport .triad-card__chip { color: var(--green); background: var(--green-08); border-color: var(--green-45); }
.triad-card--sport .triad-card__credit { border-block-start-color: var(--green-45); }

/* ============================================================
   §5.5 מתוך הגיליונות — headline wall
   ============================================================ */
.headline-wall { list-style: none; margin-block-start: 16px; }
.headline-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-block-start: 1px solid var(--graphite-16);
}
.headline-row:last-child { border-block-end: 1px solid var(--graphite-16); }
.headline-row__text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.4;
}
.headline-row__handle { font-size: 12px; color: var(--quiet); flex-shrink: 0; }

/* ============================================================
   §6 שולחן הקריאה — specimen
   ============================================================ */
.specimen { margin-block-start: 24px; }
.specimen__kicker { color: var(--aubergine); }
.specimen__kicker .kicker__flag { background: var(--aubergine); }
.specimen__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 32px);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-block-end: 24px;
}
.specimen__quote { margin-block: 32px; }
.specimen__gloss {
  background: var(--graphite-06);
  border: 1px solid var(--graphite-16);
  border-radius: var(--r-panel);
  padding: 20px 24px;
  margin-block-end: 32px;
}
.specimen__gloss-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--quiet);
  margin-block-end: 8px;
}
.specimen__gloss-text { font-size: 19px; }
.specimen__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.specimen__avatar {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--graphite-16);
}
.specimen__name { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.specimen__handle { font-size: 12px; color: var(--quiet); }
.specimen__source { font-size: 12px; color: var(--quiet); margin-inline-start: auto; }
.specimen__cut-rule {
  border: none;
  block-size: 1px;
  background: var(--graphite-16);
  margin-block: 40px 24px;
}
.specimen__cut {
  text-align: center;
  font-size: 13px;
  color: var(--quiet);
}
.specimen__cta {
  margin-block-start: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.specimen__cta-caption { font-size: 12px; color: var(--quiet); }

/* ============================================================
   §7 מחר ב-06:00 — dark band
   ============================================================ */
.tomorrow {
  background: var(--dark);
  color: var(--platinum);
  padding-block: clamp(96px, 16vh, 180px) 64px;
  text-align: center;
}
.seal--dark .seal__dateline { color: var(--stone); }
.seal--dark .seal__rule { background: rgba(189, 184, 176, 0.7); }
.tomorrow__headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 72px);
  letter-spacing: -0.5px;
  line-height: 1.08;
  color: var(--platinum);
  margin-block: 48px 20px;
}
.tomorrow__subline {
  font-size: 20px;
  color: var(--stone);
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-end: 48px;
}
.tomorrow__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-block-end: 36px;
}
.tomorrow__microcopy { font-size: 13px; color: var(--stone); }

/* ============================================================
   Motion — three verbs, page-wide, fully gated
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Verb 1: edition rule draw */
  .seal__rule { transition: transform 0.45s var(--ease-out); }

  /* Verb 2: fade-rise reveals (JS-gated — page stays readable without JS) */
  html:not(.no-js) .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  html:not(.no-js) .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* Hero load choreography */
  html:not(.no-js) .hero__text > * { opacity: 0; }
  html:not(.no-js) .hero__credit { opacity: 0; }
  body.is-loaded .yai-mark--masthead { animation: heroFade 0.01s var(--ease-out) 0s both; }
  body.is-loaded .hero__seal .seal__dateline { animation: heroFade 0.35s var(--ease-out) 0.45s both; }
  body.is-loaded .hero__seal { opacity: 1; }
  body.is-loaded .hero__seal .seal__rule { animation: ruleDraw 0.45s var(--ease-out) 0.2s both; }
  body.is-loaded .hero__kicker { animation: heroRise 0.45s var(--spring) 0.58s both; }
  body.is-loaded .hero__headline { opacity: 1; }
  body.is-loaded .hero__headline-line:nth-child(1) { animation: heroRise 0.5s var(--spring) 0.65s both; }
  body.is-loaded .hero__headline-line:nth-child(2) { animation: heroRise 0.5s var(--spring) 0.73s both; }
  body.is-loaded .hero__subtitle { animation: heroRise 0.45s var(--spring) 0.95s both; }
  body.is-loaded .hero__pill { animation: heroRise 0.45s var(--spring) 1.0s both; }
  body.is-loaded .hero__cta { animation: heroRise 0.45s var(--spring) 1.15s both; }
  body.is-loaded .hero__cover { animation: heroFade 0.6s var(--ease-out) 1.3s both; }
  body.is-loaded .hero__cover .cover-card__caption { animation: heroRise 0.45s var(--spring) 1.45s both; }
  body.is-loaded .hero__cover .cover-card__chip { animation: heroFade 0.35s var(--ease-out) 1.55s both; }
  body.is-loaded .hero__credit { animation: heroFade 0.35s var(--ease-out) 1.6s both; }

  html:not(.no-js) .hero__headline-line { opacity: 0; }
  html:not(.no-js) .hero__cover { opacity: 0; }
  html:not(.no-js) .hero__cover .cover-card__caption,
  html:not(.no-js) .hero__cover .cover-card__chip { opacity: 0; }
  html:not(.no-js) .hero__seal .seal__dateline { opacity: 0; }
  html:not(.no-js) .hero__seal .seal__rule { transition: none; }

  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* no-JS: the pressroom unrolls statically and fully printed */
html.no-js .pressroom__scene { block-size: auto; }
html.no-js .pressroom__pin { position: static; block-size: auto; overflow: visible; display: block; }
html.no-js .pressroom__steps { min-block-size: 0; display: flex; flex-direction: column; gap: 56px; }
html.no-js .press-step, html.no-js .press-step.is-active { position: static; transform: none !important; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
html.no-js .press-step--silence { display: none; }
html.no-js .press-step__verdict, html.no-js .press-step__gateline { opacity: 1 !important; transform: none !important; }
html.no-js .pressroom__stagerule { display: none; }
html.no-js .pressroom__printrule { position: static; display: block; margin-block-start: 48px; transform: scaleX(1); }
html.no-js .seal__rule { transform: scaleX(1); }
html.no-js .progress-rule { display: none; }
html.no-js .masthead-bar { transform: translateY(0); }
html.no-js .phone-feed__sources, html.no-js .phone-feed__dock { opacity: 1; }
html.no-js .phone-feed__masthead::after { transform: scaleX(1); }
html.no-js .iphone .phone-lock { opacity: 0; }
html.no-js .iphone .phone-feed { opacity: 1; transform: none; }
html.no-js .iphone .feed-card { opacity: 1; transform: none; }

/* Reduced motion / no-JS: everything visible, rules pre-drawn */
@media (prefers-reduced-motion: reduce) {
  .seal__rule, .pressroom__printrule { transform: scaleX(1) !important; }
  .progress-rule { display: none; }
  .press-step__verdict, .press-step__gateline { opacity: 1 !important; transform: none !important; }
  .push-banner { transition: opacity 0.3s ease; transform: none; }
  .phone-lock, .phone-feed, .feed-card { transition: opacity 0.3s ease; transform: none !important; }
  .phone-feed__sources, .phone-feed__dock { opacity: 1 !important; transition: none !important; }
  .phone-feed__masthead::after { transform: scaleX(1) !important; transition: none !important; }

  /* No scrub without motion: the pressroom unrolls as a plain vertical story */
  .pressroom__scene { block-size: auto; }
  .pressroom__pin { position: static; block-size: auto; overflow: visible; display: block; }
  .pressroom__pin-grid { align-items: start; }
  .pressroom__steps { min-block-size: 0; display: flex; flex-direction: column; gap: 56px; }
  .press-step, .press-step.is-active { position: static; transform: none !important; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .pressroom__printrule { position: static; display: block; margin-block-start: 48px; }
  .pressroom__stagerule { display: none; }
  .pressroom__device { position: sticky; inset-block-start: 48px; }
}

/* ============================================================
   Mobile ≤ 1023px / ≤ 768px
   ============================================================ */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-block-start: 48px; min-block-size: auto; }
  .hero__headline { font-size: clamp(44px, 11vw, 64px); }
}

@media (max-width: 768px) {
  body { font-size: 17px; }
  .section { padding-block: 72px; }
  .section__headline { font-size: clamp(32px, 9vw, 40px); }
  .hero__headline { white-space: normal; }

  /* §4 un-sticks: stacked steps, inline phone, one-shot moment */
  .pressroom__scene { block-size: auto; }
  .pressroom__pin { position: static; block-size: auto; overflow: visible; display: block; }
  .pressroom__pin-grid { grid-template-columns: 1fr; gap: 48px; }
  .pressroom__steps { min-block-size: 0; display: flex; flex-direction: column; gap: 56px; }
  .press-step, .press-step.is-active {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .press-step--silence, .press-step--silence.is-active { display: none; }
  .pressroom__printrule { display: none; }
  .pressroom__stagerule { display: none; }
  .pressroom__device { margin-inline: auto; inline-size: min(300px, 85%); }

  .ethics__box { padding: 28px 22px; }
  .ethics__row { grid-template-columns: 1fr; gap: 6px; }
.ethics__stats { line-height: 2; }

  /* Mobile: the 3 מדורים become a horizontal swipe CAROUSEL (not a vertical stack) */
  .triad {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
  }
  .triad::-webkit-scrollbar { display: none; }
  .triad-card {
    flex: 0 0 82%;            /* next card peeks in → signals swipeability */
    scroll-snap-align: center;
  }
  /* Mobile: the headline wall becomes a horizontal swipe CAROUSEL of headline cards */
  .headline-wall {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    margin-block-start: 26px;
  }
  .headline-wall::-webkit-scrollbar { display: none; }
  .headline-row {
    flex: 0 0 78%;
    scroll-snap-align: center;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--graphite-16);
    border-radius: 18px;
    padding: 26px 22px;
    background: var(--card);
  }
  .headline-row:last-child { border-block-end: 1px solid var(--graphite-16); }
  .headline-row__text { font-size: 22px; }

  .specimen__source { margin-inline-start: 0; inline-size: 100%; }
  .anatomy-label { display: none; }

  .tomorrow__headline { font-size: clamp(40px, 12vw, 56px); }
}

@media (max-width: 374px) {
  .hero__headline { font-size: 40px; }
  .voices__strip { padding-inline: var(--gutter); }
}

/* ===== Abstract (anonymized) voices — no real photos/names/@handles in
   marketing (false-endorsement / likeness / avatar-copyright protection) ===== */
/* Mockup avatar image (fictional generated portrait — not a real person) */
.voice-card__avatar {
  object-fit: cover;
  border: 1px solid var(--graphite-16);
  box-shadow: 0 4px 12px rgba(18, 17, 16, 0.10);
}
.voice-card__role { font-size: 12px; color: var(--quiet); }
.feed-avatar {
  inline-size: 20px; block-size: 20px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--graphite-16);
  box-shadow: 0 1px 3px rgba(18, 17, 16, 0.12);
}
.specimen__avatar {
  object-fit: cover;
  border: 1px solid var(--graphite-16);
  box-shadow: 0 2px 6px rgba(18, 17, 16, 0.12);
}