/* ============================================================================
   site.css — shared shell for every page of The Rephotographic Surveys.
   Holds the PALETTE (single source of truth), base typography, and the
   site header / nav. Page-specific CSS lives inline in each page's <style>.
   Link this BEFORE any page's inline <style> so inline rules can override.
   ============================================================================ */

:root{
  /* ================= PALETTE =================
     Every color the site uses lives here. To re-skin the whole thing (e.g. toward
     the map's light/warm look) change these values only — all pages read from them. */
  /* Surfaces */
  --bg:#3f3d39;               /* page background — lifted + neutralised (DRAFT2 2026-07-24; was #251f18) */
  --mat:#3f3d39;              /* matte behind the photograph */
  --panel:#4a4844;            /* raised surface (search cards) */
  --panel-hover:#555350;      /* raised surface, hover */
  --thumb-bg:#2b2a27;         /* thumbnail backing */
  /* Text */
  --ink:#f1f0ee;              /* primary text */
  --ink-hi:#ffffff;           /* emphasis (hover) */
  --muted:#a69e96;            /* secondary text */
  --faint:#7b736b;            /* tertiary / hint text */
  --ghost:#565450;            /* dim reference info only the owner needs (site IDs); above --bg, below --line */
  /* Lines */
  --line:#565450;             /* hairline / separators */
  --line-strong:#6d6a65;      /* stronger border */
  /* Survey accents — circle = Third View, triangle = RSP */
  --3v:#c9885a;               /* Third View — warm tan */
  --3v-tint:rgba(201,136,90,.15);
  --rsp:#82a892;              /* RSP — sage green */
  --rsp-tint:rgba(130,168,146,.15);
  /* Cool tone — does double duty by design: it identifies the FIRST VIEW (the
     19th-century original) and marks SELECTION ("you are here") on thumbnails,
     the current breadcrumb, and the map's row outline. One cool tone, not two. */
  --slate:#7f93a6;
  --blue-hi:#dbe6f5;          /* pale fill behind a hovered/selected map row (light surface) */
  --blue-ink:#2b4364;         /* readable text on that pale fill */
  /* =============== END PALETTE =============== */

  --radius: 10px;
  --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Spectral', Georgia, serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;}

/* ---------------- Site header / nav ----------------
   Appears on every page. The brand is the home link (there is no nav item
   literally called "Home" — the title IS the home page). */
.site-header{
  width:100%;max-width:1180px;margin:0 auto;padding:20px 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px 30px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
/* Brand logotype matches the splash screen's "THE REPHOTOGRAPHIC SURVEYS":
   sans (Roboto), uppercase, letter-spaced — not the old Spectral serif. */
.site-brand{
  /* Explicit system-sans stack (NOT var(--sans)/Roboto) so the logotype renders the same looser
     kerning here as on the splash animation, regardless of Roboto load timing. Matches .brand. */
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:500;font-size:16.5px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-hi);text-decoration:none;white-space:nowrap;
}
/* "The" and "Surveys" are Spectral italic (300 / 200); "Rephotographic" stays sans caps and
   carries a gradient underline (slate->sage->tan, the map's RSP/Third-View colors) that wipes
   in on rollover. Kept identical to the splash .brand. */
.site-brand .the,.site-brand .surv{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:18.5px;color:var(--ink-hi);}
.site-brand .the{font-weight:300;margin-right:4px;}
.site-brand .surv{font-weight:200;margin-left:5px;}
.site-brand .mid{position:relative;display:inline-block;}
.site-brand .mid::after{content:"";position:absolute;left:0;right:.7px;bottom:-5px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--slate) 0%,var(--rsp) 50%,var(--3v) 100%);
  transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.4,0,.2,1);}
.site-brand:hover .mid::after{transform:scaleX(1);}
.site-nav{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;}
.site-nav a{
  font-size:14px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.site-nav a:hover{color:var(--ink);}
.site-nav a.active{color:var(--ink);border-bottom-color:#97938d;}   /* neutral light gray (RSP/3V override below) */
/* All nav labels stay gray. RSP + Third View are distinguished only by their icon and,
   when active, an underline in their rephoto-set accent color. */
.site-nav a.nav-rsp.active{border-bottom-color:var(--rsp);}
.site-nav a.nav-3v.active{border-bottom-color:var(--3v);}
/* Shape tags matching the map/legend: triangle = RSP, circle = Third View. */
.site-nav a.nav-rsp::before{content:"";display:inline-block;width:0;height:0;margin-right:7px;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--rsp);
  vertical-align:middle;position:relative;top:-1px;}
.site-nav a.nav-3v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--3v);margin-right:7px;vertical-align:middle;position:relative;top:-1px;}

