/* photo-page.css - shared stylesheet for the generated per-photograph pages
   (photo/<slug>.html). One cacheable file instead of ~300 lines of inline CSS
   copied into each of 270 pages.

   Lives at the site root next to search.css. It is a publishing prerequisite of the
   generated photograph pages (every page links to it), so it is tracked and ordered
   ahead of them by Photo Manager - see photo-manager/publish-order.mjs and
   SEO-PHOTO-PAGES-ROLLOUT.md.

   Chrome (nav, Explore mega-menu, mobile menu, footer) is copied verbatim from
   scripts/build-season-pages.mjs; the photo-specific rules mirror the existing
   interactive viewer (image.html) so the two feel like one site. */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --cream:#f5f0e8; --charcoal:#1a1f2e; --linen:#f5f0e8; --ink:#515151; --ink-muted:#8a8880;
  --gold:#c9963a; --bracken:#c9963a;
  --serif:'Cormorant',Georgia,serif; --serif-sc:'Cormorant SC',Georgia,serif; --sans:'Lato',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}
html { scrollbar-color:var(--charcoal) var(--linen); }
html.smooth-scroll { scroll-behavior:smooth; }
body { background:var(--charcoal); color:var(--ink); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { user-select:none; -webkit-user-drag:none; }
.eyebrow { font-family:var(--sans); font-size:0.62rem; font-weight:400; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); }

