/* John Eats Cheese — Direction E (cave typography, indigo accent)
   Loads after Main-css / Bootstrap-css and overrides their legacy styling.
   Design tokens: */
:root {
  --jec-bg: #fbf9f4;
  --jec-bg-elevated: #ffffff;
  --jec-ink: #1f2320;
  --jec-ink-soft: #6b7268;
  --jec-accent: #3d4f66;
  --jec-accent-ink: #f4f6f8;
  --jec-line: #e7e2d6;
  --jec-font-display: Georgia, "Big Caslon", "Palatino Linotype", serif;
  --jec-font-body: -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* bootstrap.min.css sets html{font-size:10px} unconditionally (not
   scoped to any breakpoint), which every rem value on this site —
   including the theme's own "body{font-size:1rem}" — has been
   computing against instead of the standard 16px. Restoring it here
   fixes body copy site-wide, not just this stylesheet's own rem use. */
html {
  font-size: 16px;
}

body {
  background-color: var(--jec-bg);
  color: var(--jec-ink);
  font-family: var(--jec-font-body);
}

/* Centered max-width wrapper — replaces bootstrap.min.css's .container
   (same breakpoints/widths) now that Bootstrap's CSS has been removed. */
.site-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .site-container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .site-container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .site-container {
    max-width: 1170px;
  }
}

a,
a:visited {
  color: var(--jec-accent);
}
a:hover,
a:focus,
a:active {
  color: var(--jec-ink);
}

/* Header */
.site-title a {
  font-family: var(--jec-font-display);
  color: var(--jec-ink);
  font-weight: 700;
}
.site-description {
  font-family: var(--jec-font-body);
  font-style: normal;
  color: var(--jec-ink-soft);
}

/* Nav
   Menu items can come from either a real assigned wp_nav_menu
   ("menu-item" / "menu-item-has-children" / "sub-menu" classes) or,
   when no menu is assigned to the location, WordPress's wp_page_menu()
   fallback ("page_item" / "page_item_has_children" / a bare "children"
   ul, no "sub-menu" class). Selectors below target both, plus a
   :has() fallback so any future markup shape still gets a chevron. */
.main-navigation {
  border-color: var(--jec-line);
}
.main-navigation ul#primary-menu,
#primary-menu > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.7rem;
}
.main-navigation ul li {
  display: inline-flex;
  align-items: center;
}
.main-navigation a {
  font-family: var(--jec-font-body);
  color: var(--jec-ink);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.06em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.main-navigation a:hover {
  color: var(--jec-accent);
}

/* Chevron affordance on items that have a dropdown */
.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.page_item_has_children > a::after,
.main-navigation li:has(> ul) > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg) translateY(-2px);
}
.main-navigation ul ul li.menu-item-has-children > a::after,
.main-navigation ul ul li.page_item_has_children > a::after,
.main-navigation ul ul li:has(> ul) > a::after {
  transform: rotate(-45deg) translateX(-2px);
}

/* Dropdown submenus — the theme's own rule sets a box-shadow but no
   background, so submenus render as floating unstyled text with no
   card behind them. */
.main-navigation ul ul {
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 8px;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
  padding: 0.4rem 0;
  margin-top: 0.6rem;
  gap: 0;
}
.main-navigation ul ul li {
  display: block;
  width: 100%;
}
.main-navigation ul ul a {
  display: block;
  padding: 0.6rem 1.1rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  opacity: 1;
}
.main-navigation ul ul a:hover {
  background-color: var(--jec-bg);
}

/* The theme's own mobile rules are hardcoded to a 768px breakpoint
   (menu-toggle display, overflow clipping, etc. in main.css) — that
   catches tablet-width viewports (e.g. a 768px-wide iPad portrait, or
   the ~727px viewport this was actually seen on) that have plenty of
   room for the full row. With only a handful of nav items, there's no
   need to collapse until much narrower. This band neutralizes the
   theme's own 768px rules so anything wider than 560px gets the same
   flex-row nav as desktop. */
