*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0d0e12;color:#d9dbe3;font:15px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid #b9c8e6;outline-offset:4px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px clamp(20px,4vw,68px);background:linear-gradient(#242936,#11141c 70%,#0b0d12);border-bottom:1px solid #3c475f;box-shadow:0 2px 13px #0009;position:relative;z-index:5}.brand{display:block;width:260px;max-width:42vw}.brand img{width:100%;height:auto;display:block}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{color:#c1c5d0;padding:10px 14px;border-radius:3px;font-size:13px;letter-spacing:.05em;text-transform:uppercase}nav a:hover,nav a.active{color:white;background:#2b3447}.hero{min-height:520px;height:min(72vh,760px);position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid #2d3442}.hero-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#090a0eea,#1012186b,#090a0ed9),url('images/covers/northumberland.jpg') center/cover;filter:brightness(.75);transform:scale(1.03)}.hero-content{position:relative;text-align:center;padding:35px 20px;max-width:1000px}.eyebrow{color:#91a8c9;text-transform:uppercase;letter-spacing:.25em;font-size:11px;font-weight:bold}.hero-logo{display:block;width:min(850px,90vw);margin:20px auto 0;filter:drop-shadow(0 7px 18px #0009)}.hero-copy{font-size:clamp(15px,2vw,21px);color:#e2e3e8;letter-spacing:.08em}.primary-link{display:inline-flex;align-items:center;gap:18px;background:#e7ebf2;color:#12151c;padding:12px 24px;margin-top:18px;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em}.primary-link:hover{background:#c3d3ec}.home-section,main#content{max-width:1450px;margin:auto;padding:58px clamp(20px,4vw,68px)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.section-heading h1,.home-section h2,main#content h1{font-size:clamp(26px,3vw,38px);font-weight:400;color:#f0f1f5;line-height:1.2;margin:8px 0 12px}.section-heading p{color:#a5aab6;margin:0}.text-link{color:#bdcde9;white-space:nowrap}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.feature{background:#1b1f29;border:1px solid #30394a;padding:10px;transition:transform .2s,border-color .2s}.feature:hover,.tile:hover{transform:translateY(-3px);border-color:#7b91b8}.feature img{display:block;width:100%;height:235px;object-fit:cover;image-rendering:auto}.feature span{display:block;padding:14px 6px 8px;color:#e3e7ee;font-size:16px}.feature small{display:block;color:#949daa;font-size:12px;margin-top:3px}.about-contact{border-top:1px solid #272e3b;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,7vw,100px)}.about-contact p:not(.eyebrow){color:#b6bdca;max-width:700px}.muted{color:#8691a2!important;font-size:13px}.crumbs{color:#8ca6cf;font-size:14px;margin-bottom:16px}.crumbs a{color:#b7c7e1}.crumbs a:hover{text-decoration:underline}main#content{min-height:65vh}main#content h1{margin-bottom:3px}.sub{color:#a7acb8;margin:0 0 28px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:22px 17px}.tile{display:block;text-align:center;border:1px solid #242a36;background:#151820;padding:10px 9px 13px;transition:transform .2s,border-color .2s}.frame{background:linear-gradient(#2b3346,#161b25);padding:9px;border:1px solid #303b50;box-shadow:0 5px 12px #0007}.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.tile-title{font-size:13px;line-height:1.3;color:#c4c8d3;margin-top:12px}.count{font-size:11px;color:#858c9c;margin-top:4px}.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.photos button{background:#1d2330;border:1px solid #384254;padding:7px;cursor:zoom-in}.photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.notice{border:1px solid #384355;background:#1b202b;padding:24px;color:#b7c0d1;max-width:780px}.notice code{color:#e3e8f3;overflow-wrap:anywhere}.lightbox{display:none;position:fixed;inset:0;z-index:50;background:#000e;align-items:center;justify-content:center;padding:50px 20px}.lightbox.open{display:flex}.lightbox img{max-width:100%;max-height:100%;object-fit:contain}.lightbox .close{position:absolute;right:20px;top:12px;border:0;background:none;color:white;font-size:40px;cursor:pointer}footer{border-top:1px solid #2c3341;padding:25px clamp(20px,4vw,68px);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#8c95a6;font-size:12px}@media(max-width:750px){.site-header{flex-direction:column;gap:4px;padding:12px}.brand{max-width:80vw;width:290px}nav{justify-content:center;gap:0}nav a{padding:8px 10px;font-size:11px}.hero{height:490px;min-height:0}.feature-grid,.about-contact{grid-template-columns:1fr}.feature img{height:220px}.section-heading{align-items:start;flex-direction:column}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{padding:6px}.frame{padding:5px}.tile-title{font-size:12px}.home-section,main#content{padding:35px 18px}}
/* Homepage photographic slideshow */
.hero-slides,.hero-shade{position:absolute;inset:0}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;transform:scale(1.015)}.hero-slide.active{opacity:1}.hero-shade{background:linear-gradient(90deg,rgba(6,8,12,.82),rgba(6,8,12,.26) 55%,rgba(6,8,12,.65)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 45%)}.slide-controls{display:flex;gap:12px;justify-content:center;margin-top:25px}.slide-controls button{color:#f0f1f5;background:#1b2232bb;border:1px solid #8190a5;padding:5px 14px;font-size:23px;cursor:pointer;min-width:48px}.slide-controls button:hover{background:#40506c}.hero-content{z-index:2}.hero-logo{max-height:320px;object-fit:contain}@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Homepage: small logo remains in header only */
.hero-title{font-size:clamp(32px,5vw,66px);font-weight:400;letter-spacing:.06em;color:#fff;text-shadow:0 3px 22px #000c;margin:20px 0 10px}


/* Photograph viewer with optional metadata panel */
.lightbox { z-index: 1000; gap: 0; }
.viewer-toolbar { position: absolute; top: 12px; right: 18px; display: flex; align-items: center; gap: 12px; z-index: 5; }
.lightbox .viewer-toolbar .close { position: static; font-size: 32px; line-height: 1; }
.info-toggle, .viewer-arrow { background: #18202bdc; color: #f4f5f8; border: 1px solid #66748a; border-radius: 4px; cursor: pointer; }
.info-toggle { padding: 9px 13px; font-size: 14px; }
.viewer-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; line-height: 1; padding: 6px 12px; z-index: 3; }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-photo { max-width: calc(100vw - 130px) !important; max-height: calc(100vh - 115px) !important; }
.photo-info { position: absolute; right: 0; top: 65px; bottom: 0; width: min(365px, 90vw); overflow-y: auto; padding: 24px; background: #111721f5; color: #e9edf5; border-left: 1px solid #445067; z-index: 4; box-shadow: -12px 0 30px #0008; }
.photo-info[hidden] { display: none; }
.photo-info h2 { margin: 0 0 16px; font-size: 21px; font-weight: 500; }
.photo-info p { color: #d2d8e3; line-height: 1.55; }
.photo-info dl { display: grid; grid-template-columns: 105px 1fr; gap: 10px; font-size: 13px; }
.photo-info dt { color: #9eafc9; }
.photo-info dd { margin: 0; overflow-wrap: anywhere; }
.viewer-position { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color: #d6deeb; background: #111a; padding: 5px 12px; border-radius: 5px; font-size: 13px; }
@media (max-width: 600px) {
  .viewer-photo { max-width: calc(100vw - 76px) !important; }
  .viewer-arrow { font-size: 29px; padding: 6px 8px; }
  .viewer-prev { left: 2px; }
  .viewer-next { right: 2px; }
  .photo-info { top: 60px; width: 100%; bottom: 0; }
}

/* Photographer portrait on About section */
.photographer-about { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; align-items: start; }
.photographer-portrait { display: block; width: 120px; height: 102px; max-width: 100%; object-fit: contain; object-position: center; border: 1px solid #536076; background: #171c24; box-shadow: 0 8px 28px #0006; }
.photographer-bio { min-width: 0; }
@media (max-width: 650px) { .photographer-about { grid-template-columns: 1fr; } .photographer-portrait { margin-inline: auto; } }

/* One fixed homepage image; change the filename here to use another photograph. */
.hero-single-image {
  position: absolute;
  inset: 0;
  background: url("images/slideshow/slide-1.jpg") center / cover no-repeat;
}

/* Indicate that the enlarged photograph can be clicked to close. */
.lightbox .viewer-photo { cursor: zoom-out; }


/* Compact information panel above a scrollable gallery thumbnail strip. */
.viewer-sidebar {
  position: absolute;
  top: 65px;
  right: 0;
  bottom: 0;
  width: min(365px, 90vw);
  display: flex;
  flex-direction: column;
  background: #111721f5;
  border-left: 1px solid #445067;
  box-shadow: -12px 0 30px #0008;
  z-index: 4;
  min-height: 0;
}
.viewer-sidebar .photo-info {
  position: static;
  width: 100%;
  height: 25%;
  flex: 0 0 25%;
  min-height: 0;
  padding: 14px 18px;
  overflow-y: auto;
  border: 0;
  border-bottom: 1px solid #445067;
  box-shadow: none;
  background: transparent;
}
.viewer-sidebar .photo-info[hidden] { display: none; }
.viewer-sidebar .photo-info h2 { font-size: 17px; margin-bottom: 8px; }
.viewer-sidebar .photo-info p { margin: 5px 0 10px; }
.viewer-sidebar .photo-info dl { grid-template-columns: 95px 1fr; gap: 5px 8px; margin: 8px 0; }
.viewer-thumbnails { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.viewer-thumb-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.viewer-thumb-list button { cursor: pointer; padding: 3px; border: 2px solid transparent; background: #273040; border-radius: 2px; aspect-ratio: 4 / 3; }
.viewer-thumb-list button:hover { border-color: #8ca6cf; }
.viewer-thumb-list button.active { border-color: #e2e9f7; }
.viewer-thumb-list img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Leave room for the sidebar so the enlarged photograph stays visible. */
.lightbox:has(.viewer-sidebar) .viewer-photo { max-width: calc(100vw - min(365px, 90vw) - 100px) !important; }
.lightbox:has(.viewer-sidebar) .viewer-position { left: calc((100% - min(365px, 90vw)) / 2); }
@media (max-width: 700px) {
  .viewer-sidebar { top: auto; left: 0; width: 100%; height: 38%; bottom: 0; border-left: 0; border-top: 1px solid #445067; }
  .viewer-sidebar .photo-info { flex-basis: 35%; height: 35%; }
  .viewer-thumb-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lightbox:has(.viewer-sidebar) .viewer-photo { max-width: calc(100vw - 76px) !important; max-height: 48vh !important; margin-bottom: 38vh; }
  .lightbox:has(.viewer-sidebar) .viewer-position { left: 50%; bottom: 38%; }
}

/* Permanent sidebar and navigation arrows clear of its edge. */
@media (min-width: 701px) {
  .lightbox:has(.viewer-sidebar) .viewer-next {
    right: calc(min(365px, 90vw) + 12px);
    z-index: 6;
  }
  .lightbox:has(.viewer-sidebar) .viewer-prev { z-index: 6; }
  .lightbox:has(.viewer-sidebar) .viewer-photo {
    margin-right: min(365px, 90vw);
  }
}
@media (max-width: 700px) {
  .lightbox:has(.viewer-sidebar) .viewer-next {
    right: 8px;
    top: 30%;
    z-index: 6;
  }
  .lightbox:has(.viewer-sidebar) .viewer-prev {
    left: 8px;
    top: 30%;
    z-index: 6;
  }
}

/* Homepage portfolio title shadows */
.feature > span {
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.65);
}

/* Smaller photograph count text */
.feature > span small {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Main homepage title */
.hero-title {
    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.95),
        0 6px 20px rgba(0, 0, 0, 0.75);
}

/* Subtle emphasis for homepage heading */
.hero-content .eyebrow {
    color: #91a8c9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.25em;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 3px 8px rgba(0, 0, 0, 0.4);

    margin-bottom: 18px;
}

/* Photographer biography layout */
.photographer-about {
    display: block;
    min-width: 0;
}

.photographer-bio {
    display: flow-root;
    width: 100%;
    min-width: 0;
}

/* Photographer portrait on the left */
.about-contact .photographer-bio .photographer-portrait {
    float: left;
    position: static;

    width: 120px;
    height: 102px;

    margin: 4px 25px 12px 0;

    object-fit: contain;
    border: 1px solid #536076;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* Allow biography paragraphs to use full available width */
.about-contact .photographer-bio p:not(.eyebrow) {
    max-width: none;
}

/* Keep portrait within the biography text width */
.about-contact .photographer-about {
    display: block;
    width: 100%;
    min-width: 0;
}

.about-contact .photographer-bio {
    display: flow-root;
    width: 100%;
    max-width: 520px;
    margin-left: 0;
    margin-right: auto;
}

/* Text follows the same width */
.about-contact .photographer-bio p:not(.eyebrow) {
    max-width: none;
}

.not-found { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.not-found .error-code { font-size: clamp(80px, 16vw, 160px); line-height: 1; color: #91a8c9; font-weight: 400; margin: 0; text-shadow: 0 5px 24px #0009; }
.not-found h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 400; color: #f0f1f5; }
.not-found p { max-width: 480px; color: #b6bdca; margin: 0 0 12px; }
.not-found .primary-link { margin-top: 8px; }