/* ABOUTME: Styles the PhenoBench release as a clinical measurement atlas with dense, inspectable data. */
/* ABOUTME: The measurement-to-evaluation route is the page's visual and conceptual signature. */
:root { --ink:#17243d; --muted:#56647a; --line:#cfd8e6; --paper:#f7f9fc; --panel:#fff; --blue:#2458c6; --blue-deep:#173a88; --cyan:#dff4f5; --coral:#e46c58; --warn:#9b6100; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:16px/1.58 "Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
a { color:var(--blue-deep); text-underline-offset:.18em; }
a:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
.site-header { height:62px; padding:0 max(1.25rem,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(247,249,252,.95); position:sticky; top:0; z-index:2; backdrop-filter:blur(8px); }
.wordmark { color:var(--ink); text-decoration:none; font:700 1.05rem/1 "Avenir Next",sans-serif; letter-spacing:-.02em; }
nav { display:flex; gap:1.1rem; }
nav a { color:var(--muted); font-size:.84rem; font-weight:650; text-decoration:none; }
main { max-width:1120px; margin:0 auto; padding:0 1.25rem 6rem; }
section { padding:5rem 0; border-bottom:1px solid var(--line); }
section { scroll-margin-top:62px; }
.hero { min-height:620px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 .8rem; color:var(--blue); font:700 .74rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
h1,h2 { font-family:Charter,"Iowan Old Style",Georgia,serif; letter-spacing:-.035em; }
h1 { max-width:900px; margin:0; font-size:clamp(3.2rem,8vw,6.8rem); font-weight:500; line-height:.95; }
h2 { margin:0 0 .8rem; max-width:850px; font-size:clamp(2rem,4vw,3.5rem); font-weight:500; line-height:1.02; }
p { max-width:760px; }
.lede { margin:1.6rem 0 2rem; max-width:820px; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); }
.route-line { display:grid; grid-template-columns:repeat(7,max-content); align-items:center; gap:.7rem; margin:1rem 0 2.2rem; color:var(--blue-deep); font:650 .77rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.04em; }
.route-line span { padding:.55rem .75rem; border:1px solid #a8bce7; background:var(--panel); }
.route-line b { color:var(--coral); font-size:1.2rem; }
.actions { display:flex; gap:.8rem; flex-wrap:wrap; }
.button { padding:.72rem 1rem; border:1px solid var(--blue); text-decoration:none; font-size:.9rem; font-weight:700; }
.button.primary { background:var(--blue); color:#fff; }
.principle { margin:0 calc(50% - 50vw); padding:1.3rem max(1.25rem,calc((100vw - 1120px)/2)); border:0; background:var(--cyan); color:#1d5057; font-family:Charter,Georgia,serif; font-size:1.12rem; }
.task-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:2rem 0; padding:1px; list-style:none; background:var(--line); }
.task-card { min-height:128px; padding:1rem; display:flex; flex-direction:column; background:var(--panel); }
.task-card strong { font-family:Charter,Georgia,serif; font-size:1.12rem; font-weight:600; }
.task-card span { margin-top:.25rem; color:var(--blue-deep); font-size:.78rem; text-transform:capitalize; }
.task-card small { margin-top:auto; padding-top:.8rem; color:var(--muted); font:.72rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.data-link,.caveat { color:var(--muted); font-size:.84rem; }
.evidence-note { max-width:820px; margin:1.8rem 0; padding:1rem 1.2rem; border-left:4px solid var(--coral); background:var(--panel); }
.evidence-note h3 { margin:.1rem 0 .4rem; font-family:Charter,Georgia,serif; font-size:1.2rem; }
.evidence-note p { margin:.45rem 0; }
.llm-chart { margin:2.25rem 0 1.4rem; }
.llm-chart figcaption { margin-bottom:.8rem; color:var(--muted); font:.72rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; letter-spacing:.05em; }
.llm-chart-axis,.llm-chart-row { display:grid; grid-template-columns:4.5rem minmax(320px,1fr) 13rem; gap:1rem; align-items:center; }
.llm-chart-axis { margin-bottom:.35rem; color:var(--muted); font:.65rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
.llm-axis-scale { display:flex; justify-content:space-between; }
.llm-axis-scale i { font-style:normal; }
.llm-axis-scale i:last-child { transform:none; }
.llm-chart-row { min-height:2.65rem; border-top:1px solid #e5eaf2; }
.llm-chart-row:last-child { border-bottom:1px solid #e5eaf2; }
.llm-score { color:var(--blue-deep); font-variant-numeric:tabular-nums; text-align:right; }
.llm-model { font:650 .82rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.llm-plot { height:1.9rem; position:relative; border-right:1px solid var(--line); border-left:1px solid var(--line); background-image:linear-gradient(to right,var(--line) 1px,transparent 1px); background-size:25% 100%; }
.llm-bar { position:absolute; left:0; top:.48rem; width:var(--score); height:.94rem; background:var(--blue); }
.llm-ci { position:absolute; z-index:1; left:var(--ci-low); right:calc(100% - var(--ci-high)); top:.92rem; border-top:2px solid var(--coral); }
.llm-ci::before,.llm-ci::after { content:""; position:absolute; top:-.28rem; height:.48rem; border-left:2px solid var(--coral); }
.llm-ci::before { left:0; }.llm-ci::after { right:0; }
table { width:100%; margin:2rem 0 1rem; border-collapse:collapse; background:var(--panel); font-size:.9rem; }
th,td { padding:.72rem .75rem; border-bottom:1px solid var(--line); text-align:left; }
th { color:var(--muted); font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; text-transform:uppercase; }
th.num,td.num { font-variant-numeric:tabular-nums; text-align:right; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:1px; counter-reset:steps; list-style:none; background:var(--line); }
.steps li { min-height:140px; padding:3rem 1rem 1rem; position:relative; background:var(--panel); }
.steps li::before { counter-increment:steps; content:counter(steps); position:absolute; top:.8rem; color:var(--coral); font:700 .8rem/1 ui-monospace,monospace; }
.watermark { position:sticky; top:0; z-index:3; padding:.5rem 1rem; background:var(--warn); color:#fff; font-weight:650; text-align:center; }
.track { margin:1.25rem 0; }
.track h3 { font:650 1rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.tag { display:inline-block; padding:.05rem .4rem; border:1px solid var(--line); color:var(--muted); font-size:.75rem; }
code,pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
pre { padding:.75rem 1rem; overflow-x:auto; background:#eef2f8; }
dl.prov { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; font-size:.86rem; }
dl.prov dt { color:var(--muted); }
dl.prov dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
@media (max-width:760px) { .site-header nav{display:none}.hero{min-height:540px}.route-line{grid-template-columns:1fr;align-items:stretch;text-align:center}.route-line b{transform:rotate(90deg)}.task-grid,.steps{grid-template-columns:1fr}table{display:block;overflow-x:auto;white-space:nowrap}.llm-chart-axis{grid-template-columns:3.75rem minmax(0,1fr);gap:.75rem}.llm-chart-axis>span:last-child{display:none}.llm-chart-row{grid-template-columns:3.75rem minmax(0,1fr);gap:.75rem;padding:.55rem 0}.llm-model{grid-column:2;grid-row:1}.llm-score{grid-column:1;grid-row:2}.llm-plot{grid-column:2;grid-row:2} }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }