/* ==========================================================================
   FIKSU Journal — design system
   Order: tokens → base → layout → components → templates → editor content
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --bg: #f5f5ef;
  --paper: #fbfbf7;
  --ink: #151515;
  --ink-soft: #3f403c;
  --muted: #6f706a;
  --muted-2: #85867f;
  --line: #d9dad2;
  --line-strong: #c3c4ba;
  --lime: #c9ff45;
  --lime-2: #b7ed36;
  --dark: #11120f;
  --dark-2: #1c1e19;
  --dark-line: #303229;
  --on-dark: #c8cabf;
  --on-dark-dim: #7f8278;

  /* Type */
  --font: Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* A tight display scale — the wordmark energy of the brand */
  --step-hero: clamp(2.75rem, 0.9rem + 6.8vw, 6.75rem);
  --step-h1: clamp(2.25rem, 1.15rem + 4.9vw, 4.5rem);
  --step-h2: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);
  --step-h3: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
  --step-card: clamp(1.375rem, 1.1rem + 1.15vw, 1.875rem);
  --step-lead: clamp(1.0625rem, 0.98rem + 0.55vw, 1.3125rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-small: 0.8125rem;
  --step-micro: 0.6875rem;

  /* Layout */
  --max: 1240px;
  --measure: 39rem;
  --gutter: clamp(1rem, 0.45rem + 2.4vw, 1.75rem);
  --section-y: clamp(3.25rem, 1.6rem + 6vw, 4.875rem);

  /* Radii — deliberately only four steps */
  --r-pill: 999px;
  --r-lg: 22px;
  --r-md: 18px;
  --r-sm: 10px;

  --shadow-card: 0 18px 45px rgba(25, 25, 22, 0.07);
  --shadow-panel: 0 30px 80px rgba(20, 20, 16, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 78px;
}

@media (max-width: 620px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky header must not cover anchor targets. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.65;
  font-weight: 400;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 82% 0%, rgba(201, 255, 69, 0.14), transparent 23rem);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lime); color: var(--ink); }

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

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.wrap--narrow { --max: 900px; }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: transform 0.18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.eyebrow {
  font-size: var(--step-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.mark {
  background: var(--lime);
  padding: 0.01em 0.14em 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* The tilt only reads well when the phrase sits on a single line —
   as an inline-block it would turn a wrapped phrase into one slab. */
@media (min-width: 1100px) {
  .mark--tilt { display: inline-block; transform: rotate(-1.2deg); }
}

.tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0.45rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: var(--step-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.arrow { font-size: 1.4rem; line-height: 1; transition: transform 0.2s var(--ease); }

/* --------------------------------------------------------------------------
   4. Topline + header
   -------------------------------------------------------------------------- */

.topline {
  font-size: var(--step-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  color: #53544f;
}
.topline__inner { display: flex; justify-content: space-between; gap: 1.25rem; }

/* On narrow screens the tagline wraps to three lines and pushes the whole
   page down for no benefit — the status signal alone is enough. */
@media (max-width: 700px) {
  .topline__tagline { display: none; }
}

.signal { display: flex; align-items: center; gap: 0.5rem; }
.signal::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime-2);
  box-shadow: 0 0 0 5px rgba(183, 237, 54, 0.16);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(183, 237, 54, 0.16); }
  50% { box-shadow: 0 0 0 8px rgba(183, 237, 54, 0.05); }
}

.site-header {
  position: sticky;
  top: 0;
  /* Must stay above .nav-panel so the toggle remains visible and can
     close the menu — otherwise Escape is the only way out. */
  z-index: 100;
  border-bottom: 1px solid rgba(217, 218, 210, 0.85);
  background: rgba(245, 245, 239, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  /* Comfortable tap target without changing the optical position. */
  min-height: 44px;
  align-content: center;
  padding-block: 0.6rem;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  letter-spacing: -0.055em;
  line-height: 1;
}
.brand sup { font-size: 0.36em; line-height: 1; margin-top: 0.25em; color: var(--lime-2); }
.brand--image img { max-height: 40px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 1.875rem);
  font-size: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  color: var(--ink-soft);
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.16s var(--ease);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_parent > a {
  color: var(--ink);
  font-weight: 700;
}
.nav-menu .current-menu-item > a::after { transform: scaleX(1); }

.nav-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-soon::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime-2);
  flex: none;
}
.nav-soon:hover { background: var(--ink); color: #fff; }

/* Mobile menu ------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 16px; height: 10px;
  flex: none;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  /* visibility must flip instantly on open (a transitioned visibility stays
     hidden for the whole duration, which blocks focus and screen readers)
     and only on close is it delayed until the fade-out finishes. */
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s linear 0.24s;
}
.nav-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s linear 0s;
}
.nav-panel__menu {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--line);
}
.nav-panel__menu li { border-bottom: 1px solid var(--line); }
.nav-panel__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0.75rem 0;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.nav-panel__menu a::after { content: "↗"; font-size: 0.75em; color: var(--muted); }
.nav-panel__menu .current-menu-item > a::after { content: "●"; color: var(--lime-2); }

