/* Shared chrome: header, footer, buttons, forms.
   The design prototypes inlined every style; pulling the repeated pieces out
   here keeps the four pages consistent when one of them changes. */

*{box-sizing:border-box;}
/* Reserve the scrollbar gutter on every page. Otherwise a short page has no
   scrollbar and a long one does, and centred content jumps sideways by half a
   scrollbar width as you navigate between them. */
html{scrollbar-gutter:stable;}
body{margin:0;background:var(--white);font-family:var(--font-display);}
a{color:var(--link-color);}
a:hover{opacity:0.7;}

/* ---- header ---- */
.site-header{position:sticky;top:0;background:var(--white);
  border-bottom:1px solid var(--border-gray);z-index:20;}
.site-header--dark{background:var(--charcoal);border-bottom-color:rgba(255,255,255,0.15);}
/* Landing only: header hides until you scroll or reach for the top of the screen. */
.site-header--reveal{position:fixed;left:0;right:0;transform:translateY(-100%);
  transition:transform .25s ease;}
.site-header--reveal.is-shown{transform:translateY(0);}
/* The nav is taken out of flow and pinned to the centre of the header, which
   spans the full viewport. Column-based approaches (flex 1fr sides, grid
   1fr/auto/1fr) centre the nav within the 1200px container instead, so any
   asymmetry between the brand text and the button shifted it off the true page
   centre. Absolute centring is immune to both. */
.site-header__inner{max-width:var(--container-max);margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;padding:16px 24px;}
.site-header__brandwrap{display:flex;justify-content:flex-start;min-width:0;}
/* The anchor sizes to its text: giving it flex:1 made the whole left third of
   the header clickable. */
.site-header__brand{font-weight:600;font-size:20px;letter-spacing:-0.4px;
  color:var(--text-primary);text-decoration:none;align-self:center;}
.site-header--dark .site-header__brand{color:var(--text-on-dark);}
.site-nav{display:flex;gap:32px;font-size:15px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  white-space:nowrap;}
.site-nav a{text-decoration:none;color:var(--text-primary);}
.site-header--dark .site-nav a{color:var(--text-on-dark);}
.site-nav a.is-current{color:var(--accent);}
.site-header__cta{display:flex;justify-content:flex-end;min-width:0;}

/* ---- buttons ---- */
.btn{display:inline-flex;font-family:var(--font-display);
  font-size:var(--text-button-size);background:var(--accent);color:var(--text-on-dark);
  border:none;padding:10px 20px;border-radius:var(--radius);
  box-shadow:var(--shadow-button-inset);text-decoration:none;cursor:pointer;}
.btn--sm{font-size:14px;padding:8px 16px;}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--border-gray);padding:32px 24px;}
.site-footer--dark{border-top-color:rgba(255,255,255,0.15);}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.site-footer__brand{font-weight:600;font-size:16px;color:var(--text-primary);}
.site-footer--dark .site-footer__brand{color:var(--text-on-dark);}
.site-footer__links{display:flex;gap:24px;font-size:14px;}
.site-footer__links a{color:var(--text-secondary);text-decoration:underline;}
.site-footer--dark .site-footer__links a{color:rgba(255,255,255,0.6);}

/* ---- typography helpers ---- */
.h-section{font-weight:600;font-size:var(--text-section-heading-size);
  line-height:var(--text-section-heading-lh);letter-spacing:var(--text-section-heading-ls);
  color:var(--text-primary);margin:0;}
.h-sub{font-weight:600;font-size:var(--text-sub-heading-size);
  line-height:var(--text-sub-heading-lh);letter-spacing:var(--text-sub-heading-ls);
  color:var(--text-primary);margin:0;}
.body-lg{font-size:var(--text-body-large-size);line-height:var(--text-body-large-lh);
  color:var(--text-body);text-wrap:pretty;}
.on-dark{color:var(--text-on-dark);}
.on-dark .body-lg,.body-lg.on-dark{color:rgba(255,255,255,0.7);}

.wrap-narrow{max-width:680px;margin:0 auto;padding:0 24px;}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 24px;}
statue-viewer{display:block;width:100%;height:100%;}

/* ---- forms ---- */
.statuary-field{font-family:var(--font-display);font-size:var(--text-body-size);
  color:var(--text-primary);background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:10px 12px;outline:none;width:100%;}
.statuary-field:focus{box-shadow:0 0 0 2px var(--ring-blue);}

/* ---- responsive ---- */
@media (max-width:860px){
  :root{--text-display-hero-size:40px;--text-section-heading-size:32px;
        --text-sub-heading-size:26px;}
  .site-nav{gap:18px;font-size:14px;}
  /* Too narrow for an absolutely centred nav to clear the brand, so the header
     stacks: brand on top, nav centred beneath it. */
  .site-header__cta{display:none;}
  .site-header__inner{flex-direction:column;gap:10px;padding:12px 24px;}
  .site-nav{position:static;transform:none;}
}