/* One public header, navigation and footer for artist pages, enquiries and sign-in. */
.public-page {
  --page-gutter: clamp(22px, 5vw, 80px);
  --header-height: 96px;
  --accent-text: #80613a;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.public-page > main { flex: 1 0 auto; }
.page-top { display: block; height: 0; flex: none; }
.public-page main[id] { scroll-margin-top: calc(var(--header-height) + 20px); }
.studio-shell { width: min(1320px, calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: -10000px; top: 10px; padding: 12px 20px; color: white; background: var(--charcoal); }
.skip-link:focus { left: 16px; }
.studio-header { position: sticky; top: 0; z-index: 40; height: var(--header-height); flex-shrink: 0; border-bottom: 1px solid #d8d0c299; background: var(--ivory); color: var(--charcoal); font-family: var(--sans); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.studio-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-symbol { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.studio-brand strong { display: block; font: 600 31px/.95 var(--serif); letter-spacing: -.025em; }
.studio-brand small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; }
.studio-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); margin-left: auto; }
.studio-nav a, .header-contact { font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.studio-nav a { padding: 13px 0; }
.studio-nav a:hover, .studio-nav a[aria-current], .studio-nav a.is-active { color: var(--accent-text); }
.studio-nav .mobile-contact { display: none; }
.header-contact { margin-left: 10px; padding: 12px 0; border-bottom: 1px solid var(--gold); }
.header-contact span { margin-left: 22px; color: var(--accent-text); }
.menu-toggle { display: none; }
.studio-footer { flex-shrink: 0; background: var(--charcoal); color: #b8c1b3; font-family: var(--sans); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 27px; border-top: 1px solid #475243; font-size: 13px; line-height: 1.6; }
.footer-inner > div { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-inner a { padding-block: 8px; }
.footer-inner a:hover { color: #e3c997; }
.studio-header :is(a, button):focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.studio-footer a:focus-visible { outline: 3px solid #d9bd90; outline-offset: 3px; }
@media (max-width: 1100px) {
  .header-inner { gap: 18px; }
  .header-contact { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: 20px; min-height: 46px; padding: 8px 15px; margin-left: auto; border: 1px solid #bdb3a0; background: transparent; color: var(--charcoal); font: 400 12px/1.5 var(--sans); }
  .menu-toggle > span { color: var(--accent-text); font-size: 24px; line-height: 1; }
  .studio-nav { display: none; position: absolute; top: calc(100% - 1px); right: 0; left: 0; max-height: calc(100svh - var(--header-height)); overflow: auto; margin: 0; padding: 20px var(--page-gutter) 26px; border-bottom: 1px solid var(--stone); background: var(--ivory); }
  .studio-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .studio-nav a { padding: 15px 0; font-size: 16px; }
  .studio-nav .mobile-contact { display: block; }
}
@media (max-width: 760px) {
  .public-page { --page-gutter: 22px; --header-height: 80px; }
  .brand-symbol { width: 62px; height: 62px; }
  .studio-brand { gap: 8px; }
  .studio-brand strong { font-size: 29px; }
  .studio-brand small { font-size: 8px; max-width: 170px; line-height: 1.5; }
  .menu-toggle { padding: 8px 12px; gap: 14px; }
  .header-inner { gap: 10px; }
  .footer-inner { align-items: start; flex-direction: column; gap: 17px; padding-block: 26px; }
  .footer-inner > div { gap: 28px; }
}
@media (max-width: 370px) {
  .public-page { --page-gutter: 18px; }
  .studio-brand small { max-width: 110px; }
  .studio-brand strong { font-size: 26px; }
  .brand-symbol { width: 56px; height: 56px; }
  .menu-toggle { gap: 9px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}