@media (min-width: 561px) and (max-width: 768px) {
  .menu-toggle {
    display: none;
  }
  .main-navigation {
    overflow: visible;
    width: auto;
  }
  .main-navigation::after {
    display: none;
  }
  .main-navigation ul#primary-menu,
  #primary-menu > ul {
    display: flex !important;
    width: auto;
  }
  .main-navigation ul li {
    display: inline-flex;
    width: auto;
  }
}

/* Mobile nav — the theme's own mobile pattern clips the menu to one
   line with overflow:hidden and a fade-out gradient hinting there's
   more, expanding only on tap. Bumping the nav font size made the
   text wide enough to wrap instead of clip, colliding with the
   toggle button. Replacing with a standard hidden-until-tapped menu,
   with nested submenus collapsed into an accordion driven by the
   theme's own existing touch-JS (navigation.ts already toggles a
   ".focus" class on tap for items with children — this just needs to
   hide/reveal on that class instead of showing everything at once). */
@media (max-width: 560px) {
  .main-navigation {
    overflow: visible;
  }
  .main-navigation::after {
    display: none;
  }
  .menu-toggle {
    position: relative;
    right: auto;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.55rem;
    background: none;
    border: none;
    padding: 0.6rem 0.3rem;
    margin: 0 -0.3rem;
    font-family: var(--jec-font-body);
    color: var(--jec-ink);
    line-height: 1;
  }
  .menu-toggle-label {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1;
  }
  .menu-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
    height: 14px;
  }
  .menu-toggle-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 200ms ease, opacity 150ms ease;
  }
  .main-navigation.toggled .menu-toggle {
    color: var(--jec-accent);
  }
  .main-navigation.toggled .menu-toggle-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .main-navigation.toggled .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }
  .main-navigation.toggled .menu-toggle-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .main-navigation ul#primary-menu,
  .main-navigation #primary-menu > ul {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-navigation.toggled ul#primary-menu,
  .main-navigation.toggled #primary-menu > ul {
    display: flex;
  }
  .main-navigation ul li {
    display: block;
    width: 100%;
    text-align: left;
  }
  .main-navigation ul a {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0.25rem;
  }
  .main-navigation li.menu-item-has-children > a::after,
  .main-navigation li.page_item_has_children > a::after,
  .main-navigation li:has(> ul) > a::after {
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 150ms ease;
  }
  .main-navigation li.focus > a::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .main-navigation ul ul {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0 0 0 1rem;
    padding: 0;
    display: none;
    width: 100%;
  }
  .main-navigation li.focus > ul {
    display: block;
  }
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title a,
.widget h1, .widget h2 {
  font-family: var(--jec-font-display);
}
.entry-title a {
  color: var(--jec-ink);
}
.entry-title a:hover {
  color: var(--jec-accent);
}

/* Post list cards — the homepage feed (content-summary) and category/tag
   archives (content-archive, a Bootstrap "media object" row layout) used
   completely different styling before. Unifying both as the same card,
   and removing the old ".entry-footer::after" hack that inserted an
   empty 18em x 3em bordered spacer after every post. */
