/* Colours, type and spacing. Change them here only.
   One ink, one paper, one red for emphasis, as in a printed almanac. */
:root{
  --paper:#0d0c0b;          /* page: warm near-black, flat */
  --plate:#000;             /* behind photographs */
  --ink:#e9e4d8;            /* body text */
  --ink-2:#a8a296;          /* secondary text */
  --ink-3:#7b766c;          /* tertiary: rules, captions */
  --rule:#34312c;           /* hairline rules between sections */
  --red:#e2553d;            /* rubric: links, active state, emphasis */
  --focus:#f2c14e;

  --serif:Spectral, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure:34rem;          /* reading column */
  --gutter:clamp(16px,4vw,48px);
  --wide:1240px;
}

/* Element defaults, page, focus, skip link. */
[hidden]{display:none!important}  /* the attribute always wins over component display rules */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--serif);-webkit-font-smoothing:antialiased;font-kerning:normal;font-variant-numeric:oldstyle-nums}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--red)}
strong{font-weight:500}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:8px 12px;font:400 .85rem var(--mono)}
.skip:focus{top:12px}
/* The mono voice: labels, figures, dates, credits. */
.label,.dateline,.issue,figcaption.credit,.dims,dt,.count{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}

/* Decorative star background (aria-hidden), fixed behind the page. */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.65}
#sky svg{width:100%;height:100%;display:block}
#sky .tw{animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){#sky .tw{animation:none}}
.page{position:relative;z-index:1}

/* Masthead and main column. */
.masthead{max-width:var(--wide);margin:0 auto;padding:28px var(--gutter) 0}
.masthead-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.masthead-row + .masthead-row{border-top:1px solid var(--rule);margin-top:14px;padding:8px 0 0}
.masthead h1{margin:0;font:300 clamp(2.2rem,6vw,4.4rem)/1 var(--serif);letter-spacing:-.02em}
.issue{margin:0;display:flex;gap:18px;font-size:.8rem;color:var(--ink-2)}
.motto{margin:0;font-style:italic;color:var(--ink-2);font-size:1rem}
nav.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
nav.site-nav a{text-decoration:none;font-size:1rem}
nav.site-nav a:hover{text-decoration:underline;text-decoration-color:var(--red)}

main{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) 80px}
section{scroll-margin-top:16px}

/* Buttons read as words, not boxes. Pressed state is set in red. */
button,.btn{font:400 1rem/1.3 var(--serif);color:var(--ink);background:none;border:0;border-radius:0;padding:6px 0;margin:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:.25em;min-height:36px;display:inline-flex;align-items:center;gap:.35em}
button:hover,.btn:hover{color:var(--ink);text-decoration-color:var(--red)}
button[disabled]{color:var(--ink-3);text-decoration:none;cursor:default}
button[aria-pressed=true]{color:var(--red);text-decoration-color:var(--red)}
.count{font-size:.78rem;color:var(--ink-3)}

/* Dateline, notice, the photograph (edge to edge), overlay labels, credit, title and actions. */
.dateline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:28px 0 12px;font-size:.8rem;color:var(--ink-2)}
.dateline .cat{color:var(--red)}
.dateline .when{color:var(--ink)}
.dateline .rollover{margin-left:auto}

.notice{margin:0 0 14px;font-style:italic;color:var(--ink-2);max-width:70ch}
.notice::before{content:"Note. ";font-style:normal;color:var(--red)}

figure.feature{margin:0 calc(50% - 50vw)}          /* bleed to the viewport edges */
.stage{position:relative;height:clamp(320px,78vh,980px);background:var(--plate);display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame{position:relative;cursor:zoom-in;transition:opacity .45s ease}
.frame img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.stage.loading .frame{opacity:.2}
@media (prefers-reduced-motion: reduce){.frame{transition:none}}
.spinner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;margin:0;font:400 .8rem var(--mono);color:var(--ink-2)}
.stage.loading .spinner{display:flex}
.dims{position:absolute;right:12px;bottom:8px;font-size:.72rem;color:rgba(233,228,216,.6)}
.labels{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.frame.annotated .labels{opacity:1}
.lbl{position:absolute;transform:translate(-5px,-5px);display:flex;align-items:center;gap:6px;white-space:nowrap}
.lbl i{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);flex:none}
.lbl b{font:400 .75rem/1.3 var(--mono);color:#fff;text-shadow:0 0 3px #000,0 0 6px #000}
.lbl.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 5px),-5px)}
figcaption.credit{max-width:var(--wide);margin:10px auto 0;padding:0 var(--gutter);font-size:.78rem;line-height:1.55;color:var(--ink-2)}
figcaption.credit strong{font-weight:400;color:var(--ink-2)}
figcaption.credit a{color:var(--ink-2)}