.nav-panel__foot { margin-top: auto; display: grid; gap: 1rem; }
.nav-panel .search-form { max-width: none; }

body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-menu, .site-nav > .nav-soon { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero { padding: clamp(2.5rem, 1rem + 6vw, 4.875rem) 0 clamp(2rem, 1rem + 4vw, 4.25rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(1.75rem, 0.5rem + 4vw, 4rem);
  align-items: end;
}
/* Grid/flex children default to min-width:auto, which lets a long word
   blow the track out. Every multi-column layout here opts out. */
.hero__grid > *,
.featured > *,
.split > *,
.lab-box > *,
.page-hero__bottom > *,
.footer-top > *,
.next-step > *,
.cta-strip > *,
.card > *,
.case > * { min-width: 0; }

.hero__title {
  font-size: var(--step-hero);
  line-height: 0.88;
  letter-spacing: -0.07em;
  font-weight: 900;
  max-width: 15ch;
}

.hero__eyebrow { margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); }

.hero__side p {
  color: #4f504b;
  font-size: var(--step-lead);
  line-height: 1.52;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.4rem;
  font-weight: 800;
  min-height: 44px;
}
.hero-link:hover .arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__title { max-width: 100%; }
  .hero__side p { max-width: 46ch; }
}

/* --------------------------------------------------------------------------
   6. Ticker
   -------------------------------------------------------------------------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  /* The track is duplicated, so masking the ends hides the seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  min-width: max-content;
  display: flex;
  gap: 3rem;
  padding: 0.85rem 0;
  color: #50514c;
  font-size: var(--step-small);
  animation: ticker 34s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track b { color: var(--ink); }
.ticker__track span { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.ticker__track span::before {
  content: "●";
  font-size: 0.5em;
  margin-right: 0.75rem;
  color: var(--lime-2);
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.section { padding: var(--section-y) 0; }
.section--tight { padding-top: 0; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1rem, 0.3rem + 2.5vw, 1.875rem);
  margin-bottom: 1.875rem;
}
.section-head h2 {
  font-size: var(--step-h2);
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.55;
  font-size: 1rem;
}
.section-head__link { font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }

@media (max-width: 760px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}

/* --------------------------------------------------------------------------
   8. Featured card
   -------------------------------------------------------------------------- */

.featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  transition: box-shadow 0.24s var(--ease), transform 0.24s var(--ease);
}
.featured:hover { box-shadow: var(--shadow-card); }