.content-summary,
.content-archive {
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 10px;
  padding: 1.5rem 1.6rem 1.7rem;
  margin-bottom: 1.5rem;
}
.entry-footer::after {
  display: none;
}
.content-summary .entry-title,
.content-archive .entry-title {
  margin-top: 0 !important;
  font-size: 1.4rem;
}
.content-summary > .entry-header > a,
.content-summary > .entry-header img {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.content-archive .media {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
}
.content-archive .media-left {
  flex: 0 0 140px;
  min-width: 0;
}
.content-archive .media-left img {
  border-radius: 8px;
  display: block;
}
.content-archive .media-body {
  flex: 1;
  min-width: 0;
}
.entry-meta,
.entry-footer {
  color: var(--jec-ink-soft);
  font-family: var(--jec-font-body);
  font-size: 0.85rem;
}
.entry-meta a,
.entry-footer a {
  color: var(--jec-ink-soft);
  font-size: 0.85rem;
  border-bottom-color: var(--jec-line);
}
.entry-meta a:hover,
.entry-footer a:hover {
  color: var(--jec-accent);
  border-bottom-color: var(--jec-accent);
}
.nav-links {
  margin-top: 0.5rem;
}
.nav-links a {
  font-weight: 600;
  color: var(--jec-ink);
}
.nav-links a:hover {
  color: var(--jec-accent);
}
@media (max-width: 600px) {
  .content-archive .media {
    flex-direction: column;
  }
  .content-archive .media-left {
    flex-basis: auto;
    width: 100%;
  }
}

/* Sidebar widgets — unified card treatment.
   Scoped to .widget-area so this doesn't also restyle footer widgets.
   Note: the old theme's "body > .widget" rule never matched the real
   markup (widgets render nested inside #secondary, not as direct
   children of body), so sidebar widgets had inconsistent/no styling —
   this replaces that with one consistent card for every widget. */
.widget-area .widget {
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 8px;
  overflow: hidden;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.widget-area .widget h1,
.widget-area .widget h2,
.widget-area .widget-title,
.widget-area .widget .wp-block-search__label {
  font-family: var(--jec-font-display);
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--jec-ink);
  font-weight: 700;
}
.widget-area .widget-title {
  margin: -1.25rem -1.4rem 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--jec-line);
}
.widget-area .widget .wrap {
  padding: 0;
}
.widget-area .widget ul {
  margin: 0;
  padding-left: 1.1rem;
}
.widget-area .widget li {
  margin-bottom: 0.4rem;
}

/* Search form
   .input-group used to get its layout (input + button joined into one
   row) from bootstrap.min.css's table-based .input-group rules; now that
   Bootstrap is gone, flexbox replaces it directly. */
.searchform .input-group {
  display: flex;
}
.searchform .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
}
.searchform .input-group-btn {
  flex: 0 0 auto;
}
.searchform .form-control {
  border: 1px solid var(--jec-line);
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--jec-font-body);
  color: var(--jec-ink);
  background: var(--jec-bg-elevated);
}
.searchform .form-control:focus {
  border-color: var(--jec-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jec-accent) 25%, transparent);
}
.searchform .btn.submit {
  border-radius: 0 6px 6px 0;
}

/* Lazy-load placeholder tint to match the new ground */
.lazy {
  background-color: var(--jec-line);
}

/* Buttons — flat modern treatment instead of the old beveled-grey look */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn,
.btn-default {
  display: inline-block;
  font-family: var(--jec-font-body);
  background: var(--jec-accent);
  color: var(--jec-accent-ink);
  border: 1px solid var(--jec-accent);
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6em 1.3em;
  transition: opacity 150ms ease;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-default:hover {
  background: var(--jec-accent);
  color: var(--jec-accent-ink);
  opacity: 0.85;
  box-shadow: none;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  border-color: var(--jec-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jec-accent) 30%, transparent);
}

/* The nav toggle is a plain button with no border/background of its own
   (see the mobile nav rules below), so the chunky filled-button focus
   ring above reads oddly on it — a thin outline is more appropriate. */
.menu-toggle:focus,
.menu-toggle:active {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--jec-accent);
  outline-offset: 3px;
}

/* Footer */
#colophon {
  background-color: var(--jec-bg-elevated);
  border-top: 1px solid var(--jec-line);
  color: var(--jec-ink);
  font-family: var(--jec-font-body);
}
#colophon strong {
  font-family: var(--jec-font-display);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.9rem;
}
.footer-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-nav-grid > div {
  flex: 1 1 180px;
}
#colophon .menu li {
  margin-bottom: 0.55rem;
  line-height: 1.3;
}
#colophon .menu .sub-menu {
  margin: 0.4rem 0 0.6rem 0.9rem;
}
#colophon a {
  color: var(--jec-ink-soft);
  font-size: 0.88rem;
}
#colophon a:hover {
  color: var(--jec-accent);
}
#colophon .site-info {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--jec-line);
  color: var(--jec-ink-soft);
  font-size: 0.82rem;
}

