/*
 * PaperSense — Landing page styles
 * =================================
 * v3 Landing (approved concept: reference/v3_landing_concept.html; UI designer spec: reference/
 * v3_review_ui_designer.md §2; COPY_DECK §12.7). Sections: Hero (H1 + two CTAs on the left, the 1980s front
 * page "The Evening Close" on the right) -> Method -> Footer. The masthead, the dateline, the proof line and the
 * "By the numbers" band are gone (the paper carries those numbers). Tokens only (ARCHITECTURE §3): colors are
 * always var(--token); the newsprint tokens (the paper's colors, fonts, shadows and grain) live in css/tokens.css §11.
 * The Footer is the same newspaper: newsprint field, ink, the paper's rules, the accent, a halftone wordmark.
 * The loader's real-progress geometry (track/fill/counter, FILL_MS mechanics) is unchanged; only its exit sequence
 * (the door-fold) is new.
 */

/* =======================================================================
 * Gutters (QA-A-16, the approved concept): the header, the H1, the Markets strip, the status bar and the footer sit
 * 80px in from the window's edge at 1440 — 5rem, the Landing's rem being 16px there; the build had 40. The container
 * is the concept's 1440 frame (90rem), centered, so 1920 shows the same composition. Below 1024 the gutters are the
 * old 2rem / 1.25rem. landing.css loads after base.css, so this plain `.shell` rule wins by order and stays as
 * light as `.method-inner`'s and `.hero-content`'s own overrides below.
 * ===================================================================== */
:root {
  --container-shell: 90rem;
  --landing-gutter: 1.25rem;
}
@media (min-width: 640px) {
  :root {
    --landing-gutter: 2rem;
  }
}
/* 1025px, not 1024: a window of exactly 1024px has the 1024-base root (16px, not the 14px floor of 1025 and up), and
   with 80px gutters the header row (brand + nav + Menu) no longer fits — the Menu button ended 30px past the gutter. */
@media (min-width: 1025px) {
  :root {
    --landing-gutter: 5rem;
  }
}
.shell {
  padding-inline: var(--landing-gutter);
}

/* =======================================================================
 * PageLoader (C-06 — real progress kept exactly) + intro door-fold (new —
 * design review §3 "Motion storyboard")
 * ===================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: var(--on-ink);
  perspective: 1600px;
}
.loader__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.loader__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--weight-semibold);
  font-size: 1.5rem;
}
@media (min-width: 640px) {
  .loader__brand {
    font-size: 1.875rem;
  }
}
.loader__mark-flip {
  display: inline-block;
  perspective: 500px;
}
.loader__brand-mark {
  display: inline-block;
  font-size: 1.875rem;
  color: var(--accent-from);
  backface-visibility: hidden;
  transform-origin: 30% 50%;
  transform: scale(1) rotateY(0deg);
}
.loader.is-opening .loader__brand-mark {
  transition: transform 220ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.loader.is-skipping .loader__brand-mark {
  transition: transform 140ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.loader.is-opening .loader__brand-mark,
.loader.is-skipping .loader__brand-mark {
  transform: scale(1.6) rotateY(180deg);
}
.loader__tagline {
  max-width: 24ch;
  font-size: 0.875rem;
  color: var(--on-ink-a55);
}
.loader__progress {
  position: relative;
  width: min(22rem, 72vw);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.loader__track {
  height: 1px;
  background: var(--on-ink-a15);
}
.loader__fill {
  height: 100%;
  background: var(--accent-from);
  width: 0%;
  transition: width 0.1s ease-out;
}
.loader__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-ink-a60);
}
.loader__counter {
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-a80);
}
.loader__skip-hint {
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--on-ink-a60);
}

/* The scrollbar's room is kept for the whole life of the page (QA-B final run, LOW-1): the page never changes width by a classic scrollbar's 15px. Without it the room appeared when the
 * intro began and went again when the intro ended on a page that fits in one screen (the signed-out invitation): a sheet anchored to the right edge (Hebrew) moved 15px both times.
 * It is the same rule the App has (`html.is-app` in css/app.css), and it holds while core/scroll.js locks the page for the menu or the reader (overflow: hidden keeps the room). */
html.is-landing {
  scrollbar-gutter: stable;
}

/* Intro scroll lock without a layout shift (loader.js adds `is-intro` for the length of the intro): core's
 * stopScroll() sets html{overflow:hidden}, which drops a classic scrollbar and gives its width back to the
 * page — startScroll() would then re-center everything by half of it under the doors (CLS). Keep the
 * scrollbar's space (dark, disabled) and lock the scroll by clipping the body instead. */
