* {box-sizing:border-box}
:root { color-scheme:dark; --paper:#eae8df; --ink:#121510; --acid:#d6e89e; font-family:Arial,Helvetica,sans-serif; }
body {margin:0; background:#050605; color:var(--paper)}
a {color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible {outline:2px solid #a4bd6f;outline-offset:4px}
.mast,footer {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem clamp(20px,4.7vw,150px)}
.mast {background:var(--paper);color:var(--ink);position:relative;z-index:2}
.logo {display:inline-flex;align-items:center;gap:.48em;font-size:clamp(21px,2.15vw,52px);font-weight:750;letter-spacing:-.075em}
.logo i {width:1.5em;height:.66em;border:2px solid currentColor;border-radius:100%;position:relative;transform:rotate(-18deg)}
.logo i::before {content:"";position:absolute;width:.63em;height:.63em;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink)}
nav {display:flex;align-items:center;gap:clamp(16px,3vw,64px);font-size:clamp(13px,1vw,22px)}
nav a:hover,footer a:hover{text-decoration:underline;text-underline-offset:4px}
.feature {position:relative;overflow:hidden;isolation:isolate;background:#000;min-height:clamp(530px,48vw,1170px);display:flex;align-items:center;padding:clamp(35px,7vw,150px) clamp(25px,6vw,170px)}
.plate {position:absolute;inset:0;z-index:-1;overflow:hidden}
.plate img {position:absolute;left:67%;top:51%;width:143%;max-width:none;height:auto;transform:translate(-50%,-50%)}
@media (min-resolution:1.5dppx) { .feature { --art-density:2; } }
@media (min-resolution:2.5dppx) { .feature { --art-density:3; } }
.feature-eclipse .plate img { max-width: calc(2766px / var(--art-density,1)); }
.feature-day .plate img {width:88%}
.feature-shade .plate img {width:67%;top:49%;height:128%;max-height:calc(1700px / var(--art-density,1));object-fit:contain;left:71%}
.feature::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000b,transparent 45%)}
.cover {position:relative;width:40%;max-width:870px}
.series,.credit,small,.viewer-bar,.viewer-scale {font:500 clamp(11px,.84vw,20px)/1.4 "Courier New",monospace}
.series {display:flex;align-items:center;gap:.8em;margin:0 0 clamp(36px,4.2vw,98px);color:var(--acid)}
.series span {width:25px;height:1px;background:currentColor}
h1,h2 {font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.069em}
h1 {font-size:clamp(75px,8.15vw,230px);line-height:.81;margin:0 0 .29em}
h1 em {display:block;font-weight:400;color:#dedcc9;line-height:1.1}
.caption {font-size:clamp(15px,1.08vw,26px);line-height:1.48;max-width:31ch;margin:0 0 1.6em;color:#cecec8}
.inspect {display:inline-flex;gap:1.3em;align-items:center;border-bottom:1px solid #eae8df9a;padding:.7em 0;color:var(--paper);font-size:clamp(14px,1vw,22px)}
.inspect b {color:var(--acid);font-size:1.3em;font-weight:400}
.credit {position:absolute;right:4.7%;bottom:4.2%;display:flex;gap:1.5em;color:#c8c8bd}
.collection {background:var(--paper);color:var(--ink);padding:clamp(28px,3.5vw,90px) 5vw clamp(38px,5.6vw,135px)}
.collection-heading {display:flex;gap:2em;align-items:baseline;justify-content:space-between;margin-bottom:1.5em}
h2 {margin:0;font-size:clamp(33px,4.6vw,105px)}
.collection-heading p{margin:0;color:#50564c}
.observations {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3em}
.observation {display:grid;grid-template-columns:29% 1fr auto;align-items:center;gap:.9em;border-block:1px solid #aaa99b;padding:1em 0}
.observation[aria-current]{border-top:2px solid #516830}
.observation img{width:100%;aspect-ratio:1.5;object-fit:cover;background:black}
.observation strong{display:block;font-family:Georgia,serif;font-size:clamp(18px,1.7vw,43px);font-weight:normal}
.observation small{color:#515748}
footer {font-size:clamp(11px,.9vw,19px);color:#bfc0b7;min-height:80px}
dialog {background:#080a08;color:var(--paper);border:1px solid #4e5145;padding:0;width:min(94vw,2200px);max-width:100%;height:90svh;max-height:100%}
dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog::backdrop {background:#030403e8}
.viewer-bar,.viewer-scale {display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.8rem 1.2rem}
.viewer-area {overflow:auto;background:black;overscroll-behavior:contain}
.viewer-area img {display:block;width:var(--zoom,100%);height:var(--zoom,100%);object-fit:contain}
.viewer-bar button {background:none;color:inherit;border:1px solid #777966;padding:.65em .9em;cursor:pointer}
.viewer-scale {justify-content:center}
.viewer-scale input {width:min(50%,400px);accent-color:var(--acid)}
.viewer-scale output{min-width:5ch}
@media(max-width:700px) {
 .mast {padding:13px 5%}
 .feature {display:block;padding:25px 6% 36px;min-height:620px}
 .feature .plate {top:27%;bottom:19%;z-index:-1}
 .feature .plate img {width:201%;left:54%;top:48%}
 .feature-day .plate img {width:118%} .feature-shade .plate img{width:97%;height:107%;left:55%}
 .cover {width:100%;display:grid;grid-template-rows:auto auto minmax(169px,45vw) auto auto}
 .series {margin-bottom:23px;font-size:11px}
 h1 {font-size:clamp(57px,14vw,89px);line-height:.94;margin-bottom:0} h1 em {display:inline-block}
 .caption {grid-row:4;max-width:36ch;margin:7px 0 0;font-size:14px}.inspect {grid-row:5;justify-self:start}
 .credit {bottom:15px;right:6%;font-size:10px}
 .collection-heading {display:block}.collection-heading p{margin-top:.4em}
 .observations {grid-template-columns:1fr;gap:0}.observation{border-bottom:0;grid-template-columns:22% 1fr auto}
 footer {flex-wrap:wrap}
}
@media(max-width:440px){.feature{min-height:520px}.feature .plate{top:23%;bottom:21%}nav{gap:12px}.collection-heading p{font-size:14px}}
@media (max-width: 360px) {
  .mast { gap: 8px; padding-inline: 12px; }
  .mast nav { gap: 8px; }
}