:root { font:16px/1.45 "Merriweather Sans","Segoe UI",Arial,sans-serif; color:#263b31; background:#fff; color-scheme:light; --pine:#244c3d; --line:#ccd7cf; --muted:#52645b; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; }
button,select,input { font:inherit; }
button,select { color:var(--pine); background:#fff; border:1px solid var(--line); border-radius:6px; min-height:44px; padding:.45rem .8rem; cursor:pointer; }
button:not(:disabled):hover { background:#edf3ef; border-color:#597f72; }
button:active:not(:disabled) { background:#dfeae3; }
button:disabled { color:#76837a; background:#f4f6f3; cursor:default; }
:is(button,select,input,a,[tabindex]):focus-visible { outline:3px solid #954e13; outline-offset:3px; }
a { color:#814411; text-underline-offset:3px; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(1.1rem,2.3vw,1.5rem); font-weight:650; line-height:1.2; letter-spacing:-.02em; }
h2 { font-size:1.2rem; }
.comparison { height:100%; min-height:560px; padding:16px; display:flex; flex-direction:column; gap:12px; background:white; }
.comparison:fullscreen { height:100dvh; width:100vw; min-height:0; overflow:auto; }
.comparison::backdrop { background:white; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; }
header button { flex:none; font-size:.875rem; }
.eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.year-controls { display:grid; grid-template-columns:1fr 1fr; gap:16px; flex:none; }
.year-controls label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; padding:10px 12px; background:#f4f7f3; border:1px solid #dce4dc; border-radius:8px; }
.year-controls label>span { font-size:.75rem; font-weight:700; color:var(--muted); }
.year-controls select { grid-column:2; grid-row:1 / 3; min-width:108px; font-weight:650; font-size:1.1rem; border-color:#a5b9ac; }
.year-controls time { grid-column:1; font-size:.8125rem; font-variant-numeric:tabular-nums; }
.image-panel { position:relative; flex:1 1 auto; min-height:180px; background:#17392e; border-radius:8px; }
#viewport { position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border-radius:inherit; }
#viewport:focus-visible { outline-offset:-3px; }
#viewport.zoomed { cursor:grab; }
#viewport.panning { cursor:grabbing; }
#track { position:relative; margin:auto; overflow:hidden; --split:50%; }
#track img { position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }
#earlier-image { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
#divider { position:absolute; left:var(--split); top:0; bottom:0; width:44px; transform:translateX(-50%); cursor:ew-resize; touch-action:none; }
#divider::before { content:""; position:absolute; left:21px; top:0; bottom:0; width:2px; background:white; box-shadow:0 0 3px #17392e; }
#divider span { position:absolute; left:0; top:50%; width:44px; height:44px; transform:translateY(-50%); border:2px solid white; border-radius:50%; display:grid; place-items:center; background:#17392e; color:white; font-size:1.4rem; box-shadow:0 2px 8px #102a2266; }
#image-status { position:absolute; inset:0; display:grid; place-items:center; padding:1.5rem; color:white; background:#17392ef2; text-align:center; border-radius:inherit; }
#image-status[hidden] { display:none; }
.controls { display:flex; align-items:end; gap:24px; flex:none; }
.reveal { display:flex; flex-direction:column; flex:1; min-width:0; gap:4px; font-size:.8125rem; color:var(--muted); }
input[type=range] { width:100%; margin:0; height:44px; accent-color:#37604c; cursor:ew-resize; }
.zoom { display:flex; align-items:center; gap:0; }
.zoom button { min-width:44px; }
.zoom output { min-width:48px; text-align:center; font-size:.875rem; font-variant-numeric:tabular-nums; }
#fit { margin-left:10px; font-size:.875rem; }
footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; border-top:1px solid #e3e8e2; flex:none; }
.credit { font-size:.8125rem; color:var(--muted); }
.credit strong,.credit span { display:block; }
.credit strong { font-weight:600; color:var(--pine); margin-bottom:2px; }
footer button { flex:none; font-size:.8125rem; }
.notice { font-size:.875rem; padding:10px 12px; background:#fff6e9; border-left:3px solid #954e13; flex:none; }
.notice:empty { display:none; }
.screen-reader { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
dialog { max-width:700px; width:calc(100% - 24px); max-height:85dvh; border:1px solid #597f72; border-radius:10px; padding:0; color:inherit; background:white; overflow:auto; overflow-wrap:anywhere; }
dialog::backdrop { background:#102a22b8; }
.dialog-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:white; border-bottom:1px solid var(--line); }
dialog>p,dialog>ul { margin:16px 20px; }
dialog>ul { padding-left:20px; }
dialog li { margin-bottom:1rem; }
.comparison:not(.ready) :is(.year-controls,.image-panel,.controls,header button,footer button) { display:none; }
@media(max-width:720px) {
  .comparison { height:100%; min-height:600px; padding:12px; gap:12px; }
  .comparison:fullscreen { height:100dvh; }
  .year-controls { gap:10px; }
  .year-controls label { display:flex; flex-direction:column; align-items:stretch; padding:8px 10px; gap:4px; }
  .year-controls select { width:100%; min-width:0; }
  .image-panel { flex:1 1 auto; min-height:140px; max-height:calc((100vw - 24px) * .684615); }
  .comparison:fullscreen .image-panel { max-height:none; min-height:140px; }
  .controls { flex-direction:column; align-items:stretch; gap:6px; }
  .zoom { justify-content:center; }
  footer { flex-wrap:wrap; gap:8px; }
  footer button { margin-left:auto; }
  header { gap:10px; }
  header button { padding-inline:.55rem; }
}