/* My website development days are gone. This is _messy_. */

:root{
    --bg:#f9f8f6; --fg:#1a1a1a; --muted:#555; --muted-border:#e6e4df; --accent:#4444ff;
    --transition: .2s ease; --header-h:56px;
    --font-body:'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-ui:'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Lora', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --container:700px;
}

html, body {
    height:100%
}

html, body { overflow-x: hidden; }

.footnotes {
    font-size:0.8em;
    font:italic 0.8rem/1.6 var(--font-ui);
    color:var(--muted);
}

body blockquote {
    font:italic 1rem/1.6 var(--font-heading);
    padding-left:0.8rem;
    margin-left:1rem;
    border-left:3px solid;
}

sup {
    font:0.8rem/1.6 var(--font-body);
}

sup a {
    text-decoration:none;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:400 1.05rem/1.75 var(--font-body);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased
}

.container {
  max-width: var(--container, 700px);
  margin: 0 auto;
  padding: 0 1rem;
  overflow: visible;
}

.full-width-chart {
  position: relative;
  width: 100vw;
  min-width: 100vw;
  max-width: none !important;
  left: 50%;
  transform: translateX(-50vw);
  margin: 3rem 0;
  grid-column: 1 / -1;
  flex: 0 0 auto;
  box-sizing: content-box;
}

#chart_div {
  width: 100% !important;
  height: 520px;
  max-width: none !important;
}

.full-width-chart svg,
.full-width-chart canvas {
  max-width: none !important;
}

html, body { overflow-x: hidden; }

@supports (width: 100svw) {
  .full-width-chart {
    width: 100svw;
    min-width: 100svw;
    transform: translateX(-50svw);
  }
}

.medical-team {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1rem;
}

.medical-team th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--muted-border, #e6e4df);
  padding: .5rem .75rem;
}

.medical-team td {
  border-bottom: 1px solid var(--muted-border, #e6e4df);
  padding: .5rem .75rem;
  vertical-align: top;
}

.medical-team a {
  text-decoration: none;
  color: var(--accent, #4444ff);
}

.medical-team a:hover {
  text-decoration: underline;
}

#static-header {
    background:var(--bg);
    position:sticky;
    top:0;
    z-index:10;
    border-bottom:1px solid #ddd;
}

header.container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.8rem 1.2rem;
    min-height:var(--header-h)
}

header h1 {
    margin:0;
    font:600 1.7rem/1 var(--font-heading);
    letter-spacing:-.01em
}

header h1 a {
    color:inherit;
    text-decoration:none
}

.menu-toggle {
    display:none
}

nav.main-nav ul {
    display:flex;
    gap:1rem;
    list-style:none;
    margin:0;padding:0
}

nav.main-nav a {
    font:500 1rem/1 var(--font-ui);
    color:var(--fg);
    text-decoration:none;
    padding:.35rem .5rem;
    border-radius:.5rem
}

nav.main-nav a:hover {
    color:var(--accent)
}
nav.main-nav a.is-active,[aria-current="page"] {
    color:var(--accent);
    font-weight:600
}

nav.subnav {
    border-top:1px solid #ddd;
    background:rgba(0,0,0,.02);
    overflow:auto;
    white-space:nowrap;
}

.subnav-inner {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.8rem 1.2rem;
    width:max-content;
    margin:0 auto;
}

.subnav .label {
    font:400 .9rem/1 var(--font-ui);
    opacity:.7;
}

.pill {
    font:500 .9rem/1 var(--font-ui);
    display:inline-block;
    padding:.38rem .85rem;
    border:1px solid var(--muted-border);
    border-radius:999px;
    color:var(--fg);
    text-decoration:none;
    transition:background var(--transition), border-color var(--transition)
}

.pill:hover {
    border-color:var(--accent);
}

.pill.is-active,.pill[aria-current="page"] {
    border-color:var(--accent);
    background:rgba(68,68,255,.08);
    color:var(--accent);
    font-weight:600;
}

nav.subnav {
    mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}

main {
    font-size:1.25rem;
    line-height:1.65;
    padding:1rem 0;
    /* Keep these two! */
    content-visibility:auto;
    contain-intrinsic-size:800px;
}

/* Optimization… this took a long time to figure out! */
main:has(.full-width-chart) {
  content-visibility: visible;
  contain: layout style;
}

main h1 {
    font:600 2.2rem/1.5 var(--font-heading);
    letter-spacing:-0.03em;
    margin:1rem 0 1.2rem;
    text-align:center;
}

