:root{
  /* —— RI base palette —— */
  --resonance-blue:  #0F1D2E;
  --ember-gold:      #F7A644;
  --inner-flame:     #D95C19;
  --stone-grey:      #D8D2C8;
  --luminous-white:  #F6F5F3;
  --white:           #FFFFFF;

  /* —— Ethica Luma theme tokens —— */
  --el-bg:           var(--luminous-white);
  --el-surface:      var(--white);
  --el-ink:          var(--resonance-blue);
  --el-ink-soft:     #1C3551;
  --el-link:         #1C3551;
  --el-link-hover:   #15283E;
  --el-accent:       var(--ember-gold);
  --el-accent-ink:   var(--resonance-blue);
  --el-muted:        #2A3E56;
  --el-divider:      var(--stone-grey);
  --el-focus:        var(--ember-gold);

  /* —— Map existing site variables to theme —— */
  --fg:              var(--el-ink-soft);
  --muted:           var(--el-muted);
  --bg:              var(--el-bg);
  --card:            var(--el-surface);
  --line:            var(--el-divider);
  --accent:          var(--el-accent);

  --space-s:.5rem; --space-m:1rem; --space-l:2rem; --space-xl:4rem;
  --radius:14px;
}

/* —— Theme baseline —— */
a{ color: var(--el-link); }

a:hover{ color: var(--el-link-hover); }

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

.tag{ background: color-mix(in oklab, var(--el-accent), white 85%); color: color-mix(in oklab, var(--el-accent), black 60%); }

hr{ border-color: var(--el-divider); opacity: .6; }

*{box-sizing:border-box}

body{margin:0; font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg);}

.wrap{max-width:1200px; margin:0 auto; padding:var(--space-m);}

header.site{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:10;}

.brand{font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--fg); display:flex; align-items:center; gap:.5rem;}

.brand img{height:28px; width:auto;}

nav a{margin-right:1rem; color:var(--muted); text-decoration:none;}

nav a:hover{color:var(--el-ink);}

h1, h2, h3{line-height:1.2; margin:1rem 0 .5rem; color:var(--el-ink);}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem;}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem;}

.tag{display:inline-block; background: color-mix(in oklab, var(--el-accent), white 85%); color: color-mix(in oklab, var(--el-accent), black 60%); padding:.2rem .5rem; border:1px solid var(--line); border-radius:.3rem; font-size:.85rem; margin-right:.3rem;}

footer.site{border-top:1px solid var(--line); margin-top:3rem; color:var(--muted);}

