@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   DÜNYA İZLERİ — tieb.css
   Design System: warm_paper / sharp / #F5EFE0 base
   ============================================================ */

:root {
  --radius: 0px;
  --di-primary: #C0562E;
  --di-secondary: #8B6914;
  --di-bg: #F5EFE0;
  --di-text: #2A1F0E;
  --di-text-muted: #5C4A28;
  --di-text-light: #F5EFE0;
  --di-border: #C4A96A;
  --di-border-dark: #8B6914;
  --di-surface: #EDE3CE;
  --di-surface-dark: #2A1F0E;
  --di-surface-mid: #3D2D10;
  --di-ink: #1A1208;
  --di-amber: #D4960A;
  --di-rust: #C0562E;
  --di-ash: #7A6A52;
  --di-header-height: 72px;
  --di-font-head: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --di-font-body: 'Crimson Text', Georgia, serif;
  --di-shadow-card: 4px 4px 0px #8B6914, 0 2px 24px rgba(42,31,14,.18);
  --di-shadow-btn: 3px 3px 0px #8B6914;
  --di-transition: 0.22s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--di-font-body);
  background-color: var(--di-bg);
  color: var(--di-text);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--di-primary);
  text-decoration: none;
  transition: color var(--di-transition);
}

a:hover, a:focus {
  color: var(--di-secondary);
  text-decoration: underline;
}

/* ============================================================
   CONTAINER
   ============================================================ */

.di-urip {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* ============================================================
   GRID
   ============================================================ */

.di-ogup {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.di-ogup--two {
  grid-template-columns: repeat(2, 1fr);
}

.di-ogup--three {
  grid-template-columns: repeat(3, 1fr);
}

.di-ogup--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 899px) {
  .di-ogup--four {
    grid-template-columns: repeat(2, 1fr);
  }
  .di-ogup--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .di-ogup--two,
  .di-ogup--three,
  .di-ogup--four {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HEADER
   ============================================================ */

.di-bunude {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--di-ink);
  border-bottom: 2px solid var(--di-secondary);
  height: var(--di-header-height);
  box-shadow: 0 2px 16px rgba(0,0,0,.45);
}

.di-bunude__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.di-puze {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
}

.di-puze img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* di-loan used in header (brand name) */
.di-bunude .di-loan {
  font-family: var(--di-font-head);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--di-bg);
  line-height: 1;
}

.di-bapu {
  display: flex;
  align-items: center;
}

.di-bapu__list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.di-bapu__item {
  flex-shrink: 0;
}

.di-bapu__link {
  font-family: var(--di-font-head);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--di-border);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--di-transition), border-color var(--di-transition);
  white-space: nowrap;
}

.di-bapu__link:hover,
.di-bapu__link:focus {
  color: var(--di-bg);
  border-bottom-color: var(--di-primary);
  text-decoration: none;
}

/* Hamburger */
.di-pato {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--di-border-dark);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  border-radius: var(--radius);
}

.di-pato__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--di-bg);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.di-pato--open .di-pato__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.di-pato--open .di-pato__line:nth-child(2) {
  opacity: 0;
}

.di-pato--open .di-pato__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Scrolled state */
.di-bapu--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.6);
}

@media (max-width: 899px) {
  .di-pato {
    display: flex;
  }

  .di-bapu__list {
    display: none;
  }

  .di-bapu--open .di-bapu__list {
    position: fixed;
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
    top: var(--di-header-height, 72px);
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
    max-height: calc(100vh - var(--di-header-height, 72px));
    max-height: calc(100dvh - var(--di-header-height, 72px));
    background: var(--di-ink);
    border-bottom: 2px solid var(--di-secondary);
    padding: 1.5rem 2rem;
    gap: 0.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }

  .di-bapu--open .di-bapu__item {
    border-bottom: 1px solid rgba(196,169,106,.2);
    padding-block: 0.5rem;
  }

  .di-bapu--open .di-bapu__link {
    font-size: 1.4rem;
    color: var(--di-bg);
  }
}

/* ============================================================
   HERO — SPLIT LAYOUT (comic-cover)
   ============================================================ */

.di-giaf {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(560px, 90vh, 900px);
  gap: 0;
  overflow: hidden;
  padding-top: var(--di-header-height);
}

.di-giaf--comic-cover {
  background: var(--di-ink);
}

/* media column — left side */
.di-ovgi {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

/* hero image via contract media_class */
.di-media--dobuud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: unset;
  z-index: 0;
  pointer-events: none;
}

.di-media--dobuud::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(26,18,8,.15), rgba(26,18,8,.55)),
    url('../assets/images/di-dobuud.webp'),
    linear-gradient(135deg, #1A1208, #2A1F0E);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* overlay on media column */
.di-ziol {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 60%,
    rgba(26,18,8,.7) 100%
  );
}

/* decorative element — empty absolute */
.di-udab {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-right: 3px solid var(--di-secondary);
}

/* content column — right side */
.di-atik {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 6vh, 4rem);
  background: var(--di-ink);
  border-left: 0;
}

.di-beubro {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  color: var(--di-secondary);
  background: rgba(139,105,20,.15);
  border: 1px solid var(--di-secondary);
  padding: 0.2em 0.8em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.di-samusi {
  font-family: var(--di-font-head);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--di-bg);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}