html.is-landing.is-intro {
  overflow-y: scroll !important;
  color-scheme: dark;
}
html.is-landing.is-intro body {
  height: 100%;
  overflow: hidden;
}

/* Two full-screen ink "doors" — the dark stage itself, split in half. At
 * rest (rotateY 0) they cover the full viewport exactly like a solid panel;
 * opening them in 3D reveals the settled paper hero underneath instead of
 * uncovering another dark layer, so `.loader` itself carries no background
 * of its own. */
.loader__door {
  position: absolute;
  inset-block: 0;
  width: 50%;
  background: var(--ink);
  backface-visibility: hidden;
  transform: rotateY(0deg);
  opacity: 1;
}
.loader__door::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 40%);
  pointer-events: none;
}
.loader__door--left {
  left: 0; /* the two doors keep their physical sides in both directions: symmetric intro art (tools/lint_css_logical.py allow-list) */
  transform-origin: left center;
  border-radius: 0 0 0 var(--radius-card);
}
.loader__door--right {
  left: 50%;
  transform-origin: right center;
  border-radius: 0 0 var(--radius-card) 0;
}
.loader.is-opening .loader__door--left,
.loader.is-skipping .loader__door--left {
  transform: rotateY(-100deg);
  opacity: 0;
}
.loader.is-opening .loader__door--right,
.loader.is-skipping .loader__door--right {
  transform: rotateY(100deg);
  opacity: 0;
}
.loader.is-opening .loader__door--left,
.loader.is-opening .loader__door--right {
  transition: transform 720ms cubic-bezier(0.65, 0, 0.35, 1) 180ms, opacity 144ms linear 756ms;
}
.loader.is-skipping .loader__door--left,
.loader.is-skipping .loader__door--right {
  transition: transform 160ms cubic-bezier(0.65, 0, 0.35, 1), opacity 100ms linear 60ms;
}

/* =======================================================================
 * Hero — paper field, the H1 and two CTAs on the left, the front page on the
 * right, the Markets strip, the status bar. From 1200px the hero is a two-column
 * grid and fills the first screen; below it the paper stacks under the CTAs.
 * ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--paper);
}
.hero-content {
  display: flex;
  flex-direction: column;
  /* padding-top clears the overlay header (nav row + the freshness line) exactly, however tall it renders at
     the current breakpoint — see main.js's syncHeaderClearance(). The 9rem fallback only matters before JS
     has measured once (effectively never, since it runs synchronously at header mount) or with JS disabled. */
  padding-block-start: calc(var(--header-overlay-height, 9rem) + 1.25rem);
  padding-block-end: 2rem; /* the inline gutter is the shared `.shell` one (above) */
}
@media (min-width: 1200px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh; /* the strip and the status bar sit at the bottom of the first screen */
  }
  .hero-content {
    flex: 1 1 auto;
    justify-content: center;
    padding-block-end: 2.5rem;
  }
}

/* The quiet zone (design review §4): the H1 and the CTAs, nothing else. The paper is a grid item, never
 * absolutely positioned over text, so its layout box cannot overlap the text column. */