/* Single post page */
article.type-post .entry-title {
  font-size: 2rem;
  margin-bottom: 0.5rem !important;
}
article.type-post > header.entry-header > img.lazy {
  border-radius: 10px;
  margin-top: 1rem;
}
.cat-links,
.tags-links {
  display: inline-block;
}
.cat-links a,
.tags-links a {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jec-accent);
  background: color-mix(in srgb, var(--jec-accent) 10%, transparent);
  border: none;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin: 0 0.3rem 0.3rem 0;
}
.cat-links a:hover,
.tags-links a:hover {
  background: color-mix(in srgb, var(--jec-accent) 18%, transparent);
}

article.type-post .entry-content {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.7;
}
article.type-post .entry-content p {
  margin-bottom: 1.3em;
}
article.type-post .entry-content blockquote {
  border-left: 3px solid var(--jec-accent);
  margin-left: 0;
  padding-left: 1.2rem;
  color: var(--jec-ink-soft);
  font-style: italic;
}
article.type-post .entry-content img {
  border-radius: 8px;
}

/* Prev/next post navigation */
.post-navigation .nav-links {
  display: flex;
  gap: 1rem;
  margin-top: 0;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  float: none;
  width: 50%;
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.post-navigation a {
  font-weight: 600;
  color: var(--jec-ink);
}
.post-navigation a:hover {
  color: var(--jec-accent);
}

/* Comments — previously entirely unstyled */
.comments-area {
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 10px;
  padding: 1.6rem 1.8rem 1.8rem;
  margin-top: 1.5rem;
}
.comments-title {
  font-family: var(--jec-font-display);
  font-size: 1.3rem;
  margin-top: 0;
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list .comment-body {
  padding: 1.1rem 0;
  border-top: 1px solid var(--jec-line);
}
.comment-list > li:first-child > .comment-body {
  border-top: none;
}
.comment-list .avatar {
  border-radius: 999px;
  float: left;
  margin-right: 0.9rem;
}
.comment-list .comment-author .fn {
  font-weight: 700;
  font-style: normal;
}
.comment-list .comment-metadata {
  font-size: 0.78rem;
  color: var(--jec-ink-soft);
}
.comment-list .comment-metadata a {
  color: var(--jec-ink-soft);
}
.comment-list .reply a {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--jec-accent);
}
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
  border: 1px solid var(--jec-line);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-family: var(--jec-font-body);
  width: 100%;
  max-width: 100%;
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
  margin-bottom: 0.9rem;
}
#respond label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* "Related Recipes" widget (jupiter-recipes plugin) — its own
   recipes.css is echoed inline in the body, so it loads AFTER this
   stylesheet (which lives in <head>). At matching specificity the
   later rule wins, so every selector here is prefixed with "body" to
   stay ahead of recipes.css regardless of load order. */
body .jupiter-recipes.module {
  margin: 1.75rem 0 0;
}
/* recipes.css sets overflow:hidden on .wrapper and .content-container
   as an old float-clearfix (their .item-container used float:left).
   Since item-container is now float:none inside a real flex grid,
   that overflow:hidden serves no purpose and just crops the cards'
   hover transform/shadow. body.single-post gives the .wrapper override
   enough specificity to beat the plugin's own ".single-post ..." rule. */
