:root { color-scheme: dark light; --bg:#0b0d12; --panel:#12151c; --line:#232834; --text:#e6e8ee; --dim:#8f95a8; --accent:#6ea8ff; }
@media (prefers-color-scheme: light) { :root { --bg:#f7f8fa; --panel:#fff; --line:#e1e4ea; --text:#14171d; --dim:#5a6372; --accent:#2457d6; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 -apple-system, system-ui, sans-serif; }
main { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
main.wide { max-width: 68rem; }
main.wide header.site { max-width: 46rem; }
a { color: var(--accent); }
h1 { font-size: 2rem; line-height:1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .5rem; }
time { color: var(--dim); font-size: .9rem; }
.lede { color: var(--dim); }
.back a { color: var(--dim); text-decoration: none; }
ul.posts { list-style:none; padding:0; display:grid; gap:1.75rem; margin-top:2.5rem; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); }
.card { background:var(--panel); border-radius:16px; overflow:hidden; transition:transform .12s ease; }
.card:hover { transform:translateY(-2px); }
.card a { text-decoration:none; color:inherit; display:block; }
.card img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center; display:block; margin:0; border-radius:0; background:#000; }
.card-body { padding:1.1rem 1.35rem 1.4rem; }
.card h2 { font-size:1.2rem; margin:0 0 .15rem; color:var(--accent); }
.card p { color:var(--dim); margin:.5rem 0 0; font-size:.95rem; }
nav.prevnext { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:4rem; padding-top:2rem; border-top:1px solid var(--panel); }
nav.prevnext a { background:var(--panel); border-radius:12px; padding:1rem 1.15rem; text-decoration:none; color:inherit; }
nav.prevnext .later { text-align:right; }
nav.prevnext .dir { display:block; color:var(--dim); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
nav.prevnext strong { color:var(--accent); font-weight:600; }
@media (max-width:32rem) { nav.prevnext { grid-template-columns:1fr; } nav.prevnext .later { text-align:left; } }
article img { max-width:100%; height:auto; border-radius:12px; display:block; margin:1.5rem auto; }
article figure { margin:2rem 0; }
article figure img { margin:0 auto; }
article figcaption { color:var(--dim); font-size:.9rem; line-height:1.45; margin-top:.6rem; text-align:center; text-wrap:balance; }
article h2 { font-size:1.35rem; margin-top:3rem; text-wrap:balance; }
article h3 { font-size:1.05rem; margin:2rem 0 .4rem; }
article pre { background:var(--panel); padding:1rem 1.1rem; border-radius:10px; overflow-x:auto; font-size:.85rem; line-height:1.5; }
article pre code.hljs { background:transparent; padding:0; }
article code { font-size:.9em; }
article :not(pre) > code { background:var(--panel); padding:.1em .35em; border-radius:5px; }
article pre code { font-size:inherit; }
article aside { background:var(--panel); border-left:3px solid var(--accent); border-radius:10px; padding:1rem 1.25rem; margin:1.75rem 0; }
article aside > :first-child { margin-top:0; }
article aside > :last-child { margin-bottom:0; }
.table-wrap { overflow-x:auto; margin:1.5rem 0; border-radius:10px; border:1px solid var(--line); }
article table { width:100%; border-collapse:collapse; font-size:.92rem; font-variant-numeric:tabular-nums; }
article th, article td { text-align:left; vertical-align:top; padding:.6rem .8rem; border-bottom:1px solid var(--line); }
article thead th { background:var(--panel); color:var(--dim); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
article tbody tr:last-child td { border-bottom:0; }
article blockquote { border-left:3px solid var(--dim); margin:1.5rem 0; padding-left:1rem; color:var(--dim); }
header.site { border-bottom:1px solid var(--panel); padding-bottom:1.5rem; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
/* Observations: pictures of the sky sit on true black, whatever the theme */
body.obs { color-scheme:dark; --bg:#000; --panel:#101013; --line:#2a2a30; --text:#ecece8; --dim:#a6a6a2; --accent:#8ab4ff; }
body.obs main.wide { max-width:80rem; }
body.obs header { max-width:46rem; }
body.obs h1 { font-size:2.75rem; line-height:1.08; letter-spacing:-.01em; }
body.obs header .lede { font-size:1.15rem; }
a.night { display:block; background:#000; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; margin-top:2.5rem; }
a.night .strip { display:grid; grid-template-columns:repeat(4,1fr); background:#000; }
a.night .strip img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
a.night h2 { font-size:1.2rem; margin:0 0 .15rem; color:var(--accent); }
a.night p { color:var(--dim); margin:.5rem 0 0; font-size:.95rem; }
a.night .card-body { background:var(--panel); }
ul.nights { list-style:none; padding:0; margin:0; }
ul.sky { list-style:none; padding:0; margin:3rem 0 4rem; display:grid; gap:3rem 2rem; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); }
/* the first picture leads: twice the size, where there is room for three across */
@media (min-width:64rem) { ul.sky { grid-template-columns:repeat(3,1fr); } ul.sky li:first-child { grid-column:span 2; grid-row:span 2; } }
ul.sky a { display:block; color:inherit; text-decoration:none; }
ul.sky .frame { display:block; aspect-ratio:3/2; }
/* every picture whole, and a small one at its own size: scale-down shrinks to fit but never enlarges */
ul.sky img { width:100%; height:100%; object-fit:scale-down; display:block; transition:filter .12s ease; }
ul.sky a:hover img { filter:brightness(1.15); }
ul.sky strong { display:block; margin-top:.9rem; font-weight:600; }
ul.sky .detail { color:var(--dim); font-size:.9rem; }
.night-notes { max-width:46rem; }
figure.plate { margin:1.5rem 0 2rem; text-align:center; }
figure.plate a { display:inline-block; max-width:100%; }
figure.plate img { display:block; max-width:100%; max-height:92vh; width:auto; height:auto; margin:0 auto; }
figure.plate.pan img { max-height:none; }
figure.plate.pan.tall img { max-width:min(100%,46rem); }
.pan-hint { display:none; color:var(--dim); font-size:.85rem; margin:-1.25rem 0 0; }
.obs .sub { color:var(--dim); margin:0; }
.obs .what { font-size:1.3rem; line-height:1.5; }
.obs section { margin-top:4rem; }
.obs section > h2 { font-size:1.6rem; margin:0 0 .25rem; }
.obs section > .lede { margin:0; max-width:46rem; }
dl.spec, dl.facts { display:grid; gap:1.5rem 2rem; margin:2rem 0 0; }
dl.facts { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
dl.spec { grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); }
dl.spec div, dl.facts div { border-top:1px solid var(--line); padding-top:.7rem; }
dl.spec dt, dl.facts dt { color:var(--dim); font-size:.85rem; }
dl.spec dd, dl.facts dd { margin:.2rem 0 0; }
dl.facts dd { font-size:1.35rem; line-height:1.35; font-weight:600; }
dl.spec dd { font-size:.95rem; line-height:1.5; }
.credit { color:var(--dim); font-size:.85rem; margin-top:4rem; }
.rights { color:var(--dim); font-size:.85rem; margin-top:3rem; }
/* a phone: the pictures run edge to edge, the words keep their margin */
@media (max-width:40rem) {
  body.obs h1 { font-size:2.1rem; }
  body.obs main { padding-top:1.5rem; }
  figure.plate { margin-left:-1.25rem; margin-right:-1.25rem; }
  figure.plate.pan { overflow-x:auto; }
  figure.plate.pan a { display:block; width:max-content; max-width:none; }
  figure.plate.pan img, figure.plate.pan.tall img { width:46rem; max-width:none; }
  .pan-hint { display:block; }
  ul.sky { gap:2.5rem; margin-top:2rem; }
  ul.sky .frame { margin:0 -1.25rem; aspect-ratio:auto; }
  ul.sky img { height:auto; max-height:80vh; }
  .obs .what { font-size:1.15rem; }
  dl.facts { grid-template-columns:1fr 1fr; gap:1.25rem 1rem; }
  dl.facts dd { font-size:1.15rem; }
}
/* OpenGraph+ sets data-ogplus while it photographs a page for its share card */
html[data-ogplus] .back { display:none; }