.hero-quiet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
  align-content: center;
}
.hero-heading {
  grid-column: 1;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  /* One line per line of the headline, in the fallback font and in Newsreader alike (the concept's `nowrap`):
     `ch` is measured in the current font, so a wrapping H1 would change height when the webfont arrives and
     the centered hero block would jump. */
  white-space: nowrap;
  width: max-content; /* the box is the ink: "the gap to the H1" is then the same thing measured either way */
  font-size: 2.5rem;
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (min-width: 640px) {
  .hero-heading {
    font-size: 3.75rem;
    line-height: 1;
  }
}
@media (min-width: 1024px) {
  .hero-heading {
    font-size: 5rem; /* 80px at 1440, as in the approved concept (the build had 84) */
    line-height: 0.97;
    letter-spacing: -0.012em;
  }
}
/* The concept's CTAs: 15px / 600 in a 16px 26px pill (54px tall at 1440). The dark one ends in a plain inline "→"
   (pillButton arrow:'inline'); the outline one has the concept's 14% hairline. */
.hero-cta-row {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}
.hero-cta-row .pill-button__pill {
  padding: 1rem 1.625rem;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
}
.hero-cta-row .pill-button--outline .pill-button__pill {
  border-color: var(--foreground-a14);
}
@media (min-width: 1200px) {
  /* Two columns: the H1 at its own width, then the paper. The gap is what the paper's tilted box needs to stay
     clear of the H1's ink at rest and picked up (designer spec §2.3: >= 32px at rest; QA-A-18). At 1440 it puts
     the paper's left edge at 774px, where the concept has 776. */
  .hero-quiet {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 4rem;
    row-gap: 2.5rem;
  }
  .hero-heading {
    grid-row: 1;
    align-self: end;
  }
  .hero-cta-row {
    grid-row: 2;
    align-self: start;
  }
  /* Optical placement of the concept (1440 x 900): the text block sits 37px above the row's geometric center and the
     paper 15px above its own. `top` moves them without touching the layout. The lift grows with the window's
     height — none at 720px or less, where the block must keep its clearance under the header, the full 2.3rem from
     about 900px. */
  .hero-quiet {
    --optical-lift: clamp(0px, calc((100svh - 720px) * 0.2), 2.3rem);
  }
  .hero-heading,
  .hero-cta-row {
    position: relative;
    top: calc(-1 * var(--optical-lift));
  }
  .hero-paper {
    top: calc(-0.39 * var(--optical-lift)); /* 0.9rem at the full lift */
  }
}

/* =======================================================================
 * The front page — "The Evening Close" (newspaper.js / sheet.js / reader.js)
 * One facsimile canvas, 1200 design px wide, fold at 850, scaled as one object through --np-scale (set by a
 * ResizeObserver on the button) so its layout never reflows. Every design-px value below is px on purpose.
 * At rest it lies on the desk in perspective (rotateX 24deg, rotateZ -7deg on desktop), top half visible; the
 * whole thing is ONE <button> (aria-label, aria-haspopup); hover picks it up; click opens the reader.
 * ===================================================================== */
.hero-paper {
  position: relative;
  grid-column: 1;
  justify-self: center;
  width: min(100%, 44rem);
  margin-top: 1rem;
  perspective: 87.5rem; /* 1400px at the 1440 base */
}
@media (min-width: 1200px) {
  .hero-paper {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: stretch;
    width: auto; /* the rest of the row after the H1 and its gap; the button below overhangs it (the hero clips it) */
    margin-top: 0;
  }
}

.np-btn {
  --np-rx: 10deg; /* resting tilt: gentle below 1200px, no overhang */
  --np-rz: -2.5deg;
  --np-lift-x: 0; /* rem the pick-up slides the paper toward the center (only where it overhangs the edge) */
  /* The lead headline's design size. The H1 must win the hero, so the headline's RENDERED cap height (in
     perspective, x the paper's scale) stays under the H1's at every breakpoint — measured 0.86-0.92 of it.
     H1 and paper both scale with the adaptive rem, so one value per breakpoint holds across its whole range. */
  --np-lead: 132px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 850;
  padding: 0;
  border: 0;
  background: none;
  color: var(--newsprint-ink);
  cursor: zoom-in;
  text-align: start;
  transform-origin: 50% 100%;
  transform: translateX(var(--np-x, 0px)) rotateX(var(--np-rx)) rotateZ(var(--np-rz));
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .np-btn {
    --np-lead: 90px;
  }
}
@media (min-width: 1024px) {
  .np-btn {
    --np-lead: 126px;
  }
}
@media (min-width: 1200px) {
  .np-btn {
    --np-rx: 24deg;
    --np-rz: -7deg;
    --np-lift-x: -2.25;
    --np-lead: 136px; /* the H1 is 80px now (was 84): 136 keeps the headline's cap height at 0.95 of the H1's */
    /* 45rem (720px at the 1440 base) — but no wider than its column plus the 9rem it overhangs the window's edge
       by, so the paper keeps the same ~90% of itself in view (the right ear included) as the window narrows and
       never reaches back over the H1 — and never so tall that the hero outgrows the first screen: the box may take
       what is left under the header and above the strip + status bar. */
    width: min(45rem, calc(100% + 9rem), max(30rem, calc((100svh - var(--header-overlay-height, 9rem) - 12rem) * 1200 / 850)));
  }
}
.np-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
/* The entrance keeps the paper invisible (in its reserved box, so CLS stays 0) until the drop. */
.np-btn.is-pending {
  opacity: 0;
  pointer-events: none;
}

/* Two pre-rendered shadow layers; only their opacity moves (never box-shadow). */
.np-shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.np-shadow--rest {
  box-shadow: var(--shadow-paper-contact), var(--shadow-paper-ambient);
}
.np-shadow--lift {
  box-shadow: var(--shadow-paper-lift);
  opacity: 0;
}

.np-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
  background: var(--newsprint);
}
/* The folded edge: a soft crease, a light lip, a dark underside — two layers of paper. */
.np-stage::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  height: 9px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--newsprint-fold-shade) 38%,
    var(--newsprint-fold-light) 38%,
    var(--newsprint-fold-light) 60%,
    var(--newsprint-fold-dark) 60%
  );
}