/* ── nav (canonical, no-hero variant) ─────────────────────────── */
  nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:0.4rem 2.5rem; background:rgba(245,240,232,0.97); border-bottom:1px solid rgba(26,26,24,0.08); backdrop-filter:blur(10px); }
  .logo-block { display:flex; align-items:center; text-decoration:none; height:52px; }
  .logo-img { height:52px; width:auto; display:block; }
  .nav-right { display:flex; align-items:center; gap:2.5rem; }
  .nav-links { display:flex; gap:2rem; list-style:none; }
  .nav-links a, .nav-icon-btn { font-size:0.78rem; font-weight:300; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:color 0.2s; }
  .nav-links a:hover, .nav-icon-btn:hover, .nav-links a.active { color:var(--gold); }
  .nav-icons { display:flex; align-items:center; gap:1.1rem; }
  .nav-icon-btn { background:none; border:none; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; line-height:0; }
  .nav-icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
  .nav-menu { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; z-index:220; }
  .nav-menu span { display:block; width:22px; height:1px; background:var(--ink); transition:background 0.4s,transform 0.3s,opacity 0.3s; }
  .nav-menu.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .nav-menu.open span:nth-child(2) { opacity:0; }
  .nav-menu.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  /* Explore mega-menu, ported verbatim from index.html/gallery.html - this
     generator predated the site-wide Explore-panel rollout, so these pages
     were still shipping the old plain "Explore" + standalone "Gallery"
     links with no dropdown at all. */
  .nav-explore-item { position:relative; }
  .nav-explore-panel { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); width:460px; max-width:90vw; background:#f5f0e8; border:1px solid rgba(201,150,58,0.3); padding:1.3rem 0.5rem 1.1rem; display:flex; align-items:flex-start; justify-content:center; opacity:0; visibility:hidden; transition:opacity 180ms ease-out, transform 180ms ease-out, visibility 0s 180ms; z-index:150; }
  .nav-explore-panel::before { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
  .nav-explore-item:hover .nav-explore-panel, .nav-explore-item:focus-within .nav-explore-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity 180ms ease-out, transform 180ms ease-out, visibility 0s; }
  .nav-explore-tile { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; padding:8px 8px; border-radius:4px; transition:background-color 200ms ease-out; }
  .nav-explore-tile:hover, .nav-explore-tile:focus-visible, .nav-explore-tile.is-hovered { background-color:rgba(201,150,58,0.12); }
  .nav-explore-tile-icon { height:30px; width:auto; display:block; transition:transform 250ms ease-out; }
  .nav-explore-tile:hover .nav-explore-tile-icon, .nav-explore-tile:focus-visible .nav-explore-tile-icon, .nav-explore-tile.is-hovered .nav-explore-tile-icon { transform:translateY(-2px) scale(1.06); }
  .nav-explore-tile-title { display:block; font-family:var(--serif-sc); font-weight:400; font-size:0.72rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--charcoal); margin-top:9px; transition:color 0.2s; white-space:nowrap; }
  .nav-explore-tile-sub { display:block; font-family:var(--serif); font-style:italic; font-weight:300; font-size:0.66rem; color:rgba(26,31,46,0.72); margin-top:2px; }
  .nav-explore-tile:hover .nav-explore-tile-title, .nav-explore-tile:focus-visible .nav-explore-tile-title, .nav-explore-tile.is-hovered .nav-explore-tile-title { color:var(--gold); }
  .nav-explore-divider { width:1px; align-self:stretch; background:rgba(201,150,58,0.3); margin-top:4px; }
  @media (prefers-reduced-motion:reduce) {
    .nav-explore-panel { transition:none; }
    .nav-explore-item:hover .nav-explore-panel, .nav-explore-item:focus-within .nav-explore-panel { transition:none; }
    .nav-explore-tile:hover .nav-explore-tile-icon, .nav-explore-tile:focus-visible .nav-explore-tile-icon, .nav-explore-tile.is-hovered .nav-explore-tile-icon { transform:none; }
  }

  .mobile-menu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:rgba(245,240,232,0.98); z-index:150; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; }
  .mobile-menu.open { display:flex; }
  .mobile-menu a, .mobile-menu button { font-family:var(--serif-sc); font-size:clamp(1.8rem,5vw,2.5rem); font-weight:300; letter-spacing:0.08em; color:var(--ink); text-decoration:none; background:none; border:none; padding:0; cursor:pointer; }
  .mobile-menu a:hover, .mobile-menu button:hover { color:var(--gold); }

  /* Gallery has no standalone mobile-menu link anymore - this toggle next
     to "Explore" is its only route in on a touch device, plus Season's. */
  .mobile-explore-row { display:flex; align-items:center; gap:10px; }
  .mobile-explore-toggle { color:var(--ink-muted); display:flex; align-items:center; transition:color 0.2s, transform 0.25s ease-out; background:none; border:none; padding:0; cursor:pointer; }
  .mobile-explore-toggle svg { width:16px; height:16px; }
  .mobile-explore-toggle.open { transform:rotate(180deg); color:var(--gold); }
  .mobile-explore-sub { display:flex; flex-direction:column; align-items:center; gap:0.8rem; max-height:0; overflow:hidden; opacity:0; transition:max-height 250ms ease-out, opacity 200ms ease-out; }
  .mobile-explore-sub.open { max-height:220px; opacity:1; }
  .mobile-explore-sub a { font-size:clamp(1.1rem,3.4vw,1.5rem); color:var(--ink-muted); }

  /* Short viewport (phone landscape, a short portrait phone): the menu is a fixed-height flex column that scrolls (overflow-y:auto). Its items must not be
     squeezed to fit: .mobile-explore-sub has overflow:hidden, so as a flex item it shrank to ~0 height and the expanded Explore options were clipped away.
     flex-shrink:0 keeps it full height, and the first/last auto margins replace justify-content:center - same centring when everything fits, but when it does
     not fit the menu starts at the top and scrolls (a centred overflow would push the first items above the top edge where they cannot be scrolled to). */
  .mobile-menu { justify-content:flex-start; }
  .mobile-menu > :first-child { margin-top:auto; }
  .mobile-menu > :last-child { margin-bottom:auto; }
  .mobile-explore-sub { flex-shrink:0; }
  @media (prefers-reduced-motion:reduce) {
    .mobile-explore-toggle, .mobile-explore-sub { transition:none; }
  }

  @media (max-width:768px) {
    .nav-links, .nav-icons { display:none; }
    .nav-menu { display:flex; }
    .logo-img, .logo-block { height:36px; }
  }
  @media (min-width:769px) and (max-width:1024px) {
    .nav-links, .nav-icons { display:none; }
    .nav-menu { display:flex; }
  }
  @media (max-height:900px) and (orientation:landscape) {
    .mobile-menu { gap:1.1rem; padding:1.5rem 0; }
    .mobile-menu a, .mobile-menu button { font-size:clamp(1.3rem,4.5vh,1.9rem); }
  }