.titlebar{margin:52px 0 0}
.titlebar h2{font:300 clamp(2.1rem,4.8vw,3.8rem)/1.05 var(--serif);letter-spacing:-.015em;margin:0;max-width:24ch}
.titlebar .cap{margin:12px 0 0;font-style:italic;color:var(--ink-2);font-size:1.12rem;line-height:1.5;max-width:60ch}
.titlebar .cap .date{font-style:normal}

/* Options sit directly under the photograph, one line on wide screens. */
.actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 28px;margin:14px 0 0}
@media (max-width:600px){.actions{gap:0 20px}}
@media (max-width:600px){.dateline .rollover{margin-left:0;flex-basis:100%}}

/* Hubble-vs-Webb slider. The right image sits on top, clipped from the left at --split. */
.compare{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.stage.comparing .frame,.stage.comparing .dims{display:none}
.cmp-box{position:relative;--split:50%}
.cmp-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cmp-box img.top{clip-path:inset(0 0 0 var(--split))}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:var(--ink);pointer-events:none}
.cmp-handle::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:44px;transform:translate(-50%,-50%);background:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.cmp-box input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.cmp-box:has(input:focus-visible) .cmp-handle::after{outline:2px solid var(--focus);outline-offset:3px}
.cmp-tag{position:absolute;bottom:10px;font:400 .74rem/1.4 var(--mono);color:#fff;text-shadow:0 0 3px #000,0 0 8px #000;pointer-events:none}
.cmp-tag.left{left:12px} .cmp-tag.right{right:12px;text-align:right}
.cmp-note{max-width:var(--wide);margin:10px auto 0;padding:0 var(--gutter);font-size:.95rem;font-style:italic;color:var(--ink-2)}
.cmp-note .src{font-style:normal;color:var(--ink-3)}

/* "Another photograph" line. */
.discover{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;margin:56px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.discover .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;margin:0}
.discover #discoverHead{font-style:italic;color:var(--ink-2)}
.discover .or{color:var(--ink-3);font-style:italic}

/* Story column with margin notes, scale line, understand panel, fold-out panels. */
.story-grid{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,18rem);gap:28px clamp(40px,8vw,120px);margin-top:36px;align-items:start}
@media (max-width:860px){.story-grid{grid-template-columns:minmax(0,1fr)}}
.story p{margin:0 0 1.1em;font-size:1.16rem;line-height:1.68;hyphens:manual}
.story p:first-child{font-size:1.3rem;line-height:1.5}
.story p + p{text-indent:1.5em;margin-top:-1.1em}     /* book paragraphs: indent, no gap */
.scale{margin:1.6em 0 0;font-style:italic;color:var(--ink-2)}
.scale .label{font-style:normal;font-size:.76rem;color:var(--red);margin-right:.4em}

