/* ============================================================
   BBUMBA EMMANUEL EZEKIEL — PERSONAL PUBLICATIONS
   Editorial reading design with the Spaxzyte navigation system.

   The navigation is a retractable left panel: always visible from
   1280px, a drawer with a toggle below it. The panel is warm light
   brown, taken from the homepage artwork; the accent is the same
   brown family. Content keeps the editorial serif reading column.

   Light and dark are both fully supported.
   ============================================================ */

:root,
html[data-theme="light"] {
  --paper:      #ffffff;
  --paper-2:    #f7f6f5;
  --paper-3:    #efedea;
  --paper-4:    #e3dfda;

  --ink:        #14110e;
  --ink-soft:   #3d3833;
  --ink-mute:   #6d655c;

  --rule:       #d9d4cd;
  --rule-soft:  #e8e4de;

  --accent:     #a9744b;
  --accent-deep:#8a5a36;
  --accent-wash:rgba(169, 116, 75, 0.10);

  /* navigation panel - inverted against the body: light page, dark panel */
  --panel-bg:     #232323;
  --panel-text:   #f0f0f0;
  --panel-active: #e8c9a4;
  --panel-dim:    #9d9d9d;
  --panel-divider:rgba(255, 255, 255, 0.16);

  --shadow:     0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 40rem;
  --wide: 52rem;
  --sidebar-w: 300px;
  --panel-pad-x: 32px;
  --topbar-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] {
  --paper:      #131313;
  --paper-2:    #191919;
  --paper-3:    #202020;
  --paper-4:    #292929;

  --ink:        #f3f3f3;
  --ink-soft:   #cccccc;
  --ink-mute:   #9a9a9a;

  --rule:       #2e2e2e;
  --rule-soft:  #232323;

  --accent:     #c99569;
  --accent-deep:#dda97c;
  --accent-wash:rgba(201, 149, 105, 0.14);

  /* navigation panel - inverted against the body: dark page, light panel */
  --panel-bg:     #e9e9e9;
  --panel-text:   #1c1c1c;
  --panel-active: #8a5a36;
  --panel-dim:    #6f6f6f;
  --panel-divider:rgba(0, 0, 0, 0.14);

  --shadow:     0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  display: flex;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #ffffff;
  padding: 10px 18px;
  font-size: 0.82rem;
  z-index: 400;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ============================================================
   NARROW-SCREEN TOP BAR
   ============================================================ */
.mobile-topbar { display: none; }

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-logo {
  display: block;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  flex-shrink: 0;
  text-decoration: none;
  transform-origin: center;
  transition: transform 0.28s var(--ease), opacity 0.24s ease,
              width 0.34s var(--ease), margin-right 0.34s var(--ease);
}
.topbar-logo:hover { transform: scale(1.14); }

.topbar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.28s ease;
}
/* the mark is drawn black; invert it on dark surfaces */
html[data-theme="dark"] .topbar-logo img { filter: invert(1) brightness(1.15); }
.topbar-logo:hover img { filter: invert(48%) sepia(24%) saturate(1100%) hue-rotate(340deg) brightness(0.95); }

.nav-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transform-origin: center;
  transition: transform 0.28s var(--ease), color 0.22s ease;
}
.nav-toggle:hover {
  transform: scale(1.16);
  color: var(--accent);
}
.nav-toggle svg { display: block; }

/* the three bars fold into a close cross while the panel is open */
.nav-toggle .bar {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.32s var(--ease), opacity 0.18s ease;
}
html.nav-open .nav-toggle .bar-1 { transform: translateY(6px) rotate(45deg); }
html.nav-open .nav-toggle .bar-2 { opacity: 0; }
html.nav-open .nav-toggle .bar-3 { transform: translateY(-6px) rotate(-45deg); }

html.nav-open .nav-toggle { color: var(--panel-text); }

/* the emblem gives way to the panel's own mark when the panel is open */
html.nav-open .topbar-logo {
  opacity: 0;
  pointer-events: none;
  width: 0;
  margin-right: 0;
  transform: scale(0.85);
}

/* ============================================================
   NAVIGATION PANEL
   ============================================================ */
.app-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background: var(--panel-bg);
  color: var(--panel-text);
  padding: 32px var(--panel-pad-x) 24px;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.app-sidebar::-webkit-scrollbar { width: 8px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
  background: var(--panel-divider);
  border-radius: 8px;
}