.di-bela {
  font-family: var(--di-font-head);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.12em;
  color: var(--di-amber);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.di-uparip {
  font-family: var(--di-font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(245,239,224,.8);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 38ch;
}

/* stats */
.di-giaf__stats {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.di-giaf__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 2px solid var(--di-secondary);
  padding-left: 0.75rem;
}

.di-giaf__stat-value {
  font-family: var(--di-font-head);
  font-size: 1.8rem;
  color: var(--di-bg);
  line-height: 1;
  letter-spacing: 0.06em;
}

.di-giaf__stat-label {
  font-family: var(--di-font-body);
  font-size: 0.78rem;
  color: var(--di-ash);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* actions */
.di-ebopeb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 899px) {
  .di-giaf {
    grid-template-columns: 1fr;
    min-height: clamp(480px, 80vh, 800px);
  }

  .di-ovgi {
    min-height: clamp(220px, 40vh, 360px);
    order: -1;
  }

  .di-atik {
    padding-inline: clamp(1.25rem, 6vw, 2.5rem);
  }

  .di-samusi {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.di-papa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--di-font-head);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65em 1.6em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--di-transition),
    color var(--di-transition),
    box-shadow var(--di-transition),
    transform var(--di-transition),
    border-color var(--di-transition);
  white-space: nowrap;
  line-height: 1.1;
}

.di-papa--primary {
  background: var(--di-primary);
  color: var(--di-bg);
  border-color: var(--di-primary);
  box-shadow: var(--di-shadow-btn);
}

.di-papa--primary:hover,
.di-papa--primary:focus {
  background: #a0451e;
  border-color: #a0451e;
  box-shadow: 2px 2px 0px var(--di-secondary);
  transform: translate(1px, 1px);
  color: var(--di-bg);
  text-decoration: none;
}

.di-papa--secondary {
  background: transparent;
  color: var(--di-border);
  border-color: var(--di-border-dark);
  box-shadow: var(--di-shadow-btn);
}

.di-papa--secondary:hover,
.di-papa--secondary:focus {
  background: rgba(139,105,20,.15);
  color: var(--di-bg);
  border-color: var(--di-amber);
  box-shadow: 2px 2px 0px var(--di-secondary);
  transform: translate(1px, 1px);
  text-decoration: none;
}

.di-papa--ghost {
  background: transparent;
  color: var(--di-primary);
  border-color: var(--di-primary);
}

.di-papa--ghost:hover,
.di-papa--ghost:focus {
  background: rgba(192,86,46,.1);
  color: var(--di-primary);
  text-decoration: none;
}

.di-esab {
  pointer-events: none;
}

.di-mame {
  display: inline-flex;
  align-items: center;
  font-size: 1.1em;
  pointer-events: none;
}

/* ============================================================
   SECTIONS — BASE
   ============================================================ */

.di-bidafa {
  position: relative;
  padding-block: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}

.di-bidafa--alt {
  background: var(--di-surface);
}

.di-bidafa__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.di-bidafa__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* section header */
.di-afruvo {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  z-index: 1;
}

.di-evikil {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--di-secondary);
  border-bottom: 1px solid var(--di-secondary);
  padding-bottom: 0.15em;
  margin-bottom: 0.75rem;
}

.di-inkusu {
  font-family: var(--di-font-head);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--di-text);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.di-osmo {
  font-family: var(--di-font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--di-text-muted);
  max-width: 60ch;
  line-height: 1.6;
}

.di-uzekap {
  font-family: var(--di-font-body);
  font-size: 1.05rem;
  color: var(--di-text-muted);
  max-width: 52ch;
  margin-top: 0.5rem;
  font-style: italic;
  line-height: 1.65;
}

/* ============================================================
   CARDS — BASE
   ============================================================ */

.di-card {
  position: relative;
  overflow: hidden;
  background: var(--di-surface);
  border: 1px solid var(--di-border);
  box-shadow: var(--di-shadow-card);
  border-radius: var(--radius);
  transition:
    transform var(--di-transition),
    box-shadow var(--di-transition);
}

.di-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--di-secondary), 0 4px 28px rgba(42,31,14,.2);
}

.di-reur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.di-ittool {
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.di-izeb {
  font-family: var(--di-font-head);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--di-text);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  line-height: 1.1;
}

.di-inzeeg {
  font-family: var(--di-font-body);
  font-size: 0.97rem;
  color: var(--di-text-muted);
  line-height: 1.6;
}

.di-leeb {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  display: block;
  line-height: 1;
}

.di-enze {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.15em 0.6em;
  border: 1px solid var(--di-border-dark);
  color: var(--di-secondary);
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
}

.di-guga {
  display: inline-block;
  font-family: var(--di-font-body);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--di-ash);
  margin-top: 0.4rem;
}

.di-card__media {
  position: relative;
  min-height: clamp(180px, 26vh, 320px);
  overflow: hidden;
  border-bottom: 1px solid var(--di-border);
}

.di-card__step {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--di-ash);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.di-card__risk {
  font-family: var(--di-font-head);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--di-primary);
  margin-top: 0.6rem;
  display: block;
}

.di-card__status {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.15em 0.65em;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  border: 1px solid currentColor;
}

.di-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.di-card__zone {
  font-family: var(--di-font-body);
  font-size: 0.8rem;
  color: var(--di-ash);
  font-style: italic;
}