.lead{color:#2a2e36; font-size:1.15rem;}

.small{font-size:.92rem; color:var(--muted);}

.searchbox{padding:.6rem; width:min(720px, 95%); border:1px solid var(--line); border-radius:10px;}

/* Align brand (logo+text) and burger perfectly in the header row */
.header-row{
  display: flex;
  align-items: center;   /* vertically center children */
  gap: 1rem;
  min-height: 64px;      /* gives us a consistent header height */
}

/* Normalize brand block so the image doesn’t sit on the text baseline */
.brand{
  display: flex;
  align-items: center;   /* centers logo and text on the same line */
  gap: .55rem;
  line-height: 1;
}

.brand img{
  display: block;        /* removes baseline gap */
  height: 28px;          /* tweak to your taste (e.g., 30px) */
  width: auto;
}

/* Make sure the burger’s content is vertically centered and has no extra line-height */
.menu-toggle{
  align-self: center;
  line-height: 0;
}

/* If you still see a 1px optical offset, uncomment this tiny nudge: */
/* .menu-toggle .lines{ transform: translateY(0.5px); }

*/

/* Keep the dropdown positioning in sync with header height */
header.site{ --site-header-bottom: 64px; }

/* matches .header-row min-height */

h1{ line-height: 1.2; margin: 1rem 0 .5rem; color: var(--el-ink)}

h2, h3{ line-height: 1.2; margin: 1rem 0 .5rem;}

/* —— Prose styles —— */
.prose{ color: var(--fg); }

.prose h2, .prose h3, .prose h4{ color: var(--el-ink); margin: 1.2em 0 .5em; }

.prose p{ margin: .8em 0; }

.prose ul, .prose ol{ margin: .8em 0 .8em 1.25em; padding: 0; }

.prose li+li{ margin-top:.35em; }

.prose a{ text-decoration: underline; text-underline-offset: 2px; }

.prose blockquote{ margin:1em 0; padding:.75em 1em; border-left:4px solid var(--el-accent); background: color-mix(in oklab, var(--el-accent), white 92%); }

.prose hr{ border:none; border-top:1px solid var(--line); margin: 2rem 0; }

/* —— Print cleanup —— */
@media print{
  body { background: #fff; color:#111; }
  header.site, nav.site-nav, .menu-toggle, .btns { display:none !important; }
  a { color:#111; text-decoration: none; }
  .card { border-color:#ccc; background:#fff; }
}

/* —— Burger (mobile) —— */
.menu-toggle{
  display: none; /* shown under 820px */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: .6rem;
  border: 1px solid var(--el-ink);
  background: transparent;
  color: var(--el-ink);
  padding: 0;
  line-height: 0;
}

.menu-toggle:focus-visible{ outline: 3px solid var(--el-focus); outline-offset: 2px; }

.menu-toggle .lines{
  display: inline-block;
  position: relative;
  width: 22px; height: 2px;
  background: var(--el-ink);       /* middle bar */
  border-radius: 2px;
}

.menu-toggle .lines::before, .menu-toggle .lines::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--el-ink);
  border-radius: 2px;
}

.menu-toggle .lines::before{ top: -7px; }

.menu-toggle .lines::after{ top:  7px; }

/* Dropdown nav */
header.site .wrap{ position: relative; }

header.site{ --site-header-bottom: 64px; }

@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    left: 0; right: 0;
    top: var(--site-header-bottom, 64px);
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--el-surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    z-index: 40;
  }
  .site-nav.is-open { display: block; }

  .site-nav a {
    padding: .9rem 1rem;
    display: block;
    border-top: 1px solid color-mix(in oklab, var(--el-ink), white 92%);
    color: inherit;
    text-decoration: none;
  }
  .site-nav a:hover { background: color-mix(in oklab, var(--el-ink), white 96%); text-decoration: underline; }
}

/* —— Burger tweak: no box, right-aligned —— */
.menu-toggle{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--el-ink);
}

.menu-toggle .lines, .menu-toggle .lines::before, .menu-toggle .lines::after{
  background: var(--el-ink);
}

@media (max-width: 820px) {
  /* push burger to the far right when mobile nav becomes overlay */
  .menu-toggle { margin-left: auto; display: inline-flex; }
}

// hr{ border-color: #1E88E5; opacity: .6; }

/* Ember Gold underline for H1s */
h1{
  position: relative;
  display: inline-block; /* keeps the underline to the text width */
}

h1::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;          /* adjust distance from text */
  height: 4px;           /* underline thickness */
  background: var(--el-accent, #F7A644); /* Ember Gold */
  border-radius: 2px;
}

/* —— Multi-level nav (About) —— */
.site-nav .nav-item.has-children{ position: relative; }

.site-nav .nav-trigger{
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0 .25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.site-nav .nav-trigger .caret{
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: .1rem;
}

/* Desktop dropdown */
@media (min-width: 821px){
  .site-nav { display: flex; gap: 1rem; align-items: center; }
  .site-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: var(--el-surface);
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    min-width: 240px;
    padding: .4rem;
    z-index: 50;
  }
  .site-nav .nav-item.has-children:hover > .submenu,
  .site-nav .nav-item.has-children:focus-within > .submenu { display: block; }

  .site-nav .submenu a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
  }
  .site-nav .submenu a:hover { background: color-mix(in oklab, var(--el-ink), white 96%); text-decoration: underline; }
}

