/* Fonts served from this site (fonts/, from Google Fonts, SIL Open Font License), so visitors' browsers don't
   contact Google. Each comes as Latin and Latin Extended files; a page only downloads the ones its text needs. */
@font-face { font-family: 'Big Shoulders Display'; font-weight: 300 600; font-display: swap; src: url(/fonts/big-shoulders-display-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 300 600; font-display: swap; src: url(/fonts/big-shoulders-display-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #E4E6E1;
  --ink: #16181D;
  --graphite: #5A5F69;
  --rule: #B9BDB5;
  --light: #F4F4F0;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Every animation lasts under 300 ms, except the footer's stars and meteors, the banner text sliding in, the banner photo cross-fade and the viewer's loading orbit. */
html { scroll-padding-top: 88px; } /* section links clear the fixed header */
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 'Source Serif 4', Georgia, serif; }
img { max-width: 100%; height: auto; } /* images carry width/height attributes for layout; never use them as a fixed size */
/* Discourage saving photos: no dragging, long-press menu or selection (main.js also blocks right-click) */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

.link { background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: var(--paper); color: var(--ink); }
.round { width: 44px; height: 44px; flex: none; border: 1px solid rgba(244,244,240,.6); border-radius: 50%; background: transparent; color: var(--light); display: grid; place-items: center; }

/* Header: over the banner at first, then frosted once the banner text scrolls up to it (main.js adds .is-stuck) */
.bar { position: fixed; z-index: 10; top: 0; left: 0; right: 0; padding: 24px max(var(--pad), calc((100% - 1360px) / 2 + var(--pad))); display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; justify-content: space-between; color: var(--light); transition: background-color .2s ease, color .2s ease, padding .2s ease; }
.bar.is-stuck, .bar.on-paper { background: rgba(228, 230, 225, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.bar.is-stuck { padding-top: 12px; padding-bottom: 12px; }
.logo { font: 600 30px/1 var(--display); letter-spacing: .02em; }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.bar nav a { padding: 12px 0; }
.bar nav { align-items: center; margin-left: auto; }
/* Phones: logo and search on one row, the menu on a second row that scrolls sideways */
@media (max-width: 760px) {
  .bar { padding: 10px 16px; gap: 6px 14px; flex-wrap: wrap; }
  .bar.is-stuck { padding-top: 8px; padding-bottom: 8px; }
  .logo { font-size: 22px; }
  .search { flex: 1 1 120px; min-width: 0; display: flex; justify-content: flex-end; }
  .search input { width: 100%; min-width: 0; max-width: 220px; min-height: 36px; }
  .bar nav { order: 3; flex: 1 1 100%; margin: 0; flex-wrap: nowrap; justify-content: space-between; gap: 0 12px; overflow-x: auto; scrollbar-width: none; font-size: 14px; }
  .bar nav a { padding: 4px 0; white-space: nowrap; }
  /* Phone viewer bar: a two-line title, and no Fit button (photos already fit a phone's width) */
  .viewer-head { gap: 10px; padding: 8px 0; }
  .viewer-head h2 { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .viewer-nav { flex-wrap: nowrap; gap: 6px; }
  .viewer .fit { display: none; }
  .viewer .round { width: 38px; height: 38px; }
  .count { min-width: 0; }
}

/* Search in the header; results open below it */
.search { position: relative; }
.search input { width: 190px; min-height: 40px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.search input::placeholder { color: inherit; opacity: .75; }
.results { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(340px, 90vw); max-height: 60vh; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--light); color: var(--ink); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.results li > * { display: block; width: 100%; padding: 10px 12px; }
.results button { border: 0; background: none; text-align: left; font-size: 16px; line-height: 1.3; }
.results button:hover, .results button:focus-visible { background: var(--paper); }
.results b { font: 600 18px var(--display); margin-right: 4px; }
.results small { display: block; font-size: 13px; color: var(--graphite); }
.results li:not(:has(button)) { color: var(--graphite); }

/* Banner: full-screen photo slideshow */
.hero { position: relative; overflow: hidden; min-height: max(560px, min(90vh, 900px)); display: flex; flex-direction: column; justify-content: flex-end; background: #05070d; color: var(--light); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.slide.is-current { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,13,.82), rgba(5,7,13,0) 45%), linear-gradient(to bottom, rgba(5,7,13,.6), rgba(5,7,13,0) 20%); }


.intro { position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto; padding: 120px var(--pad) 48px; display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between; }
.intro-text { flex: 1 1 520px; display: flex; flex-direction: column; gap: 14px; }
.intro h1 { font: 300 clamp(56px, 8vw, 124px)/.86 var(--display); }
.intro h1 span { display: block; margin-top: 10px; font-weight: 600; font-size: .32em; letter-spacing: .04em; }
.intro p { max-width: 40ch; font-size: 21px; line-height: 1.45; color: var(--paper); }
.intro-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.controls { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.now b { font: 600 18px var(--display); }
.now small { font-size: 14px; color: #C9CCC5; }
.pause .icon-play, .pause.is-paused .icon-pause { display: none; }
.pause.is-paused .icon-play { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .intro > div { animation: slide-in 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .intro > div + div { animation-delay: .25s; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(40px); } }
}

/* Sections on the silver paper */
.section { max-width: 1360px; margin: 0 auto; padding: 96px var(--pad) 24px; }
.section-head { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: 16px; margin-bottom: 32px; }
.section-head h2 { font: 600 40px/1.1 var(--display); }

/* Pages without a banner: header sits on the paper */
.bar.on-paper { position: sticky; }
.bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.page-head { padding-top: 48px; padding-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.page-head h1 { font: 300 clamp(64px, 9vw, 136px)/.85 var(--display); }
.page-head p { font-size: 19px; color: var(--graphite); }
.page-head + .section { padding-top: 48px; }

/* Subject pages: technique filter and sort */
.tools { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sort { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--graphite); }
.sort select { min-height: 38px; padding: 0 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; }

/* One photo's own page */
.photo-page { padding-top: 40px; }
.crumb a { text-decoration: underline; text-underline-offset: 4px; color: var(--graphite); }
.photo-page h1 { margin: 8px 0 24px; font: 300 clamp(40px, 6vw, 80px)/1 var(--display); }
.photo-page h1 b { font-weight: 600; margin-right: 12px; }
.photo-main { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.photo-main img { display: block; max-height: 85vh; width: auto; max-width: 100%; height: auto; }
.photo-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 24px 48px; max-width: 1120px; margin: 32px auto 0; }
.photo-text p + p { margin-top: 1em; }
.photo-open { text-align: center; }
.photo-facts a, .photo-nav a { text-decoration: underline; text-underline-offset: 4px; }
.photo-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; max-width: 1120px; margin: 48px auto 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.photo-facts { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.photo-facts dt { font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.photo-facts dd { margin: 2px 0 0; }
@media (max-width: 760px) { .photo-info { grid-template-columns: 1fr; } }

.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 20px; }
.subject { display: flex; flex-direction: column; gap: 10px; }
.subject img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #05070d; }
.subject span { color: var(--graphite); }
.subject b { font: 600 26px var(--display); margin-right: 10px; color: var(--ink); }

/* Justified gallery: each photo keeps its real shape */
.plates { display: flex; flex-wrap: wrap; gap: 40px 20px; }
.plates::after { content: ""; flex: 999 1 0; } /* keeps a short last row from stretching */
.plate { flex: var(--ar) 1 calc(var(--ar) * 280px); display: flex; flex-direction: column; gap: 10px; }
.plate img { display: block; width: 100%; height: auto; background: #05070d; }

/* Hover zoom: the photo grows slightly inside its frame */
.zoom { display: block; overflow: hidden; background: #05070d; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoom img { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .plate:hover .zoom img, .plate:focus-visible .zoom img,
  .subject:hover .zoom img, .subject:focus-visible .zoom img { transform: scale(1.06); }
}
.plate:hover { text-decoration: none; }
.plate:hover .label { text-decoration: underline; text-underline-offset: 4px; }
.label { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.label b { font: 600 22px var(--display); }
.label i { margin-left: auto; font-style: normal; font-size: 15px; color: var(--graphite); }

.news { margin: 0; padding: 0; list-style: none; }
.news li { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.news .year { flex: 0 0 120px; font: 300 56px/.9 var(--display); }
/* One photo fills the square; with three, the first is large and two stack beside it. */
.news-thumbs { flex: 0 0 160px; height: 160px; display: grid; grid-template-columns: 1fr; gap: 4px; align-self: center; }
.news-thumbs:has(img + img) { grid-template-columns: 2fr 1fr; }
.news-thumbs img:first-child:nth-last-child(3) { grid-row: span 2; }
.news-thumbs img { width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #05070d; }
.news-thumbs:hover { opacity: .9; }
.news li > div { flex: 999 1 420px; display: flex; flex-direction: column; gap: 8px; }
.news-photos { font-size: 16px; color: var(--graphite); }
.news-photos .link { min-height: 32px; color: var(--ink); }
.news .source { font-size: 15px; color: var(--graphite); }
.news h3 { font-weight: 400; font-size: 24px; line-height: 1.3; }
.news li > div > p:last-child { max-width: 64ch; color: #3F434B; }

.footer { margin-top: 96px; background: var(--ink); color: var(--paper); }
.footer-inner { max-width: 1360px; margin: 0 auto; padding: 96px var(--pad) 0; display: flex; flex-wrap: wrap; gap: 40px 80px; justify-content: space-between; align-items: flex-end; }
.about { flex: 999 1 460px; display: flex; flex-direction: column; gap: 20px; }
.about h2 { font: 300 clamp(48px, 5vw, 80px)/.9 var(--display); }
.about p { max-width: 58ch; font-size: 19px; line-height: 1.7; color: #C5C8C1; }
.about a { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.contact { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; font-size: 19px; }
.footer-inner.small { padding-top: 72px; padding-bottom: 40px; font-size: 15px; color: #A3A79F; }
.footer-inner.small a { padding: 12px 0; margin-left: 24px; color: var(--paper); }

/* Photo viewer: fills the window and shows the photo as wide as the window (enlarged if smaller);
   scroll down to see the rest of a tall photo, then its details. Optional plate-solve overlay. */
.viewer { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 clamp(12px, 2vw, 24px) 24px; overflow-y: auto; border: 0; background: #05070d; color: var(--paper); }
html:has(.viewer[open]) { overflow: hidden; } /* the page behind doesn't scroll or show a scrollbar */
.viewer-head { position: sticky; z-index: 2; top: 0; padding: 12px 0; display: flex; gap: 16px; align-items: center; justify-content: space-between; background: rgba(5, 7, 13, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.viewer-head h2 { font: 600 28px/1.1 var(--display); }
.viewer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.viewer .small { min-height: 36px; padding: 0 14px; border: 1px solid rgba(244,244,240,.45); border-radius: 999px; background: transparent; font-size: 14px; }
.viewer .small[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
/* Fit to screen: the whole photo in view, below the title bar */
.viewer.is-fit .frame { width: fit-content; }
.viewer.is-fit .frame img { width: auto; max-height: calc(100dvh - 96px); }
.count { min-width: 5ch; text-align: center; font-size: 15px; color: #C5C8C1; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { transition: opacity .2s ease, transform .2s ease; }
  @starting-style { .viewer[open] { opacity: 0; transform: translateY(12px); } }
}
/* Magnifier: click to zoom at a spot, move to look around (main.js). */
.view { display: grid; justify-items: center; }
.frame { position: relative; width: 100%; overflow: hidden; cursor: zoom-in; touch-action: pan-y; }
.frame.is-zoomed { cursor: zoom-out; touch-action: none; }
.stage { position: relative; }
@media (prefers-reduced-motion: no-preference) { .stage { transition: transform .25s ease; } }
.frame img { display: block; width: 100%; max-width: 100%; height: auto; }
/* Loading the full-size photo (main.js sets aria-busy): a small planetary system turns in the middle of the
   view, a glowing star and two planets, the inner one faster, as real orbits are. The gallery's copy shows sharp
   meanwhile (.has-preview); with nothing to show yet, the frame sits out of focus and sharpens like a telescope
   coming to focus. Both wait .5 s, so a quick or cached photo shows no flash. */
.frame[aria-busy="true"]:not(.has-preview) { min-width: min(100%, 320px); min-height: 50vh; }
.frame[aria-busy="true"]:not(.has-preview) img { filter: blur(6px) brightness(.7); transition: filter 0s .5s; }
.loading { position: absolute; z-index: 1; top: min(50%, 42vh); left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; padding: 32px 40px 26px; border-radius: 28px; background: rgba(5, 7, 13, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper); font-size: 16px; letter-spacing: .02em; white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; }
.frame[aria-busy="true"] .loading { visibility: visible; opacity: 1; transition: visibility 0s .5s, opacity 0s .5s; }
.system { position: relative; width: 112px; height: 112px; }
.star { position: absolute; inset: 44px; border-radius: 50%; background: radial-gradient(circle, #fff6dc 0 30%, #ffd98a 60%, #f5a54a); box-shadow: 0 0 18px 6px rgba(255, 200, 110, .55), 0 0 48px 14px rgba(255, 170, 80, .25); }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(244, 244, 240, .22); border-radius: 50%; }
.orbit.inner { inset: 26px; transform: rotate(140deg); }
.orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #9ec5ff; box-shadow: 0 0 10px rgba(158, 197, 255, .8); }
.orbit.inner i { top: -3.5px; width: 7px; height: 7px; margin-left: -3.5px; background: #e8b48a; box-shadow: 0 0 8px rgba(232, 180, 138, .7); }
@media (prefers-reduced-motion: no-preference) {
  .frame img { transition: filter .25s ease; }
  .frame[aria-busy="true"]:not(.has-preview) img { transition: filter .25s ease .5s; }
  .frame[aria-busy="true"] .loading { transition: visibility 0s .5s, opacity .2s ease .5s; }
  .orbit { animation: orbit 3.2s linear infinite; }
  .orbit.inner { animation-duration: 1.3s; animation-delay: -.5s; }
  @keyframes orbit { from { transform: rotate(0); } to { transform: rotate(1turn); } }
}
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay circle { fill: none; stroke: var(--light); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.overlay text { fill: var(--light); font-family: 'Source Serif 4', Georgia, serif; font-style: italic; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  /* Labels drawing in: each circle traces itself, then its name fades in, one object after another (--d, main.js) */
  .overlay.is-drawing circle { stroke-dasharray: 100; animation: trace .18s cubic-bezier(.4, 0, .2, 1) var(--d) both; }
  .overlay.is-drawing text { animation: name-in .1s ease-out calc(var(--d) + .12s) both; }
  @keyframes trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes name-in { from { opacity: 0; transform: translateY(4px); } }

  /* Tile-to-viewer zoom (main.js, View Transitions): the photo moves and resizes; the rest cross-fades */
  ::view-transition-group(photo) { animation-duration: .25s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-old(photo), ::view-transition-new(photo) { height: 100%; object-fit: cover; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}
/* Description and specs sit side by side in a centred block, so neither leaves a gap */
.under { display: flex; justify-content: center; margin-top: 14px; }
.under:not(:has(:not([hidden]))) { display: none; }
.info { max-width: 1120px; margin: 32px auto 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px 48px; align-items: start; }
.caption { font-size: 18px; line-height: 1.7; color: #DADCD6; }
.caption p + p { margin-top: 1em; }
/* Facts about the object, under the description */
.object-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #2A2D33; }
.object-facts dt { font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8F948C; }
.object-facts dd { margin: 2px 0 0; color: #DADCD6; }
.about-line { font-size: 16px; }
.about-line b { font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin-right: 8px; }
.photo-text .about-line:first-of-type { margin-top: 1.5em; padding-top: 1em; border-top: 1px solid var(--rule); }
/* Technical specs: a narrower column on the right, in smaller type with condensed labels */
.specs { grid-column: 2; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-left: 24px; border-left: 1px solid #2A2D33; font-size: 15px; line-height: 1.45; }
@media (max-width: 760px) {
  .info { grid-template-columns: 1fr; }
  .specs { grid-column: 1; padding: 16px 0 0; border-left: 0; border-top: 1px solid #2A2D33; }
}
.specs dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.specs dt { font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8F948C; }
.specs dd { margin: 2px 0 0; color: #DADCD6; }
.specs a { text-decoration: underline; text-underline-offset: 4px; }
.versions-title { font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8F948C; }
.versions { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.versions button { padding: 4px 0; border: 0; background: none; color: #DADCD6; text-decoration: underline; text-underline-offset: 4px; }
.more summary { width: fit-content; min-height: 32px; display: flex; align-items: center; gap: 6px; cursor: pointer; color: #C5C8C1; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; }
.more[open] summary::after { content: "−"; }
.more[open] .if-closed, .more:not([open]) .if-open { display: none; }
.more dl { margin-top: 8px; }
.subs { margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.subs caption { text-align: left; padding-bottom: 4px; font: 600 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8F948C; }
.subs th { padding: 4px 16px 4px 0; text-align: left; font-weight: 400; font-size: 13px; color: #8F948C; border-bottom: 1px solid #2A2D33; }
.subs td { padding: 4px 16px 4px 0; color: #DADCD6; white-space: nowrap; }
.subs td:first-child { white-space: normal; }
.toggle { min-height: 44px; padding: 0 18px; border: 1px solid rgba(244,244,240,.5); background: transparent; }
.toggle[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* The footer is a night sky: two layers of stars twinkle out of step, and meteors cross it now and then
   (position and timing set on each in layout.html). These loop, so they're the exception to the 300 ms rule,
   as is the banner text sliding in. */
.footer { position: relative; overflow: hidden; }
.footer-inner { position: relative; }
.footer::before, .footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.meteor { position: absolute; z-index: 1; top: var(--y); left: var(--x); width: 160px; height: 1.5px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); box-shadow: 0 0 6px rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference) {
  .footer::before { animation: twinkle 4s ease-in-out infinite alternate; }
  .footer::after { animation: twinkle 6.5s ease-in-out 1.5s infinite alternate-reverse; }
  @keyframes twinkle { to { opacity: .25; } }
  .meteor { animation: meteor var(--t) linear var(--delay) infinite; }
  @keyframes meteor {
    0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
    1% { opacity: 1; }
    7%, 100% { opacity: 0; transform: rotate(-35deg) translateX(-600px); }
  }
}
.footer::before {
  background-image: radial-gradient(1px 1px at 590px 299px, #dfe6ff, transparent), radial-gradient(1px 1px at 50px 113px, #fff, transparent), radial-gradient(1px 1px at 570px 68px, #fff, transparent), radial-gradient(1px 1px at 429px 73px, #ffe9d6, transparent), radial-gradient(1px 1px at 120px 292px, #fff, transparent), radial-gradient(1px 1px at 573px 417px, #fff, transparent), radial-gradient(1px 1px at 105px 297px, #ffe9d6, transparent), radial-gradient(1px 1px at 192px 190px, #fff, transparent), radial-gradient(1px 1px at 560px 364px, #fff, transparent), radial-gradient(1px 1px at 577px 30px, #ffe9d6, transparent), radial-gradient(1px 1px at 210px 254px, #ffe9d6, transparent), radial-gradient(1px 1px at 437px 397px, #fff, transparent), radial-gradient(1px 1px at 476px 299px, #dfe6ff, transparent), radial-gradient(1.5px 1.5px at 370px 153px, #fff, transparent), radial-gradient(1px 1px at 184px 357px, #fff, transparent), radial-gradient(1px 1px at 83px 294px, #fff, transparent), radial-gradient(1px 1px at 537px 253px, #fff, transparent), radial-gradient(1.5px 1.5px at 459px 147px, #ffe9d6, transparent);
  background-size: 617px 421px; opacity: .7;
}
.footer::after {
  background-image: radial-gradient(2px 2px at 593px 467px, #fff, transparent), radial-gradient(1px 1px at 860px 95px, #fff, transparent), radial-gradient(1.5px 1.5px at 485px 66px, #fff, transparent), radial-gradient(2px 2px at 748px 317px, #ffe9d6, transparent), radial-gradient(1px 1px at 697px 456px, #fff, transparent), radial-gradient(1.5px 1.5px at 733px 395px, #fff, transparent), radial-gradient(1px 1px at 23px 472px, #fff, transparent), radial-gradient(2px 2px at 172px 119px, #dfe6ff, transparent), radial-gradient(2px 2px at 60px 223px, #fff, transparent), radial-gradient(1.5px 1.5px at 132px 253px, #dfe6ff, transparent), radial-gradient(2px 2px at 400px 508px, #fff, transparent), radial-gradient(1px 1px at 170px 459px, #dfe6ff, transparent), radial-gradient(2px 2px at 562px 284px, #fff, transparent), radial-gradient(1.5px 1.5px at 838px 440px, #ffe9d6, transparent);
  background-size: 887px 593px; opacity: .85;
}