/* --- the sheet ------------------------------------------------------------------------------------ */
.np-sheet {
  position: relative;
  width: 1200px;
  box-sizing: border-box;
  background: var(--newsprint);
  color: var(--newsprint-ink);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-align: start;
  transform: scale(var(--np-scale, 0.5));
  transform-origin: 0 0;
}
.np-sheet--rest {
  position: absolute;
  top: 0;
  left: 0;
  height: 850px;
}
/* grain, then a soft vignette and (resting page only) the shading toward the crease */
.np-sheet::before,
.np-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.np-sheet::before {
  background-image: var(--np-grain);
  opacity: 0.07;
}
.np-sheet::after {
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, var(--newsprint-vignette));
}
.np-sheet--rest::after {
  background: linear-gradient(to bottom, transparent 93%, var(--newsprint-fold-shade) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 60%, var(--newsprint-vignette));
}

/* The reader builds the same classes on real headings, paragraphs and figures: reset them at zero specificity so
   the np-* rules (fonts, sizes) always win over the reset. */
:where(.np-sheet) :where(h2, h3, p, figure, figcaption, article) {
  margin: 0;
  font: inherit;
}
:where(.np-sheet) :where(a) {
  color: inherit;
  text-decoration: none;
}

.np-top {
  position: relative;
  display: block;
  height: 850px;
  overflow: hidden;
  padding: 26px 36px 0;
  box-sizing: border-box;
}
.np-top > * {
  display: block;
}

