/* ============================================================================
   chrome.css — shared site chrome for The Cuyuna Compass
   ----------------------------------------------------------------------------
   Loaded by every page under site/ AFTER that page's inline <style>, so these
   rules win specificity ties without !important.

   Covers: the inner-page sticky bar (.mast), the home ceremonial masthead
   (.masthead), the shared nav (.mastnav) and its mobile drawer, the theme
   toggle, the survey rule, the reveal-on-scroll bar, and the colophon footer.

   Page-specific CSS (.lead-grid, .rail, .crow, .arthead, .town-photo, ...)
   stays inline in each page. This file is chrome only.

   NOTE ON PATHS: this file lives at site/assets/chrome.css, so url() is
   relative to site/assets/ — it is img/foo.webp here, NOT assets/img/foo.webp
   as it was when these rules were inline in the page.
   ========================================================================= */

:root{
  --barh:66px;              /* compact mobile bar + survey rule */
  --tap:44px;               /* WCAG 2.5.5 minimum target size */
}

body{-webkit-text-size-adjust:100%}
img,picture,svg,video{max-width:100%}

/* The badge markup is <picture><source><img class="brandmark"></picture>, so the
   FLEX ITEM is the <picture>, not the <img> that carries flex:none. Without this
   the picture shrinks under pressure from the nameplate and the rule above then
   caps the image to its squashed parent — a visibly oval logo. */
.mast-row > picture,
.brand > picture{flex:none; display:block; line-height:0}

/* ---------------------------------------------------------------------------
   Shared: the survey rule that closes every masthead
   ------------------------------------------------------------------------ */
.surveyrule{
  height:5px;
  background:linear-gradient(to bottom, var(--ore) 0 3px, var(--card) 3px 3.5px, var(--lake) 3.5px 100%);
}

/* ---------------------------------------------------------------------------
   Inner-page sticky bar
   ------------------------------------------------------------------------ */
.mast{
  background:var(--card); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:200;
  background-image:url("img/masthead-topo.webp");
  background-repeat:no-repeat; background-size:cover; background-position:center;
}
.mast-in{
  max-width:1240px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:26px; flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:18px; text-decoration:none; color:var(--ink); flex:none; min-width:0}
.brand:hover{color:var(--ink)}
.brand img{width:100px; height:100px; flex:none; object-fit:contain}
.brand .bname{
  font-family:"Besley",Georgia,serif; font-weight:800; font-size:21px;
  letter-spacing:.01em; white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   Nav — desktop. Two skins: dark-on-paper inside .mast, light-on-photo
   inside .masthead.
   ------------------------------------------------------------------------ */
.mastnav{margin-left:auto; display:flex; gap:2px; flex-wrap:nowrap}
.mastnav a{
  font-family:"Archivo",Arial,sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink2); text-decoration:none; padding:6px 8px; border-radius:4px; white-space:nowrap;
}
.mastnav a:hover{background:var(--paper); color:var(--ink)}
.mastnav a.here{color:var(--ore)}