.di-card__threat-bar {
  margin-top: 0.75rem;
  background: rgba(42,31,14,.12);
  border: 1px solid var(--di-border);
  height: 8px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.di-card__threat-fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--di-secondary), var(--di-primary));
  transition: width 0.6s ease;
}

.di-card__excerpt {
  font-family: var(--di-font-body);
  font-size: 0.9rem;
  color: var(--di-text-muted);
  line-height: 1.55;
  margin-top: 0.5rem;
  font-style: italic;
}

.di-card__archive-note {
  font-family: var(--di-font-body);
  font-size: 0.78rem;
  color: var(--di-ash);
  font-style: italic;
  margin-top: 0.75rem;
  border-top: 1px solid var(--di-border);
  padding-top: 0.5rem;
}

.di-card__log-id {
  font-family: var(--di-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--di-ash);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.di-card__from {
  font-family: var(--di-font-body);
  font-size: 0.85rem;
  color: var(--di-secondary);
  font-weight: 600;
}

.di-card__timestamp {
  font-family: var(--di-font-body);
  font-size: 0.78rem;
  color: var(--di-ash);
  font-style: italic;
}

.di-card__report {
  font-family: var(--di-font-body);
  font-size: 0.95rem;
  color: var(--di-text-muted);
  line-height: 1.65;
  margin-top: 0.5rem;
}

.di-card__strategic {
  font-family: var(--di-font-body);
  font-size: 0.85rem;
  color: var(--di-text);
  margin-top: 0.75rem;
  line-height: 1.5;
  background: rgba(139,105,20,.08);
  border-left: 3px solid var(--di-secondary);
  padding: 0.5rem 0.75rem;
}

/* card variants */
.di-card--zone .di-card__media {
  min-height: clamp(200px, 28vh, 340px);
}

.di-card--codex .di-card__media {
  min-height: clamp(160px, 22vh, 260px);
}

.di-card--mechanic .di-leeb {
  color: var(--di-primary);
  font-size: 1.8rem;
}

.di-card--log {
  border-left: 3px solid var(--di-secondary);
}

.di-card--threat .di-ittool {
  padding-bottom: 1.25rem;
}

.di-card--faction .di-ittool {
  background: rgba(42,31,14,.03);
}

.di-card--lore {
  background: var(--di-surface);
  border-color: var(--di-border);
}

/* ============================================================
   ZONE MEDIA CARDS
   ============================================================ */

.di-media--voukni {
  position: relative;
  min-height: clamp(200px, 28vh, 340px);
  overflow: hidden;
}

.di-media--voukni::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.55)),
    url('../assets/images/di-voukni.webp'),
    linear-gradient(135deg, #1A0A0A, #3D1A0A);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.di-media--zibo {
  position: relative;
  min-height: clamp(200px, 28vh, 340px);
  overflow: hidden;
}

.di-media--zibo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.55)),
    url('../assets/images/di-zibo.webp'),
    linear-gradient(135deg, #08111d, #0A1A1A);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.di-media--ufanna {
  position: relative;
  min-height: clamp(200px, 28vh, 340px);
  overflow: hidden;
}

.di-media--ufanna::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.55)),
    url('../assets/images/di-ufanna.webp'),
    linear-gradient(135deg, #101520, #1A2030);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.di-media--enpapo {
  position: relative;
  min-height: clamp(200px, 28vh, 340px);
  overflow: hidden;
}

