/* ДОБА — restyled to the operator-approved Claude Design artifact
 * ("ДОБА Daily Cover Site", 2026-07-21; see docs/LANDING-PAGE.md).
 *
 * Design language: a fixed near-black base (#0a0a0b) that never changes,
 * plus the day's accent system driven by edition.json's palette. app.js
 * sets --accent / --text / --bg from the day's palette. The values in
 * :root below are only the pre-load fallback (a calm neutral page, never
 * a flash of the wrong theme) — the base chrome itself is a fixed literal
 * (#0a0a0b), not palette-driven. Typography is FIXED, exactly as in the
 * artifact: one system sans stack for the whole page, ui-monospace for
 * the card numerators only. The published palette.typography field is
 * deliberately not consumed — the artifact never varies fonts per
 * edition, and its display style leans on weight (800/700), not family.
 * System fonts only — no webfont loading, keeps the page fast and usable
 * offline.
 *
 * Hero layout deviations (operator requests, 2026-07-21): the title card
 * sits below the illustration in normal flow instead of the artifact's
 * bottom-left overlay, so no text ever covers the cover image; the
 * artifact's gradient scrims existed solely to keep that overlaid text
 * legible, so they are gone too. And the illustration renders at full
 * page width at its own intrinsic ratio — no fixed-height frame, so no
 * pillarbox gaps on wide screens, and therefore no blurred backdrop fill
 * and no Ken Burns drift (both existed only to dress letterbox zones).
 *
 * Sections in this file: tokens -> base/reset -> failure state -> header ->
 * hero -> stories row -> about + mood -> footer -> reveal motion ->
 * responsive -> prefers-reduced-motion.
 */

/* ---------- tokens ---------- */

:root {
  /* Fixed near-black chrome — the artifact's literal base, never tinted by
     the day's palette. */
  --page-bg: #0a0a0b;

  /* Grays lifted verbatim from the artifact. */
  --gray-header-date: #c9c9cf;
  --gray-meta: #d6d6db;
  --gray-mood-label: #8a8a90;
  --gray-summary: #adadb4;
  --hairline: rgba(255, 255, 255, 0.07);
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.08);

  /* Day palette (overwritten by app.js once the edition loads). --bg is
     only the hero image's pre-paint placeholder tone — see .hero__image. */
  --bg: #0a0a0b;
  --accent: #d9d3c7;
  --text: #f2f0eb;

  /* The artifact's literal root stack — never varied per edition. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --edge: clamp(20px, 4vw, 54px);
}

/* ---------- base / reset ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--page-bg);
  overflow-x: hidden; /* the card row is the only thing that scrolls sideways */
}

body {
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  transition: color 0.8s ease;
}

h1, h2, h3, p {
  margin: 0;
}

::selection {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- failure state ---------- */
/* The page's default markup (see index.html) — a full takeover, replacing
   every other block, matching the artifact's dedicated failure branch. */

.failure-state {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.failure-state__wordmark {
  font-weight: 800;
  font-size: clamp(56px, 12vw, 140px);
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: color 0.8s ease;
}

.failure-state__label {
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray-mood-label);
}

body.is-ready .failure-state {
  display: none;
}

body:not(.is-ready) .page {
  display: none;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px var(--edge);
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.7), rgba(10, 10, 11, 0));
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.site-header--solid {
  background: rgba(10, 10, 11, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-header__wordmark {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: color 0.8s ease;
}

.site-header__date {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--gray-header-date);
}

/* ---------- hero (billboard) ---------- */

.hero {
  margin-top: -66px; /* tucks the illustration up under the sticky header */
  background: var(--page-bg);
}

/* The illustration: full page width, uncropped, height follows the
   image's own intrinsic ratio — edge to edge with no pillarbox gaps on
   any viewport. `background` is palette.background — the one place the
   day's background tints anything (a placeholder tone visible only while
   the image streams in). */
.hero__image {
  display: none;
  width: 100%;
  height: auto;
  /* Pre-load hint only (the `auto` keyword): once the file arrives its
     real intrinsic ratio takes over (covers are ~16:9 but not exactly —
     e.g. 1344x768 = 1.75). Keeps the reveal from jumping while the cover
     streams in. */
  aspect-ratio: auto 16 / 9;
  background: var(--bg);
}

/* The title card, in normal flow below the image frame — never over the
   illustration. */
.hero__content {
  padding: clamp(24px, 4vh, 44px) var(--edge) clamp(16px, 3vh, 32px);
  max-width: 920px;
  display: none;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.hero__kicker-rule {
  width: 34px;
  height: 0;
  border-top: 2px solid var(--accent);
  transition: border-color 0.8s ease;
}

.hero__kicker-label {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.8s ease;
}

.hero__cover-line {
  font-weight: 800;
  font-size: clamp(52px, 9.5vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero__meta {
  margin-top: 20px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gray-meta);
}

.hero__mood {
  color: var(--accent);
  transition: color 0.8s ease;
}

/* Ready state: a published edition loaded successfully — all of .page is
   gated as one unit (see body:not(.is-ready) .page above), so once it's
   visible every block inside is fully themed already. */
body.is-ready .hero__image,
body.is-ready .hero__content {
  display: block;
}

/* ---------- stories row ("Сюжети доби") ---------- */

.stories {
  padding: clamp(36px, 6vh, 72px) 0;
}

.stories__heading {
  margin: 0 var(--edge) 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.stories__row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--edge) 20px;
  scroll-padding-left: var(--edge);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.story-card {
  flex: 0 0 auto;
  width: min(340px, 78vw);
  scroll-snap-align: start;
  padding: 22px 22px 24px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}

.story-card:hover,
.story-card:focus-visible {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 14px 40px -12px var(--accent), 0 0 0 1px var(--accent) inset;
  outline: none;
}

.story-card__no {
  /* The artifact's literal numerator stack — the one mono element on the
     page. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
  transition: color 0.8s ease;
}

.story-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.story-card__summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-summary);
}

/* ---------- about + mood ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 9vh, 110px) var(--edge);
  border-top: 1px solid var(--hairline);
}

.about__col--text {
  max-width: 56ch;
}

.about__kicker {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  transition: color 0.8s ease;
}

.about__text {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
  color: var(--gray-meta);
}

.about__col--mood {
  text-align: center;
}

.about__mood-kicker {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-mood-label);
  margin-bottom: 10px;
}

.about__mood-value {
  font-weight: 800;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.95;
  color: var(--accent);
  transition: color 0.8s ease;
}

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--edge) 34px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--gray-mood-label);
}

.site-footer__project {
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
  transition: color 0.8s ease;
}

/* ---------- scroll reveal motion ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 32rem) {
  .story-card {
    width: 78vw;
  }
}

/* ---------- prefers-reduced-motion: fully inert ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}