@font-face {
  font-family:"Science Manrope";
  src:url("assets/manrope-variable.ttf") format("truetype");
  font-weight:200 800;
  font-display:swap;
}

#science, .sci-reader-dialog {
  --science-type:"Science Manrope", Manrope, Arial, sans-serif;
  --science-light:#eff4f2;
  --science-accent:#72f4f7;
  --science-gutter:clamp(18px,3.6vw,94px);
  font-family:var(--science-type);
  color:var(--science-light);
}
#science { background:#020f12; }
#science:focus { outline: none; }
.site-footer .sci-top { display:none; }
body:has(main[data-view="science"]) .site-header { background:#020d10; border-bottom:1px solid #0e272b; }
body:has(main[data-view="science"]) .site-footer { background:#020d10; padding-block:clamp(18px,1.9vw,32px); }
body:has(main[data-view="science"]) .lang-switch button { border-radius:4px; }
@media (min-width:1001px) {
  body:has(main[data-view="science"]) .nav-links { gap:clamp(22px,2.6vw,48px); left:53%; }
}
@media (min-width:741px) and (max-width:1000px) {
  body:has(main[data-view="science"]) .site-header { padding-inline:2vw;gap:9px; }
  body:has(main[data-view="science"]) .brand { font-size:13px;letter-spacing:.09em;gap:8px; }
  body:has(main[data-view="science"]) .nav-links { position:static;transform:none;margin-inline:auto;gap:1.7vw; }
  body:has(main[data-view="science"]) .nav-links a { font-size:12px;letter-spacing:.07em; }
}

.sci-hero, .sci-boundary {
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
}
.sci-hero {
  min-height:clamp(505px,36.5vw,730px);
  padding:clamp(48px,4.1vw,86px) max(5.75vw,calc((100% - 1780px)/2));
  background:#031114 url('assets/science-city-bridge.webp') center 51% / cover no-repeat;
}
.sci-hero::before, .sci-boundary::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.sci-hero::before {
  background:linear-gradient(90deg,#010e11f5 2%,#010e11de 25%,#010e1169 42%,transparent 59%),
    linear-gradient(0deg,#020f12,transparent 20%);
}
.sci-hero-copy { max-width:min(36vw,650px); }
.sci-kicker {
  display:flex; align-items:center; gap:15px;
  margin:0 0 clamp(14px,1.4vw,25px);
  color:#7bf5f6; font:450 clamp(11px,.84vw,16px)/1.4 var(--display);
  letter-spacing:.18em; text-transform:uppercase;
}
.sci-kicker::before { content:""; width:clamp(33px,3vw,62px); height:1px; background:#65eff1; }
.sci-hero h2 {
  margin:0 0 .24em -.035em;
  color:#f1f3f1;
  font:400 clamp(60px,5.05vw,104px)/1.02 var(--display);
  letter-spacing:.065em; text-transform:uppercase;
}
.sci-intro { margin:0; max-width:45ch; color:#d9e3e1; font-size:clamp(16px,1.14vw,22px); line-height:1.55; text-wrap:pretty; }
.sci-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px clamp(15px,1.65vw,34px); margin-top:clamp(23px,2.0vw,38px); }
.sci-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:.85em;
  min-height:clamp(46px,3.45vw,66px); padding:.87em 1.9em;
  color:#edffff; border:1px solid #76f7fb; border-radius:5px;
  background:linear-gradient(180deg,#07363dc9,#02181cca 56%,#052e33dd);
  box-shadow:inset 0 0 13px #3be8f439,0 0 15px #1ce4ec24;
  font:450 clamp(13px,1vw,18px)/1.25 var(--display);
  letter-spacing:.09em; text-transform:uppercase;
  transition:background-color .18s,box-shadow .18s,border-color .18s;
}
.sci-pill:hover { background-color:#10474c; border-color:#c6ffff; box-shadow:inset 0 0 15px #3be8f453,0 0 22px #1ce4ec41; }
.sci-overview > span, .sci-boundary-link > span { font:400 1.45em/1 Arial,sans-serif; }
.sci-favourite { background:#031014ad; color:#e0e7e6; border-color:#60797b; box-shadow:none; }
.sci-favourite[aria-pressed="true"] { border-color:#69d2d3; color:#a4f5f5; }
.sci-save-mark::before { content:"+"; font:300 1.35em/1 Arial,sans-serif; }
.sci-favourite[aria-pressed="true"] .sci-save-mark::before { content:"✓"; }
#science :is(button,a,summary):focus-visible { outline:2px solid #a4fafb; outline-offset:3px; }
#science-papers h2:focus, #science-papers h3:focus { outline:none; }
.sci-boundary {
  min-height:clamp(325px,26.5vw,520px); padding:clamp(47px,4.7vw,95px) max(5.75vw,calc((100% - 1780px)/2));
  background:#010e12 url("assets/science-earth-limb.webp") center 55% / cover no-repeat;
  border-block:1px solid #173338;
}
.sci-boundary::before { background:linear-gradient(90deg,#010e12ef 0%,#010e12ba 31%,transparent 65%); }
.sci-boundary-copy { max-width:min(40%,620px); }
.sci-boundary h3 { margin:0 0 .4em; font:400 clamp(37px,3.1vw,65px)/1.13 var(--display); letter-spacing:.025em; text-transform:uppercase; }
.sci-boundary h3::before {
  content:""; display:block; width:clamp(35px,3vw,58px); height:2px; margin-bottom:clamp(17px,1.5vw,31px); background:#e94a55;
}
.sci-boundary-copy p { max-width:44ch; margin:0; color:#d4e1df; font-size:clamp(15px,1.1vw,20px); line-height:1.58; }
.sci-boundary-link {
  display:inline-flex; align-items:center; gap:.9em; min-height:44px; margin-top:13px; padding:.5em 0;
  border:0; border-bottom:1px solid #448384; color:#8ce4e4; background:transparent;
  font:400 clamp(13px,.94vw,17px)/1.4 var(--display); letter-spacing:.12em; text-transform:uppercase;
}
.sci-boundary-link:hover { color:#d9ffff; }
@media(max-width:1120px) { .sci-hero-copy { max-width:min(45vw,530px); } }
@media(max-width:740px) {
  .sci-hero { min-height:0; padding:clamp(167px,37vw,260px) var(--science-gutter) 39px; background:#020f12; }
  .sci-hero::after {
    content:""; position:absolute; inset:0 0 auto; height:clamp(310px,65vw,445px); z-index:-2;
    background:url("assets/science-city-bridge.webp") 72% 45% / cover no-repeat;
    mask-image:linear-gradient(#000 0% 49%,#000c 66%,transparent);
  }
  .sci-hero::before { background:linear-gradient(90deg,#020f124d,transparent 78%); }
  .sci-hero-copy { max-width:100%; }
  .sci-hero h2 { font-size:clamp(52px,9.7vw,75px); }
  .sci-intro { max-width:47ch; font-size:16px; }
  .sci-hero-actions { gap:10px; }
  .sci-pill { min-height:45px; padding-inline:1.2em; }
  .sci-boundary { padding:45px var(--science-gutter) 76px; min-height:320px; background-position:62% center; }
  .sci-boundary-copy { max-width:86%; }
  .sci-boundary::before { background:linear-gradient(90deg,#010e12ed,#010e1299 62%,transparent); }
}
@media(prefers-reduced-motion:reduce) { .sci-pill { transition:none; } }

.sci-reader-dialog {
  width: min(760px,calc(100% - 32px)); max-width: none; max-height: min(88svh,900px); padding: 0;
  border: 1px solid #457077; border-radius: 8px; color: #eff7f6; background: #041317;
  box-shadow: 0 30px 100px #000b; overscroll-behavior: contain; scrollbar-color: #416269 #07191e;
}
.sci-reader-dialog::backdrop { background: #000a0dd6; backdrop-filter: blur(7px); }
.sci-reader-shell { padding: clamp(20px,3.2vw,45px); background: radial-gradient(ellipse at 95% 0%,#103038,transparent 55%); }
.sci-reader-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sci-reader-kicker { margin: 0 0 9px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .23em; color: #82e5e8; }
.sci-reader-head h2 { margin: 0; max-width: 28ch; font: 400 clamp(27px,2.35vw,40px)/1.17 var(--display); letter-spacing: .025em; }
.sci-reader-head h2:focus { outline: 0; }
.sci-reader-close { position: sticky; top: 10px; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #54747a; border-radius: 50%; background: #06171b; color: #edf9f9; font: 300 25px/1 var(--science-type); }
.sci-reader-close:hover, .sci-reader-nav button:hover, .sci-reader-back:hover { border-color: #66e9ec; }
.sci-reader-body { margin-top: 20px; font-size: 15px; line-height: 1.6; }
.sci-reader-intro, .sci-reader-article p { color: #c7d7d9; margin: 0 0 17px; }
.sci-reader-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.sci-reader-nav button, .sci-reader-back { padding: 8px 13px; border-radius: 4px; border: 1px solid #36555c; color: #cfe6e8; background: #041419; font: 600 12px/1.4 var(--science-type); }
.sci-reader-nav button[aria-current] { color: #a2f6f6; border-color: #459a9e; background: #103138; }
.sci-reader-search { display: grid; gap: 5px; font-size: 12px; color: #bed6d9; }
.sci-reader-search input { width: 100%; min-height: 43px; padding: 9px 13px; border: 1px solid #41676e; border-radius: 7px; background: #031116; color: #f0fbfa; font: 16px/1.4 var(--science-type); }
.sci-reader-status { margin: 10px 0; color: #a0cdcf; font-size: 13px; }
.sci-reader-status:empty { display: none; }
.sci-reader-list { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid #2c484e; }
.sci-reader-list li { border-bottom: 1px solid #2c484e; }
.sci-reader-row, .sci-reader-source { position: relative; display: grid; gap: 5px; width: 100%; text-align: left; border: 0; background: transparent; padding: 15px 36px 15px 2px; }
.sci-reader-row small, .sci-reader-source small { color: #8ec6c9; font: 550 11px/1.4 var(--science-type); }
.sci-reader-row strong { font: 600 16px/1.42 var(--science-type); }
.sci-reader-arrow, .sci-reader-source > span { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #7ce1e6; }
.sci-reader-row:hover strong, .sci-reader-source:hover cite { color: #80f4f4; }
.sci-reader-pair { margin: 0 20px 17px 2px; padding-left: 14px; border-left: 1px solid #345d62; }
.sci-reader-pair p { margin: 2px 0 9px; font-size: 14px; color: #c7d7d9; }
.sci-reader-article { margin-top: 20px; }
.sci-reader-article h3, .sci-reader-pair h3 { margin: 15px 0 4px; color: #9aeded; font: 650 12px/1.6 var(--science-type); letter-spacing: .055em; }
.sci-reader-source { border: 1px solid #355e65; padding: 16px 32px 16px 15px; border-radius: 7px; background: #092126; }
.sci-reader-source cite { font-style: normal; font-weight: 650; }
html:has(.sci-reader-dialog[open]) { overflow: hidden; }
@media (max-width:540px) {
  .sci-reader-dialog { width: calc(100% - 16px); max-height: 92svh; }
  .sci-reader-shell { padding: 21px 17px; }
  .sci-reader-body { font-size: 14px; }
  .sci-reader-row strong { font-size: 15px; }
}