/* ears + nameplate */
.np-top > .np-ears {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 172px;
  column-gap: 16px;
  align-items: center;
}
.np-ear {
  display: block;
  border: 2px solid var(--newsprint-ink);
  padding: 8px 10px 7px;
  font-family: var(--font-gothic);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.np-ear--empty {
  border: 0;
}
.np-ear > span {
  display: block;
}
.np-ear__level {
  font-size: 38px;
  line-height: 1.05;
}
.np-name {
  display: block;
  font-family: var(--font-fraktur);
  font-size: 100px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.np-stamp {
  display: block;
  justify-self: end;
  transform: rotate(-5deg) translateX(1px);
  border: 4px solid var(--newsprint-stamp);
  padding: 7px 12px 5px;
  color: var(--newsprint-stamp);
  font-family: var(--font-gothic);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-wrap: balance;
}

/* folio */
.np-folio {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 6px 0 5px;
  border-top: 3px solid var(--newsprint-ink);
  border-bottom: 1px solid var(--newsprint-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* lead headline + deck */
.np-lead {
  margin-top: 16px;
  text-align: center;
}
.np-lead__hed {
  display: block;
  font-family: var(--font-gothic);
  font-weight: 400;
  text-transform: uppercase;
}
.np-lead__l1,
.np-lead__l2 {
  display: block;
}
/* 144 design px on desktop (--np-lead on .np-btn sets the per-breakpoint size; the reader copies it, so the
   flight lands on an identical page). */
.np-lead__l1 {
  font-size: var(--np-lead, 144px);
  line-height: 0.88;
  letter-spacing: 0.005em;
}
.np-lead__l2 {
  margin-top: 2px;
  font-size: calc(var(--np-lead, 144px) * 0.389); /* 56px at the 144px lead */
  line-height: 1;
}
.np-deck {
  display: block;
  max-width: 1000px;
  margin: 10px auto 14px;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 27px;
}
.np-jump {
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.np-jump--deck {
  font-size: inherit;
  line-height: inherit;
}

/* photo row: the halftone chart + the bond-bar story */
.np-row {
  display: grid;
  grid-template-columns: 4fr 2fr;
  column-gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--newsprint-ink);
}
.np-row--story,
.np-row--fig {
  grid-template-columns: minmax(0, 1fr);
}
.np-fig {
  display: block;
}
.np-halftone {
  display: block;
  width: 100%;
  height: 296px;
  background: var(--newsprint-screen);
}
.np-cap {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 15px;
}
.np-story {
  display: block;
}
.np-story__hed {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-gothic);
  font-size: 40px;
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}
.np-story__body {
  display: block;
  column-count: 2;
  column-gap: 14px;
  column-rule: 0.5px solid var(--newsprint-ink);
  font-size: 14px;
  line-height: 18px;
  text-align: justify;
  hyphens: auto;
}

/* --- the reader's page: the same sheet, unfolded ---------------------------------------------------- */
.np-sheet--reader {
  perspective: 2400px;
}
.np-sheet--reader .np-top {
  overflow: visible;
}
.np-crease {
  position: relative;
  z-index: 4;
  height: 0;
}
.np-crease::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -14px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--newsprint-fold-shade) 42%,
    var(--newsprint-fold-light) 50%,
    var(--newsprint-fold-shade) 58%,
    transparent
  );
}
.np-lower {
  position: relative;
  padding: 10px 36px 44px;
  border-top: 1px solid var(--newsprint-rule-soft);
  transform-origin: 50% 0;
  transform: rotateX(-180deg);
  backface-visibility: hidden;
  transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
.np-lower.is-open {
  transform: none;
}
.np-briefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
  padding-bottom: 14px;
}
.np-brief {
  display: block;
  padding-inline: 0;
}
.np-brief + .np-brief {
  padding-inline-start: 16px;
  border-inline-start: 0.5px solid var(--newsprint-ink);
}
.np-brief__hed {
  margin: 0 0 8px;
  font-family: var(--font-gothic);
  font-size: 40px;
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}
.np-brief__body {
  text-align: justify;
  hyphens: auto;
}
.np-headline:hover,
.np-jump:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.np-sheet a:focus-visible {
  outline: 2px solid var(--newsprint-ink);
  outline-offset: 3px;
}
.np-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 18px 32px;
  padding-top: 12px;
  border-top: 1px solid var(--newsprint-ink);
}
.np-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}
.np-table caption {
  padding-bottom: 6px;
  font-family: var(--font-gothic);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: start;
  text-transform: uppercase;
}
.np-table th,
.np-table td {
  padding: 3px 0;
  border-bottom: 0.5px solid var(--newsprint-rule-soft);
  text-align: start;
  font-weight: 500;
}
.np-table thead th {
  border-bottom: 1px solid var(--newsprint-ink);
  font-size: var(--text-2xs); /* 11px floor (QA-A-28); the heading was 10px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.np-table .num {
  text-align: end;
}
.np-foot {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 3px double var(--newsprint-ink);
}
.np-foot__top {
  font-family: var(--font-gothic);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.np-foot__note {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
}

/* --- the reader (dialog) ---------------------------------------------------------------------------- */
.np-reader {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--reader-backdrop);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 180ms linear;
}
.np-reader.is-closing {
  opacity: 0;
}
.np-reader__panel {
  position: relative;
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--foreground-a30) transparent;
  background: var(--newsprint);
  box-shadow: var(--shadow-paper-contact), var(--shadow-paper-lift);
  outline: none;
}
.np-reader__stage {
  position: relative;
  overflow: hidden;
}
.np-reader__close {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--background);
  color: var(--foreground);
  font-size: 18px;
  box-shadow: var(--shadow-paper-contact);
}
@media (hover: hover) and (pointer: fine) {
  .np-reader__close:hover {
    background: var(--surface);
  }
}
.np-flyer {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  pointer-events: none;
  perspective: 87.5rem;
}
.np-flyer .np-btn {
  position: absolute;
  cursor: default;
}

/* Below 1100px the reader is a slide-up sheet holding a reflowed single-column page:
   same fonts, rules and halftone; headlines about 44px, body 16px. */