.di-media--enpapo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.55)),
    url('../assets/images/di-enpapo.webp'),
    linear-gradient(135deg, #151020, #20152A);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ============================================================
   REGION CODEX MEDIA
   ============================================================ */

.di-media--dateif {
  position: relative;
  min-height: clamp(160px, 22vh, 260px);
  overflow: hidden;
}

.di-media--dateif::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/di-dateif.webp'),
    linear-gradient(135deg, #1A1A0A, #2A2010);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.di-media--lofife {
  position: relative;
  min-height: clamp(160px, 22vh, 260px);
  overflow: hidden;
}

.di-media--lofife::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/di-lofife.webp'),
    linear-gradient(135deg, #0A0F1A, #15202A);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.di-media--bous {
  position: relative;
  min-height: clamp(160px, 22vh, 260px);
  overflow: hidden;
}

.di-media--bous::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)),
    url('../assets/images/di-bous.webp'),
    linear-gradient(135deg, #0A1A0A, #1A2A10);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ============================================================
   EXPEDITION MECHANICS MEDIA
   ============================================================ */

.di-media--abpu {
  position: relative;
  min-height: clamp(220px, 36vh, 460px);
  overflow: hidden;
}

.di-media--abpu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.45)),
    url('../assets/images/di-abpu.webp'),
    linear-gradient(135deg, #1A130A, #2A1F0E);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ============================================================
   DEMO PAGE MEDIA
   ============================================================ */

.di-media--usde {
  position: relative;
  min-height: clamp(220px, 40vh, 520px);
  overflow: hidden;
}

.di-media--usde::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.6)),
    url('../assets/images/di-usde.webp'),
    linear-gradient(135deg, #0A0F1A, #1A2030);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ============================================================
   FINAL CTA MEDIA
   ============================================================ */

.di-media--zioz {
  position: relative;
  overflow: hidden;
}

.di-media--zioz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.58)),
    url('../assets/images/di-zioz.webp'),
    linear-gradient(135deg, #0A0F1A, #1A130A);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Logo media (img tag - no ::before needed) */
.di-media--febiul {
  width: 44px;
  height: 44px;
}

/* ============================================================
   SECTION: WORLD CARTOGRAPHY
   ============================================================ */

.di-bidafa--world-cartography {
  background: var(--di-bg);
}

.di-bidafa--world-cartography .di-inkusu {
  color: var(--di-text);
}

.di-bidafa--world-cartography .di-evikil {
  color: var(--di-secondary);
}

/* ============================================================
   SECTION: ZONE THREAT INDEX
   ============================================================ */

.di-bidafa--zone-threat-index {
  background: var(--di-surface);
  border-top: 2px solid var(--di-border);
  border-bottom: 2px solid var(--di-border);
}

/* ============================================================
   BADGES
   ============================================================ */

.di-badge {
  display: inline-block;
  font-family: var(--di-font-head);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2em 0.7em;
  border-radius: var(--radius);
  border: 1px solid currentColor;
}

.di-badge--high {
  color: var(--di-amber);
  border-color: var(--di-amber);
  background: rgba(212,150,10,.1);
}

.di-badge--medium {
  color: var(--di-secondary);
  border-color: var(--di-secondary);
  background: rgba(139,105,20,.1);
}

.di-badge--critical {
  color: var(--di-primary);
  border-color: var(--di-primary);
  background: rgba(192,86,46,.1);
}

.di-badge--unknown {
  color: var(--di-ash);
  border-color: var(--di-ash);
  background: rgba(122,106,82,.1);
}

.di-badge--active {
  color: #4A9E6A;
  border-color: #4A9E6A;
  background: rgba(74,158,106,.1);
}

.di-badge--interrupted {
  color: var(--di-amber);
  border-color: var(--di-amber);
  background: rgba(212,150,10,.08);
}

.di-badge--completed {
  color: var(--di-secondary);
  border-color: var(--di-secondary);
  background: rgba(139,105,20,.08);
}

/* ============================================================
   STATUS INDICATORS
   ============================================================ */

.di-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--di-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.di-status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.di-status--active { color: #4A9E6A; }
.di-status--active::before { background: #4A9E6A; box-shadow: 0 0 6px #4A9E6A; }

.di-status--interrupted { color: var(--di-amber); }
.di-status--interrupted::before { background: var(--di-amber); }

.di-status--completed { color: var(--di-secondary); }
.di-status--completed::before { background: var(--di-secondary); }

.di-status--unknown { color: var(--di-ash); }
.di-status--unknown::before { background: var(--di-ash); }

/* ============================================================
   THREAT DOT
   ============================================================ */

.di-threat-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--di-primary);
  flex-shrink: 0;
}

/* ============================================================
   FACTION TABLE
   ============================================================ */

.di-mafavu {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--di-font-body);
  font-size: 0.92rem;
  margin-top: 1.5rem;
}

.di-mafavu__head {
  background: var(--di-surface-dark);
  color: var(--di-bg);
}

.di-mafavu__head .di-mafavu__cell {
  font-family: var(--di-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  border: 1px solid rgba(196,169,106,.3);
  color: var(--di-border);
}

.di-mafavu__row {
  border-bottom: 1px solid var(--di-border);
  transition: background var(--di-transition);
}

.di-mafavu__row:hover {
  background: rgba(139,105,20,.08);
}

.di-mafavu__cell {
  padding: 0.6em 1em;
  border: 1px solid rgba(196,169,106,.3);
  color: var(--di-text);
  vertical-align: middle;
}

/* ============================================================
   LORE FRAGMENTS
   ============================================================ */

.di-laro {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--di-secondary);
  margin-bottom: 2rem;
  background: rgba(139,105,20,.05);
  position: relative;
}

.di-laro__id {
  font-family: var(--di-font-head);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--di-ash);
  margin-bottom: 0.25rem;
}

.di-laro__title {
  font-family: var(--di-font-head);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--di-text);
  margin-bottom: 0.6rem;
}

.di-laro__excerpt {
  font-family: var(--di-font-body);
  font-size: 1rem;
  color: var(--di-text-muted);
  line-height: 1.7;
  font-style: italic;
}

.di-laro__note {
  font-family: var(--di-font-body);
  font-size: 0.82rem;
  color: var(--di-ash);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--di-border);
}

/* ============================================================
   DIVIDER
   ============================================================ */

.di-keda {
  border: none;
  border-top: 1px solid var(--di-border);
  margin-block: clamp(1.5rem, 4vw, 3rem);
  opacity: 0.6;
}

/* ============================================================
   SECTION: EXPEDITION MECHANICS
   ============================================================ */

.di-bidafa--expedition-mechanics {
  background: var(--di-bg);
}

.di-bidafa--expedition-mechanics .di-ogup--two {
  align-items: start;
}

/* ============================================================
   SECTION: REGION CODEX
   ============================================================ */

.di-bidafa--region-codex {
  background: var(--di-surface);
}

/* ============================================================
   SECTION: AGE OF RUIN LORE
   ============================================================ */

.di-bidafa--age-of-ruin-lore {
  background: var(--di-bg);
  border-top: 2px solid var(--di-border);
}

/* ============================================================
   SECTION: DISPATCH LOG
   ============================================================ */

.di-bidafa--dispatch-log {
  background: var(--di-ink);
  color: var(--di-bg);
  border-top: 2px solid var(--di-secondary);
}