.masthead .mastnav{
  display:flex; justify-content:center; gap:3px; flex-wrap:wrap; margin:24px auto 0;
  padding:10px 0; border-top:1px solid rgba(247,244,236,.22); max-width:1000px;
}
.masthead .mastnav a{
  font-size:13px; letter-spacing:.05em; color:#E9E5D8; padding:7px 12px;
}
.masthead .mastnav a:hover{background:rgba(247,244,236,.14); color:#fff}

/* ---------------------------------------------------------------------------
   Home ceremonial masthead
   ------------------------------------------------------------------------ */
.masthead{
  position:relative;
  background:#141F1A; border-bottom:1px solid var(--rule); padding:56px 24px 32px;
  background-image:
    linear-gradient(180deg, rgba(10,16,12,.32) 0%, rgba(10,16,12,.55) 60%, rgba(10,16,12,.82) 100%),
    url("img/header-lake-island-clouds.webp");
  background-repeat:no-repeat, no-repeat;
  background-position:center 55%, center 55%;
  background-size:cover, cover;
}
.mast-row{display:flex; align-items:center; gap:36px; max-width:1080px; margin:0 auto}
.brandmark{width:clamp(120px,15vw,200px); height:clamp(120px,15vw,200px); flex:none; display:block; object-fit:contain}
.mast-text{min-width:0}
.nameplate{
  font-family:"Besley",Georgia,serif; font-weight:800; letter-spacing:.015em;
  font-size:clamp(32px,4.6vw,56px); line-height:1; margin:0; text-wrap:balance; text-align:left;
}
.nameplate a{color:#F9F7F0; text-decoration:none; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.folio{
  font-family:"Archivo",Arial,sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:#D9D4C4; margin:14px 0 0; line-height:1.8; text-align:left;
}
.folio .dot{color:rgba(217,212,196,.45); padding:0 6px}
.folio .ore{color:#E7B448}

/* ---------------------------------------------------------------------------
   Action cluster: hamburger + theme toggle
   ------------------------------------------------------------------------ */
.mast-actions{display:flex; align-items:center; gap:6px; flex:none}
.mast .mast-actions{margin-left:0}
.masthead .mast-actions{position:absolute; top:20px; right:24px; z-index:5}

.theme-btn,
.navtoggle{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--rule); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none; padding:0; color:var(--ink2);
}
.theme-btn:hover,
.navtoggle:hover{color:var(--ink); border-color:var(--ink2)}
.theme-btn svg,
.navtoggle svg{width:16px; height:16px; display:block}
.theme-btn:focus-visible,
.navtoggle:focus-visible{outline:2px solid var(--lake); outline-offset:2px}

/* light-on-photo skin for the home masthead */
.masthead .theme-btn,
.masthead .navtoggle{
  border-color:rgba(247,244,236,.4); background:rgba(20,28,22,.5);
  color:#F7F4EC; backdrop-filter:blur(2px);
}
.masthead .theme-btn:hover,
.masthead .navtoggle:hover{color:#fff; border-color:#fff}
.masthead .theme-btn svg,
.masthead .navtoggle svg{width:17px; height:17px}

.theme-btn .ic-moon{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:block}

.navtoggle{display:none}          /* desktop: nav links are visible, no hamburger */
.navtoggle .ic-close{display:none}
.navtoggle[aria-expanded="true"] .ic-burger{display:none}
.navtoggle[aria-expanded="true"] .ic-close{display:block}

/* ---------------------------------------------------------------------------
   Reveal-on-scroll bar (home page). Built by chrome.js, hidden until the
   ceremonial masthead leaves the viewport.
   ------------------------------------------------------------------------ */
.revealbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--card); border-bottom:1px solid var(--rule);
  background-image:url("img/masthead-topo.webp");
  background-repeat:no-repeat; background-size:cover; background-position:center;
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .24s ease, opacity .24s ease;
}
.revealbar.revealed,
html.nav-open .revealbar{transform:none; opacity:1; pointer-events:auto}
.revealbar .brand img{width:38px; height:38px}
.revealbar .brand{gap:12px}
.revealbar .brand .bname{font-size:17px}
.revealbar .mast-in{padding:8px 24px; gap:18px}
/* the mirrored nav keeps .mastnav for its desktop skin, so it must be told
   NOT to become a second drawer when .mastnav turns into one below 820px */
.revealnav{margin-left:auto}

/* ---------------------------------------------------------------------------
   Backdrop behind the open drawer. Injected by chrome.js.
   ------------------------------------------------------------------------ */
.nav-backdrop{
  position:fixed; inset:0; z-index:140;
  background:rgba(8,12,10,.55); backdrop-filter:blur(1.5px);
  opacity:0; visibility:hidden; transition:opacity .24s ease, visibility 0s linear .24s;
}
html.nav-open .nav-backdrop{opacity:1; visibility:visible; transition:opacity .24s ease}

/* ---------------------------------------------------------------------------
   Colophon footer
   ------------------------------------------------------------------------ */
