/* Hallmark · genre: editorial · macrostructure: Manifesto · theme: Carnival (drop: Citrus Riot) · enrichment: none · nav: N12 · footer: Ft5
 * redesign of: Narrative Workflow / Newsprint / N6 / Ft4 · differs on: display style + accent system + nav + footer
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · mobile: pass (34, 49, 50–57) */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 */
/* Hallmark · audience: cumpărători online ne-tehnici · use: cere acces la beta · tone: poster/revoltă */

@import url("tokens.css");

html { overflow-x: clip; }
body { overflow-x: clip; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.04;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

a { color: var(--color-ink); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.ornament { color: var(--color-accent-2); }

/* ---------- Nav N12: banner + bară care se retrage ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky-nav);
  transform: translateY(0);
  transition: transform 320ms var(--ease-out);
}
.nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.nav.is-dismissed { transform: none; }
.nav.is-dismissed .nav__banner { display: none; }

.nav__banner {
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-accent-2);
  color: var(--color-paper);
  padding-inline: var(--space-md);
}
.nav__banner p {
  margin: 0;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.nav__banner a { color: var(--color-paper); white-space: nowrap; }
.nav__banner-x {
  background: none;
  border: 0;
  color: var(--color-paper);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2xs);
}

.nav__bar {
  height: var(--bar-h);
  background: var(--color-paper);
  border-bottom: var(--rule-thick) solid var(--color-rule);
}
.nav__bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--page-gutter);
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-lg);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  gap: var(--space-lg);
}
.nav__links a {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  line-height: 1;
}
.nav__links a:hover { color: var(--color-accent-2); text-decoration: underline; }

main { padding-top: calc(var(--banner-h) + var(--bar-h)); }

/* ---------- Manifesto: declarația de deschidere ---------- */

.decl {
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  max-width: 68rem;
}
.decl h1 {
  font-size: var(--text-display);
  max-width: 14ch;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  margin-bottom: var(--space-xl);
}
.decl h1 .block {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 0 var(--space-xs);
  box-shadow: var(--shadow-hard);
}
.decl .claim {
  font-size: var(--text-md);
  font-weight: 600;
  max-width: var(--measure);
  margin: 0 0 var(--space-sm);
}
.decl .claim-sub {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

/* ---------- Divider ornamental ---------- */

.orn-divider {
  text-align: center;
  font-size: var(--text-md);
  color: var(--color-accent-2);
  letter-spacing: 0.6em;
  padding: var(--space-lg) 0;
  margin: 0;
}

/* ---------- Ce citim: pilonii ca afirmații ---------- */

.pillars {
  padding: 0 var(--page-gutter) var(--space-2xl);
  max-width: 68rem;
}
.pillars h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xl); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-2xl);
}
.pillar h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}
.pillar h3 .w {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-2);
  margin-left: var(--space-xs);
  white-space: nowrap;
}
.pillar p { margin: 0; max-width: 48ch; }
.pillar p + p { margin-top: var(--space-xs); }
.hard-rule-line {
  margin: var(--space-2xl) 0 0;
  border-top: var(--rule-thick) solid var(--color-rule);
  padding-top: var(--space-md);
  font-weight: 600;
  max-width: var(--measure);
}

/* ---------- Bloc mustar: cele trei verdicte ---------- */

.verdicts {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-2xl) var(--page-gutter) var(--space-2xl);
}
.verdicts-inner { max-width: 68rem; }
.verdicts h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xl); }
.verdict-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-right: max(var(--page-gutter), 8px);
}
.verdict-card {
  background: var(--color-paper);
  border: var(--rule-thick) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.verdict-card h3 {
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.swatch {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  border: 2px solid var(--color-ink);
}
.swatch.verde  { background: var(--color-verde); }
.swatch.galben { background: var(--color-galben); }
.swatch.rosu   { background: var(--color-rosu); }
.verdict-card p { margin: 0; }

/* ---------- Refuzurile ---------- */

.refuse {
  padding: var(--space-2xl) var(--page-gutter);
  max-width: 68rem;
}
.refuse h2 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.refuse ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
}
.refuse li {
  padding: var(--space-sm) 0;
  font-weight: 600;
}
.refuse li::before {
  content: "❋ ";
  color: var(--color-accent-2);
}
.refuse .legal {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-weight: 400;
}

/* ---------- Bloc ardezie: CTA supradimensionat ---------- */

.cta-block {
  background: var(--color-accent-2);
  color: var(--color-paper);
  padding: var(--space-3xl) var(--page-gutter);
}
.cta-inner { max-width: 68rem; }
.cta-block h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.cta-block p { max-width: var(--measure); margin: 0 0 var(--space-xl); }
.cta-block .note { font-size: var(--text-sm); margin-top: var(--space-lg); margin-bottom: 0; }
.btn-poster {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: var(--rule-thick) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  padding: var(--space-md) var(--space-xl);
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.btn-poster:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-ink); }
.btn-poster:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-ink); }
.cta-block a { color: var(--color-paper); }
.cta-block .btn-poster { color: var(--color-accent-ink); }

/* ---------- Footer Ft5: propoziția de închidere ---------- */

.foot-stmt {
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}
.foot-stmt__line {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  max-width: 22ch;
  margin: 0;
}
.foot-stmt__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-top: var(--rule-thick) solid var(--color-rule);
}
.foot-stmt__meta p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  max-width: 70ch;
}

/* ---------- Responsive ---------- */

@media (max-width: 48rem) {
  .pillar-grid { grid-template-columns: 1fr; }
  .verdict-grid { grid-template-columns: 1fr; padding-right: 8px; }
  .nav__links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .nav { transition: none; }
}