/* Mobile nested */
@media (max-width: 820px){
  .site-nav .nav-item.has-children { border-top: 1px solid var(--line); }
  .site-nav .nav-item.has-children > .nav-trigger {
    padding: .9rem 1rem;
  }
  .site-nav .nav-item.has-children .submenu {
    display: none;
    padding: .25rem 0 .6rem;
  }
  .site-nav .nav-item.has-children.open .submenu { display: block; }
  .site-nav .nav-item.has-children .submenu a {
    display: block;
    padding: .6rem 1rem .6rem 1.5rem;
    border-top: 1px solid color-mix(in oklab, var(--el-ink), white 92%);
  }
}

/* —— Right-align main nav on desktop —— */
@media (min-width: 821px){
  .header-row { display: flex; align-items: center; gap: 1rem; }
  .site-nav { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
}

/* —— Multi-level nav (data-driven) —— */
.site-nav .nav-item.has-children{ position: relative; }

.site-nav .nav-trigger{
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0 .25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.site-nav .nav-trigger .caret{
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: .1rem;
}

/* Desktop dropdown */
@media (min-width: 821px){
  .site-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: var(--el-surface);
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    min-width: 240px;
    padding: .4rem;
    z-index: 50;
  }
  .site-nav .nav-item.has-children:hover > .submenu,
  .site-nav .nav-item.has-children:focus-within > .submenu { display: block; }

  .site-nav .submenu a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
  }
  .site-nav .submenu a:hover { background: color-mix(in oklab, var(--el-ink), white 96%); text-decoration: underline; }
}

/* Mobile nested */
@media (max-width: 820px){
  .site-nav .nav-item.has-children { border-top: 1px solid var(--line); }
  .site-nav .nav-item.has-children > .nav-trigger {
    padding: .9rem 1rem;
  }
  .site-nav .nav-item.has-children .submenu {
    display: none;
    padding: .25rem 0 .6rem;
  }
  .site-nav .nav-item.has-children.open .submenu { display: block; }
  .site-nav .nav-item.has-children .submenu a {
    display: block;
    padding: .6rem 1rem .6rem 1.5rem;
    border-top: 1px solid color-mix(in oklab, var(--el-ink), white 92%);
  }
}

/* Lists for nav */
.site-nav .nav-root{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: center; }

.site-nav .nav-item{ position: relative; }

.site-nav .nav-link.is-active{ text-decoration: underline; }

/* Desktop dropdown */
@media (min-width: 821px){
  .site-nav .nav-item.has-children:hover > .submenu,
  .site-nav .nav-item.has-children:focus-within > .submenu {
    display: block;
  }
  .site-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: .4rem;
    margin: 0;
    list-style: none;
    background: var(--el-surface);
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    z-index: 50;
  }
  .site-nav .submenu > li > a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
  }
  .site-nav .submenu > li > a:hover {
    background: color-mix(in oklab, var(--el-ink), white 96%);
    text-decoration: underline;
  }
}