.di-bidafa--dispatch-log .di-inkusu {
  color: var(--di-bg);
}

.di-bidafa--dispatch-log .di-evikil {
  color: var(--di-secondary);
}

.di-bidafa--dispatch-log .di-osmo {
  color: rgba(245,239,224,.75);
}

.di-bidafa--dispatch-log .di-card {
  background: var(--di-surface-mid);
  border-color: rgba(196,169,106,.3);
}

.di-bidafa--dispatch-log .di-card:hover {
  transform: translate(-2px, -2px);
}

.di-bidafa--dispatch-log .di-izeb {
  color: var(--di-bg);
}

.di-bidafa--dispatch-log .di-inzeeg {
  color: rgba(245,239,224,.7);
}

.di-bidafa--dispatch-log .di-card__from {
  color: var(--di-amber);
}

.di-bidafa--dispatch-log .di-card__timestamp {
  color: rgba(245,239,224,.5);
}

.di-bidafa--dispatch-log .di-card__report {
  color: rgba(245,239,224,.75);
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.di-feigzi {
  position: relative;
  overflow: hidden;
}

.di-feigzi__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.di-feigzi__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: clamp(4rem, 10vh, 7rem);
}

.di-bidafa--final-cta {
  background: var(--di-surface-dark);
  border-top: 2px solid var(--di-secondary);
}

.di-bidafa--final-cta .di-inkusu {
  color: var(--di-bg);
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.di-bidafa--final-cta .di-evikil {
  color: var(--di-secondary);
}

.di-bidafa--final-cta .di-osmo {
  color: rgba(245,239,224,.75);
  max-width: 48ch;
  margin-inline: auto;
}

.di-bidafa--final-cta .di-uparip {
  color: rgba(245,239,224,.7);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.di-bidafa--final-cta .di-ebopeb {
  justify-content: center;
  margin-top: 1.5rem;
}

.di-bidafa--final-cta .di-afruvo {
  text-align: center;
}

/* ============================================================
   PANEL
   ============================================================ */

.di-niki {
  position: relative;
  overflow: hidden;
}

.di-biop {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.di-agufet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

.di-zudo {
  background: var(--di-ink);
  border-top: 2px solid var(--di-secondary);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  color: var(--di-bg);
}

.di-zudo__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.di-zudo__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.di-zudo__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* di-loan in footer */
.di-zudo .di-loan {
  font-family: var(--di-font-head);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--di-bg);
  margin-bottom: 0.4rem;
}

.di-ilonve {
  font-family: var(--di-font-body);
  font-size: 0.88rem;
  color: var(--di-ash);
  font-style: italic;
  line-height: 1.5;
}

.di-zudo__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196,169,106,.2);
}

.di-zudo__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  list-style: none;
}

.di-zudo__nav-link {
  font-family: var(--di-font-body);
  font-size: 0.88rem;
  color: var(--di-ash);
  text-decoration: none;
  transition: color var(--di-transition);
}

.di-zudo__nav-link:hover,
.di-zudo__nav-link:focus {
  color: var(--di-border);
  text-decoration: none;
}

.di-uztaef {
  font-family: var(--di-font-body);
  font-size: 0.82rem;
  color: rgba(122,106,82,.8);
  padding-top: 1rem;
  border-top: 1px solid rgba(196,169,106,.15);
}

@media (max-width: 899px) {
  .di-zudo__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .di-zudo__cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */

[data-di-dumi] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-di-dumi].di-dumi--in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */

#di-reluda {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
}

#di-reluda.di-deve {
  display: block;
}

