/* ============================================================
   «מהדורה» — paper.css
   Design system: authentic Israeli broadsheet, lovingly typeset.
   Cream paper, ink black, classic red, tasteful pink.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper: #f6f1e5;
  --paper-deep: #efe7d2;
  --ink: #1a1713;
  --ink-soft: #4a443a;
  --rule: #c9bfa8;
  --accent: #b3261e;
  --accent-soft: #e7b8b4;
  --pink: #d96c8a;
  --pink-soft: #f3d7de;
  --gold: #b08d2f;
  --paper-card: #fbf7ec;
  --accent-deep: #9c1f18;
  --font-serif: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-sans: 'Heebo', system-ui, sans-serif;
  --font-display: 'Secular One', 'Heebo', sans-serif;
  --measure: 44rem; /* one newspaper column */
}

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

html {
  background:
    var(--paper)
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.05%200'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  overflow-x: clip;
  line-height: 1.6;
}

img, svg, canvas { max-width: 100%; height: auto; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

mark {
  background: var(--pink-soft);
  color: inherit;
  padding: 0 .15em;
  border-radius: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Shared column measure for page chrome */
.masthead, .dateline, .article, .section-nav, .page-footer, .container {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  text-align: center;
  padding-block: .75rem .55rem;
  border-block-end: 3px double var(--ink);
}

.masthead__ears {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--ink-soft);
  border-block-end: 1px solid var(--rule);
  padding-block-end: .45rem;
  margin-block-end: .35rem;
}

.masthead__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 12vw, 4.5rem);
  letter-spacing: -.02em;
  line-height: 1.05;
}

.masthead__tagline {
  margin: .15rem 0 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-soft);
}

/* Compact chrome for feature pages */
.masthead--compact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  text-align: start;
  padding-block: .65rem .5rem;
}

.masthead--compact .kicker { margin: 0; }

.masthead__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: var(--ink);
  /* Underlined so it reads as a control. Tested as a bare wordmark and it did
     not: people reached for the browser back button instead. */
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.masthead__home:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- Return to the front page ----------
   The masthead link scrolls out of reach on the long pages, so every feature
   page repeats it as a worded control just above the footer. */
.page-return {
  display: flex;
  justify-content: center;
  margin-block: 2.4rem 1.2rem;
}

.page-return .btn {
  font-family: var(--font-sans);
  text-decoration: none;
}

/* ---------- Dateline ---------- */
.dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .6em;
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: center;
  padding-block: .45em;
  border-block-end: 1px solid var(--ink);
}

/* ---------- Ticker (full-bleed news strip) ---------- */
.ticker {
  display: flex;
  align-items: stretch;
  margin-inline: calc(50% - 50vw);
  margin-block: .9rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: .85rem;
  line-height: 2.2;
  overflow: hidden;
}

.ticker__label {
  flex: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  padding-inline: .8em;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--ink); /* seals label edge over sliding track */
}

.ticker__track {
  display: flex;
  flex: none;
  white-space: nowrap;
  animation: ticker-roll 32s linear infinite;
}

.ticker__track > span { padding-inline-end: 2.5em; }

/* RTL: first word enters at the left edge and travels right, so the
   sentence unrolls in Hebrew reading order. */
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* ---------- Rules & stamps ---------- */
.rule {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: 1.4rem;
}

.stamp {
  display: inline-block;
  padding: .2em .6em;
  border: 2.5px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .02em;
  transform: rotate(3deg);
  text-transform: none;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 1.5px var(--paper), inset 0 0 0 2.5px var(--accent-soft);
}

/* ---------- Type roles ---------- */
/* Kicker + stamp row atop an article */
.kicker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--accent);
  letter-spacing: .03em;
  margin-block-end: .25rem;
}