h2 {
    font:600 1.5rem/1.25 var(--font-heading);
    letter-spacing:-.01em;
    margin:2rem 0 .75rem;
    text-align:center;
}

h3 {
    font:600 1.25rem/1.25 var(--font-heading);
    margin:1.5rem 0 .5rem;
}

p {
    margin:1.1rem 0
}

.image-gallery {
    margin-top:2rem
}

.visually-hidden {
    position:absolute!important;
    clip:rect(1px,1px,1px,1px);
    clip-path:inset(50%);
    height:1px;
    width:1px;
    overflow:hidden;
    white-space:nowrap
}

.site-footer {
    background:rgba(0,0,0,.02);
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    padding:3rem 0 3.5rem;
}

.site-footer .footer-inner {
    display:flex;
    flex-direction:column;
    gap:1.25rem
}

.footer-main ul {
    display:flex;
    gap:1rem;
    list-style:none;
    margin:0 auto;
    padding:0;
    flex-wrap:wrap;
    justify-content:center;
}

.footer-main a {
    font:500 1rem/1 var(--font-ui);
    color:var(--fg);
    text-decoration:none;
    padding:.4rem .55rem;
    border-radius:.5rem;
}

.footer-main a:hover {
    color:var(--accent)
}

.footer-main a.is-active,[aria-current="page"] {
    color:var(--accent);
    font-weight:600
}

.site-footer .footnote {
    margin:0 auto;
    text-align:center;
    color:#777;
}