.di-reluda__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--di-ink);
  border: 1px solid var(--di-secondary);
  border-left: 4px solid var(--di-primary);
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.di-reluda__text {
  font-family: var(--di-font-body);
  font-size: 0.9rem;
  color: rgba(245,239,224,.85);
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

.di-reluda__link {
  color: var(--di-amber);
  text-decoration: underline;
}

.di-reluda__link:hover {
  color: var(--di-bg);
}

.di-reluda__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 540px) {
  .di-reluda__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .di-reluda__text {
    flex: 0 0 auto;
    width: 100%;
  }

  .di-reluda__actions {
    width: 100%;
    justify-content: stretch;
  }

  .di-reluda__actions .di-papa {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   DEMO PAGE
   ============================================================ */

.di-demo-shell {
  background: var(--di-bg);
  min-height: 100vh;
  padding-top: var(--di-header-height);
}

.di-demo-header {
  position: relative;
  background: var(--di-ink);
  min-height: clamp(220px, 35vh, 420px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2.5rem;
}

.di-demo-header__content {
  position: relative;
  z-index: 2;
}

.di-demo-arena {
  background: var(--di-surface);
  border: 2px solid var(--di-border);
  margin-block: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--di-shadow-card);
}

.di-demo-arena__title {
  font-family: var(--di-font-head);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  letter-spacing: 0.08em;
  color: var(--di-text);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.di-demo-arena__desc {
  font-family: var(--di-font-body);
  font-size: 0.97rem;
  color: var(--di-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.di-demo-hud {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  align-items: center;
}

.di-demo-hud__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 2px solid var(--di-secondary);
  padding-left: 0.65rem;
}

.di-demo-hud__value {
  font-family: var(--di-font-head);
  font-size: 1.5rem;
  color: var(--di-text);
  line-height: 1;
  letter-spacing: 0.06em;
}

.di-demo-hud__label {
  font-family: var(--di-font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--di-ash);
}

.di-demo-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.di-demo-tile {
  aspect-ratio: 1;
  background: var(--di-bg);
  border: 1px solid var(--di-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--di-font-head);
  transition:
    background var(--di-transition),
    transform var(--di-transition),
    border-color var(--di-transition),
    box-shadow var(--di-transition);
  user-select: none;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.di-demo-tile:hover {
  background: rgba(192,86,46,.12);
  border-color: var(--di-primary);
  transform: scale(1.06);
  z-index: 2;
}

.di-demo-tile--explored {
  background: rgba(139,105,20,.12);
  border-color: var(--di-secondary);
  cursor: default;
}

.di-demo-tile--explored:hover {
  transform: none;
  background: rgba(139,105,20,.12);
  border-color: var(--di-secondary);
}

.di-demo-tile--danger {
  background: rgba(192,86,46,.18);
  border-color: var(--di-primary);
}

.di-demo-tile--danger:hover {
  background: rgba(192,86,46,.3);
}

.di-demo-tile--event {
  background: rgba(212,150,10,.15);
  border-color: var(--di-amber);
  animation: di-tile-pulse 1.8s ease-in-out infinite;
}

.di-demo-tile--supply {
  background: rgba(74,158,106,.12);
  border-color: #4A9E6A;
}

.di-demo-tile--fog {
  background: rgba(42,31,14,.08);
  border-color: rgba(196,169,106,.3);
  color: rgba(42,31,14,.2);
}

@keyframes di-tile-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 10px rgba(212,150,10,.5); }
}

.di-demo-log {
  font-family: var(--di-font-body);
  font-size: 0.9rem;
  color: var(--di-text-muted);
  background: rgba(42,31,14,.06);
  border: 1px solid var(--di-border);
  padding: 0.75rem 1rem;
  min-height: 3.5rem;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 1.25rem;
}

.di-demo-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}

.di-demo-progress-wrap {
  margin-bottom: 1rem;
}

.di-demo-progress-label {
  font-family: var(--di-font-head);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--di-ash);
  margin-bottom: 0.3rem;
  display: block;
}

.di-demo-progress-bar {
  background: rgba(42,31,14,.1);
  border: 1px solid var(--di-border);
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius);
  max-width: 400px;
}

.di-demo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--di-secondary), var(--di-primary));
  transition: width 0.5s ease;
}

.di-demo-result {
  display: none;
  font-family: var(--di-font-head);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--di-primary);
  margin-top: 1rem;
  padding: 1rem;
  border: 2px solid var(--di-primary);
  background: rgba(192,86,46,.08);
}

.di-demo-result--active {
  display: block;
}

@media (max-width: 480px) {
  .di-demo-board {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================================
   RULES PAGE
   ============================================================ */

.di-rules-shell {
  background: var(--di-bg);
  min-height: 100vh;
  padding-top: var(--di-header-height);
}

.di-rules-header {
  background: var(--di-surface-dark);
  border-bottom: 2px solid var(--di-secondary);
  padding-block: clamp(2.5rem, 6vh, 4rem);
}

.di-rules-header .di-inkusu {
  color: var(--di-bg);
}

.di-rules-header .di-evikil {
  color: var(--di-secondary);
}

.di-rules-header .di-osmo {
  color: rgba(245,239,224,.75);
}

.di-rules-body {
  padding-block: clamp(2.5rem, 6vh, 4rem);
}

.di-rules-block {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.di-rules-block__title {
  font-family: var(--di-font-head);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  letter-spacing: 0.08em;
  color: var(--di-text);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--di-border);
  padding-bottom: 0.4rem;
}

.di-rules-block__text {
  font-family: var(--di-font-body);
  font-size: 1.05rem;
  color: var(--di-text-muted);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.di-rules-block__list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.di-rules-block__list li {
  font-family: var(--di-font-body);
  font-size: 1.02rem;
  color: var(--di-text-muted);
  line-height: 1.65;
  padding-left: 1.25rem;
  position: relative;
}

.di-rules-block__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--di-secondary);
  font-family: var(--di-font-head);
}

.di-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--di-font-body);
  font-size: 0.95rem;
  margin-top: 1rem;
  overflow-x: auto;
  display: block;
}

