:root{color-scheme:light dark;--ink:#1a1a1a;--dim:#5d5d5d;--line:#e2ded8;
--bg:#fbfaf8;--card:#fff;--accent:#7a3b2e}
@media (prefers-color-scheme:dark){:root{--ink:#ece9e4;--dim:#a8a29a;
--line:#33302c;--bg:#151412;--card:#1d1c19;--accent:#d69079}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.6 Georgia,"Iowan Old Style","Times New Roman",serif}
a{color:var(--accent)}
header,footer{padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}
footer{border:0;border-top:1px solid var(--line);color:var(--dim);font-size:.85rem}
header a{font-weight:700;text-decoration:none;letter-spacing:.02em}
main{max-width:52rem;margin:0 auto;padding:1.5rem}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 .3rem}
.where{color:var(--dim);margin:0 0 1.4rem;font-style:italic}
figure{margin:0 0 1rem}
figure img{width:100%;height:auto;border-radius:3px;background:var(--card)}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));
gap:.6rem;margin:0 0 1.6rem;padding:0;list-style:none}
.more img{width:100%;height:auto;border-radius:3px}
.buy{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
padding:1rem 1.2rem;margin:0 0 1.6rem;background:var(--card);
border:1px solid var(--line);border-radius:4px}
.price{font-size:1.5rem;font-weight:700;margin:0}
.gone{color:var(--dim);margin:0;font-style:italic}
.button{display:inline-block;padding:.6rem 1.1rem;background:var(--accent);
color:#fff;text-decoration:none;border-radius:3px;font-family:system-ui,sans-serif;
font-size:.95rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:1.6rem 0;
padding-top:1.2rem;border-top:1px solid var(--line);font-size:.95rem}
dt{color:var(--dim)}
dd{margin:0}
/* The formulas carry real Unicode subscripts. A serif face without them draws
   a box, which is the HTML version of the black rectangles Rockwell printed on
   the info cards -- so the formula asks for a stack that has the glyphs. */
.formula{font-family:"DejaVu Sans","Segoe UI Symbol",system-ui,sans-serif}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
gap:1.4rem;padding:0;list-style:none;margin:1.5rem 0 0}
.grid a{text-decoration:none;color:inherit;display:block}
/* A fixed box for every thumbnail, cropped to fill it. Etsy's "il_570xN" means
   the width is 570 and the height is whatever the photograph is, so nothing
   here knows a thumbnail's height until it has loaded -- and without a box the
   whole grid reflows as they arrive, captions sitting above their pictures
   until the last one lands. Cropping is safe at this size because the page
   behind it shows every photograph uncropped. */
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
border-radius:3px;background:var(--card)}
.grid p{margin:.45rem 0 0;font-size:.95rem;line-height:1.35}
.grid .sold{color:var(--dim);font-size:.85rem}
/* Likewise the thumbnail strip on a piece's own page. The hero above it is
   deliberately left uncropped -- the specimen is the content, and a rock with
   its terminations cut off is worse than a page that settles as it loads. */
.more img{aspect-ratio:4/3;object-fit:cover;display:block}
.lede{color:var(--dim);max-width:38rem}