.notes dl{margin:0;display:grid;gap:0}
.notes dt{font-size:.76rem;color:var(--ink-3);margin-top:22px}
.notes dt:first-child{margin-top:4px}
.notes dd{margin:4px 0 0;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.notes .src{color:var(--ink-3)}
.notes ul{margin:0;padding:0;list-style:none}
.notes li{margin:2px 0}

#understandPanel{margin:28px 0 0;max-width:46rem}
#understandPanel h3{margin:0 0 8px;font:italic 400 1.35rem/1.2 var(--serif)}
#understandPanel p{margin:0 0 .8em;color:var(--ink)}
table.filters{border-collapse:collapse;width:100%;margin:14px 0 18px;font:400 .8rem/1.45 var(--mono)}
table.filters th,table.filters td{text-align:left;padding:5px 16px 5px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.filters th{font-weight:400;color:var(--ink-3)}
.sw{display:inline-block;width:.8em;height:.8em;margin-right:6px;vertical-align:-.05em}

details.panel{margin-top:22px}
details.panel > summary{cursor:pointer;list-style:none;padding:0;font:italic 400 1.25rem/1.3 var(--serif)}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::before{content:"+";display:inline-block;width:1.1em;font:400 1rem var(--mono);font-style:normal;color:var(--red)}
details.panel[open] > summary::before{content:"−"}
details.panel .body{padding:10px 0 0 1.1em}
details.panel .body p{margin:0 0 .8em}
dl.meta{display:grid;grid-template-columns:minmax(120px,11rem) 1fr;gap:6px 18px;margin:0}
dl.meta dt{font-size:.74rem;color:var(--ink-3);padding-top:.25em}
dl.meta dd{margin:0;font-size:.98rem;color:var(--ink-2)}
@media (max-width:560px){dl.meta{grid-template-columns:1fr} dl.meta dd{margin-bottom:8px}}
.missing{color:var(--ink-3);font-style:italic}

/* Archive, favorites, about, footer. */
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:96px 0 22px;border-top:1px solid var(--ink-3);padding-top:18px}
.section-head h2{font:300 clamp(1.9rem,3.4vw,2.6rem)/1.1 var(--serif);letter-spacing:-.01em;margin:0}
.section-head p{margin:6px 0 0;color:var(--ink-2);font-style:italic;max-width:60ch}
.filters-row{display:flex;flex-wrap:wrap;gap:0 18px}

/* Contact sheet: pictures first, a line of type under each, no boxes. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,42vw),1fr));gap:28px 18px}
.tile{display:flex;flex-direction:column}
.tile .open{all:unset;cursor:pointer;display:block}
.tile .open:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.tile .thumb{aspect-ratio:1;background:var(--plate);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.tile .open:hover .thumb img{opacity:.8}
.tile .meta{padding:8px 0 0}
.tile .meta span{display:block;font:400 .72rem/1.4 var(--mono);color:var(--ink-3)}
.tile .meta strong{display:block;font:400 1.02rem/1.25 var(--serif);margin-top:3px}
.tile .open:hover .meta strong{color:var(--red)}
.tile .remove{align-self:flex-start;font-size:.88rem;color:var(--ink-2);min-height:30px}
.empty{color:var(--ink-2);font-style:italic;margin:0}

.about{columns:2 22rem;column-gap:clamp(32px,5vw,72px)}
.about-part{break-inside:avoid;margin:0 0 28px}
.about h3{font:italic 400 1.3rem/1.25 var(--serif);margin:0 0 6px}
.about p,.about li{color:var(--ink-2);margin:0 0 .7em}
.about ul{padding-left:1.1em;margin:0}
.about li::marker{color:var(--red)}

footer{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) 56px}
footer p{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0;padding-top:14px;border-top:1px solid var(--rule);font:400 .74rem/1.5 var(--mono);color:var(--ink-3)}
.grid > .empty{grid-column:1/-1}

/* On this day: date picker, events as a dated list, photographs published on the date. */
.otd-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
.otd-pick select{font:400 1rem var(--serif);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:4px 2px;cursor:pointer}
.otd-pick select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.otd-pick option{background:var(--paper);color:var(--ink)}
.otd-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.otd-grid{grid-template-columns:minmax(0,1fr)}}
.otd-grid h3{font:italic 400 1.3rem/1.2 var(--serif);margin:0 0 12px}
ol.events{list-style:none;margin:0;padding:0}
ol.events > li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 14px;margin:0 0 20px}
ol.events > li.none{display:block}
ol.events .yr{font:400 .82rem/1.9 var(--mono);color:var(--red)}
ol.events p{margin:0}
ol.events .ev-src{margin-top:4px;font-size:.88rem;color:var(--ink-3)}
ol.events .ev-src a{color:var(--ink-2)}
ol.events .ev-photos{margin-top:6px;font-size:.95rem}
ol.events .ev-photos button{min-height:0;padding:2px 0}
ol.events .rel{font-size:.85rem;color:var(--ink-3);font-style:italic}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(min(140px,40vw),1fr));gap:22px 14px}
.otd-grid h3.otd-near-head{margin-top:28px}
.otd-note{font:400 .95rem/1.5 var(--serif);color:var(--ink-2);margin:0 0 12px;max-width:52ch}

/* Immersive viewer. */
dialog#viewer{padding:0;border:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:#000;color:var(--ink)}
dialog#viewer::backdrop{background:#000}
.vsurface{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.vsurface.dragging{cursor:grabbing}
.vsurface img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-width:none}
.vbar{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 16px;pointer-events:none}
.vbar > *{pointer-events:auto}
.vbar.top{top:0;justify-content:space-between;align-items:flex-start;background:linear-gradient(rgba(0,0,0,.7),transparent)}
.vbar.bottom{bottom:0;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(transparent,rgba(0,0,0,.75));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.vbar button{color:#fff;text-decoration-color:rgba(255,255,255,.35);text-shadow:0 0 4px #000}
.vbar #vZoomOut,.vbar #vZoomIn{font:400 1.2rem var(--mono);text-decoration:none;min-width:28px;justify-content:center}
.vcredit{font:400 .74rem/1.5 var(--mono);color:#d5d0c4;max-width:70ch}
.vstatus{font:400 .72rem var(--mono);color:#a9a397}
.vgroup{display:flex;gap:0 18px;flex-wrap:wrap;align-items:center}
.vsurface img.flying{transition:transform .9s cubic-bezier(.3,.1,.2,1)}

/* Guided tour caption inside the immersive viewer: a plain caption block, not a card. */
.tour-card{position:absolute;left:16px;bottom:calc(64px + env(safe-area-inset-bottom));width:min(26rem,calc(100vw - 32px));padding:14px 18px 10px;background:rgba(13,12,11,.92)}
.tour-card .step{margin:0;font:400 .74rem/1 var(--mono);color:var(--red)}
.tour-card h3{margin:6px 0 6px;font:italic 400 1.4rem/1.2 var(--serif)}
.tour-card p{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.tour-card .row{display:flex;gap:0 20px;flex-wrap:wrap}
.tour-card .end{margin-left:auto;color:var(--ink-2)}
@media (max-width:600px){.tour-card{bottom:calc(96px + env(safe-area-inset-bottom))}}