.di-rules-table th {
  background: var(--di-surface-dark);
  color: var(--di-border);
  font-family: var(--di-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.65em 1em;
  border: 1px solid rgba(196,169,106,.3);
  text-align: left;
  white-space: nowrap;
}

.di-rules-table td {
  padding: 0.6em 1em;
  border: 1px solid var(--di-border);
  color: var(--di-text);
  vertical-align: top;
}

.di-rules-table tr:nth-child(even) td {
  background: rgba(139,105,20,.05);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.di-legal-shell {
  background: var(--di-bg);
  min-height: 100vh;
  padding-top: var(--di-header-height);
}

.di-tino {
  background: var(--di-surface);
  border-bottom: 2px solid var(--di-border);
  padding-block: clamp(2rem, 5vh, 3.5rem);
}

.di-tino .di-inkusu {
  color: var(--di-text);
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.di-tino .di-evikil {
  color: var(--di-secondary);
}

.di-dibu {
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 860px;
}

.di-dibu h2 {
  font-family: var(--di-font-head);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--di-text);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--di-secondary);
  padding-left: 0.75rem;
}

.di-dibu h3 {
  font-family: var(--di-font-head);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--di-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.di-dibu p {
  font-family: var(--di-font-body);
  font-size: 1.02rem;
  color: var(--di-text-muted);
  line-height: 1.78;
  margin-bottom: 0.85rem;
}

.di-dibu ul,
.di-dibu ol {
  margin: 0.75rem 0 0.85rem 1.5rem;
}

.di-dibu li {
  font-family: var(--di-font-body);
  font-size: 1rem;
  color: var(--di-text-muted);
  line-height: 1.7;
  margin-bottom: 0.3rem;
}

.di-dibu a {
  color: var(--di-primary);
}

.di-legal-meta {
  font-family: var(--di-font-body);
  font-size: 0.85rem;
  color: var(--di-ash);
  font-style: italic;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--di-border);
}

/* ============================================================
   UTILITY
   ============================================================ */

.di-text-center { text-align: center; }
.di-text-right { text-align: right; }
.di-mt-1 { margin-top: 0.5rem; }
.di-mt-2 { margin-top: 1rem; }
.di-mt-3 { margin-top: 1.5rem; }
.di-mb-1 { margin-bottom: 0.5rem; }
.di-mb-2 { margin-bottom: 1rem; }
.di-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.di-skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--di-primary);
  color: var(--di-bg);
  padding: 0.5em 1.2em;
  font-family: var(--di-font-head);
  letter-spacing: 0.1em;
  z-index: 9999;
  text-decoration: none;
  font-size: 1rem;
}

