.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink, #1d1a17);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accent, #8c4d39);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(247, 241, 234, 0.85);
  border-bottom: 1px solid var(--line);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 12px;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

.site-header .brand small {
  display: block;
  letter-spacing: 0.1em;
  font-size: 0.58rem;
  text-transform: uppercase;
  font-weight: 600;
}

.site-header .brand-mark {
  display: block;
  flex-shrink: 0;
  width: 52px;
  height: 60px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.site-header .main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-header .main-nav a {
  position: relative;
}

.site-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.site-header .main-nav a:hover::after,
.site-header .main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.site-header .button:hover,
.site-header .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(89, 61, 45, 0.12);
}

.site-header .button-solid {
  background: var(--cta, #d34220);
  border-color: var(--cta, #d34220);
  color: #fff;
}

.site-header .button-solid:hover {
  background: var(--cta-hover, #b83518);
  border-color: var(--cta-hover, #b83518);
}

.site-header .button-solid:focus-visible {
  outline: 3px solid var(--cta, #d34220);
  outline-offset: 4px;
}


.site-header{--ink:#1d1a17;--muted:#5e554d;--line:rgba(25,19,15,.14);--accent:#8c4d39;--sand:#d4b48a;color:var(--ink);font-family:Inter,sans-serif;font-size:16px;line-height:1.6;text-align:left;padding:0;margin:0;width:100%}.site-header *{box-sizing:border-box}.site-header a{color:inherit;text-decoration:none}.site-header .container{width:min(1200px,calc(100% - 40px));margin:0 auto}.site-header .button-solid{color:white}.site-header .header-actions .button{width:auto;padding:.9rem 1.5rem;white-space:nowrap}.site-header .main-nav{flex-wrap:wrap;gap:12px 18px;justify-content:center}.site-header .brand-block{flex-shrink:0}
@media(max-width:980px){.site-header .header-inner{flex-wrap:wrap;padding:12px 0;gap:10px;justify-content:space-between}.site-header .main-nav{display:flex;order:3;flex:0 0 100%;flex-wrap:wrap;justify-content:center;overflow-x:visible;padding:6px 0 10px;gap:6px 16px}.site-header .main-nav a{white-space:nowrap}.site-header .header-actions{width:auto}.site-header .header-actions .button{font-size:.65rem;padding:.65rem .8rem}}
@media(max-width:599.98px){.site-header .brand{font-size:.65rem;gap:6px}.site-header .brand-mark{width:40px;height:46px}.site-header .container{width:calc(100% - 24px)}}
body.full .site-header{display:none}

/* Film now lives in the homepage About carousel; keep shared top navigation consistent. */
.site-header .main-nav a[href$="#film"], .site-header .main-nav a[href="/film/"] { display:none; }

/* Mobile: the whole header (title, nav, and commission button) hides while scrolling
   down and returns on scroll up; site-header.js toggles .is-scroll-hidden. The sticky
   header keeps its place in the page flow, so content never jumps. Desktop is unchanged. */
@media(max-width:980px){
  .site-header{transition:transform .28s ease}
  .site-header.is-scroll-hidden{transform:translateY(-100%)}
  .site-header.is-scroll-hidden:has(:focus-visible){transform:none}
}
@media(max-width:980px) and (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Mobile hamburger menu (below 980px). Brand, Cart, Book a commission and the menu
   button share one row; the remaining links open in a panel under the header.
   site-header.js toggles .is-menu-open. A <noscript> style restores the wrapped links. */
.site-header .nav-toggle,.site-header .cart-nav-mobile{display:none}
@media(max-width:980px){
  .site-header .header-inner{flex-wrap:nowrap;min-height:64px;padding:8px 0;gap:8px;position:relative}
  .site-header .brand-block{min-width:0;flex:1 1 auto}
  .site-header .header-actions{gap:8px;flex-shrink:0}
  .site-header .cart-nav-mobile{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .site-header .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);color:var(--ink);cursor:pointer;flex-shrink:0}
  .site-header .nav-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .site-header .nav-toggle-bars,.site-header .nav-toggle-bars::before,.site-header .nav-toggle-bars::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,background .2s ease}
  .site-header .nav-toggle-bars{position:relative}
  .site-header .nav-toggle-bars::before,.site-header .nav-toggle-bars::after{content:"";position:absolute;left:0}
  .site-header .nav-toggle-bars::before{top:-6px}
  .site-header .nav-toggle-bars::after{top:6px}
  .site-header.is-menu-open .nav-toggle-bars{background:transparent}
  .site-header.is-menu-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
  .site-header.is-menu-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
  .site-header .main-nav{display:none;position:absolute;top:100%;left:0;right:0;order:initial;flex:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;background:#f7f1ea;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 18px 30px rgba(89,61,45,.14);font-size:.86rem}
  .site-header.is-menu-open .main-nav{display:flex}
  .site-header .main-nav a{display:block;padding:12px 18px;white-space:nowrap}
  .site-header .main-nav a::after{display:none}
  .site-header .main-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:8px}
  .site-header .main-nav .cart-nav{display:none}
}
@media(max-width:599.98px){
  .site-header .header-actions .button{font-size:.6rem;padding:.6rem .7rem;letter-spacing:.06em}
  .site-header .cart-nav-mobile{font-size:.64rem;letter-spacing:.04em}
  .site-header .brand small{font-size:.5rem;letter-spacing:.06em}
}
@media(max-width:980px) and (prefers-reduced-motion:reduce){.site-header .nav-toggle-bars,.site-header .nav-toggle-bars::before,.site-header .nav-toggle-bars::after{transition:none}}
@media(max-width:980px){.site-header .cart-nav-mobile{gap:4px}.site-header .cart-nav-mobile .cart-payment-icons svg{width:12px;height:12px}}
@media(max-width:599.98px){.site-header .cart-nav-mobile .cart-payment-icons{gap:1px}.site-header .cart-nav-mobile .cart-payment-icons svg{width:11px;height:11px}}
@media(max-width:599.98px){.site-header .header-inner{gap:6px}.site-header .header-actions{gap:5px}.site-header .cart-nav-mobile{padding:0 2px;gap:3px}.site-header .header-actions .button{padding:.6rem .55rem;letter-spacing:.04em}.site-header .brand{gap:5px}.site-header .brand-mark{width:34px;height:40px}}

/* Desktop: keep the nine links and Cart on one row (Testimonials added Oct 2026) by tightening spacing, not dropping items. */
@media(min-width:981px) and (max-width:1260px){
  .site-header .container{width:calc(100% - 28px)}
  .site-header .header-inner{gap:10px}
  .site-header .brand{gap:7px;font-size:.84rem}
  .site-header .brand-mark{width:44px;height:51px}
  .site-header .main-nav{flex-wrap:nowrap;gap:8px 9px;font-size:.7rem;letter-spacing:.03em}
  .site-header .main-nav a{white-space:nowrap}
  .site-header .main-nav .cart-payment-icons{display:none}
  .site-header .header-actions .button{padding:.7rem .9rem;font-size:.66rem;letter-spacing:.05em}
}
@media(min-width:981px) and (max-width:1023.98px){
  .site-header .main-nav{gap:8px 7px;font-size:.66rem;letter-spacing:.02em}
  .site-header .brand small{letter-spacing:.06em}
  .site-header .header-actions .button{padding:.65rem .75rem;font-size:.62rem;letter-spacing:.04em}
}
@media(min-width:1261px){
  .site-header .main-nav{gap:10px 13px;font-size:.76rem;letter-spacing:.05em}
  .site-header .header-actions .button{padding:.85rem 1.25rem}
}

/* Audit 4: "TJ Murphy" never wraps, at any width. Phones up to 599px use the compact sizes above.
   Below 430px the words "Book a" are visually hidden (screen readers still hear "Book a commission"),
   and below 390px the cart's payment icons hide and spacing tightens so the row still fits at 320px. */
.site-header .brand span{white-space:nowrap}
@media(max-width:429.98px){.site-header .header-cta-lead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media(max-width:389.98px){.site-header .cart-nav-mobile .cart-payment-icons{display:none}.site-header .container{width:calc(100% - 16px)}.site-header .header-actions{gap:4px}.site-header .header-actions .button{padding:.6rem .5rem}}
@media(max-width:359.98px){.site-header .brand{gap:4px}.site-header .brand-mark{width:30px;height:35px}.site-header .brand small{font-size:.45rem;letter-spacing:.02em}.site-header .cart-nav-mobile{letter-spacing:0}}