.np-reader--flow {
  align-items: flex-end;
  padding: 0;
}
.np-reader--flow .np-reader__panel {
  width: 100%;
  max-width: 44rem;
  max-height: 92dvh;
  border-radius: 20px 20px 0 0;
}
.np-reader--flow .np-reader__stage {
  overflow: visible;
}
.np-reader--flow .np-sheet {
  width: auto;
  transform: none;
  perspective: none;
  font-size: 16px;
  line-height: 24px;
}
.np-reader--flow .np-sheet--reader::after {
  background: none;
}
.np-reader--flow .np-top {
  height: auto;
  padding: 26px 20px 8px;
}
.np-reader--flow .np-top > .np-ears {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 14px;
}
.np-reader--flow .np-name {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 42px; /* 755px per 100px of type: 317px, inside a 335px column at 375 */
}
.np-reader--flow .np-ear {
  grid-row: 2;
  font-size: 15px;
  padding: 6px 8px 5px;
  justify-self: start;
}
.np-reader--flow .np-ear__level {
  font-size: 26px;
}
.np-reader--flow .np-stamp {
  grid-row: 2;
  font-size: 20px;
  border-width: 3px;
  padding: 5px 9px 3px;
}
.np-reader--flow .np-folio {
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 11px;
  line-height: 15px;
}
.np-reader--flow .np-lead__l1 {
  font-size: 78px; /* "10 FINAL PICKS" is 4.1em wide: one line inside a 335px column at 375 */
}
.np-reader--flow .np-lead__l2 {
  font-size: 28px;
}
.np-reader--flow .np-deck {
  font-size: 18px;
  line-height: 24px;
}
.np-reader--flow .np-row {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
}
.np-reader--flow .np-halftone {
  height: auto;
  aspect-ratio: 5 / 2;
}
.np-reader--flow .np-cap {
  font-size: 13px;
  line-height: 17px;
}
.np-reader--flow .np-story__hed,
.np-reader--flow .np-brief__hed {
  font-size: 44px;
}
.np-reader--flow .np-story__body {
  column-count: 1;
  font-size: 16px;
  line-height: 24px;
}
.np-reader--flow .np-jump {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
}
.np-reader--flow .np-lower {
  padding: 10px 20px 40px;
  transform: none;
  transition: none;
}
.np-reader--flow .np-briefs {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.np-reader--flow .np-brief + .np-brief {
  padding-inline-start: 0;
  border-inline-start: 0;
  padding-top: 18px;
  border-top: 0.5px solid var(--newsprint-ink);
}
.np-reader--flow .np-tables {
  grid-template-columns: minmax(0, 1fr);
}
.np-reader--flow .np-table {
  font-size: 13px;
  line-height: 19px;
}
.np-reader--flow .np-crease {
  display: none;
}
.np-reader--flow .np-foot__top {
  font-size: 30px;
}

/* --- the cue under the paper ------------------------------------------------------------------------- */
.np-cue {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1rem auto 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--foreground-a70);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
@media (hover: hover) and (pointer: fine) {
  /* on a mouse device the chip appears under the paper when it is picked up (or focused) */
  .np-cue {
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    margin: 0;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }
  /* `:hover` on the paper itself, too: under reduced motion the paper is never picked up (no `is-lifted`), yet the
     chip must still appear on a mouse hover — it is a label, not motion (QA-A-19). */
  .hero-paper.is-lifted .np-cue,
  .hero-paper:focus-within .np-cue,
  .np-btn:hover ~ .np-cue {
    opacity: 1;
  }
  [dir='rtl'] .np-cue {
    transform: translateX(50%); /* centred from the inline-start edge, which is the right one here */
  }
}

/* Reduced motion: no entrance, tilt animation, pick-up or unfold. The paper rests flat with a static
   rotateZ(-2deg); the reader opens already unfolded (base.css also removes every transition). */
@media (prefers-reduced-motion: reduce) {
  .np-btn,
  .np-btn:focus-visible {
    --np-rx: 0deg;
    --np-rz: -2deg;
  }
  .np-lower {
    transform: none;
  }
}
/* Flat, the paper spreads wider than it does in perspective: slide it in by the same 2.25rem the pick-up uses, so
   the right ear (the stamp) stays inside the window. */
@media (prefers-reduced-motion: reduce) and (min-width: 1200px) {
  .np-btn {
    --np-x: -2.25rem;
  }
}

/* =======================================================================
 * Markets — one restrained strip (label + up to 6 items), its own --paper-2
 * band (§6 — "a shade deeper than the page field"). 2 columns on mobile,
 * showing 4 of the 6 items (Russell 2000 and US 10-year yield are `--wide`-tagged,
 * hidden below 640px — design review §4/§8); all 6 render in the DOM, only
 * visibility is responsive.
 * ===================================================================== */
.hero-markets {
  background: var(--paper-2);
  border-block: 1px solid var(--foreground-a10);
}
.hero-markets__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.25rem;
}
@media (min-width: 640px) {
  .hero-markets__inner {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}
.hero-markets__label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* a45 (the spec/v1 value, tuned against --hero-to/--background) computes
     to ~2.98:1 against the new --paper field — short of AA's 4.5:1 (§8).
     a70 (~6.69:1) clears it, matching the other Markets-strip text. */
  color: var(--foreground-a70);
}
.hero-markets__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 0.625rem;
}
@media (min-width: 640px) {
  .hero-markets__grid {
    grid-template-columns: repeat(4, auto);
    column-gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .hero-markets__grid {
    grid-template-columns: repeat(6, auto);
  }
}
.hero-markets__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-xs);
  color: var(--foreground-a70);
  white-space: nowrap;
}
.hero-markets__item--wide {
  display: none;
}
@media (min-width: 640px) {
  .hero-markets__item--wide {
    display: flex;
  }
}
.hero-markets__icon {
  font-size: 0.625rem;
  flex-shrink: 0;
}
.hero-markets__icon--up {
  color: var(--up-text);
}
.hero-markets__icon--down {
  color: var(--down-text);
}

