/* === Tabs === */
  .nb-tabs{max-width:1180px;margin:0 auto;padding:2rem 1.5rem;}
  .nb-tablist{
    display:flex; gap: 4rem; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:1rem;
  }
  .nb-tab{
    appearance:none; border:none; background:transparent; color:var(--light-text);
    font-weight:700; padding:.6rem .9rem; cursor:pointer; border-radius:.6rem .6rem 0 0;
    position:relative;
  }
  .nb-tab[aria-selected="true"]{
    background: rgba(255,255,255,.06);
    box-shadow: 0 -2px 0 var(--warm-orange) inset;
    color: var(--light-text);
  }
  .nb-panel{display:none;}
  .nb-panel.is-active{display:block;}

  /* Dropdowns: match Description/HP look */
  details.acc {
    border:1px solid var(--warm-orange);
    border-radius:.7rem;
    background:rgba(255,255,255,.03);
    margin:.65rem 0;
    overflow:clip;
    box-shadow:0 0 0 2px rgba(220,114,75,.06) inset;
  }
  details.acc > summary{
    list-style:none; cursor:pointer; padding:.85rem 1rem; display:flex;
    align-items:center; justify-content:space-between; color:var(--light-text); font-weight:bolder;
  }

  details.acc > summary::-webkit-details-marker{display:none;}
  details.acc > summary::after{
    content:"▾"; font-size:1.15rem; color:var(--warm-orange); transform:translateY(1px);
    transition:transform .18s ease;
  }
  
  details.acc[open] > summary::after{ transform:rotate(180deg) translateX(-1px); }
  details.acc .acc-body{ padding:.25rem 1rem 1rem; }

  /* Preserve original PDF formatting */
  .proto-pre{
    white-space:pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, monospace;
    font-size:.98rem;
    line-height:1.35;
    background:rgba(255,255,255,.02);
    border:1px dashed rgba(255,255,255,.12);
    border-radius:.5rem;
    padding:.75rem .9rem;
    margin:.5rem 0 0;
  }

  .accent-strong{ color:var(--light-orange); font-weight:700; }
  .muted{ opacity:.85; }

  @media (max-width: 991px){
    .nb-tabs{ padding:1.25rem 1rem; }
  }
/* piggybacks on style.css + description.css */
.hp-section { margin-top: 2.5rem; }

/* Cards for interviewee + bio */
.hp-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  background: rgba(20,20,20,0.35);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  margin: 1.5rem 0;
}
.hp-card-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.hp-card-title { margin: .25rem 0 .25rem; }
.hp-card-sub { opacity: .9; margin-bottom: .5rem; }

/* Skinny timeline divider between sections (wireframe vibe) */
.hp-divider{
  width: 2px;
  height: 120px;
  background: linear-gradient(180deg, rgba(220,114,75,.9), rgba(220,114,75,.1));
  margin: 2.5rem auto;
  border-radius: 2px;
  box-shadow: var(--glow);
}

/* Accordion styling coheres with your palette */
.accordion .accordion-button {
  background: rgba(0,0,0,0.25);
  color: var(--light-text);
  border: 1px solid rgba(255,255,255,0.06);
}
.accordion .accordion-button:not(.collapsed){
  background: rgba(220,114,75,0.15);
  color: var(--light-text);
}
.accordion .accordion-body ul { margin-left: 1rem; }

/* References toggle arrow like Description */
.refs-toggle{
  color: var(--light-text);
}
.refs-toggle::after{
  content:"▼";
  font-size:.9rem;
  color: var(--warm-orange);
  margin-left:.5rem;
}
.refs-toggle[aria-expanded="true"]::after{ content:"▲"; }

@media (max-width: 768px){
  .hp-card{
    grid-template-columns: 1fr;
  }
}
/* ===== Interviewee cards ===== */
.hp-interview { margin: 1.25rem 0 2rem; }

/* Card shell */
.hp-int-card{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:1rem;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--warm-orange);
  border-radius:.9rem;
  padding:1rem;
  box-shadow: 0 0 0 2px rgba(220,114,75,.05) inset;
}

/* Photo */
.hp-int-photo{
  width:140px; height:140px; object-fit:cover;
  border-radius:.6rem;
  border:1px solid rgba(255,255,255,.15);
  background:#111;
}