.divider-fade {
    margin:2.5rem auto;
    height:1px;width:90%;
    max-width:780px;
    background:linear-gradient(to right, transparent, #bbb, transparent);
    opacity:0.7;
}

.story-nav {
    display:flex;
    justify-content:
    space-between;
    align-items:center;
    gap:1rem;
    margin:2.75rem 0;
}

.story-nav a {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font:500 1rem/1 var(--font-ui);
    color:var(--accent);
    text-decoration:none;
    padding:0;
    border:none;
    border-radius:0;
}

.story-nav a:hover {
    border-color:var(--accent);
    color:var(--accent)
}

.story-nav a.prev::before {
    content:"←";
    font-size:1.05em;
    line-height:1;
}

.story-nav a.next::after {
    content:"→";
    font-size:1.05em;
    line-height:1
}

.story-list {
    margin:0rem 2.5em;
    display:flex;
    flex-direction:column;
    gap:1.25rem
}

p.story-list-superscript {
    color:gray;
    line-height:0.2;
    font-size:10pt;
    font-family:var(--font-ui);
    margin:0;
    text-align:center;
}

h2.story-header {
    margin-top:0;
    padding-top:0;
    line-height:0;
    
    font-family:var(--font-heading, var(--font-ui));
    font-weight:600;
    font-size:1.52rem;
    margin:0 0 1.5rem;
    
    position:relative;
    transition:color var(--transition);
    text-decoration:none;
    text-underline-offset:3px;
    text-align:center;
}

/* Gallery */

.gallery-caption {
    font: 1rem/1.6 var(--font-heading);
    margin-top:0.8rem;
    margin-bottom:3rem;
}

.gallery-scroll {
    overflow-x: auto;
    display: flex;
    gap: 1rem;
    padding: 0rem 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
}

.gallery-scroll img {
  flex: 0 0 auto;
  height: 30rem;
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.gallery-item {
    margin:0 auto 0rem
}

.gallery-item,
.media {
  border-radius: 12px;
  overflow: hidden;
}

.gallery-item.small {
  display: block;
  max-width: 500px;
  margin: 2rem auto;
  border-radius: 8px;
  height: auto;
}

.gallery-item img.single,
.media img.single {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 0 auto 1rem;
  border-radius: 12px;
  object-fit: contain;
}

.image-edge .gallery-item img {
    width:110%;
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
}

/* Contact form */

#contact .lede { color: var(--muted); margin-top: .25rem; }

.contact-form {
  display: grid;
  gap: 1rem;
  margin: 1.25rem auto 2rem;
  max-width: var(--container);
  box-sizing: border-box;
}

.contact-form .row {
  display: grid;
  gap: .35rem;
  width: 100%;
}

.contact-form label {
  font: 500 .95rem/1.3 var(--font-ui);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font: 1rem/1.5 var(--font-ui);
  padding: .65rem .75rem;
  border: 1px solid var(--muted-border);
  border-radius: .6rem;
  background: #fff;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: 1rem/1.5 var(--font-ui);
  padding: .65rem .75rem;
  border: 1px solid var(--muted-border);
  border-radius: .6rem;
  background: #fff;
}

.check {
    font: .95rem/1.3 var(--font-ui);
    color: var(--muted);
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.btn {
  display: inline-block;
  font: 600 1rem/1 var(--font-ui);
  padding: .7rem 1rem;
  border-radius: .6rem;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
}

.btn:hover {
    filter: brightness(0.95);
}

/* Sitemap - this is easier for mobile navigation after using it for a while */

.main-nav .sitemap-link {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.main-nav .sitemap-link:hover {
  opacity: 1;
}

body.sitemap-open { overflow: hidden; }

.sitemap-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--bg, #f9f8f6);
  color: var(--fg, #1a1a1a);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(2rem, 4vw, 4rem);
}

.sitemap-overlay.open { display: block; }

.sitemap-inner {
  max-width: 800px;
  margin: 0 auto;
  min-height: 100dvh;
}

.sitemap-title {
  margin: 1rem 0;
  font: 700 1.5rem/1.2 var(--font-ui, system-ui);
}

/* Close button */
.sitemap-close {
  position: sticky;
  top: 0;
  font: 700 1.6rem/0.6 var(--font-ui, system-ui);
  background: var(--bg, #f9f8f6);
  border: 0;
  cursor: pointer;
  float: right;
  margin-left: auto;
  padding: .25rem .5rem;
}

/* Root + nested list reset */
.sitemap-list,
.sitemap-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level item spacing only */
.sitemap-list > li { margin: .8rem 0; break-inside: avoid; }

/* Top-level link weight/size */
.sitemap-list > li > a {
  display: block;
  font: 700 1.5rem/1.2 var(--font-ui, system-ui);
  text-decoration: none;
  padding: 0;
}

/* All links (including chapters) */
.sitemap-list a {
  display: block;
  text-decoration: none;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  padding: 0;
}

/* Ensure nested lists actually render (beats global nav rules) */
.sitemap-overlay .sitemap-list ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  max-height: none !important;
  height: auto !important;

  margin-top: .25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--muted-border, #e6e4df);
  break-inside: avoid;
}

/* Chapter label inside link */
.story-list-superscript {
  display: block;
  font: 700 .7rem/1.2 var(--font-ui, system-ui);
  color: var(--muted, #555);
  margin-bottom: 2px;
  text-align: left;
}

/* Active state */
.sitemap-list a.is-active { font-weight: 700; }

/* Optional: layout hook if you later want multi-column/flex at the root */
@media (min-width: 880px) {
  /* Example: keep as a noop now, or swap to a flex layout later */
  /* #sitemap-root { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
     #sitemap-root > li { flex: 1 1 280px; min-width: 280px; } */
}

/* Ensure header/footer stay above page content but below overlay */
#static-header, .site-footer { position: relative; z-index: 1; }

/* Changed all of this 10,000 times… if I change it, it will break.*/

@media (max-width:480px){
    .story-nav {
        flex-direction:column;
        align-items:stretch;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .story-nav a {
        justify-content:center
        flex: 1;
    }
    
    .story-nav a.prev {
        text-align: left;
    }
    
    .story-nav a.next {
        text-align: right;
    }
    
    h2, h3 {
        font-size: clamp(1.6rem, 6vw, 3rem);
    }
    
}

@media (max-width:720px){
    body {
        font-size:1.12rem
    }
    
    header h1 {
        font-size:1.45rem
    }
    
    main h1 {
        font:600 1.8rem/1.5 var(--font-heading);
    }
    
    h2, h3 {
        font-size: clamp(1.6rem, 6vw, 3rem);
    }
    
    .menu-toggle {
        display:inline-block;
        border:1px solid var(--muted-border);
        background:#fff;
        font-size:.8rem;
        border-radius:.8rem;
        padding:.6rem .6rem;
        cursor:pointer;
        z-index:9999;
        margin-left:auto;
    }
    
    nav.main-nav {
        position:relative;
        z-index:9999;
    }
    
    nav.main-nav ul {
        position:absolute;
        right:0;
        top:calc(100% + 6px);
        background:#fff;
        border:1px solid var(--muted-border);
        border-radius:.75rem;
        padding:.5rem;
        display:none;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }
    
    nav.main-nav[data-open="true"] ul {
        display:flex;
        flex-direction:column;
        min-width:56vw;
        gap:.25rem
    }
    
    nav.main-nav a {
        padding:.6rem .65rem;
    }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  h1 { font-size: 1.8rem;}
  h2, h2.story-header { font-size: 1.25rem;  }
  h3 { font-size: 1.1rem; }
}

@media (max-width: 720px) {
  h2, h3 { font-size: unset; }
}