/* ============================================================
   site-chrome.css
   The single source of truth for the site header and footer.

   Replaces the old site-type.css + site-light.css pair. Those two
   worked only by load order: every page declared its own chrome CSS
   inline, then those files repainted it at equal specificity. Move a
   <link> and the site changed. Nothing here depends on load order,
   because pages no longer declare chrome CSS at all.

   RULE: a page must not style .site-head, .site-foot, .wordmark,
   .site-nav, .social or .mark-r. It sets colors only, as variables.

   ---- what a page may set (all optional) --------------------
     --chrome-bg      header background            default #edece7
     --chrome-ink     header + footer text         default #101010
     --chrome-line    hairline rule                default ink @ 14%
     --chrome-paren   color of the ( ) glyphs      default: inherits ink
     --chrome-accent  color of the word inside ( ) default: inherits ink
     --chrome-focus   focus ring                   default #39d4be
     --foot-bg        footer background            defaults to --chrome-bg
     --foot-ink       footer text                  defaults to --chrome-ink
     --foot-line      footer hairline              defaults to --chrome-line

   Per-project footer colors are the reason --foot-* exist separately:
   set --foot-bg / --foot-ink on a project page and only the footer moves.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Defaults live in the var() fallbacks below, never in a :root block here.
   A :root default would sit at the same specificity as a page's :root and
   the winner would come down to which file loaded last, which is the exact
   bug this file replaces. A fallback only applies when the page left the
   variable undefined, so page overrides win from anywhere in the document. */

/* ---------- shared shell ----------
   Both bars are the same object: flush to the window edge at every
   width, on every page. Deliberately NOT aligned to the content grid,
   so full-bleed case studies and the tiled landing page agree. */
.site-head,
.site-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-inline:var(--chrome-edge,clamp(20px,4vw,56px));
  font-family:var(--chrome-font,'Space Grotesk','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif);
  /* never let the bars shrink when the body is a flex column, and keep
     them stacked above page content (the sketch wall scrolls under) */
  flex:0 0 auto; position:relative; z-index:5;
}

.site-head{
  background:var(--chrome-bg,#edece7);
  color:var(--chrome-ink,#101010);
  border-bottom:1px solid var(--chrome-line,rgba(16,16,16,.14));
  padding-block:11px;
  /* static site-wide: the bar scrolls away with the page on every page */
  position:relative;
}

.site-foot{
  /* pins to the bottom on pages whose body is a min-height flex column */
  margin-top:auto;
  background:var(--foot-bg,var(--chrome-bg,#edece7));
  color:var(--foot-ink,var(--chrome-ink,#101010));
  border-top:1px solid var(--foot-line,var(--chrome-line,rgba(16,16,16,.14)));
  padding-block:16px;
  font-size:14px;
}

/* ---------- wordmark ---------- */
.site-head .wordmark{
  font-family:var(--chrome-font,'Space Grotesk','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif);
  font-weight:600; font-size:clamp(14px,1.7vw,18px);
  letter-spacing:.2px; text-transform:lowercase;
  color:inherit; text-decoration:none;
  white-space:nowrap; display:inline-flex; align-items:baseline;
  /* a long typed parenthetical used to push the bar wider than the
     screen; let the wordmark shrink and clip instead */
  min-width:0; overflow:hidden;
}
.site-head .wordmark .paren{
  color:var(--chrome-paren,inherit); opacity:.85;
}
/* the word inside the parens, typed or static, with or without an id */
.site-head .wordmark span:not(.paren){
  display:inline-block; min-width:1ch;
  color:var(--chrome-accent,inherit);
}

/* ---------- header nav ---------- */
.site-nav{
  display:flex; gap:20px; flex-shrink:0;
  font-family:var(--chrome-font,'Space Grotesk','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif);
  text-transform:lowercase; font-size:clamp(13px,1.4vw,15px);
}
.site-nav a{ color:inherit; text-decoration:none; opacity:.85 }
.site-nav a:hover,
.site-nav a:focus-visible{ opacity:1; text-decoration:underline }
/* current page marker, color-independent so it reads on any chrome color */
.site-nav a[aria-current="page"]{ opacity:1; text-decoration:underline }

/* ---------- footer parts ---------- */
.site-foot .copy{ opacity:.75 }
.site-foot .social{
  display:flex; align-items:center; gap:18px;
  font-size:13px; letter-spacing:.06em;
}
.site-foot .social a{ color:inherit; text-decoration:none; opacity:.85; display:flex }
.site-foot .social a:hover,
.site-foot .social a:focus-visible{ opacity:1 }
.site-foot .mark-r{
  font-family:var(--chrome-font,'Space Grotesk','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif);
  font-style:normal; font-weight:600; font-size:18px; letter-spacing:.2px;
  color:inherit; text-decoration:none;
}
.site-foot .mark-r:hover,
.site-foot .mark-r:focus-visible{ text-decoration:underline }

/* ---------- focus ---------- */
.site-head a:focus-visible,
.site-foot a:focus-visible{
  outline:3px solid var(--chrome-focus,#39d4be); outline-offset:3px;
}

/* ---------- page transition ----------
   Driven by /assets/site-transition.js, which adds these classes to <html>.
   Nothing here animates on its own, so a page without that script, or a
   visitor who prefers reduced motion, just gets ordinary navigation.

     .chrome-out     leaving: the bar slides up out of frame
     .chrome-in      arriving: bar starts lifted, page held behind a veil
     .chrome-reveal  arriving, playing: bar drops, then the veil fades

   --page-veil should match the page's own background so the veil reads as
   "not painted yet" rather than as a white flash. Defaults to white. */
@media (prefers-reduced-motion:no-preference){

  html.chrome-out .site-head{
    transform:translateY(-100%);
    transition:transform .34s cubic-bezier(.55,0,.9,.4);
  }

  html.chrome-in::before{
    content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
    background:var(--page-veil,#ffffff);
  }
  /* above the veil, so the bar drops onto a page that is still hidden */
  html.chrome-in .site-head{
    transform:translateY(-100%);
    z-index:10000;
  }
  html.chrome-in.chrome-reveal .site-head{
    transform:none;
    transition:transform .42s cubic-bezier(.22,.9,.3,1.1);
  }
  /* the delay is what makes the bar land before the page appears */
  html.chrome-in.chrome-reveal::before{
    opacity:0;
    transition:opacity .34s ease .28s;
  }
}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .site-nav{ gap:18px }
  .site-foot .social{ gap:14px }
}
/* the footer's three items do not fit one row on narrow phones and used
   to push the page wider than the screen; wrap and center instead */
@media (max-width:480px){
  .site-foot{ flex-wrap:wrap; row-gap:10px; justify-content:center }
}