@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

:root {
  --ink: #102f3b;
  --ocean: #123b5d;
  --teal: #167d78;
  --mint: #dff1ec;
  --sand: #f7f1e7;
  --gold: #d39a38;
  --coral: #bc6159;
  --paper: #fbfcfa;
  --muted: #63737a;
}

body { font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--paper); }
h1, h2, h3 { font-family: "Source Serif 4", serif; letter-spacing: -.02em; }
h2 { margin-top: 2.6rem; }
a { color: var(--teal); }
.navbar { box-shadow: 0 3px 18px rgba(16, 47, 59, .14); }
.navbar-dark { background-color: var(--ocean) !important; }
.navbar-brand { font-family: "Source Serif 4", serif; font-weight: 700; }

.hero {
  padding: clamp(4.5rem, 9vw, 8rem) max(1.5rem, calc((100vw - 1120px) / 2));
  margin: -1rem calc(50% - 50vw) 3.5rem;
  color: white;
  text-align: left;
  background:
    radial-gradient(circle at 78% 22%, rgba(211,154,56,.30), transparent 23%),
    radial-gradient(circle at 92% 72%, rgba(72,181,164,.24), transparent 27%),
    linear-gradient(125deg, #0d3048 0%, #14546a 56%, #167d78 100%);
  position: relative;
  overflow: hidden;
}
.hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; bottom: -250px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.035), 0 0 0 104px rgba(255,255,255,.025); }
.hero h1 { max-width: 900px; margin: .45rem 0 1.2rem; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .98; font-weight: 700; }
.hero > p { max-width: 780px; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.hero .btn { margin: .5rem .45rem .5rem 0; }
.hero-kicker, .eyebrow, .lab-place, .file-tag { font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero-kicker { color: #b9e4d8; }
.hero-meta { margin-top: 2rem; color: #d9e7e9; }

.content-block { max-width: 1120px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.section-intro { max-width: 780px; margin-bottom: 2rem; }
.section-intro p, .lead-panel p { font-size: 1.08rem; line-height: 1.75; }
.lead-panel { padding: 1.8rem 2rem; margin: 1rem 0 2.5rem; background: linear-gradient(135deg, var(--mint), #eff8f5); border-left: 5px solid var(--teal); border-radius: 0 1rem 1rem 0; }
.lead-panel h2 { margin-top: 0; }

.signal-grid { display: grid; grid-template-columns: 1fr .58fr 1fr; gap: 1.2rem; align-items: stretch; margin: 2rem 0 3.5rem; }
.signal-card, .research-card, .download-card, .lab-card { padding: 1.6rem; border: 1px solid rgba(18,59,93,.12); border-radius: 1rem; background: white; box-shadow: 0 12px 36px rgba(16,47,59,.07); }
.signal-card { position: relative; overflow: hidden; }
.signal-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; }
.signal-card-methylation::before { background: var(--teal); }
.signal-card-siga::before { background: var(--gold); }
.signal-number { color: var(--muted); font-size: .75rem; letter-spacing: .16em; }
.signal-card h3 { font-size: 1.55rem; }
.signal-bridge { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; border-radius: 1rem; color: white; background: var(--ocean); text-align: center; font-size: .9rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 1.5rem 0 3rem; }
.metric { padding: 1.4rem; border-top: 3px solid var(--gold); background: var(--sand); }
.metric strong { display: block; font-family: "Source Serif 4", serif; font-size: 2.4rem; line-height: 1; color: var(--ocean); }

.video-band { margin: 2rem calc(50% - 50vw) 3rem; padding: 3.5rem 0; background: #e7f2ef; }
.video-band-featured { margin-top: -3.5rem; position: relative; z-index: 2; background: linear-gradient(135deg, #e7f2ef, #fff8eb); }
.video-band-featured .content-block { padding-top: 2rem; padding-bottom: 2rem; }
.video-band-featured h2 { margin-top: .45rem; }
.institution-band { display: grid; grid-template-columns: minmax(220px, .85fr) 2fr auto; gap: 1.5rem; align-items: center; margin: -1.4rem auto 3rem; max-width: 1120px; padding: 1.5rem 1.7rem; border-radius: 1rem; color: white; background: linear-gradient(120deg, var(--ocean), var(--teal)); box-shadow: 0 16px 40px rgba(16,47,59,.18); }
.institution-mark { overflow: hidden; padding: .75rem 1rem; border-radius: .75rem; background: white; box-shadow: 0 8px 24px rgba(5,24,35,.22); }
.institution-mark p { margin: 0; }
.inmubo-group-image { display: block; width: 100%; height: auto; margin: 0; object-fit: contain; }
.institution-copy h2 { margin: 0 0 .35rem; color: white; font-size: 1.45rem; }
.institution-copy p { margin: 0; color: #e2f2ef; font-size: .93rem; }
.institution-action { white-space: nowrap; }
.cancer-stats-band { margin: 0 calc(50% - 50vw) 3rem; padding: 3.5rem 0; background: linear-gradient(135deg, #eef7f4 0%, #fffaf0 100%); }
.cancer-stats-band .content-block { padding-bottom: 0; }
.cancer-stats-header { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 2rem; align-items: stretch; }
.cancer-stats-title h2 { margin: .4rem 0 .8rem; }
.cancer-stats-title p { max-width: 760px; font-size: 1.05rem; line-height: 1.7; }
.cancer-stat-highlight { display: grid; grid-template-columns: 1fr; align-content: center; padding: 1.5rem 1.7rem; border-radius: 1rem; color: white; background: linear-gradient(145deg, var(--ocean), var(--teal)); box-shadow: 0 14px 34px rgba(16,47,59,.16); }
.cancer-stat-highlight span { color: #f4c66e; font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.cancer-stat-highlight strong { margin-top: .55rem; font-family: "Source Serif 4", serif; font-size: 2rem; line-height: 1; }
.cancer-stat-highlight small { margin-top: .18rem; color: #e2f2ef; }
.cancer-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 2.5rem; }
.cancer-summary-item { padding: 1.2rem 1.4rem; border-left: 4px solid var(--gold); border-radius: .65rem; background: white; box-shadow: 0 8px 24px rgba(16,47,59,.07); color: var(--muted); }
.cancer-summary-item p { margin: 0; }
.cancer-summary-item strong { display: block; margin-bottom: .25rem; font-family: "Source Serif 4", serif; color: var(--ocean); font-size: 1.8rem; line-height: 1; }
.cancer-chart { margin: 1.2rem 0 .9rem; padding: 1.6rem; border-radius: 1rem; background: white; box-shadow: 0 12px 34px rgba(16,47,59,.08); }
.cancer-bar-row { display: grid; grid-template-columns: 7.5rem minmax(100px, 1fr) 4.7rem; gap: 1rem; align-items: center; margin: .85rem 0; }
.cancer-bar-label { font-weight: 600; }
.cancer-bar-track { height: 1.1rem; overflow: hidden; border-radius: 999px; background: #e2ecea; }
.cancer-bar { display: block; width: var(--bar-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ocean), var(--teal)); }
.cancer-bar-row-focus { color: var(--ocean); }
.cancer-bar-row-focus .cancer-bar-label::after { content: "Project focus"; display: block; color: var(--coral); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cancer-bar-row-focus .cancer-bar { background: linear-gradient(90deg, var(--gold), var(--coral)); }
.cancer-bar-row > strong { color: var(--ocean); text-align: right; }
.cancer-chart figcaption, .cancer-source { margin-top: 1.25rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.cancer-source { padding-left: 1rem; border-left: 3px solid var(--teal); }
.project-video { display: block; width: 100%; border-radius: 1rem; background: #071820; box-shadow: 0 18px 50px rgba(16,47,59,.22); }
.project-video-wide { max-width: 960px; margin: 1rem auto; }
.research-card { height: 100%; border-top: 4px solid var(--teal); }
.research-card h3 { margin-top: 0; color: var(--ocean); }
.post-link-card { overflow: hidden; padding: 0 0 1.4rem; }
.post-link-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 1.25rem; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.post-link-card h3, .post-link-card p { margin-left: 1.4rem; margin-right: 1.4rem; }
.post-link-card:hover img { transform: scale(1.04); }
.evidence-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin: 1.5rem 0 2.5rem; }
.evidence-card { padding: 1.6rem; border: 1px solid rgba(18,59,93,.12); border-top: 4px solid var(--gold); border-radius: 1rem; background: white; box-shadow: 0 12px 36px rgba(16,47,59,.07); }
.evidence-card h3 { margin-top: .45rem; color: var(--ocean); }
.evidence-type { color: var(--teal); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.science-visual {
  display: block;
  width: 100%;
  margin: 1.4rem auto 2.2rem;
  border-radius: 1.15rem;
  box-shadow: 0 18px 48px rgba(16,47,59,.18);
  transition: transform .45s ease, box-shadow .45s ease;
  animation: visual-breathe 7s ease-in-out infinite;
}
.science-visual:hover { transform: translateY(-5px) scale(1.008); box-shadow: 0 24px 58px rgba(16,47,59,.24); }
.science-visual-compact { max-width: 980px; }
.quarto-grid-item img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.quarto-grid-item:hover img { transform: scale(1.045); filter: saturate(1.08); }
@keyframes visual-breathe {
  0%, 100% { box-shadow: 0 18px 48px rgba(16,47,59,.17); }
  50% { box-shadow: 0 21px 54px rgba(22,125,120,.25); }
}

.emseq-animation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .7rem; align-items: stretch; margin: 2rem 0 2.5rem; }
.emseq-step { padding: 1.2rem; border: 1px solid rgba(18,59,93,.12); border-radius: 1rem; background: white; box-shadow: 0 10px 28px rgba(16,47,59,.08); animation: emseq-rise 6s ease-in-out infinite; }
.emseq-step-2 { animation-delay: .5s; }
.emseq-step-3 { animation-delay: 1s; }
.emseq-step-4 { animation-delay: 1.5s; }
.emseq-icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: .8rem; border-radius: 50%; background: linear-gradient(135deg, var(--ocean), var(--teal)); color: white; font-weight: 700; box-shadow: 0 0 0 0 rgba(22,125,120,.25); animation: molecule-pulse 3s ease-out infinite; }
.emseq-step-2 .emseq-icon { background: linear-gradient(135deg, var(--teal), #48b5a4); }
.emseq-step-3 .emseq-icon { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.emseq-step-4 .emseq-icon { background: linear-gradient(135deg, var(--coral), var(--ocean)); }
.emseq-arrow { display: grid; place-items: center; color: var(--teal); font-size: 1.8rem; font-weight: 700; animation: arrow-drift 1.8s ease-in-out infinite; }
@keyframes emseq-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes molecule-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,125,120,.28); } 70%, 100% { box-shadow: 0 0 0 12px rgba(22,125,120,0); } }
@keyframes arrow-drift { 0%, 100% { transform: translateX(-2px); opacity: .55; } 50% { transform: translateX(3px); opacity: 1; } }
.fragment-animation { padding: 1.5rem; margin: 2rem 0 2.5rem; border-radius: 1rem; background: linear-gradient(135deg, #0e354f, #176b74); color: white; overflow: hidden; box-shadow: 0 16px 38px rgba(16,47,59,.18); }
.fragment-track { position: relative; height: 150px; border-bottom: 1px solid rgba(255,255,255,.3); overflow: hidden; }
.fragment-bar { position: absolute; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #65d0bd, #f4c66e); box-shadow: 0 0 16px rgba(101,208,189,.45); animation: fragment-float 5s ease-in-out infinite; }
.fragment-short { width: 18%; left: 8%; top: 28px; }
.fragment-mono { width: 36%; left: 31%; top: 68px; animation-delay: .6s; }
.fragment-di { width: 62%; left: 20%; top: 112px; animation-delay: 1.2s; }
.nucleosome-peak { position: absolute; bottom: 0; width: 50px; border-radius: 50% 50% 0 0; background: rgba(244,198,110,.2); border: 2px solid rgba(244,198,110,.65); border-bottom: 0; animation: peak-glow 3s ease-in-out infinite; }
.peak-one { height: 45px; left: 23%; }
.peak-two { height: 78px; left: 49%; animation-delay: .5s; }
.peak-three { height: 58px; left: 73%; animation-delay: 1s; }
.fragment-caption { padding-top: 1rem; text-align: center; color: #d9eff0; font-size: .88rem; }
@keyframes fragment-float { 0%, 100% { transform: translateX(-5px); opacity: .72; } 50% { transform: translateX(12px); opacity: 1; } }
@keyframes peak-glow { 0%, 100% { box-shadow: 0 0 0 rgba(244,198,110,0); } 50% { box-shadow: 0 -10px 24px rgba(244,198,110,.3); } }
.progression-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .7rem; align-items: center; margin: 2rem 0; padding: 1.4rem; border-radius: 1rem; background: linear-gradient(135deg, #edf7f4, #fff8eb); }
.progression-node { min-height: 132px; padding: 1rem; border-radius: .9rem; background: white; border-top: 4px solid var(--teal); box-shadow: 0 9px 24px rgba(16,47,59,.08); animation: progression-focus 7s ease-in-out infinite; }
.progression-node:nth-of-type(3) { animation-delay: .7s; }
.progression-node:nth-of-type(5) { border-color: var(--gold); animation-delay: 1.4s; }
.progression-node-final { border-color: var(--coral); animation-delay: 2.1s; }
.progression-line { width: 34px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold)); position: relative; overflow: hidden; }
.progression-line::after { content: ""; position: absolute; width: 12px; height: 100%; background: white; opacity: .7; animation: timeline-pass 2s linear infinite; }
@keyframes progression-focus { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes timeline-pass { from { transform: translateX(-14px); } to { transform: translateX(40px); } }
.cpg-animation { display: grid; grid-template-columns: auto auto auto 1fr; gap: 1rem; align-items: center; margin: 2rem 0; padding: 1.5rem; border-radius: 1rem; color: white; background: linear-gradient(135deg, var(--ocean), #176b74); box-shadow: 0 16px 38px rgba(16,47,59,.18); }
.cpg-sequence { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.15rem, 2.4vw, 1.65rem); letter-spacing: .05em; }
.cpg-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: #3c2d16; background: var(--gold); font-weight: 700; animation: methyl-drop 2.7s ease-in-out infinite; }
.cpg-arrow { color: #b9e4d8; font-size: 2rem; animation: arrow-drift 1.8s ease-in-out infinite; }
.cpg-output { display: flex; gap: 1rem; align-items: center; color: #e5f4f2; }
.cpg-coil { width: 64px; height: 36px; border: 4px solid #65d0bd; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(244,198,110,.35); animation: chromatin-tighten 3.2s ease-in-out infinite; }
@keyframes methyl-drop { 0%, 100% { transform: translateY(-7px) scale(.92); } 50% { transform: translateY(5px) scale(1); } }
@keyframes chromatin-tighten { 0%, 100% { transform: scaleX(1.14); opacity: .72; } 50% { transform: scaleX(.82); opacity: 1; } }

.software-timeline { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; margin: 2rem 0 2.7rem; }
.software-era { position: relative; min-height: 145px; padding: 1.15rem; border-radius: 1rem; color: white; background: linear-gradient(145deg, var(--ocean), #176b74); box-shadow: 0 12px 30px rgba(16,47,59,.14); animation: software-wave 7s ease-in-out infinite; }
.software-era:nth-child(2) { animation-delay: .35s; }
.software-era:nth-child(3) { animation-delay: .7s; }
.software-era:nth-child(4) { animation-delay: 1.05s; }
.software-era:nth-child(5) { animation-delay: 1.4s; background: linear-gradient(145deg, #176b74, #9a5a4c); }
.software-era strong { display: block; margin-bottom: .65rem; color: #f4c66e; }
.software-era code { color: white; background: rgba(255,255,255,.12); }
.software-era:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -.72rem; top: 48%; color: var(--gold); font-size: 1.25rem; font-weight: 700; }
@keyframes software-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.count-demo { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 1rem; align-items: stretch; margin: 2rem 0; }
.count-vial, .count-message { display: grid; place-items: center; min-height: 120px; padding: 1.2rem; border-radius: 1rem; text-align: center; }
.count-vial { border: 2px solid var(--teal); background: #edf7f4; animation: count-pulse 4s ease-in-out infinite; }
.count-vial:nth-child(2) { animation-delay: .7s; }
.count-vial strong { display: block; color: var(--ocean); font-size: 1.4rem; }
.count-message { color: white; background: linear-gradient(135deg, var(--ocean), var(--teal)); font-weight: 700; }
@keyframes count-pulse { 0%, 100% { box-shadow: 0 8px 22px rgba(16,47,59,.07); } 50% { box-shadow: 0 12px 30px rgba(22,125,120,.23); } }
.pathway-zoom { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; align-items: center; margin: 2rem 0 2.5rem; }
.pathway-level { position: relative; min-height: 125px; padding: 1.15rem; border-radius: 1rem; border: 1px solid rgba(18,59,93,.12); border-top: 4px solid var(--teal); background: white; box-shadow: 0 10px 27px rgba(16,47,59,.08); animation: pathway-focus 6s ease-in-out infinite; }
.pathway-level:nth-child(2) { animation-delay: .45s; }
.pathway-level:nth-child(3) { animation-delay: .9s; border-top-color: var(--gold); }
.pathway-level:nth-child(4) { animation-delay: 1.35s; border-top-color: var(--coral); }
.pathway-level:not(:last-child)::after { content: "›"; position: absolute; right: -.72rem; top: 36%; z-index: 2; color: var(--gold); font-size: 2rem; }
@keyframes pathway-focus { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.siga-story { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin: 2rem 0 2.5rem; }
.siga-story-step { position: relative; min-height: 145px; padding: 1.15rem; border-radius: 1rem; background: linear-gradient(145deg, #fff8eb, white); border: 1px solid rgba(18,59,93,.12); border-top: 4px solid var(--gold); box-shadow: 0 9px 25px rgba(16,47,59,.08); animation: siga-step 7s ease-in-out infinite; }
.siga-story-step:nth-child(2) { animation-delay: .45s; }
.siga-story-step:nth-child(3) { animation-delay: .9s; border-top-color: var(--teal); }
.siga-story-step:nth-child(4) { animation-delay: 1.35s; border-top-color: var(--coral); }
.siga-story-step:not(:last-child)::after { content: "→"; position: absolute; right: -.72rem; top: 42%; color: var(--teal); font-weight: 700; z-index: 2; }
@keyframes siga-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.two-signal-animation { position: relative; min-height: 300px; margin: 2rem 0 2.5rem; border-radius: 1.2rem; overflow: hidden; color: white; background: radial-gradient(circle at center, #176b74, var(--ocean) 62%); box-shadow: 0 16px 40px rgba(16,47,59,.18); }
.signal-center, .signal-orbit { position: absolute; display: grid; place-items: center; padding: 1rem; border-radius: 50%; text-align: center; }
.signal-center { width: 155px; height: 155px; left: calc(50% - 77px); top: 72px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.35); }
.signal-orbit { width: 132px; height: 132px; top: 84px; color: var(--ink); background: #fff8eb; box-shadow: 0 0 0 10px rgba(255,255,255,.06); animation: signal-orbit 5s ease-in-out infinite; }
.signal-orbit-dna { left: 8%; }
.signal-orbit-siga { right: 8%; animation-delay: .8s; background: var(--mint); }
@keyframes signal-orbit { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(255,255,255,.03); } }
.model-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0 2.5rem; }
.model-panel { padding: 1.6rem; border-radius: 1rem; color: white; background: linear-gradient(145deg, var(--ocean), #175d6c); box-shadow: 0 14px 34px rgba(16,47,59,.15); border-top: 5px solid var(--gold); }
.model-panel-dss { background: linear-gradient(145deg, #176b74, var(--teal)); border-top-color: #f4c66e; }
.model-panel h3 { margin-top: 0; color: white; }
.model-panel p { margin-bottom: .65rem; }
.sequence-compare { display: grid; gap: 1rem; margin: 1.7rem 0 2.4rem; }
.sequence-row { padding: 1.4rem 1.6rem; border-radius: 1rem; border-left: 6px solid var(--teal); background: #edf7f4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.95rem, 2vw, 1.3rem); overflow-wrap: anywhere; }
.sequence-row-high { border-left-color: var(--gold); background: #fff8eb; }
.sequence-label { margin-bottom: .75rem; color: var(--ocean); font-family: "DM Sans", sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .13em; }
.sequence-row p:last-child { margin: .8rem 0 0; color: var(--muted); font-family: "DM Sans", sans-serif; font-size: .88rem; }
.cpg-site { display: inline-block; padding: .05em .2em; border-radius: .25rem; color: white; background: var(--teal); }
.methylated-site { color: #3c2d16; background: var(--gold); box-shadow: 0 0 0 4px rgba(211,154,56,.14); }
.gene-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 2.5rem; }
.gene-switch > div { padding: 1.5rem; border-radius: 1rem; box-shadow: 0 10px 28px rgba(16,47,59,.09); }
.gene-switch-open { border-top: 5px solid var(--teal); background: #edf7f4; }
.gene-switch-closed { border-top: 5px solid var(--gold); background: #fff8eb; }

/* Histone scale explorer */
.scale-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0 2.2rem; }
.scale-metric { padding: 1.3rem; border-radius: 1rem; border: 1px solid rgba(18,59,93,.1); background: linear-gradient(145deg, white, #edf7f4); box-shadow: 0 10px 28px rgba(16,47,59,.08); }
.scale-metric strong { display: block; margin-bottom: .35rem; color: var(--ocean); font-family: "Source Serif 4", serif; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1; }
.scale-metric p { margin: 0; color: var(--muted); font-size: .88rem; }
.scale-explorer { margin: 1.2rem 0 2.7rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 1.2rem; color: white; background: radial-gradient(circle at 88% 12%, rgba(244,198,110,.2), transparent 28%), linear-gradient(135deg, #102f3b, #176b74); box-shadow: 0 18px 46px rgba(16,47,59,.2); }
.scale-explorer label { display: inline-block; margin-right: .8rem; color: #dff3ef; }
.scale-explorer select { min-width: 14rem; padding: .65rem 2.4rem .65rem .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: .65rem; color: var(--ocean); background: white; font-weight: 650; cursor: pointer; }
.scale-output { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem; }
.scale-output > div { min-height: 132px; padding: 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: .85rem; background: rgba(255,255,255,.09); transition: transform .3s ease, background .3s ease; }
.scale-output > div:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); }
.scale-output span, .scale-output small { display: block; }
.scale-output span { color: #b9e4d8; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.scale-output strong { display: block; margin: .45rem 0 .35rem; color: #f4c66e; font-family: "Source Serif 4", serif; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.1; }
.scale-output small { color: #e3f0ee; line-height: 1.35; }
.annotated-science-figure { position: relative; margin: 1.4rem auto 1rem; overflow: hidden; border-radius: 1.15rem; box-shadow: 0 18px 48px rgba(16,47,59,.18); }
.annotated-science-figure img { display: block; width: 100%; }
.figure-pin { position: absolute; display: grid; place-items: center; width: clamp(1.75rem, 3vw, 2.5rem); height: clamp(1.75rem, 3vw, 2.5rem); border: 2px solid white; border-radius: 50%; color: #253242; background: var(--gold); font-weight: 800; box-shadow: 0 0 0 7px rgba(244,198,110,.18), 0 5px 18px rgba(0,0,0,.3); animation: hotspot-pulse 2.8s ease-in-out infinite; }
.pin-1 { left: 12%; top: 57%; }
.pin-2 { left: 33%; top: 63%; animation-delay: .25s; }
.pin-3 { left: 53%; top: 42%; animation-delay: .5s; }
.pin-4 { left: 72%; top: 39%; animation-delay: .75s; }
.pin-5 { left: 91%; top: 35%; animation-delay: 1s; }
.zoom-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; margin: 0 0 2.5rem; }
.zoom-item { padding: .9rem; border-top: 3px solid var(--gold); border-radius: .65rem; background: #fffaf0; font-size: .82rem; line-height: 1.45; }
.zoom-item p { margin: 0; }
.zoom-item strong { color: var(--ocean); }
@keyframes hotspot-pulse { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(244,198,110,0), 0 6px 22px rgba(0,0,0,.32); } }
.packing-animation { position: relative; min-height: 270px; margin: 2rem 0 2.7rem; overflow: hidden; border-radius: 1.2rem; background: radial-gradient(circle at center, #1e7880, #102f3b 62%); box-shadow: 0 18px 44px rgba(16,47,59,.2); }
.packing-core { position: absolute; left: calc(50% - 74px); top: 45px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 148px; height: 116px; transform: rotate(-8deg); animation: core-float 4s ease-in-out infinite; }
.packing-core span { border-radius: 45%; background: linear-gradient(145deg, #70d1c0, #174f68); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 12px rgba(255,255,255,.18); }
.packing-dna { position: absolute; left: 9%; right: 9%; top: 94px; height: 52px; border-top: 6px solid var(--gold); border-bottom: 6px solid #66d1bd; border-radius: 50%; transform: rotate(-4deg); animation: dna-wrap 5s ease-in-out infinite; }
.packing-dna::before, .packing-dna::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 19px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.65) 18px 21px); }
.packing-caption { position: absolute; left: 0; right: 0; bottom: 24px; color: #e5f4f2; text-align: center; font-weight: 700; letter-spacing: .04em; }
@keyframes core-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes dna-wrap { 0%, 100% { transform: rotate(-4deg) scaleX(.96); } 50% { transform: rotate(4deg) scaleX(1.04); } }
.human-dna-orbit { position: relative; min-height: 360px; margin: 2rem 0 2.7rem; overflow: hidden; border-radius: 1.2rem; color: white; background: radial-gradient(circle at 14% 50%, #f4c66e 0 2%, #9f6438 2.4%, transparent 8%), radial-gradient(circle at center, #174f68, #071820 70%); box-shadow: 0 18px 48px rgba(16,47,59,.25); }
.orbit-sun, .orbit-earth, .orbit-neptune { position: absolute; display: grid; place-items: center; border-radius: 50%; z-index: 2; font-size: .7rem; font-weight: 700; }
.orbit-sun { left: 10%; top: 42%; width: 58px; height: 58px; color: #382713; background: var(--gold); box-shadow: 0 0 40px rgba(244,198,110,.7); }
.orbit-earth { left: 36%; top: 48%; width: 27px; height: 27px; color: white; background: linear-gradient(135deg, #56b8cc, #26658e); animation: planet-float 3.2s ease-in-out infinite; }
.orbit-neptune { right: 9%; top: 43%; width: 42px; height: 42px; color: white; background: linear-gradient(135deg, #318ac0, #283a8b); animation: planet-float 4s ease-in-out infinite .5s; }
.orbit-path { position: absolute; left: 14%; right: 11%; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 22px); opacity: .8; animation: orbit-flow 4s linear infinite; }
.orbit-copy { position: absolute; left: 8%; right: 8%; bottom: 34px; text-align: center; }
.orbit-copy p { margin: .25rem 0; }
.orbit-copy strong { color: #f4c66e; font-family: "Source Serif 4", serif; font-size: clamp(1.35rem, 3vw, 2.1rem); }
@keyframes planet-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@keyframes orbit-flow { from { background-position: 0 0; } to { background-position: 110px 0; } }

.download-grid, .lab-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin: 1.5rem 0 2.5rem; }
.role-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; margin: 1.5rem 0 2.5rem; }
.role-card { padding: 2rem; border-radius: 1rem; color: white; box-shadow: 0 16px 40px rgba(16,47,59,.15); }
.role-card h2 { margin-top: .5rem; color: white; }
.role-card .team-portrait { width:100%; max-height:245px; object-fit:cover; object-position:center; margin:.7rem 0 .5rem; border-radius:.75rem; border:2px solid rgba(255,255,255,.35); }
.role-card small, .role-card small a { color:#f6e5bd; }
.role-ale { background: linear-gradient(145deg, #123b5d, #176477); }
.role-sandra { background: linear-gradient(145deg, #7d4939, #b66e50); }
.role-label { color: #f6d78f; font-size: .76rem; font-weight: 700; letter-spacing: .14em; }
.download-card { border-top: 4px solid var(--gold); }
.file-tag, .lab-place { color: var(--teal); }
.lab-card { border-left: 4px solid var(--teal); }
.lab-card-featured { border: 2px solid var(--gold); border-left-width: 7px; background: linear-gradient(135deg, #fffaf0, white); }
.lab-card h3 { margin-top: .45rem; font-size: 1.25rem; }
.claims-ladder { padding: 1.6rem 2rem; background: linear-gradient(90deg, var(--ocean), #175d6c); color: white; border-radius: 1rem; columns: 2; column-gap: 3rem; }
.claims-ladder strong { color: #f4c66e; }
.gene-mechanism { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; margin:1.5rem 0 2rem; padding:1.4rem; border-radius:1rem; background:linear-gradient(135deg,#eef8f6,#fff7e8); }
.gene-state { min-height:130px; padding:1.2rem; border-radius:.8rem; background:white; box-shadow:0 8px 24px rgba(16,47,59,.09); }
.gene-state strong { display:block; color:var(--ocean); margin-bottom:.45rem; }
.gene-state-off { border:2px solid #b8634f; animation:gene-dim 3.2s ease-in-out infinite; }
.gene-flow-arrow { color:#b8634f; font-size:2rem; font-weight:800; animation:gene-flow 2s ease-in-out infinite; }
@keyframes gene-dim { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.67; transform:scale(.98); } }
@keyframes gene-flow { 0%,100% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }

table { border-radius: .6rem; overflow: hidden; box-shadow: 0 8px 24px rgba(16,47,59,.06); }
thead { background: var(--ocean); color: white; }
.callout { border-radius: .7rem; }
/* In dark mode Quarto swaps in darkly, which paints callout headers a dark tint,
   but `body` above still pins the text to --ink — dark title on a dark bar. Quarto
   marks dark mode with `body.quarto-dark`, so restore a light title there. */
body.quarto-dark .callout.callout-style-default > .callout-header,
body.quarto-dark .callout.callout-style-default > .callout-header a { color: var(--paper); }
.metadata { color: var(--muted); font-size: .92rem; }

@media (max-width: 900px) {
  .signal-grid { grid-template-columns: 1fr; }
  .signal-bridge { min-height: 130px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .emseq-animation { grid-template-columns: 1fr; }
  .emseq-arrow { transform: rotate(90deg); min-height: 1.2rem; }
  .progression-path { grid-template-columns: 1fr; }
  .progression-line { width: 3px; height: 26px; margin: 0 auto; }
  .cpg-animation { grid-template-columns: 1fr; text-align: center; }
  .cpg-mark, .cpg-coil { margin: 0 auto; }
  .cpg-arrow { transform: rotate(90deg); }
  .software-timeline { grid-template-columns: 1fr; }
  .software-era { min-height: auto; }
  .software-era:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -.85rem; }
  .count-demo { grid-template-columns: 1fr; }
  .pathway-zoom { grid-template-columns: 1fr; }
  .pathway-level { min-height: auto; }
  .pathway-level:not(:last-child)::after { content: "⌄"; right: 49%; top: auto; bottom: -.9rem; }
  .siga-story { grid-template-columns: 1fr; }
  .siga-story-step { min-height: auto; }
  .siga-story-step:not(:last-child)::after { content: "↓"; right: 49%; top: auto; bottom: -.85rem; }
  .two-signal-animation { min-height: 500px; }
  .signal-orbit { top: auto; left: calc(50% - 66px); right: auto; }
  .signal-orbit-dna { top: 25px; }
  .signal-center { top: 175px; }
  .signal-orbit-siga { top: 345px; }
  .model-compare { grid-template-columns: 1fr; }
  .gene-switch { grid-template-columns: 1fr; }
  .gene-mechanism { grid-template-columns:1fr; }
  .gene-flow-arrow { transform:rotate(90deg); text-align:center; }
  .scale-metrics, .scale-output { grid-template-columns: repeat(2, 1fr); }
  .zoom-legend { grid-template-columns: repeat(2, 1fr); }
  .institution-band { grid-template-columns: 1fr; margin-left: 1.2rem; margin-right: 1.2rem; }
  .institution-action { white-space: normal; }
  .cancer-stats-header { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scale-metrics, .scale-output, .zoom-legend { grid-template-columns: 1fr; }
  .scale-explorer select { display: block; width: 100%; min-width: 0; margin-top: .6rem; }
  .hero { padding-top: 4rem; padding-bottom: 4rem; }
  .download-grid, .lab-grid, .metric-grid, .role-grid, .evidence-grid, .cancer-summary-grid { grid-template-columns: 1fr; }
  .cancer-bar-row { grid-template-columns: 6.4rem minmax(60px, 1fr) 4.2rem; gap: .55rem; font-size: .86rem; }
  .cancer-chart { padding: 1.1rem; }
  .claims-ladder { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .science-visual, .quarto-grid-item img, .emseq-step, .emseq-icon, .emseq-arrow, .fragment-bar, .nucleosome-peak, .progression-node, .progression-line::after, .cpg-mark, .cpg-arrow, .cpg-coil, .software-era, .count-vial, .pathway-level, .siga-story-step, .signal-orbit, .figure-pin, .packing-core, .packing-dna, .orbit-earth, .orbit-neptune, .orbit-path, .gene-state-off, .gene-flow-arrow { animation: none; transition: none; }
}