/* Technology and research articles. All layout is scoped to these two pages. */
.sci-page {
  --sci-text: #35433b;
  --sci-muted: #4f6053;
  --sci-rule: #cbd3c6;
  --sci-quiet: #ebeee6;
  --sci-light: #e4e8dc;
  color: var(--ink);
}
.sci-page p { color: var(--sci-text); }
.sci-page .sci-label {
  color: var(--sci-muted);
  font: 600 .69rem/1.5 var(--mono);
  letter-spacing: .065em;
  text-transform: uppercase;
}
.sci-page a:focus-visible { outline: 3px solid #a88810; outline-offset: 4px; }
.sci-hero { background: var(--dark); color: var(--paper); }
.sci-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  padding-block: clamp(4rem, 6.5vw, 6.75rem);
}
.sci-hero h1 { max-width: 13ch; font-size: clamp(3rem, 5.6vw, 5rem); line-height: 1.02; text-wrap: balance; }
.sci-hero .sci-label { color: #c3d1ba; }
.sci-hero h1, .sci-hero h2 { color: var(--paper); }
.sci-hero h1 { margin-top: 1.1rem; }
.sci-hero .sci-lead { color: #c1cbc1; font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.72; max-width: 53ch; margin-top: 1.4rem; }
.sci-actions { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; margin-top: 1.55rem; }
.sci-page .sci-link, .sci-network a, .sci-references a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  overflow-wrap: break-word;
}
.sci-page .sci-link { display: inline-block; color: #344e36; font-size: .87rem; line-height: 1.6; font-weight: 600; }
.sci-page .sci-link:hover, .sci-network a:hover, .sci-references a:hover { color: #775d05; }
.sci-hero .sci-link { color: #edf0e5; }
.sci-hero .sci-link:hover { color: var(--yellow); }
.sci-hero .button { color: var(--ink); }
.sci-hero-note, .sci-estimate { min-width: 0; border-left: 1px solid #61705e; padding-left: clamp(1.5rem, 3.5vw, 3.45rem); }
.sci-hero-note h2, .sci-estimate h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.17; letter-spacing: -.035em; margin-top: .8rem; max-width: 24ch; }
.sci-case-facts { margin: 1.35rem 0 1.2rem; }
.sci-case-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .54rem 0; border-top: 1px solid #465549; }
.sci-case-facts dt, .sci-case-facts dd { margin: 0; font-size: .83rem; }
.sci-case-facts dt { color: #c1cbc1; }
.sci-estimate figcaption p, .sci-estimate .sci-estimate-context { color: #c1cbc1; font-size: .81rem; line-height: 1.65; margin-top: .75rem; }
.sci-estimate .sci-estimate-key { color: #f0f2e8; font-size: .92rem; line-height: 1.65; }
.sci-estimate-key b { font: 600 1.28rem/1.3 var(--mono); color: var(--yellow); }
.sci-estimate-key span { color: #d8e1d4; }
.sci-estimate .sci-link { margin-top: .8rem; }
.sci-interval { margin: 1.5rem .2rem 1.2rem; }
.sci-axis { position: relative; height: 1.45rem; border-bottom: 1px solid #819182; background: repeating-linear-gradient(to right, #73866d 0 1px, transparent 1px 25%); border-right: 1px solid #73866d; }
.sci-estimate-range { position: absolute; top: 48%; left: 39.913%; width: 21.805%; height: 3px; background: var(--yellow); }
.sci-estimate-range::before, .sci-estimate-range::after { content: ''; position: absolute; top: -4px; height: 11px; border-left: 2px solid var(--yellow); }
.sci-estimate-range::before { left: 0; }
.sci-estimate-range::after { right: 0; }
.sci-estimate-point { position: absolute; left: 49.632%; top: calc(48% + 1px); transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); }
.sci-ticks { position: relative; height: 1rem; margin-top: .38rem; color: #c9d3c7; font: .69rem/1.4 var(--mono); }
.sci-ticks span { position: absolute; }
.sci-ticks span:first-child { left: 0; }
.sci-ticks span:nth-child(2) { left: 25%; transform: translateX(-50%); }
.sci-ticks span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.sci-ticks span:nth-child(4) { left: 75%; transform: translateX(-50%); }
.sci-ticks span:last-child { right: 0; }
.sci-reading { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; padding-block: clamp(3.5rem, 6vw, 6rem); }
.sci-index { position: sticky; top: 7rem; }
.sci-index .sci-label { padding-bottom: .8rem; }
.sci-index ul { list-style: none; margin: 0; padding: 0; }
.sci-index li { border-top: 1px solid var(--sci-rule); }
.sci-index li:last-child { border-bottom: 1px solid var(--sci-rule); }
.sci-index a { display: block; padding: .72rem 0; font-size: .85rem; line-height: 1.5; color: #384c3d; }
.sci-index a:hover { text-decoration: underline; text-underline-offset: .2em; }
.sci-chapters { min-width: 0; max-width: 55rem; }
.sci-section, .sci-comparison, .sci-project [id], .sci-references [id] { scroll-margin-top: 6.5rem; }
.sci-section + .sci-section { margin-top: clamp(3.3rem, 6vw, 5.5rem); border-top: 1px solid var(--sci-rule); padding-top: clamp(2.4rem, 4.5vw, 4rem); }
.sci-section h2 { max-width: 25ch; font-size: clamp(2rem, 3.55vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.sci-section h3 { font-size: 1.34rem; line-height: 1.25; letter-spacing: -.025em; }
.sci-section > .sci-label { margin-bottom: .8rem; }
.sci-section > p { max-width: 70ch; font-size: .98rem; line-height: 1.8; margin-top: 1.25rem; }
.sci-section > .sci-intro { font-size: clamp(1.04rem, 1.55vw, 1.19rem); line-height: 1.72; }
.sci-section > .sci-link { margin-top: 1.15rem; }
.sci-method-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 2rem 0 2.6rem; padding: 0; }
.sci-method-path li { border-top: 2px solid #98a68e; padding-top: .95rem; }
.sci-method-path li:nth-child(2) { border-top-color: #98832e; }
.sci-method-path p, .sci-roles p, .sci-record p, .sci-context p, .sci-person p { font-size: .93rem; line-height: 1.75; margin-top: .68rem; }
.sci-comparison { margin: 0; border: 1px solid var(--sci-rule); padding: clamp(1.2rem, 3vw, 2.2rem); background: #fcfcf7; }
.sci-comparison figcaption h3 { margin-top: .5rem; font-size: clamp(1.48rem, 2.35vw, 1.9rem); }
.sci-comparison figcaption p { max-width: 59ch; margin-top: .7rem; font-size: .9rem; line-height: 1.65; }
.sci-comparison table { width: 100%; margin: 1.15rem 0 .65rem; border-collapse: collapse; color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }
.sci-comparison th, .sci-comparison td { padding: .72rem .4rem; border-bottom: 1px solid var(--sci-rule); text-align: right; }
.sci-comparison th:first-child { padding-left: 0; text-align: left; }
.sci-comparison th { font-weight: 600; }
.sci-comparison thead th { color: var(--sci-muted); vertical-align: bottom; font: 500 .72rem/1.5 var(--mono); }
.sci-comparison thead span { display: block; font-size: .68rem; }
.sci-comparison tbody th span { font-weight: 400; }
.sci-comparison .sci-table-note { font-size: .8rem; line-height: 1.6; color: var(--sci-muted); }
.sci-comparison .sci-interpretation { margin-top: 1.2rem; padding-left: 1rem; border-left: 2px solid #a28b33; font-size: .95rem; line-height: 1.7; }
.sci-roles, .sci-record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.65rem; }
.sci-roles article, .sci-record > div { border-top: 1px solid var(--sci-rule); padding-top: 1.2rem; }
.sci-record .sci-link, .sci-context .sci-link { margin-top: .85rem; }
.sci-context { margin-top: 1.9rem; padding: clamp(1.2rem, 2.8vw, 1.8rem); background: var(--sci-quiet); border-left: 2px solid #91a085; }
.sci-project, .sci-network, .sci-references { margin: 1.65rem 0 0; padding: 0; }
.sci-project > div, .sci-network > div { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(0, 1.7fr); gap: 1.2rem; align-items: start; border-top: 1px solid var(--sci-rule); padding: .95rem 0; }
.sci-project div:last-child, .sci-network div:last-child { border-bottom: 1px solid var(--sci-rule); }
.sci-project dt, .sci-network dt { font-weight: 600; line-height: 1.5; font-size: .92rem; }
.sci-project dd, .sci-network dd { margin: 0; color: var(--sci-text); font-size: .93rem; line-height: 1.7; }
.sci-network dd a { display: inline-block; color: #344e36; }
.sci-network dt img { display: block; width: auto; height: auto; max-width: 7.2rem; max-height: 2.05rem; margin-bottom: .65rem; }
.sci-funding-logo { max-width: min(17rem, 100%); height: auto; margin: 1.25rem 0; background: white; padding: .55rem .65rem; }
.sci-person { margin-top: 1.6rem; }
.sci-person + .sci-person { border-top: 1px solid var(--sci-rule); padding-top: 1.5rem; }
.sci-person h3 span { display: block; color: var(--sci-muted); font: .72rem/1.7 var(--mono); margin-top: .3rem; }
.sci-references { list-style: none; }
.sci-references li { border-top: 1px solid var(--sci-rule); padding: 1rem 0; }
.sci-references li:last-child { border-bottom: 1px solid var(--sci-rule); }
.sci-references a { font-size: 1.01rem; font-weight: 600; line-height: 1.55; color: #304b35; }
.sci-references li p { font-size: .88rem; line-height: 1.7; margin-top: .3rem; }
@media (max-width: 900px) {
  .sci-hero-layout { gap: 2.2rem; }
  .sci-reading { grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr); gap: 2.2rem; }
  .sci-method-path { grid-template-columns: 1fr; gap: .75rem; }
  .sci-method-path li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .8rem; padding-top: .8rem; }
  .sci-method-path p { margin-top: 0; }
}
@media (max-width: 760px) {
  .sci-hero-example { display: none; }
  .sci-hero-layout, .sci-reading { grid-template-columns: minmax(0, 1fr); }
  .sci-hero-layout { padding-block: 3.2rem; gap: 2rem; }
  .sci-hero h1 { max-width: 17ch; font-size: clamp(2.75rem, 7.6vw, 3.6rem); }
  .sci-hero-note, .sci-estimate { border-left: 0; border-top: 1px solid #61705e; padding: 1.45rem 0 0; max-width: 34rem; }
  .sci-reading { gap: 2.6rem; padding-block: 2.5rem 3.5rem; }
  .sci-index { position: static; }
  .sci-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
  .sci-index li:last-child { border-bottom: 0; }
  .sci-index a { padding-block: .65rem; }
}
@media (max-width: 520px) {
  .sci-hero-layout { gap: 1.6rem; padding-block: 2.65rem; }
  .sci-hero h1 { font-size: clamp(2.55rem, 10vw, 3.25rem); }
  .sci-actions { gap: .85rem 1.25rem; }
  .sci-actions .button { min-height: 2.85rem; padding: .7rem 1rem; }
  .sci-index ul { gap: 0 .85rem; }
  .sci-roles, .sci-record { grid-template-columns: minmax(0, 1fr); gap: 1.05rem; }
  .sci-method-path li { display: block; }
  .sci-method-path p { margin-top: .4rem; }
  .sci-comparison { padding: 1rem; }
  .sci-comparison table { table-layout: fixed; font-size: .82rem; }
  .sci-comparison th:first-child { width: 42%; }
  .sci-comparison td, .sci-comparison th { padding: .65rem .22rem; }
  .sci-comparison thead th { font-size: .72rem; }
  .sci-project > div, .sci-network > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding-block: .85rem; }
  .sci-index a, .sci-page .sci-link { font-size: .9rem; }
}

/* Change the reading objective without hiding either model's metrics. */
.metric-lens { display: none; }
@supports selector(figure:has(input:checked)) {
  .metric-lens { display: block; border: 0; padding: 0; margin: 1.25rem 0 .3rem; }
  .metric-lens legend { margin-bottom: .5rem; padding: 0; color: var(--sci-muted); font-size: .77rem; font-weight: 560; }
  .lens-options { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--sci-rule); border-radius: 6px; background: #edf1e9; }
  .lens-options input { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
  .lens-options label { cursor: pointer; padding: .6rem .66rem; border: 1px solid transparent; border-radius: 4px; font-size: .77rem; line-height: 1.4; color: #52614e; }
  .lens-options input:checked + label { border-color: #c6d0bd; background: #fff; color: #21382a; font-weight: 570; }
  .lens-options input:focus-visible + label { outline: 2px solid #8b741c; outline-offset: 2px; }
  .sci-comparison :is(td, th) { transition: background-color 190ms ease-out; }
  .sci-comparison:has(#objective-fit:checked) :is(td, th):nth-child(2),
  .sci-comparison:has(#objective-error:checked) :is(td, th):nth-child(3) { background-color: #eef3e8; }
  .sci-comparison:has(#objective-fit:checked) tbody tr:nth-child(2) td:nth-child(2),
  .sci-comparison:has(#objective-error:checked) tbody tr:first-child td:nth-child(3) { color: #243b28; font-weight: 670; }
  .sci-comparison:has(#objective-fit:checked) .insight-error,
  .sci-comparison:has(#objective-error:checked) .insight-fit { display: none; }
}
@media (max-width: 480px) {
  .lens-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .lens-options label { padding: .55rem .35rem; text-align: center; }
}
