/* =======================================================================================
   ELEMENT LAYOUT — one semantic class per reusable element (see wiki/_elements.html).

   Why this file exists: the elements used to carry their layout as opaque utility-class
   soup in the markup (e.g. `pe-lg-8`, `w-lg-75`, `w-85` — custom classes that merely
   *looked* like Bootstrap). Here each element's spacing/width/responsive behaviour lives
   in ONE named, commented rule, co-located with its siblings. The markup then reads as
   plain semantics (`class="article-text"`), and the breakpoints for an element sit right
   next to it instead of being scattered.

   Values still come from the design tokens where one exists. Every rule below reproduces
   the exact computed style of the utility soup it replaces (pixel-verified via
   tools/verify-gen.mjs against the hand-written original).

   Breakpoint reminder (matches Bootstrap): lg = ≥992px.
   ======================================================================================= *//* paragraph — article body copy. Was: class="pe-lg-8".
   The right-hand gutter (only on wide screens) keeps prose clear of the sidenav column. */
.article-text {
}
@media (min-width: 992px) {
.article-text { padding-inline-end: 5rem; }
}
/* figure — a framed image + caption. Was: outer class="pe-lg-8",
   frame class="plot-background w-lg-75 mx-auto my-lg-3 my-2". */
.figure-block {                                   /* outer: same right gutter as prose */
}
@media (min-width: 992px) {.figure-block { padding-inline-end: 5rem; } }
.figure-frame {                                   /* the plot-background box: centred */
  margin: 0.5rem auto;                            /* my-2 + mx-auto */
}
@media (min-width: 992px) {
.figure-frame { width: 75%; margin-top: 1rem; margin-bottom: 1rem; }  /* w-lg-75 + my-lg-3 */
}
/* focus — highlighted call-out, optional framed image beneath.
   Was: outer class="pe-lg-8 mt-3", lead class="px-5 d-block",
   image wrap `plot-background`(bare attr BUG) class="mt-3", img class="w-85 mx-auto". */
.focus-block {
  margin-top: 1rem;                               /* mt-3 */
}
@media (min-width: 992px) {.focus-block { padding-inline-end: 5rem; } }
.focus-lead {
  display: block;                                 /* d-block */
  padding-left: 3rem; padding-right: 3rem;        /* px-5 */
}
.focus-image {
  margin-top: 1rem;                               /* mt-3 */
}
.focus-img {
  width: 85%;                                     /* w-85 */
  margin-left: auto; margin-right: auto;          /* mx-auto */
}


/* =======================================================================================
   ELEMENT LOOKS — visual styling per element (migrated 2026-08-21 from style.css).
   Grouped per primitive; layout/spacing rules for the same elements are above.
   ======================================================================================= */

/* ======================= GENERAL ======================================================== */

@media (min-width: 992px) {
.pe-lg-8 { padding-inline-end: 5rem; }
}

/* --- Media Queries --- */
/* Removed: a legacy `body { padding-top: 4rem }` under 768px, left over from
   the 2025 chrome where the navbar was position:fixed and the body had to be
   pushed down to clear it. The 2026 .c-nav is position:sticky, so it occupies
   flow space and needs no offset — the padding was a dead 64px white band
   above the logo on every phone-width screen. The `.nav-menu` rule it sat
   next to was dead too (the 2026 markup calls it .c-nav__menu), and the
   font-size simply repeated base.css. */