.di-skip-link:focus {
  left: 1rem;
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .di-bunude,
  .di-zudo,
  #di-reluda,
  .di-ebopeb {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

.di-demo-kicker{display:inline-block;font-family:'Bebas Neue',sans-serif;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#C0562E;background:rgba(192,86,46,.1);border:1px solid rgba(192,86,46,.35);padding:.25rem .75rem;margin-bottom:.75rem;clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
.di-demo-header-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-family:'Crimson Text',serif;font-size:.9rem;color:#8B6914;border-top:1px solid rgba(139,105,20,.3);border-bottom:1px solid rgba(139,105,20,.3);padding:.5rem 0;margin:.75rem 0 1.25rem}
.di-zave{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem 1.5rem;background:#F5EFE0;min-height:60vh}
.di-zutoze{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem 1.25rem;align-items:start}
.di-divona{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;background:linear-gradient(145deg,#faf6eb,#f0e8d0);border:1px solid rgba(139,105,20,.25);border-radius:2px;box-shadow:2px 4px 12px rgba(42,31,14,.12),inset 0 0 0 1px rgba(245,239,224,.6);position:relative;clip-path:polygon(0 0,98% 0,100% 2%,100% 100%,2% 100%,0 98%)}
.di-divona::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;border-radius:2px}
.di-zidebu{font-family:'Bebas Neue',sans-serif;font-size:1.45rem;letter-spacing:.05em;color:#2A1F0E;line-height:1.15;border-bottom:2px solid #C0562E;padding-bottom:.4rem;margin-bottom:.25rem}
.di-zupo{font-family:'Crimson Text',serif;font-size:1.05rem;color:#4a3720;line-height:1.65;flex:1}
.di-ruba{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.di-mudagu{display:inline-flex;align-items:center;gap:.35rem;font-family:'Crimson Text',serif;font-size:.82rem;color:#8B6914;background:rgba(139,105,20,.1);border:1px solid rgba(139,105,20,.3);padding:.2rem .65rem;border-radius:1px;text-transform:uppercase;letter-spacing:.08em}
.di-bonuki{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-family:'Crimson Text',serif;font-size:.9rem;color:#8B6914;padding:.5rem 0;border-top:1px dashed rgba(139,105,20,.35)}
.di-tara{display:flex;flex-direction:column;gap:2rem;padding:2rem 1.5rem}
.di-vivuka{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;padding:1.25rem;background:rgba(139,105,20,.06);border:1px solid rgba(139,105,20,.2);border-radius:2px}
.di-res-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:'Crimson Text',serif;font-size:.88rem;color:#2A1F0E;background:rgba(192,86,46,.08);border:1px solid rgba(192,86,46,.25);padding:.3rem .75rem;border-radius:1px;white-space:nowrap}
.di-res-chip::before{content:'◆';font-size:.55rem;color:#C0562E;opacity:.7}
.di-dupena{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background:linear-gradient(160deg,#f8f2e3,#ede4ce);border:1px solid rgba(139,105,20,.3);border-radius:2px;position:relative;overflow:hidden}
.di-dupena::after{content:'';position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(192,86,46,.08) 0%,transparent 70%);pointer-events:none}
.di-nusuko{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.06em;color:#C0562E;text-transform:uppercase;padding-bottom:.35rem;border-bottom:1px solid rgba(192,86,46,.4)}
.di-orvosu{font-family:'Crimson Text',serif;font-size:1rem;color:#3a2a14;line-height:1.7}
.di-gosalo{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.di-izip{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem 1rem;background:linear-gradient(135deg,#faf5e8,#ede5d0);border:1px solid rgba(139,105,20,.22);border-radius:1px;box-shadow:1px 3px 8px rgba(42,31,14,.09);transition:transform .25s ease,box-shadow .25s ease}
.di-izip:hover{transform:translateY(-3px) rotate(.3deg);box-shadow:3px 6px 18px rgba(42,31,14,.18)}
.di-sutega{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.04em;color:#2A1F0E;line-height:1.2}
.di-legi{font-family:'Crimson Text',serif;font-size:.95rem;color:#5a4025;line-height:1.6;flex:1}
.di-vumube{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.5rem}
.di-komibu{display:inline-block;font-family:'Crimson Text',serif;font-size:.78rem;color:#8B6914;background:rgba(139,105,20,.12);border:1px solid rgba(139,105,20,.28);padding:.15rem .55rem;border-radius:1px;letter-spacing:.05em}
.di-robime{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-family:'Crimson Text',serif;font-size:.85rem;color:#8B6914;padding:.6rem .75rem;background:rgba(245,239,224,.7);border-top:1px dashed rgba(139,105,20,.3)}
.di-momo{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding:1.5rem 0}
.di-demo-rules{padding:2.5rem 1.5rem;background:linear-gradient(180deg,rgba(139,105,20,.06) 0%,rgba(245,239,224,0) 100%);border-top:2px solid rgba(192,86,46,.35)}
.di-demo-rules-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.08em;color:#2A1F0E;text-transform:uppercase;margin-bottom:1.5rem;position:relative;padding-left:1rem}
.di-demo-rules-title::before{content:'';position:absolute;left:0;top:.15em;bottom:.15em;width:4px;background:#C0562E;border-radius:1px}
.di-demo-rules-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.di-demo-rule-block{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem 1rem;background:linear-gradient(145deg,#faf6eb,#f0e8d2);border:1px solid rgba(139,105,20,.25);border-radius:2px;border-left:3px solid #C0562E;box-shadow:1px 2px 6px rgba(42,31,14,.08)}
.di-demo-rule-block:hover{background:linear-gradient(145deg,#fdf9f0,#f5edd8)}
.di-demo-cta-bar{display:flex;justify-content:center;align-items:center;padding:3rem 1.5rem;background:linear-gradient(135deg,#2A1F0E 0%,#3d2d14 100%);position:relative;overflow:hidden}
.di-demo-cta-bar::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");pointer-events:none}
.di-demo-cta-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;max-width:600px;text-align:center;position:relative;z-index:1}
.di-demo-cta-text{font-family:'Crimson Text',serif;font-size:1.15rem;color:rgba(245,239,224,.85);line-height:1.7}
.di-bobabi{display:flex;flex-direction:column;gap:0;min-height:100vh;background:#F5EFE0;font-family:'Crimson Text',serif;color:#2A1F0E}
.di-bobabi__header{padding:2.5rem 2rem 2rem;background:linear-gradient(180deg,#2A1F0E 0%,#3d2d14 100%);color:#F5EFE0;border-bottom:3px solid #C0562E;position:relative;overflow:hidden}
.di-bobabi__header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,#C0562E 0,#C0562E 8px,transparent 8px,transparent 16px)}
.di-bobabi__section{padding:2rem;border-bottom:1px solid rgba(139,105,20,.2);background:#F5EFE0;max-width:860px;width:100%;margin:0 auto}
.di-bobabi__section:nth-child(even){background:rgba(139,105,20,.04)}
.di-bobabi__footer{padding:1.5rem 2rem;background:#2A1F0E;color:rgba(245,239,224,.65);font-family:'Crimson Text',serif;font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;border-top:2px solid #C0562E;margin-top:auto}
.di-bobabi__last-updated{display:inline-flex;align-items:center;gap:.5rem;font-family:'Crimson Text',serif;font-size:.85rem;color:#8B6914;background:rgba(139,105,20,.1);border:1px solid rgba(139,105,20,.3);padding:.3rem .85rem;border-radius:1px;margin-bottom:1rem}
.di-bobabi__last-updated::before{content:'◈';font-size:.7rem;color:#C0562E}
.di-bobabi__related-links{display:flex;flex-wrap:wrap;gap:.5rem .75rem;padding:1rem;background:rgba(192,86,46,.06);border:1px solid rgba(192,86,46,.22);border-radius:2px;margin-top:1rem}
.di-bobabi__related-links a{font-family:'Crimson Text',serif;font-size:.95rem;color:#C0562E;text-decoration:underline;text-decoration-color:rgba(192,86,46,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.di-bobabi__related-links a:hover{color:#8B6914;text-decoration-color:rgba(139,105,20,.7)}
.di-degago{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;letter-spacing:.06em;color:#F5EFE0;line-height:1.1;text-shadow:1px 2px 8px rgba(0,0,0,.4);margin-bottom:.5rem}
.di-dibadi{font-family:'Crimson Text',serif;font-size:1.05rem;color:rgba(245,239,224,.75);line-height:1.6;max-width:640px}
.di-samilu{font-family:'Crimson Text',serif;font-size:1rem;color:#3a2a14;line-height:1.75;max-width:720px}
.di-samilu p{margin:.75rem 0}
.di-samilu h2,.di-samilu h3{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;color:#2A1F0E;margin:1.5rem 0 .5rem}
.di-samilu a{color:#C0562E;text-decoration-color:rgba(192,86,46,.4);text-underline-offset:3px}
.di-samilu a:hover{color:#8B6914}