/* Mobile nested */
@media (max-width: 820px){
  .site-nav .nav-root { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav .nav-item.has-children { border-top: 1px solid var(--line); }
  .site-nav .nav-item.has-children > .nav-trigger {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: .9rem 1rem;
  }
  .site-nav .submenu { list-style: none; margin: 0; padding: .25rem 0 .6rem; }
  .site-nav .submenu[hidden] { display: none; }
  .site-nav .submenu > li > a {
    display: block;
    padding: .6rem 1rem .6rem 1.5rem;
    border-top: 1px solid color-mix(in oklab, var(--el-ink), white 92%);
  }
}

.doc-breadcrumbs{ display:flex; gap:.4rem; align-items:center; color: var(--muted); padding-bottom: .5rem; font-size: .9rem; }

.doc-breadcrumbs a{ color: var(--el-link); text-decoration: none; }

.doc-breadcrumbs a:hover{ text-decoration: underline; }

@media (max-width: 720px) { .doc-arc-block .arc-row { grid-template-columns: 1fr; } .doc-arc-block .arc-next { order: -1; margin-bottom: .5rem; } }

/* —— Arc pager —— */
.arc-pager{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.arc-pager .prev, .arc-pager .next, .arc-pager .page{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 .6rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  text-decoration: none;
  color: var(--fg);
  background: var(--card);
  font-weight: 600;
  line-height: 1;
}

.arc-pager .page.current{
  background: color-mix(in oklab, var(--el-ink), white 92%);
  border-color: color-mix(in oklab, var(--el-ink), white 80%);
  color: var(--el-ink);
}

.arc-pager .prev.disabled, .arc-pager .next.disabled{
  opacity: .5;
  cursor: not-allowed;
}

.arc-pager .ellipsis{
  padding: 0 .25rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .doc-wrap { display: flex; flex-direction: column; gap: 1rem; }
  .doc-wrap .doc { order: 1; }
  .doc-wrap .doc-arc-block { order: 2; }
  .doc-wrap .doc-meta { order: 3; }
}

@media (max-width: 720px) {
  .doc-wrap .doc-meta { order: 3; }
}

/* — Fix: arc pager shouldn't inherit global nav link spacing — */
.arc-pager a{ margin: 0 !important; }

.arc-pager .page, .arc-pager .prev, .arc-pager .next{ padding: 0 .6rem; text-align: center; }

/* — Arc-in-header layout — */
.doc-header .doc-arc-header{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: center;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.doc-header .doc-arc-title{
  font-weight: 600;
  color: var(--el-ink);
  text-decoration: none;
}

.doc-header .doc-arc-title:hover{ text-decoration: underline; }

/* Keep pager tidy in header context */
.doc-header .arc-pager a{ margin: 0 !important; }

/* Mobile: stack meta then pager */
@media (max-width: 720px){
  .doc-header .doc-arc-header { grid-template-columns: 1fr; }
  .doc-header .arc-pager { margin-top: .25rem; }
}

/* — Arc-in-header layout (stacked on all viewports) — */
.doc-header .doc-arc-header{
  display: block;                       /* full-width, below header content */
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.doc-header .doc-arc-header + .doc-arc-header{
  margin-top: .75rem;                   /* spacing between multiple arcs */
  padding-top: .75rem;
  border-top: 1px dashed var(--line);
}

.doc-header .doc-arc-title{
  display: inline-block;
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--el-ink);
  text-decoration: none;
}

.doc-header .doc-arc-title:hover{ text-decoration: underline; }

/* Keep pager tidy in header context */
.doc-header .arc-pager{ margin-top: .25rem; }

.doc-header .arc-pager a{ margin: 0 !important; }

/* avoid global nav a margins */

.arc-pagebadge{ margin-right: .5rem; }

@media (max-width: 720px) { .arc-pagebadge { display: inline-block; margin: .25rem 0; } }

/* Library / Arc intros */
.arcs-blurb{ color: var(--muted); margin-top: .25rem; }

/* Arc page: header container to match doc aesthetic */
.arc-header.card{
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  margin: var(--space-m) 0 var(--space-l);
}

.arc-header .lead{ color: var(--fg); font-size: 1.1rem; }

/* Heading links: no underline by default */
h1 a, h2 a, h3 a{ text-decoration: none; }

/* Keep an affordance when interactive */
h1 a:hover, h1 a:focus-visible, h2 a:hover, h2 a:focus-visible, h3 a:hover, h3 a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer .footer-right{
  margin-left: auto;
}

.site-footer .footer-right a{
  text-decoration: none;
}

.site-footer .footer-right a:hover{
  text-decoration: underline;
}

img {
  max-width: 80%;
  height: auto;
}


main.wrap .site-header.container {
  width: 100%;
}

main.wrap .site-header.container {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}


</style>