/* Name/role/meta */
.hp-int-name{ margin:0; color:var(--light-text); }
.hp-int-role{ margin:.15rem 0 .35rem; opacity:.9; }
.hp-int-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:0; padding:0; list-style:none;
  font-size:.95rem; opacity:.85;
}

/* Takeaways */
.hp-int-takeaways h4{ margin:.35rem 0 .35rem; }
.hp-int-takeaways ul{ margin:.25rem 0 0 1rem; }

/* Stacked accordions under each card */
.hp-int-acc{
  border:1px solid var(--warm-orange);
  border-radius:.6rem;
  background: rgba(255,255,255,.03);
  margin:.4rem 0 0;
  overflow: clip;
  box-shadow: 0 0 0 2px rgba(220,114,75,.06) inset;
}
.hp-int-acc + .hp-int-acc{
  margin-top:0;                 /* stick them together */
  border-top-left-radius:0;     /* fuse corners */
  border-top-right-radius:0;
}

/* Summary row and arrow (bigger) */
.hp-int-acc > summary{
  list-style:none; cursor:pointer;
  padding:.85rem 1rem; font-weight:600; color:var(--light-text);
  display:flex; align-items:center; justify-content:space-between;
}
.hp-int-acc > summary::-webkit-details-marker{ display:none; }
.hp-int-acc > summary::after{
  content:"▸"; font-size:1.2rem; color:var(--warm-orange);
  transition: transform .18s ease; transform: translateY(1px);
}
.hp-int-acc[open] > summary::after{ transform: rotate(90deg) translateX(-1px); }
.hp-int-acc .acc-body{ padding:.25rem 1rem 1rem; }

/* Responsive */
@media (max-width: 800px){
  .hp-int-card{ grid-template-columns: 96px 1fr; }
  .hp-int-photo{ width:96px; height:96px; }
}
@media (max-width: 560px){
  .hp-int-card{ grid-template-columns: 1fr; }
  .hp-int-photo{ width:100%; height:200px; }
}
/* === HP extras (drop into description.css or a new hp.css) === */
/* Headings inside the article */


/* If you keep the ID block, make it safe too (or delete this block entirely) */
#hp-overview, #hp-categories, #hp-implementation, #hp-reflection,
#hp-refs, #hp-background, #hp-why-ecoli, #hp-values, #hp-process,
#hp-material, #hp-bioethics, #hp-environment, #hp-public-health,
#hp-local, #hp-space-agencies, #hp-marketing {
  color: var(--light-text, #fff) !important;
}

/* Smooth scrolling + anchor offset (if you use a sticky header) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; } /* tune to your header height */

/* Accordion: stacked “box” look, orange outline even when closed */
details.acc {
  border: 1px solid var(--warm-orange);
  border-radius: .7rem;
  background: rgba(255,255,255,.03);
  margin: .5rem 0;
  overflow: clip; /* keep borders crisp on open */
  box-shadow: 0 0 0 2px rgba(220,114,75,.06) inset;
}
details.acc + details.acc {
  margin-top: 0;                 /* stick together */
  border-top-left-radius: 0;     /* fuse corners */
  border-top-right-radius: 0;
}
details.acc:first-of-type { margin-top: .5rem; }
details.acc[open] { background: rgba(255,255,255,.045); }

/* Accordion summary: bigger arrow, better hit area */
details.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--red-orange); font-weight: 600;
  font-size: 2rem;
}
details.acc > summary::-webkit-details-marker { display: none; }

/* Arrow icon (always visible; grows a bit) */
details.acc > summary::after {
  content: "▸";
  font-size: 1.15rem;            /* bigger arrow */
  line-height: 1;
  transform: translateY(1px);
  transition: transform .18s ease;
  color: var(--warm-orange);
}
details.acc[open] > summary::after {
  transform: rotate(90deg) translateX(-1px);
}

/* Inner body spacing */
details.acc .acc-body { padding: .25rem 1rem 1rem; }

/* Right TOC: active link highlight (works with JS below) */
.scroll-sidebar .toc a.is-active {
  color: var(--warm-orange);
  text-shadow: 0 0 8px rgba(220,114,75,.35);
}

/* References header with arrow even when closed */
#hp-refs > summary {
  list-style: none;
  color: var(--light-text);
  font-weight: 700;
  padding: .85rem 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