/* --- brand: emblem plus name, linked home --- */
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: var(--panel-text);
  transform-origin: left center;
  transition: opacity 0.22s ease, transform 0.28s var(--ease);
}
.brand-logo:hover { opacity: 0.82; transform: scale(1.03); }

.brand-emblem {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
  transition: filter 0.28s ease;
}
/* The mark is drawn black, and the panel is always the opposite tone to the
   body, so it is inverted when the body is light (dark panel) and left as-is
   when the body is dark (light panel). */
html[data-theme="light"] .brand-emblem { filter: invert(1) brightness(1.15); }
html[data-theme="light"] .brand-logo:hover .brand-emblem {
  filter: invert(78%) sepia(30%) saturate(620%) hue-rotate(340deg) brightness(1.06);
}
html[data-theme="dark"] .brand-logo:hover .brand-emblem {
  filter: invert(48%) sepia(24%) saturate(1100%) hue-rotate(340deg) brightness(0.95);
}

.brand-name {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.brand-name b {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  /* the full name is longer than the panel, so it wraps rather than clipping */
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.brand-name span {
  font-size: 0.6rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--panel-dim);
  margin-top: 3px;
  white-space: normal;
}

.sidebar-header { margin-bottom: 34px; }

.sidebar-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.sidebar-nav-item {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--panel-text);
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
  transition: color 0.2s ease, transform 0.26s var(--ease);
}

.sidebar-nav-item:hover {
  color: var(--accent);
  transform: scale(1.055);
}

/* the highlight is the text itself - no underline, no marker element */
.sidebar-nav-item.active {
  color: var(--panel-active);
  font-weight: 700;
}

/* --- collapsible directory group: chevron outdented to the left --- */
.nav-group { position: relative; }

.nav-group-toggle {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--panel-text);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transform-origin: left center;
  transition: color 0.2s ease, transform 0.26s var(--ease);
}
.nav-group-toggle:hover {
  color: var(--accent);
  transform: scale(1.055);
}
.nav-group-toggle.has-active {
  color: var(--panel-active);
  font-weight: 700;
}

.nav-chev {
  position: absolute;
  left: -19px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  transition: transform 0.28s var(--ease);
}
.nav-group-toggle[aria-expanded="true"] .nav-chev { transform: translateY(-50%) rotate(180deg); }

/* --- sub pages: closed group is exactly 0px tall --- */
.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.nav-sub.open { grid-template-rows: 1fr; }
.nav-sub-inner { overflow: hidden; min-height: 0; }

.nav-sublinks {
  padding-top: 15px;
  padding-left: 15px;
  gap: 12px;
}

.nav-subitem {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.014em;
}
.nav-subitem.active { font-weight: 700; }

/* --- panel footer --- */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-divider);
}

.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--panel-divider);
  color: var(--panel-text);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.22s var(--ease);
}
.sidebar-theme-toggle:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
html[data-theme="dark"] .sidebar-theme-toggle { background: rgba(255, 255, 255, 0.34); }
html[data-theme="dark"] .sidebar-theme-toggle:hover { background: rgba(255, 255, 255, 0.62); }

.sidebar-note {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: var(--panel-dim);
  text-align: center;
  text-transform: uppercase;
}

/* --- scrim, narrow screens only --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ============================================================
   CONTENT COLUMN
   ============================================================ */
.app-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.progress {
  position: sticky;
  top: 0;
  height: 2px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* ============================================================
   ARTICLE
   ============================================================ */
.sheet {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
}

.masthead {
  padding: 3.2rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.2rem;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.2rem;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h1.title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 26ch;
  text-wrap: balance;
}

.standfirst {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 1.2rem;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}
.byline__item dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.1rem;
}
.byline__item dd {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

/* --- reading body --- */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px 1rem;
}

article {
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

article p { margin: 0 0 1.35rem; }

article p.lede,
article > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
}

article p.lede::first-letter,
article > p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  font-weight: 600;
  color: var(--accent-deep);
}

article h2 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}

article h3 {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--ink);
  margin: 2rem 0 0.7rem;
}

article a {
  color: var(--accent-deep);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
article a:hover { color: var(--accent); }

article strong { color: var(--ink); font-weight: 650; }

article ul,
article ol { margin: 0 0 1.35rem 1.2rem; }
article li { margin-bottom: 0.45rem; }

article blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-soft);
}

article hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4rem 0;
}

article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1.8rem 0;
  border: 1px solid var(--rule);
}

/* Wide plates: dense infographic pages carry their own text, so they need more
   width than the reading measure or the type inside them is unreadable. */