.headline-1 {
  margin: 0 0 .35rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.headline-2 {
  margin: 0 0 .3rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.2;
  text-wrap: balance;
}

.headline-3 {
  margin: 0 0 .25rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}

.byline {
  display: block;
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--ink-soft);
  border-block: 1px solid var(--rule);
  padding-block: .3em;
  margin-block: .5rem .9rem;
}

/* ---------- Article ---------- */
.article {
  padding-block: .5rem;
}

.article p {
  margin-block: 0 1em;
  font-size: 1.02rem;
  line-height: 1.68;
  text-align: start; /* justified Hebrew makes word rivers at narrow widths */
}

@media (min-width: 640px) {
  .article p { text-align: justify; }
}

.article p strong { font-weight: 700; }

/* ---------- Photos ---------- */
.paper-photo {
  display: block;
  margin: 1.1rem auto;
  border: 1px solid var(--rule);
  padding: 6px;
  background: #fff;
  filter: sepia(.25) contrast(1.05);
  box-shadow: 2px 3px 0 rgba(26, 23, 19, .12);
  transform: rotate(-.6deg);
}

.paper-photo img, .paper-photo > svg { display: block; width: 100%; }

.paper-photo figcaption {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--ink-soft);
  text-align: start;
  padding: .45em .1em .1em;
}

/* ---------- Cards & section nav ---------- */
.card {
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--ink);
  padding: .85rem .95rem 1rem;
  color: inherit;
  text-decoration: none;
  box-shadow: 1px 2px 0 rgba(26, 23, 19, .08);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a.card:hover, a.card:focus-visible {
  border-block-start-color: var(--pink);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--pink) 25%, transparent);
  transform: translateY(-1px);
}

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}

.card__page {
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--gold);
  white-space: nowrap;
}

.card p {
  margin: .3rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.section-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem;
  padding-block: .25rem;
}

/* ---------- Buttons ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block: 1.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 44px;
  min-width: 44px;
  padding: .45em 1.2em;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .06s ease;
}

.btn:hover { background: var(--paper-deep); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- Demo banner ---------- */
/* The open demo announcing itself, on every page. Sticky rather than fixed:
   it rides along the top of the scroll but keeps its place in the flow, so it
   never sits on top of the masthead underneath it. There is no dismiss button
   on purpose — the demo is the advert, and leaving the page is the dismissal.
   Every other edition renders the same markup with `hidden` (site.bannerAttr);
   without the rule below, `display` here would beat the browser's own
   [hidden] rule and the banner would print on real editions too. */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* A real row gap, not zero. With `flex-wrap: wrap` above, a default font
     size much over 16px puts the link on its own line — and a zero row gap plus
     the link's negative block margin (below) then stacked it on top of the
     sentence it belongs to. */
  gap: .2rem .6rem;
  min-block-size: 44px;
  /* Out through body's side padding, so the strip runs edge to edge. The two
     expressions mirror body's own padding exactly and move with it. */
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
  padding: calc(.35rem + env(safe-area-inset-top, 0px)) 1rem .35rem;
  background: var(--paper-deep);
  border-block-end: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: center;
}

.demo-banner[hidden] { display: none; }

/* A 44px tap target inside a strip that stays slim. The height comes from
   padding rather than from a negative margin: a negative margin let the link
   overhang the banner — about two pixels of it sat over the masthead — and it
   was what made the wrap collide. The banner's own min-block-size above is what
   keeps the strip from growing when the link does. */
.demo-banner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .2rem;
  padding-inline: .3rem;
  color: var(--accent);
  font-weight: 500;
  text-decoration-color: var(--accent-soft);
  white-space: nowrap;
}

.demo-banner a:hover { text-decoration-color: var(--accent); }

/* ---------- Footer ---------- */
.page-footer {
  margin-block-start: 2.2rem;
  padding-block: .9rem 1.4rem;
  border-block-start: 3px double var(--ink);
  text-align: center;
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--ink-soft);
}

.page-footer .heart { color: var(--pink); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__track > span[aria-hidden] { display: none; }
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}