/* =================================== GENERAL STUFF FOR MULTIPLE PAGES ================================== *//* ======================================================================================================= */
.dropdown-box {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    /* align content center horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* The clickable header — drawn with tokens, no image asset */
.dropdown-box-header {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--clr-heading);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
}
.dropdown-box-chevron {
    color: #fff;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.3s ease;
}
/* no-op guard */
.dropdown-box-content.show ~ *, .dropdown-box-header:has(+ .dropdown-box-content.show) .dropdown-box-chevron {
    transform: rotate(180deg);
}
/* Style for the title text */
.dropdown-box-title {
  font-size: var(--fs-eyebrow);
  font-family: var(--font-family-primary);
  font-weight: var(--fw-bold);
  color: #fff;
  text-align: left;
}
/* Content hidden by default */
.dropdown-box-content {
    display: none; /* Hidden by default */
    background-color: var(--clr-focus);
    border-radius: 15px;
    margin-top: 0.5rem;
    width: 100%;
    padding: 1rem 1rem 2rem 1rem;
    text-align: justify;
    font-family: var(--font-family-primary); /* Use Nunito Sans font */
    font-weight: var(--fw-regular);
    font-size: calc(var(--fs-body)*1); /* Slightly smaller font size */
    overflow: auto;
}
/* Styling when content is visible */
.dropdown-box-content.show {
    display: flow-root;
}
.dropdown-box-content::before {
  background-color: var(--clr-heading);
}
/* =========================== GENERAL PAGE LAYOUT ================================== */
.summary-section {
  /* the framing band under the banner. In the VOYAGE design it is NOT a filled
     block any more: the columns sit on the page, each under a highlighter bar. */
  padding-top: var(--space-3);
}
.summary-heading {
  text-align: center;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
}
.reference-list {
  list-style-type: none;
  padding-left: 0;
  line-height: 1.8;
}
.reference-list li {
  margin-bottom: 1rem;
  text-align: justify;
}
.reference-list a {
  color: var(--clr-heading);
  text-decoration: none;
  word-break: break-all;
}
.reference-list a:hover {
  text-decoration: underline;
}
.reference-list em {
  font-style: italic;
}
/* ========================== FIGURES ================================== */
.plot-background {
  background-color: white;
  border: 1px solid var(--clr-heading);
  border-radius: 10px;
  padding: 0.5rem 0.2rem 0.5rem 0.2rem;
}
.figure-caption {
  font-size: calc(var(--fs-body)*0.7);
  margin: 0.5rem;
  text-align: justify;
  font-family: var(--font-family-primary); 
  font-weight: var(--fw-regular);
  color: var(--clr-heading);
}
.abstract-focus {
  font-family: var(--font-family-primary);
  font-weight: var(--fw-regular);
  background-color: var(--clr-focus);
  border-radius: 15px;
  padding: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  width: 100%;
}

/* Hide all lines and dots on small screens */
@media (max-width: 1024px) {
.line {
        display: none !important;  /* Hide dots */
    }


    /* Remove bounce animation */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        40% {
            transform: translateX(-50%) translateY(-10px);
        }
        60% {
            transform: translateX(-50%) translateY(-5px);
        }
    }
}

/* For smaller screens, adjust the layout */
@media (max-width: 768px) {
.line {
        display: none !important;  /* Hide dots, lines */
    }
}
.table-scroll-x {
  width: 100%;
  overflow-x: auto;          /* enables horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
/* ------ PREET SHIT ------ */
.table-binder {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-top: 20px;
}
.table-binder th {
    background-color: white;
    color: black;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    border-top: 3px solid black;
    border-bottom: 2px solid black;
    font-size: 14px;
}
.table-binder td {
    padding: 12px;
    text-align: center;
    border: none;
    white-space: nowrap;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
table {
          font-size: 14px;
      
  }
}

/* Optional: make it friendlier on small screens */
@media (max-width: 575.98px) {
.pdf-frame { width: 100%; height: 70vh; }
}
/* ============================= SPONSOR PAGE ============================= */
.collab-container {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.collab-title {
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1.75rem;
}
.collab-logo {
    float: right;
    margin-left: 25px;
    margin-bottom: 15px;
    max-height: 150px;
    max-width: 40%;
    width: auto;
}
.collab-logo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.collab-text {
    color: #555;
    line-height: 1.7;
    text-align: justify;
}
.collab-text p {
    margin-bottom: 15px;
}
.collab-text p:last-child {
    margin-bottom: 0;
}
/* Clear float after content */
.collab-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
.collab-logo {
        float: none;
        max-width: 60%;
        margin: 0 auto 20px;
        display: block;
    }
.collab-text {
        text-align: left;
    }
.collab-title {
        text-align: center;
        font-size: 1.5rem;
    }
}

/* Optional: make it friendlier on small screens */
@media (max-width: 575.98px) {
.pdf-frame { width: 100%; height: 70vh; }
}
/* pdf box: the embedded viewer fills the box at every width (the old rules
   existed only inside two media queries, so desktop got intrinsic iframe size) */
.roadmap-pdf-reader { width: 100%; }
.pdf-frame { width: 100%; height: 70vh; border: 0; }
.mobile-pdf-download { display: inline-block; margin-bottom: .6rem; }
/* static (always-open) box header keeps the pointer honest */
.dropdown-box-header--static { cursor: default; }
/* floating figure (::plotfigure): the width that makes the wrap possible.
   Pruned once as "unused" because no page floated a figure at the time —
   without it the figure spans the column and nothing can flow beside it. */
.w-plot { width: 60%; }
@media (max-width: 992px) {.w-plot { width: 90%; } }


/* =======================================================================================
   VOYAGE ELEMENTS (2026-08-22) — the shapes the design mockups introduced:
   the page title, the illustration band, the highlighter-bar heading, the warm
   reading panel and the decorative ornament. Values are tokens only.
   ======================================================================================= */

/* ---- PAGE TITLE — the largest thing on the page, with a hard offset shadow.
   The shadow is LIGHTER than the face (sampled from the drafts), which is what
   gives it the printed, slightly retro look rather than a drop-shadow. */
.page-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--clr-title);
  text-shadow: var(--title-shadow);
  text-align: left;
  margin: var(--space-5) 0 var(--space-4);
  letter-spacing: -0.01em;
}

