/* Nyarindo Lens shared visual language for the Semantic Field experience. */
:root {
  --font-sans: 'DM Sans', Arial, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-serif: Georgia, 'Times New Roman', serif;
  --bg: #10110f;
  --surface: #161815;
  --surface2: #1b1e1a;
  --text: #eeece5;
  --muted: #a2a399;
  --dim: #696b62;
  --accent: #d2a36d;
  --border: rgba(236,235,224,.1);
  --border2: rgba(236,235,224,.17);
}

html[data-theme="light"] {
  --bg: #f1eee5;
  --surface: #f9f7ef;
  --surface2: #e9e6dc;
  --text: #242822;
  --muted: #60675c;
  --dim: #85897d;
  --accent: #9c6435;
  --border: rgba(36,40,34,.1);
  --border2: rgba(36,40,34,.18);
}

body,
input,
textarea,
select {
  font-family: var(--font-sans);
}

button,
.logo,
.logo-sub,
.page-nav,
.header-right,
.sec-label,
.tab-btn,
.btn,
.btn-sm,
.status-key,
.status-val,
.tele-l,
.note,
.story-kicker,
.story-section h3 {
  font-family: var(--font-mono);
}

body {
  font-weight: 400;
  background:
    radial-gradient(ellipse at 76% 5%, rgba(210,163,109,.08), transparent 32%),
    var(--bg);
}

header {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}

.logo {
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--accent);
}

.logo-sub {
  color: var(--muted);
}

.page-nav {
  gap: clamp(2px, .65vw, 8px);
  justify-content: flex-start;
}

.page-nav a,
.page-nav .page-home {
  position: relative;
  isolation: isolate;
  padding: 7px 9px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  text-decoration: none;
}

.page-nav .page-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.back-home-icon {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../drift/assets/back-home-arrow.svg") center / contain no-repeat;
  mask: url("../drift/assets/back-home-arrow.svg") center / contain no-repeat;
  transition: transform .2s ease;
}

.page-nav .page-home:is(:hover, :focus-visible) .back-home-icon {
  transform: translateX(-2px);
}

.page-nav a::before {
  content: "";
  position: absolute;
  inset: 1px 2px;
  z-index: -1;
  border-radius: 999px;
  background: transparent;
  transition: background-color .2s ease;
}

.page-nav a:is(:hover, :focus-visible) {
  color: #1b160f;
  border: 0;
}

.page-nav a:is(:hover, :focus-visible)::before {
  background: var(--accent);
}

.theme-toggle {
  border-radius: 999px;
  font-family: var(--font-mono);
}

.main {
  border-radius: 4px;
  border-color: var(--border2);
  box-shadow: 0 20px 56px rgba(0,0,0,.14);
}

.sidebar {
  position: relative;
}

.sidebar .tab-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border), 0 8px 18px rgba(0,0,0,.08);
}

.field-story {
  padding: clamp(58px, 8vw, 108px) clamp(18px, 6vw, 84px) clamp(72px, 9vw, 128px);
  background:
    radial-gradient(ellipse at 18% 8%, rgba(210,163,109,.08), transparent 30%),
    var(--bg);
}

.story-shell {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.story-intro {
  padding: clamp(24px, 4vw, 52px) 0 34px;
}

.story-kicker {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .17em;
}

.story-intro h1 {
  max-width: 900px;
  margin: 18px 0 22px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 78px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.05em;
}

.story-lede {
  max-width: 72ch;
  color: var(--muted);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.85;
}

.story-content {
  padding: 0;
}

.story-section {
  max-width: 78ch;
  margin: 0 auto;
  padding: clamp(30px, 4.5vw, 50px) 0;
  border: 0;
}

.story-section h2 {
  max-width: 24ch;
  margin-bottom: 22px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(29px, 3.6vw, 43px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.story-section h3 {
  margin: 30px 0 10px;
  color: var(--accent);
}

.story-section p,
.story-section li {
  max-width: 72ch;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.9;
}

.story-section p a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.story-callout {
  margin: 26px 0;
  padding: 5px 0 5px 22px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
}

.story-key-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.story-keys {
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.story-links {
  gap: 24px;
  margin-top: 26px;
}

.story-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35em;
  padding: 8px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.story-link::before {
  display: none;
}

.story-link:is(:hover, :focus-visible) {
  color: #1b160f;
  background: var(--accent);
  box-shadow: 0 5px 16px rgba(0,0,0,.17);
}

.story-link span {
  color: var(--accent);
}

.story-link:is(:hover, :focus-visible) span {
  color: inherit;
}

.story-link:is(:hover, :focus-visible) .book-citation {
  color: inherit;
}

.story-divider {
  width: min(100%, 78ch);
  margin: clamp(16px, 2.5vw, 28px) auto;
  opacity: .82;
}

.story-divider img {
  display: block;
  width: 100%;
  height: auto;
}

.story-divider-reverse {
  transform: scaleX(-1);
}

@media (max-width: 760px) {
  .page-nav {
    gap: 6px;
  }

  .page-nav a,
  .page-nav .page-home {
    padding: 6px 8px;
    font-size: 11px;
  }

  .field-story {
    padding: 42px 10px 58px;
  }

  .story-intro {
    padding: 20px 10px 26px;
  }

  .story-content {
    padding: 0 10px;
  }

  .story-link {
    padding: 8px 0;
  }

  .story-divider {
    margin: 14px auto 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-nav a::before,
  .story-link::before,
  .back-home-icon {
    transition: none;
  }

  .page-nav .page-home:is(:hover, :focus-visible) .back-home-icon {
    transform: none;
  }
}

/* Book citations name their exact source page and open the matching source card. */
.book-reference{color:inherit;text-decoration-color:rgba(210,163,109,.55);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.book-reference:is(:hover,:focus-visible){color:var(--accent);text-decoration-color:var(--accent)}
.book-citation{color:var(--accent);font:10px/1.6 var(--mono);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.book-citation:is(:hover,:focus-visible){color:var(--text);text-decoration:underline;text-underline-offset:3px}
.book-citation:focus-visible,.book-reference:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.story-source-note{margin-top:15px!important;color:var(--muted);font-size:12px;line-height:1.8}
.page-nav .book-citation{font-size:inherit}
.page-nav a:is(:hover,:focus-visible) .book-citation{color:inherit}
@media(max-width:620px){.book-citation{white-space:normal}}

/*
 * The book-reference hover rule appears later than the story-link rule.
 * This explicit combined state keeps the CTA text dark against the gold pill.
 */
.story-link.book-reference:is(:hover,:focus-visible){
  color:#18140e;
  background:var(--accent);
  box-shadow:0 5px 16px rgba(0,0,0,.17);
  text-decoration-color:currentColor;
  text-shadow:none;
}
.story-link.book-reference:is(:hover,:focus-visible) :is(span,.book-citation){
  color:inherit;
}