:root {color-scheme:dark;--background:#111;--border:#333;--text:#fff;--muted-text:#999;--accent:#d8cfc2;--menu-background:#333;--thumbnail-border:#666;--thumbnail-hover:#fff;--columns:4;}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);font:12px Verdana,Arial,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{color:var(--text)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}img{display:block;max-width:100%}.skip-link{position:absolute;left:8px;top:8px;transform:translateY(-200%);padding:10px;background:var(--background);z-index:30}.skip-link:focus{transform:none}.site-header{background:var(--menu-background);padding:25px 24px;min-height:66px}.header-nav{max-width:800px;margin:auto;display:flex;justify-content:flex-end;gap:40px;font-size:14px}.header-nav a[aria-current]{color:var(--text)}.site-layout{max-width:800px;margin:35px auto 60px;padding:0 10px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;min-height:420px}.gallery-menu h2{font:normal 18px 'Trebuchet MS',sans-serif;color:var(--muted-text);margin:0 0 12px;padding:6px 10px}.gallery-menu nav{display:flex;flex-direction:column}.gallery-menu a{display:block;padding:10px;font:bold 12px 'Trebuchet MS',sans-serif}.gallery-menu a:hover,.gallery-menu a[aria-current]{background:var(--menu-background);color:var(--text)}main{min-width:0}main:focus{outline:none}.welcome h1{font:700 22px 'Trebuchet MS',sans-serif;margin:6px 0 12px}.tagline{font-style:italic;color:var(--muted-text)}.intro{margin-top:36px;color:var(--muted-text)}.gallery-heading{border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:12px}.gallery-heading h1{font:700 16px 'Trebuchet MS',sans-serif;margin:6px 0}.gallery-heading h1 span{font-weight:normal;color:var(--muted-text)}.gallery-heading p{font-size:11px;color:var(--muted-text);margin:5px 0 0}.photo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:24px 12px}.tile-open{width:100%;height:138px;padding:4px;border:1px solid var(--thumbnail-border);background:transparent;cursor:zoom-in;display:grid;place-items:center}.tile-open:hover{border-color:var(--thumbnail-hover)}.tile-open:focus{border-color:var(--thumbnail-selected)}.tile-open img{max-height:128px;width:auto;max-width:100%;object-fit:contain}.caption{text-align:center;color:var(--muted-text);font-size:11px;line-height:1.4;overflow-wrap:anywhere;margin:8px 0 0}.site-footer{background:var(--menu-background);text-align:center;padding:24px;font-size:11px;color:var(--muted-text)}.contact-button{display:inline-block;border:1px solid var(--accent);padding:10px 20px;border-radius:8px;font-size:12px}.about img{max-height:420px;max-width:100%;margin:0 auto 24px}.about h1{font-size:20px}.about p{font-size:14px;line-height:1.8}.viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:56px 24px 24px;border:0;background:transparent;color:#fff;overflow:hidden}.viewer[open]{display:flex;align-items:center;justify-content:center}.viewer::backdrop{background:rgb(0 0 0/.92)}html:has(dialog[open]){overflow:hidden}.viewer-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}.viewer-img{max-width:100%;max-height:calc(100dvh - 155px);object-fit:contain;cursor:pointer;transform-origin:center}.viewer-caption{text-align:center;font-size:14px;color:#fff}.viewer-hint{color:#bbb;font-size:11px;margin:0;text-align:center}.viewer-close{position:fixed;right:14px;top:8px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}.viewer.is-closing .viewer-caption{opacity:0}
@media(max-width:640px){.site-layout{grid-template-columns:1fr;margin-top:20px;padding:0 16px;gap:24px}.gallery-menu nav{flex-direction:row;flex-wrap:wrap;gap:4px}.gallery-menu h2{font-size:16px;padding-left:0}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-nav{gap:28px}.site-header{padding:20px 16px}}
@media(max-width:400px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.viewer{padding-right:16px;padding-left:16px}.viewer-hint{font-size:10px}}
/* Visible photo navigation, available on mouse, touch, and keyboard. */
.viewer-photo { position:relative; display:flex; justify-content:center; align-items:center; max-width:100%; }
.viewer-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; width:44px; height:52px; padding:8px; border:1px solid rgb(255 255 255 / .6); border-radius:8px; background:rgb(0 0 0 / .7); color:#fff; cursor:pointer; box-shadow:0 2px 10px rgb(0 0 0 / .3); }
.viewer-arrow[hidden] { display:none; }
.viewer-prev { left:10px; }
.viewer-next { right:10px; }
.viewer-arrow svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.viewer-arrow:hover { background:rgb(0 0 0 / .9); border-color:#fff; }
.viewer-arrow:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.viewer.is-closing .viewer-arrow { visibility:hidden; }
@media(max-width:400px) { .viewer-prev { left:5px; } .viewer-next { right:5px; } }
/* Gallery links match the main navigation. */
.gallery-menu h2 { padding-left:0; color:var(--muted-text); }
.gallery-menu nav { gap:6px; }
.gallery-menu a { display:block; width:fit-content; max-width:100%; padding:9px 0; background:transparent; color:var(--accent); font:14px Verdana,Arial,sans-serif; line-height:1.5; border:0; border-radius:0; box-shadow:none; overflow-wrap:anywhere; }
.gallery-menu a:hover { background:transparent; color:var(--text); }
.gallery-menu a[aria-current="page"] { background:transparent; color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; text-decoration-thickness:1px; }
@media(max-width:640px) { .gallery-menu nav { gap:8px 24px; } }
/* Stronger, consistent navigation hierarchy. */
.header-nav { gap:36px; }
.header-nav a { font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--text); padding:5px 0; }
.header-nav a:hover { color:var(--accent); }
.header-nav a[aria-current="page"] { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:7px; text-decoration-thickness:2px; }
.gallery-menu h2 { color:var(--text); font-size:20px; font-weight:700; margin-bottom:16px; }
.gallery-menu nav { gap:8px; }
.gallery-menu a { font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--text); padding:10px 0; }
.gallery-menu a:hover { color:var(--accent); }
.gallery-menu a[aria-current="page"] { text-decoration-thickness:2px; }
.welcome h1 { font-size:26px; font-weight:700; }
.gallery-heading h1 { font-size:20px; }
.gallery-heading h1 span { font-size:14px; }
@media(max-width:640px) { .header-nav { gap:24px; } .gallery-menu nav { gap:6px 24px; } }