.featured__copy {
  padding: clamp(1.5rem, 0.7rem + 2.6vw, 2.875rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.featured__title {
  font-size: clamp(1.875rem, 1.1rem + 3.6vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 1.4rem 0 1.1rem;
}
.featured__title a::after { content: ""; position: absolute; inset: 0; }
.featured:hover .featured__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.featured__copy p { color: #595a55; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); line-height: 1.55; max-width: 46ch; }

.featured__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--dark);
}
.featured__media img { width: 100%; height: 100%; object-fit: cover; }

/* Data panel used when a featured post has no image */
.featured__data {
  background: var(--dark);
  color: #fff;
  padding: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.featured__data::after {
  content: "";
  position: absolute;
  right: -130px; bottom: -140px;
  width: 280px; height: 280px;
  border: 46px solid var(--lime);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.data-title {
  color: #b7b9b0;
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.big-num {
  font-size: clamp(3.25rem, 1.5rem + 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.8;
  position: relative;
  z-index: 2;
}
.data-caption { color: #d8dacd; font-size: 1rem; margin-top: 0.75rem; position: relative; z-index: 2; }

.data-facts {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  position: relative;
  z-index: 2;
}
.data-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.data-facts dt {
  font-size: var(--step-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8aba0;
}
.data-facts dd { margin: 0; font-weight: 800; color: #fff; }

.mini-bars { display: grid; gap: 0.6rem; position: relative; z-index: 2; }
.bar {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2.25rem;
  gap: 0.75rem;
  align-items: center;
  font-size: var(--step-micro);
  color: #b8bbb1;
}
.bar__track { height: 5px; background: #292b26; border-radius: var(--r-pill); overflow: hidden; }
.bar__track i { display: block; height: 100%; background: var(--lime); border-radius: var(--r-pill); }
.bar b { color: #fff; text-align: right; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  color: var(--muted-2);
  font-size: var(--step-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Lime text on the warm background only reaches ~1.3:1, so the accent is
   carried by a dot and the text stays readable. */
.meta__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-weight: 600;
}
.meta__updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-2);
  flex: none;
}

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured__media, .featured__data { min-height: 260px; order: -1; }
  .featured__data { order: 0; }
}

/* --------------------------------------------------------------------------
   9. Card grid
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.125rem;
}

.cards--archive { margin-top: 1.5rem; }

.card {
  position: relative;
  min-height: 21rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(251, 251, 247, 0.7);
  padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  overflow: hidden;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
  .card:hover .arrow { transform: translate(3px, -3px); }
}
.card:focus-within { box-shadow: var(--shadow-card); }

.card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted-2);
  font-size: var(--step-micro);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.card__title {
  font-size: var(--step-card);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 0.9rem;
  padding-top: 2.5rem;
}
/* The whole card is clickable, but the link stays a real link for a11y. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.card__excerpt { color: #686964; line-height: 1.5; font-size: 0.9375rem; margin: 0; }

.card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.card__media {
  margin: -1.75rem -1.75rem 1.25rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--line);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card--media .card__title { padding-top: 0; margin-top: 0; }

/* Variants */
.card--dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.card--dark .card__top, .card--dark .card__excerpt { color: #aeb0a7; }
.card--dark .card__foot { color: #fff; }

.card--lime { background: var(--lime); border-color: var(--lime); }
.card--lime .card__top, .card--lime .card__excerpt { color: #393b31; }

.card--wide { grid-column: span 2; }
@media (max-width: 780px) { .card--wide { grid-column: span 1; } }

/* Cards without an image get a quiet monogram so they never look unfinished. */
.card--plain::before {
  content: "FIKSU°";
  position: absolute;
  right: -0.5rem; bottom: -1.1rem;
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: rgba(21, 21, 21, 0.028);
  pointer-events: none;
  user-select: none;
}
.card--dark.card--plain::before { color: rgba(255, 255, 255, 0.05); }
.card--lime.card--plain::before { color: rgba(21, 21, 21, 0.07); }

/* --------------------------------------------------------------------------
   10. Chips, search, buttons
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.85rem;
  color: #5f605b;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.chip:hover, .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.home-chips { margin-top: 2.375rem; }
.home-more { margin: 2.5rem 0 0; display: flex; justify-content: center; }

.search-form { position: relative; max-width: 40rem; width: 100%; }
.search-form input[type="search"] {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  padding: 0 3.5rem 0 1.25rem;
  outline: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.search-form input[type="search"]::placeholder { color: var(--muted-2); }
.search-form input[type="search"]:focus {
  border-color: #9b9c94;
  box-shadow: 0 0 0 4px rgba(201, 255, 69, 0.28);
}
.search-form button {
  position: absolute;
  right: 6px; top: 6px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  transition: background 0.16s var(--ease);
}
.search-form button:hover { background: #000; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #000; }
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-2); border-color: var(--lime-2); color: var(--ink); }

/* Archive toolbar */
.toolbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.25);
}
.toolbar__inner {
  padding: 1.375rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
}
.toolbar .chips { margin: 0; justify-content: flex-end; }

@media (max-width: 900px) {
  .toolbar__inner { grid-template-columns: 1fr; }
  .toolbar .chips { justify-content: flex-start; }
}

/* Horizontal chip scroller on narrow screens beats a 4-line wrap. */
@media (max-width: 620px) {
  .toolbar .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .toolbar .chip { flex: none; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   11. Split / cases
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.75rem, 0.4rem + 4.5vw, 4.375rem);
  align-items: start;
}
.split__title {
  position: sticky;
  top: calc(var(--header-h) + 3rem);
  font-size: var(--step-h2);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.cases { border-top: 1px solid var(--line); }
.case {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr 1.5rem;
  gap: 1.375rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding-left 0.22s var(--ease);
}
.case:hover { padding-left: 0.5rem; }
.case__num { font-size: var(--step-micro); color: #8b8c86; letter-spacing: 0.1em; padding-top: 0.35rem; }
.case__title { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem); letter-spacing: -0.025em; margin-bottom: 0.4rem; }
.case__title a::after { content: ""; position: absolute; inset: 0; }
.case p { margin: 0; color: #74756f; line-height: 1.45; font-size: 0.9375rem; }
.case:hover .arrow { transform: translate(4px, -4px); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__title { position: static; }
}
@media (max-width: 620px) {
  .case { grid-template-columns: 2.5rem 1fr 1.25rem; gap: 0.85rem; }
}

/* --------------------------------------------------------------------------
   12. FIKSU LAB
   -------------------------------------------------------------------------- */

.lab-box {
  background: #12130f;
  color: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
.lab-copy { padding: clamp(1.5rem, 0.7rem + 3vw, 3.375rem); }
.lab-copy .tag { color: #d5d7ce; border-color: #484b40; }
.lab-copy h2 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  margin: clamp(1.25rem, 0.7rem + 1.8vw, 2.125rem) 0 1.375rem;
}
.lab-copy p { color: #b9bbb2; font-size: 1.0625rem; line-height: 1.6; max-width: 42ch; }

.status-link {
  margin-top: 2rem;
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  color: #fff;
  font-weight: 800;
  min-height: 44px;
}
.status-link::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(201, 255, 69, 0.12);
  flex: none;
}
.status-link:hover .arrow { transform: translateX(4px); }

.terminal {
  border-left: 1px solid var(--dark-line);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.375rem);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 28px 28px;
  overflow-x: auto;
}
.terminal__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--on-dark-dim);
  font: 500 0.75rem var(--mono);
}
.terminal__body {
  margin-top: 2rem;
  font: 400 0.8125rem/1.9 var(--mono);
  color: var(--on-dark);
}
.terminal__body .ok { color: var(--lime); }
.terminal__body .dim { color: var(--on-dark-dim); }
.terminal__body .white { color: #fff; }
.terminal__body .indent { padding-left: 1.25rem; }
.terminal__body .spacer { height: 1rem; }
.cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--lime);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.lab-note {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  color: var(--on-dark-dim);
  font-style: italic;
}

@media (max-width: 900px) {
  .lab-box { grid-template-columns: 1fr; }
  .terminal { border-left: 0; border-top: 1px solid var(--dark-line); }
}

/* --------------------------------------------------------------------------
   13. Breadcrumbs, pagination
   -------------------------------------------------------------------------- */

.breadcrumbs {
  padding: 1.125rem 0 0;
  font-size: var(--step-small);
  color: var(--muted);
}
.breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.4;
}
.breadcrumbs a { border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.breadcrumbs__sep, .breadcrumbs .breadcrumb_last ~ span { color: var(--line-strong); }
.breadcrumbs [aria-current="page"], .breadcrumbs .breadcrumb_last { color: var(--ink); font-weight: 600; }

.pagination { margin-top: 2.75rem; }
.pagination__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.pagination a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .current { background: var(--lime); border-color: var(--lime); }
.pagination .dots { border-color: transparent; min-width: 1.5rem; }

/* --------------------------------------------------------------------------
   14. Single article
   -------------------------------------------------------------------------- */

.article-head { padding: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.article-cat {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  font-size: var(--step-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-title {
  font-size: var(--step-h1);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 900;
  margin: 1.25rem 0 0;
  max-width: 18ch;
}
/* Long headlines need to breathe rather than shrink. */
.article-title { text-wrap: balance; hyphens: auto; }

.article-lead {
  font-size: var(--step-lead);
  line-height: 1.55;
  color: #4f504b;
  max-width: 44ch;
  margin: 1.5rem 0 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
  color: var(--muted);
}
.article-meta .author { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); font-weight: 700; }
.article-meta .author img { width: 34px; height: 34px; border-radius: 50%; }
.article-meta__sep { color: var(--line-strong); }

.article-hero {
  margin: 0 0 clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}
.article-hero img { width: 100%; }
.article-hero figcaption {
  font-size: var(--step-small);
  color: var(--muted);
  padding: 0.75rem 0.25rem 0;
}

/* Article body: a comfortable measure on the same left axis as the H1,
   so the header and the text read as one column. Wide/full blocks escape. */
.article-body > * {
  max-width: var(--measure);
  /* !important: WordPress core injects "constrained layout" centering
     margins for list/table/group blocks in a late <style> block in
     wp_head, which otherwise beats this rule on source order even at
     equal specificity — pushing lists and tables off the left edge. */
  margin-inline: 0 !important;
}

/* Same core behavior can reach blocks nested inside a group (e.g. a
   checklist inside a "Важно" note) — never allow centering anywhere
   in the article body. */
.article-body :where(ul, ol, table, blockquote, .wp-block-table, .wp-block-group) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.article-body {
  font-size: var(--step-body);
  line-height: 1.72;
}
.article-body > .alignwide { max-width: min(1080px, 100%); }
.article-body > .alignfull { max-width: none; }

/* Core's constrained-layout rules auto-centre group blocks and add root
   padding to them. Inside an article both fight the reading column. */
.article-body > .wp-block-group,
.article-body > .wp-block-group.is-layout-constrained {
  margin-inline: 0;
}
.article-body > .wp-block-group.has-global-padding {
  padding-inline: 1.625rem;
}
.article-body > .wp-block-group > .wp-block-group__inner-container > * {
  max-width: none;
}

/* Past a certain width a hard-left column looks stranded, so shift the
   whole article column slightly right — header, hero and body together.
   The related-posts grid below keeps the full site width. */
@media (min-width: 1180px) {
  .article-head .wrap,
  .article > .wrap { padding-left: clamp(0rem, 6vw - 4rem, 5rem); }
}

.article-body h2 {
  font-size: var(--step-h3);
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 2.5em 0 0.7em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  margin: 2em 0 0.6em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }

.article-body :is(ul, ol) { padding-left: 1.35em; margin: 0 auto 1.5em; }
.article-body li { margin-bottom: 0.5em; }
.article-body li::marker { color: var(--muted); }

.article-body a:not(.btn) {
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.article-body a:not(.btn):hover { border-bottom-color: var(--ink); background: rgba(201, 255, 69, 0.35); }

.article-body figure { margin: 2rem auto; }
.article-body img { border-radius: var(--r-md); }
.article-body figcaption {
  font-size: var(--step-small);
  color: var(--muted);
  margin-top: 0.6rem;
  line-height: 1.5;
}

.article-body blockquote {
  margin: 2rem auto;
  padding-left: 1.25rem;
  border-left: 3px solid var(--lime);
  font-size: 1.125rem;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body cite { display: block; margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); font-style: normal; }

.article-body code:not(pre code) {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(21, 21, 21, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.article-body pre {
  font-family: var(--mono);
  background: var(--dark);
  color: var(--on-dark);
  padding: 1.25rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Tables: scrollable on small screens instead of breaking the viewport.
   They also get more width than the prose measure — data is easier to read
   with room, and the extra width marks them as a different kind of content. */
.article-body .wp-block-table,
.article-body figure.wp-block-table {
  overflow-x: auto;
  margin: 2rem 0;
}
.article-body > .wp-block-table { max-width: min(46rem, 100%); }
.article-body .wp-block-table figcaption { text-align: left; padding-top: 0.6rem; }

/* Branded by default — an author who never applies the "FIKSU / данные"
   block style still gets a table that looks designed, not a bare HTML one. */
.article-body .wp-block-table table {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 30rem;
}
.article-body :is(th, td) {
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article-body th { font-weight: 800; background: var(--paper); }
.article-body td { background: rgba(255, 255, 255, 0.35); }
.article-body tbody tr:hover { background: rgba(201, 255, 69, 0.12); }

.article-foot { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-small);
}

/* Next-step CTA at the end of an article */
.next-step {
  margin-top: 2.5rem;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.next-step h2 { font-size: var(--step-h3); letter-spacing: -0.04em; }
.next-step p { color: #b9bbb2; margin: 0.6rem 0 0; max-width: 46ch; font-size: 1rem; }
.next-step .btn { border-color: var(--lime); background: var(--lime); color: var(--ink); white-space: nowrap; }
.next-step .btn:hover { background: var(--lime-2); border-color: var(--lime-2); }

@media (max-width: 760px) {
  .next-step { grid-template-columns: 1fr; }
  .next-step .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   15. Author box, sources, related
   -------------------------------------------------------------------------- */

.author-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  margin-top: 2.5rem;
}
.author-box img { width: 56px; height: 56px; border-radius: 50%; }
.author-box h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.author-box p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

@media (max-width: 520px) {
  .author-box { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 1.2rem + 2.5vw, 3rem) 0 clamp(2rem, 1.4rem + 2vw, 2.75rem);
  margin-top: var(--section-y);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.75rem, 0.8rem + 3vw, 3.5rem);
  align-items: start;
  padding-bottom: 2.5rem;
}
.footer-brand { font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem); font-weight: 900; letter-spacing: -0.06em; line-height: 1; }
.footer-about { color: #777870; font-size: 0.9375rem; line-height: 1.6; max-width: 44ch; margin-top: 1rem; }

.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.footer-nav h2 {
  font-size: var(--step-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0.85rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step-small);
  color: var(--muted);
  align-items: center;
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.2rem;
}
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. Search results, 404, empty states
   -------------------------------------------------------------------------- */

.page-hero { padding: clamp(2.5rem, 1.2rem + 5vw, 4.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-hero__kicker { margin-bottom: 1.1rem; }
.page-hero h1 {
  font-size: var(--step-h1);
  line-height: 0.9;
  letter-spacing: -0.07em;
  font-weight: 900;
  max-width: 16ch;
}
.page-hero__bottom {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  gap: clamp(1.25rem, 0.4rem + 3vw, 3.75rem);
  align-items: end;
  margin-top: 2rem;
}
.page-hero p { color: #5d5e58; font-size: var(--step-lead); line-height: 1.55; max-width: 52ch; margin: 0; }
.page-hero__count {
  font-size: var(--step-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-align: right;
}
.page-hero__count b { font-size: 1.75rem; color: var(--ink); letter-spacing: -0.04em; margin-right: 0.4rem; }

@media (max-width: 900px) {
  .page-hero__bottom { grid-template-columns: 1fr; }
  .page-hero__count { text-align: left; }
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  text-align: center;
  background: rgba(255, 255, 255, 0.35);
}
.empty-state h2 { font-size: var(--step-h3); margin-bottom: 0.75rem; }
.empty-state p { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.empty-state .search-form { margin: 1.75rem auto 0; }

/* Needs to outrank `.page-hero p`, which sets the lead paragraph size. */
.page-hero .error-code {
  font-size: clamp(5rem, 2rem + 18vw, 15rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.8;
  margin: 0;
}
.error-code span { color: var(--lime-2); }
.error-title {
  font-size: var(--step-h2);
  letter-spacing: -0.05em;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   18. CTA strip
   -------------------------------------------------------------------------- */

.cta-strip {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}
.cta-strip h2 { font-size: var(--step-h3); letter-spacing: -0.04em; }
.cta-strip p { margin: 0.4rem 0 0; color: #777870; font-size: 0.9375rem; }
.cta-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 var(--ink);
}

@media (max-width: 760px) {
  .cta-strip { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   19. Gutenberg block styles & FIKSU patterns
   -------------------------------------------------------------------------- */

/* Data block */
.fiksu-data {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 1.5rem;
  margin: 2rem auto;
}
.fiksu-data__label {
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

/* Observation / callouts, built from core group + heading + paragraph */
.fiksu-note {
  border-radius: var(--r-md);
  padding: 1.5rem 1.625rem;
  margin: 2rem auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.fiksu-note__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.fiksu-note--takeaway { background: var(--lime); border-color: var(--lime); }
.fiksu-note--takeaway .fiksu-note__label { color: #3d4034; }
.fiksu-note--warning { border-left: 3px solid var(--ink); }
.fiksu-note--observation { background: var(--dark); border-color: var(--dark); color: #fff; }
.fiksu-note--observation .fiksu-note__label { color: var(--lime); }
.fiksu-note--example { border-style: dashed; }

/* Sources */
.fiksu-sources {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin: 2.5rem auto 0;
}
.fiksu-sources h2 {
  font-size: var(--step-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.fiksu-sources ol { padding-left: 1.2em; }
.fiksu-sources li { font-size: 0.9375rem; color: var(--muted); margin-bottom: 0.6em; }
.fiksu-sources a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }

/* Block style variants registered in inc/blocks.php */
.wp-block-list.is-style-fiksu-checks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-fiksu-checks li {
  position: relative;
  padding-left: 1.85rem;
}
.wp-block-list.is-style-fiksu-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-weight: 900;
  color: var(--ink);
  background: var(--lime);
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
}

.wp-block-list.is-style-fiksu-steps { list-style: none; padding-left: 0; counter-reset: step; }
.wp-block-list.is-style-fiksu-steps li {
  position: relative;
  padding-left: 2.5rem;
  counter-increment: step;
  margin-bottom: 1em;
}
.wp-block-list.is-style-fiksu-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -0.1em;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 800;
}

.wp-block-quote.is-style-fiksu-statement {
  border-left: 0;
  padding-left: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-align: left;
}

.wp-block-image.is-style-fiksu-framed img {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 0.75rem;
}

.wp-block-separator.is-style-fiksu-dots {
  border: 0;
  height: auto;
  text-align: center;
  max-width: none;
}
.wp-block-separator.is-style-fiksu-dots::before {
  content: "● ● ●";
  letter-spacing: 0.75em;
  font-size: 0.5rem;
  color: var(--line-strong);
}

.wp-block-table.is-style-fiksu-data table { border: 1px solid var(--line); border-radius: var(--r-sm); }
.wp-block-table.is-style-fiksu-data th { background: var(--lime); }

/* Core block guardrails inside articles */
.article-body .wp-block-pullquote { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1.5rem 0; }
.article-body .wp-block-embed { margin: 2rem auto; }
.article-body .wp-block-buttons { margin: 2rem auto; }
.article-body .wp-block-button__link {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
  padding: 0.85rem 1.5rem;
}

/* --------------------------------------------------------------------------
   20. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; transform: none; }
  .card:hover { transform: none; }
}

/* Reveal-on-scroll, progressively enhanced by app.js */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .topline, .site-footer, .next-step, .pagination, .breadcrumbs, .article-share { display: none; }
  body { background: #fff; }
  .article-body > * { max-width: none; }
}