#hp-refs > summary::after {
  content: "▾";                  /* down caret by default */
  font-size: 1.1rem;
  color: var(--warm-orange);
  transition: transform .18s ease;
}
#hp-refs[open] > summary::after {
  transform: rotate(180deg);     /* flip when open */
}

/* Optional: make interview headshots float right nicely */
.hp-figure.right { float: right; margin: .25rem 0 1rem 1rem; max-width: 240px; }
.hp-figure.right img { width: 100%; border-radius: .6rem; }
@media (max-width: 900px){
  .hp-figure.right { float: none; margin: .75rem 0; max-width: 100%; }
}
/* Remove numbering/bullets in the TOC sidebar */
.scroll-sidebar ol,
.scroll-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Extra-safe: kill any markers some browsers still render */
.scroll-sidebar li::marker {
  content: "";
}

/* Optional niceties */
.scroll-sidebar a {
  text-decoration: none;
  display: block;
  padding: .35rem .5rem;
}
.scroll-sidebar .sub-links {
  padding-left: 1rem; /* indent nested items without markers */
}
.hp-int-acc h4 {
  font-size: 1.2rem;
  color: var(--warm-orange);
  letter-spacing: .01em;
  margin-top: 1.1rem;
}

/* OPTIONAL precise targeting (use if you add classes):
   <h4 class="hp-int-q">What we wanted to learn…</h4>
   <h4 class="hp-int-a">What we learned</h4>  */
.hp-int-q, .hp-int-a { font-size: 1.22rem; color: var(--warm-orange); }

/* === INTERVIEWEE TITLES & SECTION SUMMARIES LARGER === */
.hp-int-name {                /* e.g., "Dr. Traci Haddock" */
  font-size: 1.6rem;
  line-height: 1.2;
}
.hp-int-header .hp-int-role { /* keep roles readable next to larger names */
  font-size: .98rem;
}

.hp-interview > details.acc > summary,
#hp-marketing > details.acc > summary {   /* e.g., "Ain Center for Entrepreneurship" */
  font-size: 1.2rem;
  font-weight: 700;
}

/* === OUR VALUES: thicker white outline + orange headings === */
.hp-card {
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255,255,255,.04); /* subtle contrast on dark bg; safe on light too */
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; /* crisp edge on light themes */
}
.hp-card h4 {
  color: var(--warm-orange);
  font-size: 1.15rem;
  letter-spacing: .01em;
}

/* === REFERENCES accordion title bigger === */
#hp-refs > summary {
  font-size: 1.2rem;
  font-weight: 800;
}

/* (Nice-to-have) keep all <summary> text the light header color */
details.acc > summary { color: var(--light-text); }

/* Uniform width for all content images (NOT headshots or parallax) */
.desc-article .hp-figure {
  max-width: 920px;            /* pick the width you want */
  margin: 1rem auto;           /* center the figure */
}

.desc-article .hp-figure img {
  display: block;
  width: 100%;                 /* fill the figure width */
  height: auto;                /* keep natural height */
  border-radius: 12px;         /* optional nicety */
  border: 1px solid rgba(255,255,255,.08); /* optional */
}

/* Keep headshots and parallax images untouched */
.hp-int-photo,
#astronaut,
#dna { width: auto; height: auto; }

/* If you use the right-floated figure variant, keep its width consistent */
.hp-figure.right { max-width: 520px; }
@media (max-width: 900px){
  .hp-figure.right { max-width: 100%; float: none; margin: .75rem 0; }
}

/*=====NOTEBOOK STYLING======*/

h1 {
  font-size: 4rem;
  text-align: left;
  color: #dc724b;
  white-space: normal !important;
  line-height: 60px;
  margin-top: 100px;
}

.bg-box {
  background-image: radial-gradient(157.49% 100.03% at 88.62% 83.56%, rgba(69, 64, 64, 0.40) 0%, rgba(62, 50, 50, 0.35) 55.29%);
  border: 2px solid #c83a07;
  border-left: 5px solid #c83a07;
  border-right: 5px solid #c83a07;
  padding: 30px;
  max-width: inherit;
}

.bg-box-1 {
  border-radius: 10px 55px 10px 55px !important;
}

.bg-box-2 {
  border-radius: 55px 10px 55px 10px;
}

/*=====PROTOCOLS STYLING======*/
h3 {
  font-size: 3rem;
}

.two-col {
  display: flex;
}

.two-col h4 {
  text-decoration: underline;
}