/* Scroll: rice paper, pine ink, distant blue and a seal-red accent. */
:root {
  color-scheme: light;
  --bg: #F5F0E8;
  --panel: #EFE9DE;
  --ink: #2C3E2D;
  --muted: #5F5B53;
  --line: #C4BFB6;
  --cyan: #4F6F84;
  --orange: #C23B22;
  --vermilion: #C23B22;
  --gold: #8A7346;
  --wash: #7B9AAF;
  --serif: 'Cormorant Garamond', 'Zhuque Fangsong', 'Songti SC', Georgia, serif;
  --body: 'EB Garamond', 'Songti SC', Georgia, serif;
}

body {
  font-family: var(--body);
  font-size: 19px;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 120% 90% at 50% 35%, transparent 55%, #D8CCB566 100%), url('/assets/img/rice-paper.svg');
  background-size: 100% 100%, 480px 480px;
  background-attachment: fixed, scroll;
}
::selection { background: #7B9AAF4d; }
a:hover { color: var(--orange); }
a:focus-visible, button:focus-visible, input:focus-visible { outline-color: var(--orange); }

/* Small tracked labels: Garamond needs more size than a sans at 9-10px */
.eyebrow, .chapter, .instrument-top, .figure-label, .research-index, .unit {
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
}
.eyebrow { color: var(--cyan); }
.chapter { color: var(--orange); font-size: 13.5px; }

/* Navigation */
.nav { border-bottom-color: var(--line); }
.jd-monogram { font: 500 32px/1 var(--serif); letter-spacing: -1px; color: var(--ink); }
nav { font-family: var(--serif); font-size: 20px; letter-spacing: .06em; font-variant: small-caps; }
nav a { text-transform: lowercase; }

/* Hero */
.hero { position: relative; }
.hero-copy { position: relative; align-self: start; padding-top: 30px; }
.hero-copy::before { content: ''; display: block; width: 3.5rem; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.status-dot { background: var(--orange); box-shadow: none; }
.chinese { font-family: 'Zhuque Fangsong', 'Songti SC', serif; font-weight: 400; letter-spacing: .06em; }
.eyebrow .chinese { font-size: 19px; letter-spacing: .12em; color: var(--ink); }
.affiliation { font-family: var(--serif); font-size: 22px; color: var(--muted); }
h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -1px; line-height: 1.05; color: var(--ink); }
h1 em, h2 em { font-weight: 400; color: var(--orange); }
p.intro { font-size: 21px; max-width: 480px; line-height: 1.75; color: var(--muted); }
.button { border: 1px solid var(--ink); border-radius: 0; font-family: var(--serif); font-size: 19px; letter-spacing: .04em; background: transparent; }
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Observatory: an instrument drawn on paper */
.observatory { background: #FAF7F1; border: 1px solid var(--line); border-radius: 0; box-shadow: 6px 8px 0 #2C3E2D0a; }
.instrument-top { color: var(--muted); border-bottom: 1px solid var(--line); }
.instrument-top button { color: var(--ink); border: 1px solid var(--line); border-radius: 0; font-family: var(--body); }
.plot-heading { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.plot-heading span { font-family: var(--body); font-size: 13px; color: var(--muted); }
.plot-grid { stroke: #D9D3C8; }
.axis-label, .plot-labels { fill: #6F6A62; font-family: var(--body); font-size: 12px; }
.primary { stroke: var(--wash); }
.secondary { stroke: var(--orange); }
.combined { stroke: var(--ink); }
.primary-fill { fill: var(--wash); }
.secondary-fill { fill: var(--orange); }
.photocentre { stroke: var(--gold); }
.photocentre-fill { fill: var(--gold); }
.star, .barycentre, .phase-line { stroke: var(--ink); }
.legend span:before, .orbit-legend span:not(:last-child):before { background: var(--wash); }
.legend .secondary-key:before, .orbit-legend .secondary-key:before { background: var(--orange); }
.legend .combined-key:before { background: var(--ink); }
.orbit-legend .photocentre-key:before { background: var(--gold); }
.legend, .orbit-legend, .orbit-controls label, .orbit-insight, .model-details summary, .model-details .model-note { font-family: var(--body); font-size: 14px; color: var(--muted); }
.orbit-controls output { color: var(--ink); font-size: 15px; }
.orbit-readout { color: var(--gold); font-size: 14px; }
input[type=range] { accent-color: var(--ink); }
.model-note a { color: var(--cyan); }

/* Research */
.research-index { border-color: var(--line); color: var(--muted); background: transparent; }
.research-index a { font-family: var(--serif); font-size: 19px; letter-spacing: .02em; }
h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.5px; color: var(--ink); }
.section-heading h2::after, .papers-heading h2::after { content: ''; display: block; width: 3.5rem; margin-top: 18px; border-bottom: 1px solid var(--line); }
.story { border-bottom-color: var(--line); }
.story h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.3px; color: var(--ink); }
.story p:not(.chapter) { font-size: 19.5px; line-height: 1.7; max-width: 500px; color: var(--muted); }
.finding { border-left: 1px solid var(--orange); }
.finding strong { font-family: var(--serif); font-weight: 500; color: var(--orange); }
.finding span { font-size: 16px; max-width: 320px; }
.text-link { font-family: var(--serif); font-size: 20px; border-bottom-color: var(--line); }
.text-link:hover { border-bottom-color: var(--orange); }
.secondary-link { font-size: 17px; font-style: italic; }
.story p.submission-status { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--orange); }

.science-figure { background: #FAF7F1; border: 1px solid var(--line); border-radius: 0; padding: 22px; box-shadow: 6px 8px 0 #2C3E2D0a; }
.science-figure a { display: block; }
.science-figure img { filter: none; mix-blend-mode: multiply; border-radius: 0; background: transparent; }
.figure-label { color: var(--muted); }
.science-figure figcaption { font-size: 16.5px; color: var(--muted); }
.science-figure figcaption span { font-style: italic; color: var(--cyan); font-size: 15px; }

/* Papers */
.paper-row { border-bottom-color: var(--line); }
.paper-row > span:first-child { font-size: 16px; font-variant-numeric: oldstyle-nums; color: var(--muted); }
.paper-row h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--ink); }
.paper-row:hover, .paper-row:hover h3 { color: var(--orange); }
.paper-row > span:last-child { color: var(--orange); }

/* About */
.portrait { padding: 0; background: none; border: 0; box-shadow: none; transform: none; align-self: start; }
.portrait img { height: auto; border-radius: 0; filter: none; }
.about h2 .chinese { color: var(--ink); }
.about p:not(.eyebrow) { font-size: 19.5px; color: var(--muted); }
.about p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.contact-links { font-family: var(--serif); font-size: 20px; color: var(--cyan); }

/* Footer */
footer { align-items: center; font-size: 15px; color: var(--muted); border-top-color: var(--line); padding-block: 36px 48px; }
img.footer-seal { display: block; position: static; flex: 0 0 auto; width: 58px; height: auto; overflow: visible; opacity: 1; mix-blend-mode: multiply; transform: rotate(-2deg); }

/* Display sizes */
h1 { font-size: clamp(54px, 5.8vw, 86px); }
.section-heading h2 { font-size: 56px; }
.story h3 { font-size: 46px; }
.papers-heading h2 { font-size: 42px; }
.about h2 { font-size: 46px; }
body::before { content: none; }

/* Code page */
.software-intro h1 { font-size: clamp(52px, 5.4vw, 80px); }
.software-intro > p:not(.eyebrow) { font-size: 21px; }
.software-topics { font-family: var(--serif); font-size: 17px; }
.featured-software { background: #FAF7F1; box-shadow: 6px 8px 0 #2C3E2D0a; }
.featured-software h2 { font-size: 52px; }
.featured-software p:not(.eyebrow) { font-size: 19px; }
.featured-software p.software-question { font-size: 28px; }
.code-example > span, .software-kind { font-size: 13px; letter-spacing: 2px; color: var(--orange); }
.code-example pre { font-size: 14px; color: var(--ink); }
.featured-software .code-example p, .software-card p.software-use { font-size: 16px; }
.software-links { font-family: var(--serif); font-size: 18px; }
.software-group-heading h2 { font-size: 42px; }
.software-card { background: #FAF7F1; }
.software-card h3 { font-size: 36px; }
.software-card p { font-size: 18px; }
.software-bottom { font-size: 19px; }
nav a[aria-current=page] { color: var(--orange); }

/* Ink edges: frames drawn with a wavering brush line */
.ink-defs { position: absolute; width: 0; height: 0; }
.observatory, .science-figure, .featured-software, .software-card { position: relative; overflow: visible; border-color: transparent; }
.observatory::after, .science-figure::after, .featured-software::after, .software-card::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  border: 1.6px solid var(--ink); opacity: .6; filter: url(#ink-edge);
}
.code-example { border-left-color: transparent; background: url('/assets/img/brush-rule.svg') left center / 7px 100% no-repeat; }

/* Dry-brush dividers */
.nav, .research-index, .story, footer { border-color: transparent; }
.nav { background: url('/assets/img/brush-rule.svg') left bottom / 100% 7px no-repeat; }
.research-index { background: url('/assets/img/brush-rule.svg') left top / 100% 6px no-repeat, url('/assets/img/brush-rule.svg') left bottom / 100% 6px no-repeat; }
.story { background: url('/assets/img/brush-rule.svg') left bottom / 100% 5px no-repeat; }
footer { background: url('/assets/img/brush-rule.svg') left top / 100% 7px no-repeat; }
.hero-copy::before, .section-heading h2::after, .papers-heading h2::after { border: 0; height: 6px; background: url('/assets/img/brush-rule.svg') left center / 100% 100% no-repeat; }

/* Ink bleeding in from the left edge */
.ink-bleed { position: fixed; left: 0; top: 8vh; height: 84vh; width: auto; max-width: none; opacity: .24; pointer-events: none; z-index: -1; }


@media(max-width:740px) {
  h1 { font-size: clamp(46px, 11vw, 64px); }
  .section-heading h2 { font-size: 42px; }
  .story h3 { font-size: 36px; }
  .papers-heading h2, .about h2 { font-size: 36px; }
  .software-intro h1, .featured-software h2 { font-size: 44px; }
  body { font-size: 17.5px; }
  nav { font-size: 15px; gap: 11px; letter-spacing: .02em; }
  nav a { white-space: nowrap; }
  .hero-copy { padding-top: 0; }
  .paper-row h3 { font-size: 20px; }
  .story p:not(.chapter), .about p:not(.eyebrow) { font-size: 18px; }
  .eyebrow, .chapter, .instrument-top, .figure-label, .research-index, .unit { font-size: 12.5px; }
  img.footer-seal { width: 46px; order: 4; margin-left: auto; }
  .ink-bleed { opacity: .12; left: -60px; }
}