/* Bottom status bar — 2 items only (Data source, Scroll cue). */
.hero-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--foreground-a10);
  padding-block: 1.25rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--foreground-a60);
}
.hero-status__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* =======================================================================
 * Method — one statement + one link (design review §5: "drastically
 * shortened"). No more two-column formula block / source chips.
 * ===================================================================== */
.method {
  background: var(--background);
}
.method-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  max-width: 40rem;
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .method-inner {
    padding-block: 7rem;
  }
}
.method-statement {
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) {
  .method-statement {
    font-size: 1.875rem;
  }
}

/* =======================================================================
 * Footer — the same newspaper as the front page (Dvir, 2026-10-09: the bottom of the Landing was black and white).
 * The CTA band and the columns sit on the newsprint sheet, in the paper's ink, set between the paper's own rules:
 * the folio's 3px + 1px pair around the call to action, hairline column rules, small-caps heads like the folio's.
 * The accent is the mark (as in the header) and a link in use, the way the stamp is the paper's only spot color.
 * The wordmark is a halftone: the paper's dot screen at 45 degrees, clipped to the letters, cut by the sheet's edge
 * just under the baseline, with the legal line above it. The markup, the copy and the link springs are unchanged; the
 * grain is the sheet's own tile. Contrast (on --newsprint): ink 11.2:1, the ink at 70% 4.84:1 (the floor for small
 * text), --accent-to 4.58:1.
 * ===================================================================== */