article img.plate {
  width: min(calc(100% + 14rem), 54rem);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
}

@media (max-width: 1000px) {
  article img.plate {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

article code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

article pre {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
article pre code { background: none; border: 0; padding: 0; }

/* --- closing --- */
.closing {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.4rem 24px 3.2rem;
  border-top: 1px solid var(--rule);
}
.sig {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-mute);
}
.sig b { color: var(--ink); font-weight: 600; }

/* ============================================================
   FULL-BLEED EMBED PAGES
   The iframe fills the content column, to the right of the panel.
   ============================================================ */
body.is-embed { overflow: hidden; }
body.is-embed .page-embed {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--paper);
}
body.is-embed .page-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   INDEX AND HOME
   ============================================================ */
.hero {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 24px;
}
.hero img {
  display: block;
  width: 100%;
  height: clamp(240px, 38vh, 420px);
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0 0 8px 8px;
}

.intro {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 3rem 24px 2rem;
}
.intro h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.intro p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.listing {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px 4rem;
}

.listing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.listing__title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.6rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.16s ease, padding-left 0.22s var(--ease);
}
.entry:hover {
  background: var(--paper-2);
  padding-left: 0.6rem;
}
.entry__title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.entry:hover .entry__title { color: var(--accent-deep); }
.entry__cat {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.entry__summary {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 0.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  margin-top: auto;
}
.foot__inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.8rem 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--ink-mute);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--ink-mute); text-decoration: none; }
.foot a:hover { color: var(--accent-deep); }

/* ============================================================
   RESPONSIVE
   Wider than the breakpoint: the panel lives in the flow.
   At and below it: the panel leaves, the top bar arrives.
   ============================================================ */
@media (max-width: 1279px) {
  body { flex-direction: column; }

  .mobile-topbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    padding: 0 18px;
    align-items: center;
    background: transparent;
    z-index: 300;
    pointer-events: none;
    transition: padding-left 0.34s var(--ease);
  }
  .mobile-topbar .topbar-left { pointer-events: auto; }

  html.nav-open .mobile-topbar { padding-left: var(--panel-pad-x); }

  .app-main { padding-top: var(--topbar-h); }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding-top: calc(var(--topbar-h) + 6px);
    transform: translateX(-100%);
    transition: transform 0.38s var(--ease);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.28);
    z-index: 200;
  }
  .app-sidebar.open { transform: none; }

  .sidebar-overlay { display: block; }
  .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

  .masthead { padding: 2.2rem 0 1.3rem; }
  article { font-size: 1.03rem; }
  .hero img { border-radius: 0; }
}

@media (max-width: 900px) {
  .app-sidebar { width: 86vw; min-width: 86vw; }
}

@media print {
  .app-sidebar, .mobile-topbar, .progress, .foot, .sidebar-overlay { display: none !important; }
  body { display: block; background: #ffffff; color: #111111; }
  .app-main { padding-top: 0 !important; }
  body.is-embed .page-embed iframe { position: static; }
  article a { color: #111111; }
}

/* ============================================================
   CORRECTIONS
   ============================================================ */

/* social links, at the foot of the navigation panel */
.sidebar-socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-bottom: 12px;
}
.sidebar-socials a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}
.sidebar-socials a:hover { color: var(--panel-active); }

/* the theme control is an icon, not a sentence */
.sidebar-theme-toggle {
  width: 34px;
  align-self: center;
  padding: 8px;
  gap: 0;
}
.toggle-icon { display: block; transition: opacity 0.24s ease, transform 0.28s var(--ease); }
html[data-theme="light"] .toggle-icon--sun { display: none; }
html[data-theme="light"] .toggle-icon--moon { display: block; }
html[data-theme="dark"] .toggle-icon--moon { display: none; }
html[data-theme="dark"] .toggle-icon--sun { display: block; }
.sidebar-theme-toggle:hover .toggle-icon { transform: scale(1.1); }

/* pages run edge to edge: the controls float over the content instead of
   sitting on a band of their own */
@media (max-width: 1279px) {
  .app-main { padding-top: 0; }
  .mobile-topbar { padding: 10px 12px; align-items: flex-start; }
  .topbar-left {
    gap: 8px;
    padding: 5px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  }
  html[data-theme="dark"] .topbar-left {
    background: rgba(22, 19, 17, 0.66);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  }
  /* article pages keep their text clear of the floating controls */
  .masthead { padding-top: 4.8rem; }
  body.is-embed .page-embed { position: absolute; inset: 0; }
}

