#science {
  --sci-pad: clamp(20px, 3.35vw, 72px);
  --sci-paper: #e8eeeb;
  --sci-dim: #aec2c4;
  --sci-cyan: #8de1e4;
  --sci-rule: #244348;
  --sci-red: #ec3842;
  color: var(--sci-paper);
  background: radial-gradient(ellipse at 49% 36%, #05202577, transparent 62%), #020d10;
  padding-bottom: 5px;
}
#science:focus { outline: none; }
.site-footer .sci-top { display: none; }
body:has(main[data-view="science"]) .site-footer { padding: 16px 4.8vw; background: #020b0e; }
@media (min-width: 1051px) {
  body:has(main[data-view="science"]) .site-header {
    height: clamp(45px,3.12vw,63px);
    padding-inline: 4.65vw;
    border-bottom: 1px solid #1b3b40;
    background: #020c0eee;
  }
  body:has(main[data-view="science"]) .site-header .brand { font-size: clamp(15px,1.07vw,20px); gap: 1.6vw; }
  body:has(main[data-view="science"]) .site-header .portal-emblem { width: clamp(27px,1.9vw,35px); height: clamp(32px,2.35vw,43px); }
  body:has(main[data-view="science"]) .site-header .brand::after { content: ""; height: 1.05em; width: 1px; margin-left: 2.1vw; background: #2f5156; }
  body:has(main[data-view="science"]) .nav-links { left: 53.3%; gap: clamp(21px,3.25vw,70px); }
}
.sci-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(247px,18.05vw,357px);
  overflow: hidden;
  border-bottom: 1px solid #2b555a;
  background: #031013;
}
.sci-hero::before {
  content: ""; position: absolute; z-index: -2; inset: -8px 55% -8px -8px;
  background: linear-gradient(90deg,#010b0df5,#020b0ed9 50%,#04101394),
              url("assets/author-card-world.webp") 70% center / cover;
  filter: blur(4px);
}
.sci-hero-art {
  position: absolute; z-index: -1; inset: 0 0 0 35.75%;
  background: url("assets/reading-hero.webp") center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 3.2%);
}
.sci-hero-copy {
  width: 38%; padding: clamp(17px,1.3vw,25px) 0 clamp(17px,1.2vw,26px) 5.15vw;
}
.sci-kicker, .sci-marker, .sci-sections-head small, .sci-drawer-code {
  font: 600 clamp(10px,.68vw,13px)/1.35 Consolas, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sci-cyan);
}
.sci-kicker { margin: 0 0 clamp(7px,.82vw,15px); }
.sci-hero h2 {
  margin: 0 0 .14em;
  color: #f2f4ee;
  transform: scaleX(1.14); transform-origin: left center; width: 87.7%;
  font: 460 clamp(47px,3.92vw,81px)/1.08 var(--display);
  letter-spacing: .067em; text-transform: uppercase;
}
.sci-intro {
  position: relative; max-width: min(53ch,28.2vw); margin: 0 0 0 .6vw;
  color: #dee5e2; font: 500 clamp(13px,.90vw,17px)/1.24 var(--body); text-wrap: pretty;
}
.sci-intro::before {
  position: absolute; content: ""; left: -1.75vw; top: 2px; bottom: 2px;
  width: 2px; background: var(--sci-red); transform: skewX(-9deg);
}
.sci-hero-actions { display: flex; align-items: center; gap: clamp(9px,1.1vw,24px); flex-wrap: wrap; margin-top: clamp(12px,1vw,21px); }
.sci-hero-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 1em;
  min-height: 35px; border: 1px solid #9caaa7; border-radius: 4px; padding: .58em 1.55em;
  background: #020a0cdc; color: #f3f5ee;
  font: 500 clamp(12px,.78vw,15px)/1.35 var(--display); letter-spacing: .13em; text-transform: uppercase;
}
.sci-hero-actions .sci-overview {
  border-color: #ec414a; color: #fff5f0; background: linear-gradient(105deg,#c82431,#78171f 72%,#3f151b);
  box-shadow: 0 0 13px #bf213329;
}
.sci-hero-actions .sci-overview:hover { background: linear-gradient(105deg,#df303c,#91202b 74%,#50171c); }
.sci-favourite:hover, .sci-favourite[aria-pressed="true"] { border-color: #8ee4e4; background: #0c282a; }
.sci-hero-actions .sci-favourite-icon { font: 400 20px/.8 var(--body); min-width: .85em; }
.sci-layout, .sci-sections, .sci-library, .sci-protocol-drawer {
  width: calc(100% - 2 * var(--sci-pad)); max-width: 1860px; margin-inline: auto;
}
.sci-layout {
  display: grid; grid-template-columns: minmax(0,1.07fr) minmax(0,1.64fr) minmax(0,1fr);
  gap: clamp(18px,2.15vw,48px); align-items: start;
  padding: clamp(18px,1.42vw,30px) 0 0 .7vw;
}
.sci-shelf { position: relative; min-width: 0; padding-right: clamp(13px,1.6vw,32px); }
.sci-shelf::after { content: ""; position: absolute; top: 20px; bottom: 0; right: 0; width: 1px; background: var(--sci-rule); }
.sci-index-title, .sci-select, .sci-label, .sci-source-label, .sci-related h4 {
  color: var(--sci-cyan); font: 500 clamp(10px,.7vw,13px)/1.35 var(--display);
  letter-spacing: .17em; text-transform: uppercase;
}
.sci-index-title, .sci-marker { margin: 0; border-bottom: 1px solid #31565a; padding: 0 0 5px; }
.sci-index { display: grid; gap: 3px; margin-top: 3px; }
.sci-index button {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.1vw;
  width: 100%; min-height: clamp(38px,2.74vw,56px); overflow: hidden; padding: 4px 8px;
  border: 1px solid transparent; border-bottom-color: #244248; border-radius: 2px 4px 4px 2px;
  background: #041114; color: #e5edeb; text-align: left;
  font: 550 clamp(13px,.97vw,19px)/1.3 var(--body);
}
.sci-index button img {
  position: absolute; z-index: -1; top: 0; right: 0; width: 49%; height: 100%; object-fit: cover; object-position: right center;
  mask-image: linear-gradient(90deg,transparent,#000 35%);
}
.sci-index button small { color: #a1d6d8; font: 600 .76em/1 Consolas, monospace; letter-spacing: .055em; }
.sci-index button span { text-shadow: 0 1px 5px #01080b; }
.sci-index button:hover { background-color: #0a2024; border-color: #396065; }
.sci-index button[aria-pressed="true"] {
  min-height: clamp(45px,3.42vw,66px); background: linear-gradient(90deg,#0b292d,#081a1d);
  color: #edffff; border-color: #39757b; border-left: 2px solid #5de4e6;
}
.sci-select { display: none; }
#science-reading { min-width: 0; }
.sci-marker { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sci-marker span:last-child { white-space: nowrap; }
#sci-article-title {
  margin: 8px 0 6px; font: 450 clamp(24px,1.92vw,38px)/1.09 var(--display);
  color: #f2f2ed; letter-spacing: .005em;
}
@media (min-width: 1151px) {
  #sci-article-title { transform: scaleX(1.13); transform-origin: left center; width: 88.4%; }
  .sci-hero-actions .sci-overview { min-width: 14.6vw; }
  .sci-hero-actions .sci-favourite { min-width: 10.2vw; }
}
#sci-article-title, #sci-library-title, .sci-protocol-drawer { scroll-margin-block-start: 18px; }
#science-reading > p, .sci-connection > p {
  margin: 0; color: #d1ddda; font: 450 clamp(13px,.91vw,17px)/1.34 var(--body);
}
.sci-label { margin: clamp(9px,.78vw,15px) 0 2px; }
.sci-citation {
  position: relative; display: grid; gap: 4px; min-width: 0; margin: clamp(11px,.91vw,18px) 0 0;
  padding: 8px 31px 9px 17px; border: 1px solid #2c545b; border-left: 2px solid #60ced2; border-radius: 3px;
  background: linear-gradient(105deg,#071e22,#06151a); text-align: left;
}
.sci-citation:hover { border-color: #65a3a9; background: #0a2328; }
.sci-citation cite {
  overflow-wrap: anywhere; font: 600 clamp(13px,.92vw,17px)/1.36 var(--body); color: #e3eeeb;
}
.sci-byline { font: 400 clamp(11px,.78vw,14px)/1.35 var(--body); color: #bbcccd; }
.sci-ext { position: absolute; right: 11px; top: 7px; color: #abd8da; }
.sci-connection { display: flex; flex-direction: column; min-width: 0; align-self: stretch;
  padding: clamp(13px,1.05vw,22px); border: 1px solid #275157; border-radius: 8px;
  background: linear-gradient(130deg,#031013,#020b0e 80%,#061719);
}
.sci-connection h3, .sci-sections-head h3 {
  display: flex; align-items: center; gap: .85em; margin: 0;
  color: #eff1ef; font: 480 clamp(14px,1.05vw,21px)/1.3 var(--display); text-transform: uppercase; letter-spacing: .135em;
}
.sci-connection h3 { font-size: clamp(12px,.88vw,17px); }
.sci-connection h3::before, .sci-sections-head h3::before {
  content: ""; flex: none; width: clamp(20px,2.4vw,44px); height: 2px; background: var(--sci-red);
}
.sci-connection-art { display: block; width: 100%; height: auto; aspect-ratio: 2.38; object-fit: cover; border: 1px solid #345359; border-radius: 5px; margin: clamp(10px,.9vw,18px) 0 8px; }
.sci-connection > p { font-size: clamp(12px,.89vw,16px); }
.sci-connection > .sci-fiction-note { margin-top: 7px; color: #c0cece; }
.sci-status[data-status="fiction"] { display: block; margin-bottom: 2px; color: #dbaca8; font: 500 10px/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.sci-library li p { margin: 7px 0; color: #c1d1d1; font: 400 14px/1.5 var(--body); }
.sci-library li p strong { display: block; color: var(--sci-cyan); font: 500 12px/1.5 var(--display); text-transform: uppercase; letter-spacing: .07em; }
.sci-library li p .sci-fiction { color: #e5b0af; }
.sci-related { margin-top: auto; padding-top: clamp(12px,1vw,20px); }
.sci-related h4 { padding-left: .9em; border-left: 2px solid var(--sci-red); margin: 0 0 6px; line-height: 1.1; }
.sci-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 .75em; padding: 0; list-style: none; }
.sci-tags li { padding: 4px 8px; border-radius: 3px; border: 1px solid #516467; background: #030f12; color: #e1eae7;
  font: 500 clamp(9px,.66vw,13px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; }
.sci-sections { margin-top: clamp(23px,2.15vw,45px); }
.sci-sections-head { display: flex; align-items: center; gap: clamp(15px,1.45vw,30px); margin-bottom: clamp(14px,1.2vw,24px); }
.sci-sections-head::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg,#344f54,#1b373c); }
.sci-sections-head small { order: 2; margin-left: auto; color: #a3d4d7; }
.sci-collections { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.98fr) minmax(0,.98fr) minmax(0,1.05fr); gap: clamp(10px,.95vw,20px); }
.sci-card {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 31px minmax(0,1fr); align-content: end;
  align-items: start; column-gap: 10px; text-align: left; overflow: hidden;
  min-height: clamp(178px,13.52vw,282px); padding: 18px clamp(13px,1.05vw,22px) 25px;
  border: 1px solid #28565c; border-radius: 7px; background: linear-gradient(135deg,#031014,#04191d); color: var(--sci-paper);
}
.sci-card img {
  position: absolute; z-index: -2; inset: 0 0 auto; width: 100%; height: 65%; object-fit: cover; object-position: center;
  mask-image: linear-gradient(180deg,#000 0% 69%,transparent 100%); transition: transform .35s ease;
}
.sci-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,#031317 3%,#031317d9 37%,transparent 70%);
}
.sci-card::after {
  content: ""; position: absolute; bottom: 11px; inset-inline: 5.5%;
  height: 2px; background: linear-gradient(90deg,#49d8db 0 21%,#13383c 21%);
}
.sci-card:hover, .sci-card[aria-expanded="true"] { border-color: #60969a; }
.sci-card:hover img { transform: scale(1.025); }
.sci-play {
  display: grid; place-items: center; width: 23px; height: 23px; margin-top: 1px; border: 1.4px solid #e4f0ef; border-radius: 50%;
}
.sci-play::before { content: ""; margin-left: 2px; border-left: 6px solid #ebf2ef; border-block: 4px solid transparent; }
.sci-card-text { min-width: 0; display: grid; gap: 6px; }
.sci-card-text > strong { color: #f4f1eb; font: 470 clamp(15px,1.19vw,23px)/1.15 var(--display); letter-spacing: .015em; text-transform: uppercase; }
@media (min-width: 1151px) {
  .sci-card:last-child strong { font-size: clamp(15px,1.02vw,21px); letter-spacing: 0; }
}
.sci-card-text > span { color: #c5d3d3; font: 450 clamp(12px,.87vw,16px)/1.36 var(--body); text-wrap: pretty; }
.sci-library {
  margin-top: 16px; padding: clamp(17px,1.7vw,30px);
  border: 1px solid #2d555a; border-radius: 5px; background: #05181b;
}
.sci-library[hidden] { display: none; }
.sci-library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sci-library h3 { margin: 0; font: 480 clamp(23px,2vw,34px)/1.25 var(--display); }
.sci-library > p { max-width: 78ch; margin: 10px 0; color: #c6d5d4; }
.sci-library-close { padding: 0; width: 39px; height: 39px; border: 1px solid #48676a; border-radius: 50%; color: #d7e9e8; background: transparent; font: 24px/1 var(--body); }
.sci-library ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 clamp(20px,2.8vw,55px); }
.sci-library li { min-width: 0; border-top: 1px solid #274448; padding-block: 9px; }
.sci-library li button { width: 100%; display: grid; gap: 4px 16px; grid-template-columns: 1fr auto;
  background: transparent; color: #e0eae7; border: 0; text-align: left; padding: 3px; font: 500 15px/1.5 var(--body); }
.sci-library li button:hover span { text-decoration: underline; }
.sci-library li small { grid-column: 1/-1; color: var(--sci-cyan); font: 12px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.sci-library li b { color: var(--sci-cyan); font-weight: 400; }
.sci-library .sci-citation { margin: 0; }
.sci-overview-protocol { margin-block: 10px; min-height: 43px; padding: 7px 13px; border: 1px solid #6b9193; border-radius: 3px; background: #09252a; color: #cdedec; }
.sci-protocol-drawer { margin-top: 4px; }
.sci-protocol-drawer summary {
  display: flex; align-items: center; gap: 14px; min-height: 43px; padding: 5px 2px; list-style: none; cursor: pointer;
}
.sci-protocol-drawer summary::-webkit-details-marker { display: none; }
.sci-protocol-drawer summary::after { content: "+"; margin-left: auto; color: var(--sci-cyan); font: 21px/1 var(--body); }
.sci-protocol-drawer[open] summary::after { content: "−"; }
.sci-protocol-drawer summary strong { color: #d2e4e2; font: 450 15px/1.3 var(--display); letter-spacing: .06em; }
.sci-drawer-meta { color: #99afb1; font: 12px/1.4 var(--body); }
.sci-protocol-drawer[open] { margin-bottom: 20px; }
@media (max-width: 1150px) {
  .sci-hero-copy { width: 45%; }
  .sci-intro { max-width: 53ch; line-height: 1.38; }
  .sci-layout { gap: 18px; padding-left: 0; grid-template-columns: minmax(0,.9fr) minmax(0,1.65fr) minmax(0,1.03fr); }
  .sci-shelf { padding-right: 12px; }
  .sci-card { grid-template-columns: 20px minmax(0,1fr); column-gap: 8px; }
  .sci-play { width: 19px; height: 19px; }
}
@media (max-width: 960px) {
  .sci-hero-copy { width: 49%; }
  .sci-hero-art { left: 44%; background-position: 23% center; mask-image: linear-gradient(90deg,transparent,#000 20%); }
  .sci-hero-actions { gap: 8px; }
  .sci-hero-actions button { font-size: 11px; padding-inline: 12px; }
  .sci-layout { grid-template-columns: minmax(165px,.58fr) minmax(0,1.42fr); }
  .sci-shelf { grid-row: 1/span 2; }
  .sci-connection { grid-column: 2; display: flow-root; }
  .sci-connection-art { float: left; width: 36%; margin: 10px 14px 8px 0; aspect-ratio: 1.5; }
  .sci-connection h3 { margin-bottom: 7px; }
  .sci-related { clear: both; }
  .sci-collections { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sci-card { min-height: clamp(180px,23vw,215px); }
}
@media (max-width: 740px) {
  #science { --sci-pad: clamp(18px,5vw,32px); }
  .sci-hero { display: flex; flex-direction: column; align-items: stretch; }
  .sci-hero::before { inset: 0; background: #031013; filter: none; }
  .sci-hero-art { position: relative; inset: auto; height: clamp(136px,34vw,226px); z-index: 0;
    background-position: 36% center; mask-image: linear-gradient(180deg,#000 70%,transparent); }
  .sci-hero-copy { position: relative; width: 100%; padding: 0 var(--sci-pad) 20px; margin-top: -9px; }
  .sci-kicker { margin: 0 0 8px; }
  .sci-hero h2 { font-size: clamp(39px,9.8vw,58px); margin-bottom: 10px; }
  .sci-intro { margin-left: 7px; padding-left: 11px; max-width: 59ch; font-size: 14px; }
  .sci-intro::before { left: -1px; }
  .sci-hero-actions { gap: 8px; margin-top: 15px; }
  .sci-hero-actions button { min-height: 44px; font-size: 12px; padding-inline: 13px; }
  .sci-layout { display: flex; flex-direction: column; gap: 19px; padding-top: 20px; }
  .sci-layout > * { width: 100%; }
  .sci-shelf { padding-right: 0; }
  .sci-shelf::after, .sci-index-title, .sci-index { display: none; }
  .sci-select { display: grid; gap: 6px; font-size: 11px; }
  .sci-select select { background-image: linear-gradient(90deg,#071c20 43%,#071c20af 65%,#071c2070 87%,#071c20 98%),var(--sci-topic-art); min-width: 0; width: 100%; min-height: 44px; padding: 7px 10px;
    border: 1px solid #416368; border-radius: 3px; background-color: #071c20; background-size: 100% 100%,auto 100%; background-repeat: no-repeat; background-position: right center; color: #e4efec; font: 550 16px/1.35 var(--body); }
  #sci-article-title { font-size: clamp(26px,6.6vw,33px); margin-block: 9px; }
  #science-reading > p, .sci-connection > p { font-size: 15px; line-height: 1.48; }
  .sci-label { margin-top: 15px; font-size: 11px; }
  .sci-citation { padding-block: 11px; }
  .sci-connection { display: flex; }
  .sci-connection h3 { font-size: 14px; }
  .sci-connection-art { float: none; width: 100%; aspect-ratio: 2.38; margin: 6px 0 10px; }
  .sci-tags li { font-size: 10px; }
  .sci-sections { margin-top: 25px; }
  .sci-sections-head { flex-wrap: wrap; gap: 6px 10px; }
  .sci-sections-head h3 { font-size: 15px; }
  .sci-sections-head small { font-size: 9px; }
  .sci-library ul { grid-template-columns: 1fr; }
  .sci-protocol-drawer { margin-top: 8px; }
  .sci-protocol-drawer summary { flex-wrap: wrap; gap: 3px 9px; padding-block: 8px; }
  .sci-drawer-meta { display: none; }
}
@media (max-width: 535px) {
  .sci-sections-head { display: grid; }
  .sci-sections-head small { margin-left: 0; }
  .sci-sections-head::after { display: none; }
  .sci-collections { grid-template-columns: 1fr; }
  .sci-card { min-height: clamp(172px,46vw,220px); grid-template-columns: 24px minmax(0,1fr); padding: 16px 16px 24px; }
  .sci-card-text > strong { font-size: 18px; }
  .sci-card-text > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sci-card img { transition: none; } .sci-card:hover img { transform: none; } }