.landing-footer {
  --wm: min(13rem, 12.5vw); /* the wordmark's size (C-04) */
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--newsprint);
  color: var(--newsprint-ink);
}
/* The sheet's grain (the front page's static tile at 7%), under the text. */
.landing-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--np-grain);
  opacity: 0.07;
}
.footer-inner {
  position: relative;
  z-index: 10;
  /* the gutter is the shared `.shell` one; the legal line ends above the wordmark, whose letters are 0.8 of its size tall */
  padding-block: 4rem calc(var(--wm) * 0.8 + 1.5rem);
}
@media (min-width: 1024px) {
  .footer-inner {
    padding-top: 5rem;
  }
}
.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-top: 3px solid var(--newsprint-ink);
  border-bottom: 1px solid var(--newsprint-ink);
  padding-block: 2.25rem 2.5rem;
}
@media (min-width: 1024px) {
  .footer-cta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.footer-cta__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 2.5rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.015em;
}
@media (min-width: 640px) {
  .footer-cta__title {
    font-size: 3.5rem;
  }
}
@media (min-width: 1024px) {
  .footer-cta__title {
    font-size: 4.5rem;
  }
}
.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: 0 2.5rem;
}
@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
  }
}
.footer-col {
  padding-block: 2rem 1.25rem;
}
/* Stacked columns are told apart by a hairline, the way a column rule would: one column wide, then two, then side by side. */
@media (max-width: 767.98px) {
  .footer-col + .footer-col {
    border-top: 1px solid var(--newsprint-rule-soft);
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .footer-col:nth-child(n + 3) {
    border-top: 1px solid var(--newsprint-rule-soft);
  }
}
@media (min-width: 1024px) {
  .footer-col {
    padding-block-end: 0.5rem;
    padding-inline: 2rem;
  }
  .footer-col:first-child {
    padding-inline-start: 0;
  }
  .footer-col + .footer-col {
    border-inline-start: 1px solid var(--newsprint-rule-soft); /* the paper's column rule */
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
}
.footer-brand__mark {
  display: inline-flex;
  line-height: 0;
  font-size: 1.5rem;
  color: var(--accent); /* the header's mark (3.5:1 on newsprint: a graphic, 3:1 is its bar) */
}
.footer-brand__tagline {
  margin-top: 0.75rem;
  max-width: 20rem;
  font-size: 0.875rem;
  color: var(--newsprint-ink-a70);
}
.footer-col__title {
  margin-bottom: 1rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em; /* the folio's small caps */
}
.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col__list li {
  font-size: 0.875rem;
}
/* The accent on a link in use (4.58:1 on newsprint). The hover is gated like every plain CSS hover (ARCHITECTURE §3). */
.footer-col__list a:focus-visible .animated-link__label {
  color: var(--accent-to);
}
@media (hover: hover) and (pointer: fine) {
  .footer-col__list a:hover .animated-link__label {
    color: var(--accent-to);
  }
}
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--newsprint-ink);
  padding-top: 1.25rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em; /* the folio line */
  text-transform: uppercase;
  color: var(--newsprint-ink-a70);
}
@media (min-width: 640px) {
  .footer-legal {
    flex-direction: row;
    align-items: center;
  }
}
/* The wordmark: the paper's 45-degree dot screen (two staggered grids), clipped to the letters. Decorative. */
.footer-watermark {
  --pitch: max(3.5px, calc(var(--wm) * 0.032));
  --dot: radial-gradient(circle, var(--newsprint-ink) calc(var(--pitch) * 0.2), transparent calc(var(--pitch) * 0.3));
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--wm) * -0.1); /* the sheet's edge cuts just under the baseline: every letter reads whole */
  z-index: 0;
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-weight: var(--weight-bold);
  line-height: 1;
  font-size: var(--wm);
  color: transparent;
  background-image: var(--dot), var(--dot);
  background-size: var(--pitch) var(--pitch);
  background-position: 0 0, calc(var(--pitch) / 2) calc(var(--pitch) / 2);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.55;
}

/* =======================================================================
 * The invitation (invite.js): the Landing of a visitor who cannot read the market data yet (a family address: signed out, or not ready). One sheet of the same newsprint
 * as the front page: the grain, the vignette, the Fraktur nameplate, the folio rules, a gothic headline, the two doors. No figures, no 3D object, no strip of indices:
 * nothing on it asks the server for data. Logical properties and tokens only; Hebrew takes its faces from the tokens (--font-serif, --font-gothic under :lang(he)).
 * ===================================================================== */
.hero--invite .hero-content {
  align-items: center;
  padding-block-end: 2.5rem;
}
.invite__sheet {
  position: relative;
  box-sizing: border-box;
  inline-size: min(100%, 46rem);
  padding: 1.25rem 1.25rem 1.75rem;
  background: var(--newsprint);
  color: var(--newsprint-ink);
  font-family: var(--font-serif);
  box-shadow: var(--shadow-paper-contact), var(--shadow-paper-ambient);
}
@media (min-width: 640px) {
  .invite__sheet {
    padding: 1.625rem 2.25rem 2.25rem;
  }
}
.invite__sheet::before,
.invite__sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.invite__sheet::before {
  background-image: var(--np-grain);
  opacity: 0.07;
}
.invite__sheet::after {
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, var(--newsprint-vignette));
}
.invite__sheet > * {
  position: relative;
  z-index: 1;
}
.invite__name {
  font-family: var(--font-fraktur);
  font-size: clamp(1.875rem, 8.6vw, 4.25rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.invite__folio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-block-start: 0.875rem;
  padding-block: 0.375rem 0.3125rem;
  border-block-start: 3px solid var(--newsprint-ink);
  border-block-end: 1px solid var(--newsprint-ink);
  font-family: var(--font-gothic);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.invite__title {
  margin-block: 1.5rem 0.75rem;
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.invite__deck {
  max-inline-size: 34rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}
.invite__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-block-start: 1.5rem;
}
.invite__cta .pill-button__pill {
  padding: 1rem 1.625rem;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
}
.invite__cta .pill-button--outline .pill-button__pill {
  border-color: var(--newsprint-ink-a70);
}
.invite__note {
  margin-block-start: 1.25rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--newsprint-rule-soft);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--newsprint-ink-a70);
}
.invite__legal {
  margin-block: 0;
  padding-block-end: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--foreground-a70);
}