footer.colophon{
  margin-top:70px;
  background-color:#55632A;   /* sampled from the art's bottom edge */
  background-image:linear-gradient(to bottom, var(--paper) 0, transparent 90px), url("img/footer-forest-silhouette.webp");
  background-repeat:no-repeat, no-repeat;
  background-size:100% 90px, cover;
  background-position:top, top center;
}
.colo-in{max-width:1080px; margin:0 auto; padding:340px 24px 40px}
.colo-in p{font-size:14px; color:#F5F2E8; max-width:52em; margin:0 0 10px}
.colo-in .fine{font-family:"Archivo",Arial,sans-serif; font-size:11.5px; color:#B9B6A6; line-height:1.7}
.footer-email{
  display:block; text-align:center; margin-top:26px;
  font-family:"Archivo",Arial,sans-serif; font-weight:700; font-size:24px;
  letter-spacing:.01em; color:#FFFFFF; text-decoration:none;
}
.footer-email:hover{text-decoration:underline}

/* ---------------------------------------------------------------------------
   Horizontal-scroll tables: swipe affordance on narrow screens.
   .scrollx sizing itself stays in each page's inline CSS.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  .scrollx{position:relative; -webkit-overflow-scrolling:touch}
  .scrollx::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:34px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, var(--paper));
  }
  .scrollx[data-scrolled="end"]::after{opacity:0}
  .scrollx-hint{
    font-family:"Archivo",Arial,sans-serif; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--faint); margin:6px 0 0;
  }
}
@media (min-width:701px){ .scrollx-hint{display:none} }

/* ===========================================================================
   MOBILE — chrome collapses to a compact bar plus a drawer
   ======================================================================== */
@media (max-width:820px){

  /* --- compact bar --- */
  .mast-in{padding:8px 16px; gap:12px}
  .brand{gap:10px}
  .brand img{width:36px; height:36px}
  .brand .bname{
    font-size:16px;
    white-space:normal;         /* must never force horizontal overflow */
    line-height:1.15;
  }
  .revealbar .brand img{width:36px; height:36px}
  .revealbar .brand .bname{font-size:16px}
  .revealbar .mast-in{padding:8px 16px; gap:12px}

  /* --- buttons reach the 44px minimum target --- */
  .theme-btn,
  .navtoggle{width:var(--tap); height:var(--tap)}
  .theme-btn svg,
  .navtoggle svg,
  .masthead .theme-btn svg,
  .masthead .navtoggle svg{width:19px; height:19px}
  .navtoggle{display:flex}
  .mast .mast-actions{margin-left:auto}

  /* the reveal bar's mirrored links collapse into its own hamburger, which
     drives the one real drawer — it must never become a drawer itself */
  .revealnav{display:none}

  /* --- the nav becomes a drawer --- */
  .mastnav:not(.revealnav),
  .masthead .mastnav{
    position:fixed; top:0; left:0; right:0;
    height:100vh; height:100dvh;
    z-index:150;
    margin:0; padding:calc(var(--barh) + 8px) 0 32px;
    border-top:0; max-width:none;
    display:block; overflow-y:auto; overscroll-behavior:contain;
    background:var(--card);
    transform:translateY(-100%); visibility:hidden;
    transition:transform .26s ease, visibility 0s linear .26s;
  }
  .mastnav.open{transform:none; visibility:visible; transition:transform .26s ease}

  .mastnav:not(.revealnav) a,
  .masthead .mastnav a{
    display:flex; align-items:center;
    min-height:48px; padding:12px 20px;
    margin:0; border-radius:0;
    border-bottom:1px solid var(--rule2);
    border-left:3px solid transparent;
    font-size:15px; letter-spacing:.06em;
    color:var(--ink); background:none;
    white-space:normal;
  }
  .mastnav a:hover,
  .masthead .mastnav a:hover{background:var(--paper); color:var(--ink)}
  .mastnav a.here,
  .masthead .mastnav a.here{
    color:var(--ore); border-left-color:var(--ore); background:var(--paper);
  }

  /* keep the whole drawer reachable when JS is unavailable */
  html:not(.js) .mastnav,
  html:not(.js) .masthead .mastnav{
    position:static; height:auto; transform:none; visibility:visible;
    padding:0 0 8px; overflow:visible;
  }
  html:not(.js) .navtoggle{display:none}

  /* --- home masthead: keep the ceremony, shrink it --- */
  .masthead{padding:24px 16px 20px}
  .masthead .mast-actions{top:14px; right:14px}
  /* top-align so the badge locks to the nameplate's first line instead of
     floating against the vertical centre of a two- or three-line block */
  .mast-row{gap:16px; align-items:flex-start}
  .brandmark{width:72px; height:72px}
  /* the action cluster is absolutely positioned over the masthead's top-right,
     so the nameplate must be kept out from under it. The folio sits below the
     buttons and keeps the full width. The size is tuned so "The Cuyuna" still
     fits the first line at 390px rather than breaking to three lines. */
  .nameplate{font-size:clamp(24px,6.4vw,38px); padding-right:104px}
  .folio{font-size:11px; letter-spacing:.1em; line-height:1.7; margin-top:10px}
}

@media (max-width:700px){
  /* the long middle clause of the folio is the first thing to go */
  .folio .folio-strap{display:none}
  .folio .folio-strap + .dot{display:none}

  /* footer: render the whole silhouette across the width, let the sampled
     edge colour carry everything below it (never a mismatched block) */
  footer.colophon{background-size:100% 90px, 100% auto}
  .colo-in{padding:150px 20px 32px}
  .footer-email{font-size:20px; word-break:break-word}
}

@media (max-width:480px){
  .sheet{padding-left:16px; padding-right:16px}
  .brand .bname,
  .revealbar .brand .bname{font-size:15px}
  .mast-in{gap:8px}
  .colo-in{padding:130px 16px 28px}
}

/* ---------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .mastnav,
  .mastnav.open,
  .revealbar,
  .nav-backdrop{transition:none}
}