/* xanadu.wiki — muji-inspired full-bleed encyclopedic resource
   Terracotta + off-white alternating bands, monumental serif,
   rare glitch micro-moments, botanical line dividers. */

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

:root {
  --terracotta: #e8d8c0;
  --terracotta-deep: #c8a880;
  --offwhite: #f5f2ec;
  --text: #2a2018;
  --text-muted: #7a6a50;
  --green: #6a7a58;
  --tech-ghost: #b8a890;
}

html, body {
  background: var(--offwhite);
  color: var(--text);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.9;
  overflow-x: hidden;
}

body {
  position: relative;
}

/* Tech ghost in right margin */
.tech-ghost {
  position: fixed;
  right: 0;
  top: 0;
  width: 60px;
  height: 100vh;
  pointer-events: none;
  opacity: 0.10;
  z-index: 1;
}
.tech-ghost svg { width: 100%; height: 100%; }
@media (max-width: 780px) {
  .tech-ghost { display: none; }
}

/* HERO */
.hero {
  width: 100%;
  background: var(--terracotta);
  padding: 18vh 0 14vh;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(200, 168, 128, 0.4);
}
.hero-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-left: 15vw;
  margin-bottom: 6vh;
}
.hero-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(96px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-left: -2vw;
  padding-left: 15vw;
}
.hero-sub {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(34px, 6vw, 84px);
  line-height: 1;
  color: var(--terracotta-deep);
  padding-left: 15vw;
  margin-top: 12px;
}

/* Botanical dividers */
.botanical-divider {
  width: 100%;
  background: var(--offwhite);
  padding: 36px 0;
  display: flex;
  justify-content: center;
}
.botanical-divider svg {
  width: 100%;
  max-width: 1200px;
  height: 80px;
  display: block;
}
.hero + .botanical-divider {
  background: linear-gradient(to bottom, var(--terracotta) 0%, var(--terracotta) 50%, var(--offwhite) 50%, var(--offwhite) 100%);
}

/* Encyclopedia entries (full-bleed, alternating) */
.entry {
  width: 100%;
  padding: 120px 0;
  background: var(--terracotta);
  position: relative;
}
.entry:nth-of-type(even) { background: var(--offwhite); }

.entry-inner {
  width: 100%;
  max-width: calc(580px + 15vw);
  padding-left: 15vw;
  padding-right: 60px;
}
.entry-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.entry-heading {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.0;
  margin-bottom: 36px;
  letter-spacing: -0.005em;
}
.entry p {
  margin-bottom: 1.4em;
  max-width: 580px;
}
.entry p em {
  font-style: italic;
  color: var(--text-muted);
}

.entry.footer {
  padding: 80px 0;
  background: var(--terracotta-deep);
  color: var(--offwhite);
}
.entry.footer .entry-meta {
  color: var(--offwhite);
  margin-bottom: 0;
  opacity: 0.92;
}

/* Glitch micro-moment for monumental headings */
.glitching {
  text-shadow: 2px 0 var(--terracotta-deep), -2px 0 var(--green);
  transform: translateX(2px);
}

@media (max-width: 780px) {
  .hero-meta, .hero-title, .hero-sub, .entry-inner { padding-left: 8vw; }
  .entry-inner { padding-right: 8vw; }
  .entry { padding: 80px 0; }
}