body.single-post .jupiter-recipes.module .wrapper,
body .jupiter-recipes.module .wrapper {
  overflow: visible;
}
body .jupiter-recipes.module .content-container {
  overflow: visible;
}
body .jupiter-recipes.module h1 {
  font-family: var(--jec-font-display);
  font-size: 1.3rem;
  margin: 0 0 1rem;
  padding: 0;
  text-align: left;
  color: var(--jec-ink);
}
body .jupiter-recipes.module .feed {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  overflow: visible;
}
body .jupiter-recipes.module .item-container {
  display: block;
  float: none;
  width: calc(33.333% - 0.67rem);
  box-sizing: border-box;
}
body .jupiter-recipes.module .feed .item {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: var(--jec-bg-elevated);
  border: 1px solid var(--jec-line);
  border-radius: 10px;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease;
}
body .jupiter-recipes.module .feed .item:hover {
  transform: translateY(-2px);
  border-color: var(--jec-accent);
}
body .jupiter-recipes.module .item .image img {
  border-radius: 10px 10px 0 0;
  display: block;
  width: 100%;
  aspect-ratio: 364 / 130;
  object-fit: cover;
}
body .jupiter-recipes.module .content {
  box-sizing: border-box;
  width: 100%;
  padding: 0.9rem 1rem 1.1rem;
}
body .jupiter-recipes.module .recipe-title {
  font-family: var(--jec-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--jec-ink);
  height: auto;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}
body .jupiter-recipes.module .recipe-title:hover {
  color: var(--jec-accent);
}
body .jupiter-recipes.module .author {
  font-family: var(--jec-font-body);
  font-size: 0.85rem;
  color: var(--jec-ink-soft);
  height: auto;
  margin-top: 0.4rem;
}
body .jupiter-recipes.module .load-more {
  background: var(--jec-accent);
  color: var(--jec-accent-ink);
  border: 1px solid var(--jec-accent);
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--jec-font-body);
  font-weight: 600;
  padding: 0.6em 1.3em;
}
body .jupiter-recipes.module .pagination .item a {
  color: var(--jec-ink);
  border-radius: 6px;
}
body .jupiter-recipes.module .pagination .item a.active {
  background-color: var(--jec-line);
  color: var(--jec-ink);
}
body .jupiter-recipes.module .terms-module .toggle.selected {
  background-color: var(--jec-line);
  color: var(--jec-ink);
}
@media (max-width: 768px) {
  body .jupiter-recipes.module .item-container {
    width: calc(50% - 0.5rem);
  }
}
@media (max-width: 500px) {
  body .jupiter-recipes.module .item-container {
    width: 100%;
  }
}

/* Two-column layout + sticky sidebar.
   The old layout used floats (#primary{float:left}, #secondary{margin-left:...}),
   which is why the sidebar needed a whole jQuery plugin (stick-in-parent /
   sticky-kit) with a manually-configured "parent" element just to make it
   stick while scrolling — floats don't give a sticky element room to move
   within its own box. Flexbox does: with the default stretch behavior,
   #secondary naturally matches #primary's height, so a plain CSS
   `position: sticky` on .sidebar-wrapper does the same job with zero JS.
   Scoped to the same 768px breakpoint the original two-column layout used
   — below that everything already stacks in normal block flow. */
@media (min-width: 768px) {
  #content.site-content {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
  }
  #primary {
    float: none;
  }
  #secondary {
    margin-left: 0;
    flex: 1;
    align-self: stretch;
  }
  .sidebar-wrapper {
    position: sticky;
    top: 50px;
  }
}

/* "Page with left nav" template — replaces the old Bootstrap
   row/col-md-8-offset-4 + col-md-4/col-md-8 grid (page-left-nav.php). */
.page-toc {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.page-toc li {
  margin-bottom: 0.3rem;
}
.page-toc li a {
  display: block;
  padding: 0.5em 0.75em;
  border-radius: 6px;
}
.page-toc li a:hover {
  background: var(--jec-line);
}
@media (min-width: 992px) {
  .page-left-nav-title {
    width: 66.6667%;
    margin-left: 33.3333%;
  }
  .page-left-nav-body {
    display: flex;
    gap: 2rem;
  }
  .page-left-nav-toc {
    flex: 0 0 33.3333%;
  }
  .page-left-nav-content {
    flex: 0 0 66.6667%;
    min-width: 0;
  }
}