/* ---- HERO BAND — the flat illustration strip under the title. Fixed aspect so
   a swapped-in asset of a different height cannot change the page rhythm; the
   art is cropped, never letterboxed. */
.hero-band {
  width: 100%;
  background: linear-gradient(180deg, var(--clr-banner-b), var(--clr-banner-a));
  border-radius: 24px;
  overflow: hidden;   /* also what crops .hero-band__img to the fixed aspect ratio */
  margin-bottom: var(--space-5);
}
.hero-band__img {
  width: 100%;
  aspect-ratio: 1200 / 330;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  /* Below the breakpoint the band stops getting SHORTER and starts getting
     NARROWER: it holds the height it had at 768px and object-fit: cover crops
     the artwork at the left and right instead. The old `aspect-ratio: 3 / 2`
     grew the box taller as the screen narrowed, so the art kept its middle but
     the band turned into a deep slab of bare gradient. */
  .hero-band__img {
    aspect-ratio: auto;
    /* the height the band already has at 768px: .c-page is the viewport less a
       6vw gutter each side, so 768 * 0.88 * 330/1200 — chosen so the band does
       not jump when it crosses the breakpoint */
    height: 186px;
  }
}

/* ---- HEADING BAR — the pale-teal highlighter the heading sits on. The bar runs
   the full width of its column and the text overhangs it slightly at the
   baseline, exactly as drawn. */
.heading-bar {
  background: var(--clr-bar);
  margin: var(--space-3) 0 var(--space-3);
  padding: 0 var(--space-2);
}
.heading-bar > * {
  margin: 0;
  color: var(--clr-ink);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1.35;
}

/* ---- PROSE PANEL — the warm cream reading block. */
.prose-panel {
  background: var(--clr-panel);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0 var(--space-4);
  /* its own formatting context: a preceding ::ornament then sits BESIDE the
     panel in the gutter rather than floating on top of it */
  overflow: hidden;
}
.prose-panel > p { margin: 0; }

/* ---- ORNAMENT — decorative only. It is pulled into the margin on wide screens
   and removed entirely on narrow ones, so it can never squeeze the prose. */
.ornament { display: none; }
@media (min-width: 1200px) {
  .ornament {
    display: block;
    width: clamp(5rem, 8vw, 8rem);
    margin-top: 0;
  }
  .ornament--right { float: right; margin-left: var(--space-4); margin-right: calc(var(--space-5) * -1); }
  .ornament--left  { float: left;  margin-right: var(--space-4); margin-left: calc(var(--space-5) * -1); }
}
.ornament img { width: 100%; height: auto; }

/* Only the placeholder page */
#page-content:has(.placeholder-section) .summary-section {
  margin-bottom: 1rem !important;
}

.placeholder-section {
  padding-top: 0 !important;
}

.placeholder-section h2 {
  margin-top: 1rem;
}

/* Bootstrap's .row carries -12px side margins that expect a padded .container
   or .col parent to absorb them. Ours sit directly in the page section, whose
   padding is the site gutter — so without this the page is 12px wider than the
   viewport and scrolls sideways on phones. */
.c-page .row, .placeholder-section .row, #page-content .row { margin-inline: 0; }