/* ============================================================
   FLOATING CONTROLS
   No chip, no plate: the logo and menu button float straight over
   whatever the page shows. They are drawn white and blended with
   difference, so they turn black over light content and white over
   dark content without needing to know what is behind them.
   ============================================================ */
@media (max-width: 1279px) {
  .mobile-topbar {
    padding: 14px 16px;
    align-items: center;
    background: transparent;
  }
  .topbar-left {
    gap: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #ffffff;
  }
  html[data-theme='dark'] .topbar-left { background: none; box-shadow: none; }

  /* A white mark with a tight dark halo reads on light and dark content
     without putting a plate or a chip behind it. */
  .topbar-logo img {
    filter: invert(1) brightness(2)
            drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
  }
  .topbar-logo:hover img {
    filter: invert(1) brightness(2)
            drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
  }
  .nav-toggle {
    color: #ffffff;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
  }
  .nav-toggle:hover { color: #ffffff; transform: scale(1.16); }
  .nav-toggle .bar { stroke: #ffffff; }
}

/* ============================================================
   NO CLOSE BUTTON
   While the panel is open the toggle is removed rather than turned
   into a cross, so nothing sits on top of the menu. The panel closes
   by clicking aside, or with Escape.
   ============================================================ */
html.nav-open .nav-toggle { display: none !important; }
html.nav-open .topbar-left { pointer-events: none; }
html.nav-open .sidebar-overlay { cursor: pointer; }

/* ============================================================
   3D LINKER on the home page
   ============================================================ */
.linker {
  max-width: 74rem;
  margin: 0 auto 3rem;
  padding: 0 24px;
}
.linker__stage {
  position: relative;
  height: clamp(320px, 50vh, 540px);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  cursor: grab;
}
.linker__stage canvas { display: block; }
.linker__tip {
  position: absolute;
  transform: translate(-50%, -160%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  white-space: nowrap;
}
.linker__tip.is-visible { opacity: 1; }
.linker__hint {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.9rem;
}

/* the TETRA index, last section on the home page */
.tetra {
  max-width: 74rem;
  margin: 0 auto 3rem;
  padding: 0 24px;
}
.tetra iframe {
  display: block;
  width: 100%;
  height: clamp(420px, 68vh, 700px);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: #ffffff;
}

/* a little depth so the panel is not a flat slab */
.app-sidebar {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.008) 38%,
    rgba(0, 0, 0, 0.045) 100%
  );
}

/* the scene runs edge to edge: no frame, no fill, the page shows through */
.tetra {
  max-width: none;
  margin: 0;
  padding: 0;
}
.tetra iframe {
  display: block;
  width: 100%;
  height: clamp(460px, 76vh, 820px);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

/* ============================================================
   NEUTRALS
   Every paper, ink and rule value is a pure grey: equal red,
   green and blue. Only the accent family keeps a hue. Last in the
   file so it wins over the token blocks above.
   ============================================================ */
html[data-theme="dark"] {
  --paper:      #232323;
  --paper-2:    #1c1c1c;
  --paper-3:    #2a2a2a;
  --paper-4:    #333333;
  --ink:        #f3f3f3;
  --ink-soft:   #cccccc;
  --ink-mute:   #9a9a9a;
  --rule:       #3a3a3a;
  --rule-soft:  #2c2c2c;
  --panel-bg:   #e9e9e9;
  --panel-text: #1c1c1c;
  --panel-dim:  #6f6f6f;
}
html[data-theme="light"] {
  --paper:      #ffffff;
  --paper-2:    #f6f6f6;
  --paper-3:    #eeeeee;
  --paper-4:    #e3e3e3;
  --ink:        #141414;
  --ink-soft:   #3d3d3d;
  --ink-mute:   #6d6d6d;
  --rule:       #d6d6d6;
  --rule-soft:  #e6e6e6;
  --panel-bg:   #232323;
  --panel-text: #f0f0f0;
  --panel-dim:  #9d9d9d;
}

/* ============================================================
   TETRA OVERLAP
   The scene runs up behind the title block, and the block is
   translucent, so the nodes stay visible while panning or zooming.
   ============================================================ */
body.has-tetra .tetra {
  position: relative;
  z-index: 0;
  margin-top: clamp(-340px, -28vh, -150px);
}
body.has-tetra .intro {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  backdrop-filter: blur(3px) saturate(1.05);
  border-radius: 10px;
}
html[data-theme="dark"] body.has-tetra .intro {
  background: rgba(35, 35, 35, 0.66);
}