/* CosmosExplore: future culture edition. Local theme, no runtime dependencies. */
:root {
  --paper: #f0f1ed;
  --ink: #111410;
  --wine: #2849ed;
  --line: #b8bdb5;
  --muted: #515a50;
  --sans: "Arial", "Microsoft YaHei", sans-serif;
  --display: "Arial Black", "Arial", "Microsoft YaHei", sans-serif;
  --mono: "Consolas", "SFMono-Regular", monospace;
}
html { scroll-padding-top: 1.5rem; }
body { font-size: 1.125rem; }
.site-header, main { max-width: 100rem; padding-inline: 2.5rem; }
.edition-line { padding-block: .85rem; font: .65rem/1.4 var(--mono); letter-spacing: .08em; }
.masthead {
  width: fit-content; max-width: 100%; margin: .8rem auto 1.25rem;
  font: 900 clamp(2.5rem, 9.65vw, 9.5rem)/.95 var(--display);
  text-transform: uppercase; letter-spacing: -.085em; color: var(--ink);
  white-space: nowrap;
}
.masthead:hover { color: var(--ink); }
.wordmark-dot { display: inline-block; color: var(--wine); margin-left: .02em; }
nav { justify-content: space-between; gap: 1rem; padding: .9rem 0; font: .75rem/1.5 var(--mono); text-transform: uppercase; border-top: 2px solid var(--ink); }
nav a { padding-block: .2rem; }
nav a[aria-current=page] { text-decoration: none; color: var(--paper); background: var(--ink); padding-inline: .7rem; }
main { padding-top: 2.5rem; }
.home main { padding-top: 1.25rem; }
.frontispiece { position: relative; isolation: isolate; height: clamp(32rem, 44vw, 46rem); overflow: hidden; background: #1c2420; color: white; }
.frontispiece>img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 57%; z-index: -2; }
.frontispiece::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #07100bd9, transparent 68%), linear-gradient(90deg, #070d0b3d, transparent 65%); z-index: -1; }
.cover-coordinate { position: absolute; top: 1.5rem; left: 1.75rem; right: 1.75rem; display: flex; justify-content: space-between; gap: 1rem; font: .65rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cover-coordinate span:first-child { border-left: 2px solid white; padding-left: .7rem; }
.hero-copy { position: absolute; left: 2.5rem; bottom: 2.25rem; right: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.hero-copy h1 { margin: 0; max-width: 70%; color: white; font: 900 clamp(4rem, 7.6vw, 8.5rem)/.83 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.hero-copy h1 span { display: inline-block; margin-top: .12em; }
.hero-copy>div { max-width: 16rem; font: .85rem/1.7 var(--sans); }
.hero-copy p { margin: 0 0 1.2rem; }
.hero-copy .text-link { color: white; border-color: white; font-size: .7rem; width: 100%; justify-content: space-between; }
.hero-copy .text-link:hover { color: #d8deff; }
.issue-strap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem 0 1.4rem; border-bottom: 2px solid var(--ink); margin-bottom: 3.5rem; }
.issue-strap strong { font: 900 clamp(1.4rem, 2.3vw, 2.25rem)/1 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.issue-strap p { font: .72rem/1.6 var(--mono); margin: 0; }
.issue-strap .issue-mark { color: var(--wine); font: 1.6rem/1 var(--mono); }
.cover { grid-template-columns: 1.3fr 1fr; padding-bottom: 3rem; }
.cover-copy { padding: 1rem 0 1rem 3rem; }
.cover-copy h2 { font: 800 clamp(2.5rem, 4.3vw, 4.75rem)/1.02 var(--display); letter-spacing: -.055em; margin: 0 0 1.4rem; }
.cover-image .photo { min-height: 27rem; }
.kicker { color: var(--wine); font: .65rem/1.6 var(--mono); letter-spacing: .07em; }
.cover-copy .kicker { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.cover-copy .kicker span { font-size: .6rem; }
.image-stamp { font: .6rem/1.5 var(--mono); }
.cover-subtitle { font-size: 1.2rem; }
.cover-copy>p:not(.kicker):not(.cover-subtitle) { font-size: 1rem; max-width: 37ch; }
.cover-credit { font: .62rem/1.8 var(--mono); letter-spacing: 0; }
.text-link { font: .75rem/1.5 var(--mono); text-transform: uppercase; }
.issue-line { margin-block: 2rem; }
.issue-line p { font: 800 1.5rem/1.3 var(--display); font-style: normal; letter-spacing: -.04em; }
.issue-line span { font: .65rem/1.5 var(--mono); }
.story-grid { gap: 2rem; }
.story-grid article+article { padding-left: 2rem; }
.story-grid h2 { font: 800 2.15rem/1.05 var(--display); letter-spacing: -.045em; }
.story-grid p:not(.kicker) { font-size: 1rem; }
.small-link { font: .7rem/1.6 var(--mono); }
.field-note { background: var(--wine); color: white; padding: 1.5rem!important; border: none!important; }
.field-note .kicker, .field-note .field-bottom, .field-note .note-number { color: white; }
.field-note a:hover { color: #d8deff; }
.note-number { font: 900 5rem/1 var(--display); letter-spacing: -.08em; margin: 1rem 0 2rem; }
.field-bottom { font: .6rem/1.6 var(--mono); border-color: #ffffff70; }
.editorial-note { padding-top: 2rem; margin-top: 4rem; grid-template-columns: .65fr 1.5fr 1fr; }
.editorial-note h2 { font: 800 2.6rem/1.05 var(--display); letter-spacing: -.055em; }
.editorial-note p:not(.kicker) { font-size: .95rem; }
.site-footer { margin-top: 1rem; background: var(--ink); padding: 3.5rem max(2.5rem, calc((100vw - 95rem)/2)); }
.footer-brand { display: inline-block; color: white; font: 900 2.7rem/1 var(--display); text-transform: uppercase; letter-spacing: -.075em; }
.site-footer p { font-size: .95rem; }
.footer-links { font: .7rem/1.6 var(--mono); }
h1, .reading h1 { font: 850 clamp(2.75rem, 5.5vw, 6rem)/1 var(--display); letter-spacing: -.06em; }
h2 { font: 750 2rem/1.2 var(--sans); letter-spacing: -.03em; }
h3 { font-size: 1.4rem; }
.deck { font-size: 1.5rem; }
.byline, figcaption, .small { font: .75rem/1.7 var(--mono); }
.visual { padding-top: 1rem; border-top: 3px solid var(--ink); }
.visual figure { margin-top: 0; }
.chapters-controls { gap: 0; }
.chapters-controls button { flex: 1; font-size: .75rem; }
button, select, input { font: .85rem var(--mono); }
.reading { max-width: 48rem; }
.index-stories p { font-size: 1rem; }
.availability { font: .75rem/1.7 var(--mono); }
label { font: .8rem/1.5 var(--mono); }
output { font: .85rem/1.7 var(--mono); }
html[lang=zh] h1 { font-family: var(--display); font-size: clamp(2.5rem, 4.5vw, 4.75rem); line-height: 1.2; font-weight: 800; }
html[lang=zh] .hero-copy h1 { font-size: clamp(4.5rem, 8vw, 8rem); line-height: .97; letter-spacing: -.055em; }
html[lang=zh] .cover-copy h2 { font-size: clamp(2.5rem, 4vw, 4.1rem); line-height: 1.2; letter-spacing: -.045em; }
html[lang=zh] .editorial-note h2 { line-height: 1.25; }
@media(min-width:1650px) { .masthead { font-size: 10rem; } }
@media(max-width:1050px) {
  .site-header, main { padding-inline: 1.75rem; }
  .frontispiece { height: 35rem; }
  .hero-copy { left: 1.75rem; right: 1.75rem; bottom: 2rem; }
  .hero-copy>div { max-width: 13rem; }
  .cover-copy { padding-left: 2rem; }
  .cover-image .photo { min-height: 25rem; }
  .story-grid { gap: 1.5rem; }
  .story-grid article+article { padding-left: 1.5rem; }
  .story-grid h2 { font-size: 1.8rem; }
  .editorial-note { grid-template-columns: 1.3fr 1fr; }
  .editorial-note>.kicker { grid-column: 1/-1; }
  .site-footer { padding-inline: 1.75rem; }
}
@media(max-width:700px) {
  body { font-size: 1.0625rem; }
  .site-header, main { padding-inline: 1rem; }
  .edition-line { font-size: .5rem; letter-spacing: .01em; gap: .5rem; }
  .masthead { font-size: 8.9vw; letter-spacing: -.095em; margin-block: 1rem 1.2rem; }
  nav { gap: .4rem; font-size: .6rem; padding-block: .7rem; }
  nav a[aria-current=page] { padding-inline: .45rem; }
  .home main { padding-top: 1rem; }
  .frontispiece { height: 36rem; }
  .frontispiece>img { object-position: 67% center; }
  .frontispiece::after { background: linear-gradient(0deg, #07100bf2, #07100b36 62%, transparent); }
  .cover-coordinate { top: 1rem; left: 1rem; right: 1rem; font-size: .5rem; letter-spacing: .04em; }
  .hero-copy { display: block; left: 1.25rem; right: 1.25rem; bottom: 1.5rem; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(3.5rem, 13vw, 5.5rem); line-height: .9; }
  .hero-copy>div { max-width: 100%; margin-top: 1.6rem; font-size: .75rem; }
  .hero-copy p { max-width: 29ch; margin-bottom: 1rem; }
  .hero-copy .text-link { width: 100%; font-size: .65rem; }
  html[lang=zh] .hero-copy h1 { font-size: 4.6rem; line-height: 1; letter-spacing: -.06em; }
  .issue-strap { gap: .75rem; margin-bottom: 2rem; padding-block: 1rem; flex-wrap: wrap; }
  .issue-strap strong { font-size: 1.4rem; }
  .issue-strap p { font-size: .6rem; }
  .issue-strap .issue-mark { display: none; }
  .cover-image .photo { min-height: 0; aspect-ratio: 971/809; }
  .cover-copy { padding: 1.5rem 0 0; }
  .cover-copy h2, html[lang=zh] .cover-copy h2 { font-size: 2.6rem; line-height: 1.15; }
  .cover-subtitle { font-size: 1.15rem; }
  .cover-copy>p:not(.kicker):not(.cover-subtitle) { max-width: none; }
  .issue-line p { font-size: 1.1rem; }
  .issue-line span { font-size: .6rem; }
  .story-grid article+article { padding-left: 0; }
  .story-grid h2 { font-size: 2rem; }
  .field-note { min-height: 24rem; }
  .editorial-note { display: block; margin-top: 2.5rem; }
  .editorial-note h2 { font-size: 2.3rem; margin-bottom: 1.5rem; }
  .site-footer { padding: 2.5rem 1rem; }
  .footer-brand { font-size: 2rem; }
  .reading h1, h1, html[lang=zh] h1 { font-size: 2.7rem; }
  .deck { font-size: 1.25rem; }
  .chapters-controls button { font-size: .7rem; }
}
@media print { .frontispiece { height: 28rem; print-color-adjust: exact; } .masthead { font-size: 3rem; } .field-note { color: black; background: white; } }