/* The viewer's nav is in normal flow (not fixed) and slightly tighter than the
   season pages' - match the viewer, which is the page these replace. */
nav { position:relative; z-index:100; padding:0.4rem 1.75rem; }
.nav-links { gap:1.25rem; }
.nav-links a, .nav-icon-btn { font-size:0.74rem; letter-spacing:0.14em; }
.nav-right { gap:2rem; }

/* ── photograph (mirrors image.html's hero / caption / nav rules) ──────── */
.img-hero { background:var(--linen); position:relative; }
.img-stage { display:block; width:100%; position:relative; }
.img-stage img { width:100%; height:auto; display:block; }
.img-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; display:flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border:1px solid rgba(255,255,255,0.6); background:transparent; text-decoration:none; opacity:0; transition:opacity 0.25s, border-color 0.2s, background 0.2s; }
.img-hero:hover .img-arrow, .img-arrow:focus-visible { opacity:1; }
.img-arrow:hover { border-color:#fff; background:rgba(255,255,255,0.12); }
.img-arrow::before { content:''; display:block; width:9px; height:9px; border-top:1.5px solid #fff; border-right:1.5px solid #fff; }
.img-arrow.prev { left:1rem; }
.img-arrow.prev::before { transform:rotate(-135deg) translate(-1px, 1px); }
.img-arrow.next { right:1rem; }
.img-arrow.next::before { transform:rotate(45deg) translate(-1px, 1px); }

.img-caption { padding:1rem 2rem; text-align:center; background:var(--linen); }
.img-title-wrap { display:inline-block; }
.img-title { font-family:var(--serif-sc); font-weight:300; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:0.08em; color:var(--ink); line-height:1; }
.img-rule { width:100%; height:2px; background:linear-gradient(to right, transparent 0%, var(--gold) 35%, var(--gold) 65%, transparent 100%); margin:0.8rem 0; }
.img-location { font-family:var(--sans); font-weight:300; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-muted); }
.img-location .grid-ref { color:var(--ink-muted); white-space:nowrap; }

/* "Open in the interactive viewer" - same pill as the viewer's own
   "View Map" / "Share" buttons, inverted for the light caption band. */
.viewer-cta-wrap { margin-top:1.1rem; }
.viewer-cta { display:inline-flex; align-items:center; gap:0.6rem; border:1px solid var(--gold); border-radius:999px; padding:0.6rem 1.4rem; color:var(--charcoal); background:none; font-family:var(--sans); font-size:0.75rem; letter-spacing:0.08em; text-decoration:none; transition:background 0.2s, color 0.2s; }
.viewer-cta:hover, .viewer-cta:focus-visible { background:var(--gold); color:var(--charcoal); }
.viewer-cta::after { content:'\2192'; }
.viewer-cta-note { margin-top:0.6rem; font-size:0.66rem; letter-spacing:0.08em; color:var(--ink-muted); }

.img-nav { background:var(--linen); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.5rem 2.5rem 0.5rem; }
.img-nav a { font-size:0.7rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-muted); text-decoration:none; transition:color 0.2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.img-nav a:hover { color:var(--gold); }
.img-nav .back { color:var(--ink); text-align:center; padding:0 2rem; }
.img-nav .nav-next { text-align:right; }
.img-lights-divider { height:2px; background:var(--gold); }

/* ── "The Photograph" story block (mirrors .story-* in image.html) ─────── */
.photo-story { background:var(--charcoal); padding:2.5rem 2.5rem 4rem; }
.photo-story-inner { max-width:760px; margin:0 auto; }
.story-eyebrow { font-size:0.62rem; font-weight:400; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.story-h { font-family:var(--serif); font-weight:400; font-size:1.8rem; color:var(--linen); margin-bottom:0.5rem; line-height:1.1; }
.story-cam { font-size:0.78rem; font-weight:300; color:rgba(245,240,232,0.45); margin-bottom:1.2rem; }
.story-p { font-size:0.9rem; font-weight:300; line-height:1.9; color:rgba(245,240,232,0.65); margin-bottom:1.5rem; }
.story-links { display:flex; flex-wrap:wrap; gap:0.6rem 1.8rem; margin-top:1.8rem; }
.story-links a { font-size:0.7rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,150,58,0.45); padding-bottom:2px; transition:opacity 0.2s; }
.story-links a:hover { opacity:0.7; }
.ns-note { font-size:0.78rem; line-height:1.7; color:rgba(245,240,232,0.55); margin-top:1.2rem; }
.ns-note a { color:var(--gold); }

@media (max-width:768px) {
  .img-arrow { display:none; }
  .img-location .grid-ref { display:block; }
  .img-nav { padding:0.75rem 1.25rem; }
  .img-nav .nav-prev, .img-nav .nav-next { font-size:0; white-space:normal; width:2.4rem; height:2.4rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(81,81,81,0.25); border-radius:50%; transition:border-color 0.2s; }
  .img-nav .nav-next { justify-self:end; }
  .img-nav .nav-prev:hover, .img-nav .nav-next:hover { border-color:var(--bracken); }
  .img-nav .nav-prev::before, .img-nav .nav-next::after { content:''; display:block; width:8px; height:8px; border-top:1.5px solid var(--ink-muted); flex-shrink:0; }
  .img-nav .nav-prev::before { border-left:1.5px solid var(--ink-muted); transform:rotate(-45deg) translate(1px,-1px); }
  .img-nav .nav-next::after { border-right:1.5px solid var(--ink-muted); transform:rotate(45deg) translate(-1px,-1px); }
  /* no mobile overrides for .img-caption, .photo-story or nav: the viewer keeps its desktop side margins (2rem caption,
     2.5rem story, 1.75rem nav) on phones too, so the indexable page matches it rather than inventing its own gutters */
}
@media (prefers-reduced-motion:reduce) { .viewer-cta, .img-arrow { transition:none; } }

/* ── footer (canonical) ──────────────────────────────────────── */
  footer { background:var(--charcoal); color:var(--bracken); padding:1.5rem 2.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-family:var(--sans); }
  .footer-logo { flex-shrink:0; }
  .footer-logo img { height:34px; width:auto; }
  .footer-copy { font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; text-align:center; flex:1; }
  footer a { color:var(--bracken); text-decoration:none; transition:opacity 0.2s; }
  .footer-copy a { border-bottom:1px solid rgba(201,150,58,0.5); }
  footer a:hover { opacity:0.7; }
  .footer-right { display:flex; align-items:center; gap:10px; }
  .footer-sig img { height:25px; filter:brightness(0) invert(1); opacity:0.75; }
  .footer-vr { width:1px; height:22px; background:rgba(201,150,58,0.35); }
  .footer-social { display:flex; gap:12px; align-items:center; }
  .footer-social a, .footer-social button { display:flex; color:rgba(245,240,232,0.45); transition:color 0.2s; background:none; border:none; padding:0; cursor:pointer; }
  .footer-social a:hover, .footer-social button:hover { color:var(--bracken); }
  .footer-social svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; }
  @media (max-width:768px) { footer { flex-direction:column; gap:0.6rem; padding:1.5rem 1.25rem; text-align:center; } .footer-copy { flex:none; } .footer-sig, .footer-vr { display:none; } }