/* ---------------- Generic static page (home + placeholders) ---------------- */
.page{width:100%;max-width:1180px;margin:0 auto;padding:64px 24px 96px;}
.page-title{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.15;margin:0 0 18px;}
.page-note{color:var(--muted);font-size:15px;line-height:1.6;max-width:52ch;}
/* About + Contact pages opt into the splash animation's THIN serif (Spectral 300) via body.page-serif.
   Books + any other .page stay on the default. Needs Spectral 0,300 in those pages' font import. */
body.page-serif .page-title{font-weight:300;}
body.page-serif .page-note,
body.page-serif .contact-row{font-family:var(--serif);font-weight:300;}

/* Footer echoes the header nav (same links + spacing) with the thin line on top, but the
   bottom links are CENTERED (the header keeps brand-left / links-right). No brand. */
.site-footer{
  width:100%;max-width:1180px;margin:0 auto;padding:20px 24px;
  display:flex;align-items:baseline;justify-content:center;gap:10px 30px;flex-wrap:wrap;
  border-top:1px solid var(--line);
}
/* Sticky footer: on short pages the bottom nav sits at the foot of the viewport,
   mirroring the header. Applied via <body class="shell">. */
body.shell{min-height:100vh;display:flex;flex-direction:column;}
body.shell > main{flex:1 0 auto;}

@media (max-width:680px){
  .site-header,.site-footer{padding:16px 16px;gap:8px 20px;}
  .site-nav{gap:16px;}
  .page{padding:44px 16px 72px;}
  .page-title{font-size:26px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
}

/* ---------------- Mobile hamburger nav (shared; DOM injected by nav.js) ----------------
   Desktop: burger + drawer are hidden and the inline .site-header .site-nav shows as before.
   ≤767px: inline header nav is hidden, the burger appears, and it opens a slide-in drawer whose
   links are cloned from the page's own header nav (so href + .active + accent carry over). The
   FOOTER nav is left visible. */
.nav-burger{display:none;}
.nav-backdrop,.nav-drawer{display:none;}
@media (max-width:767px){
  .site-header .site-nav{display:none;}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;
    align-self:center;width:32px;height:28px;padding:0;background:none;border:none;cursor:pointer;}
  .nav-burger span{display:block;width:100%;height:2px;background:var(--ink-hi);border-radius:1px;
    transition:transform .25s ease,opacity .2s ease;}
  .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger.open span:nth-child(2){opacity:0;}
  .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
  .nav-backdrop.open{opacity:1;visibility:visible;}
  .nav-drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;z-index:201;
    width:min(80vw,290px);height:100%;background:#26241f;border-left:1px solid var(--line);
    box-shadow:-16px 0 46px rgba(0,0,0,.55);transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);padding-top:60px;}
  .nav-drawer.open{transform:translateX(0);}
  .nav-drawer a{display:block;padding:15px 24px;font-size:14px;letter-spacing:.8px;text-transform:uppercase;
    color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);}
  .nav-drawer a:hover{color:var(--ink);}
  .nav-drawer a.active{color:var(--ink);}
  .nav-drawer a.nav-rsp.active{color:var(--rsp);}
  .nav-drawer a.nav-3v.active{color:var(--3v);}
  /* Shape tags in the drawer, matching the desktop header nav + map legend: triangle = RSP, circle = Third View. */
  .nav-drawer a.nav-rsp::before{content:"";display:inline-block;width:0;height:0;margin-right:9px;
    border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--rsp);
    vertical-align:middle;position:relative;top:-1px;}
  .nav-drawer a.nav-3v::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
    background:var(--3v);margin-right:9px;vertical-align:middle;position:relative;top:-1px;}
  .nav-drawer-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);
    font-size:28px;line-height:1;cursor:pointer;padding:4px 8px;}
  .nav-drawer-close:hover{color:var(--ink);}
}