/* =========================================================
   The Axía of Choice: shared styles (both pages)
   Tokens, base, header, navigation, buttons, footer.
   Page-specific rules stay in each page's own <style>.
   ========================================================= */
:root{
  /* Colour: 700 is the logo blue */
  --blue-900:#00264d; --blue-700:#004b93; --blue-500:#2b6cb0; --blue-100:#dce8f4; --blue-50:#eef4fa;
  --bg:#f5f4f2; --bg-deep:#ebe9e5; --ink:#1a1a1a; --muted:#55524e; --line:#dcd9d4; --mat:#fdfcfa;
  --rule:#cfcbc4; --label:#4a4743; --thumb:#b8b3aa; --tint:#e6edf3;
  --accent:#8a5a1c;        /* hover details, provenance, small numerals */
  --ochre-lt:#e3b872;      /* only on dark grounds or as a tiny structural mark */

  --pad-x:clamp(1.25rem,6vw,6rem);
  --header-h:84px;

  --serif:'Newsreader',Georgia,'Noto Serif SC','Songti SC',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* One type scale for both pages */
  --t-hero:clamp(2.6rem,5.4vw + .5rem,5.25rem);
  --t-statement:clamp(1.6rem,1.1rem + 2vw,2.5rem);
  --t-h2:clamp(1.6rem,1.2rem + 1vw,2rem);            /* section headings */
  --t-h3:clamp(1.15rem,1.05rem + .4vw,1.35rem);      /* sub-sections, card names, taglines */
  --t-title:1.1rem;                                   /* every work title */
  --t-body:.95rem;                                    /* descriptions and notes */
  --t-meta:.875rem;                                   /* artist, year, medium, provenance, captions, links */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);-webkit-text-size-adjust:100%}
body{font-family:var(--serif);font-optical-sizing:auto;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.7;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--blue-700);outline-offset:3px}
.hero :focus-visible,.statement :focus-visible,.care-panel :focus-visible,footer :focus-visible,dialog :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--blue-700);color:#fff;padding:.7rem 1rem;font:600 .9rem var(--sans)}
.skip-link:focus{top:1rem}

/* HEADER */
.site-header{position:sticky;top:0;z-index:20;height:var(--header-h);padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(245,244,242,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.seal{width:3.25rem;height:auto;flex:none;display:block;overflow:visible}
.seal .seal-bg{fill:var(--blue-700);transition:fill .25s ease}
/* Border: continuous sides, 1-unit gap centred on each corner */
.seal .seal-border{fill:none;stroke:var(--bg);stroke-width:1.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:45.93 1 35.93 1 47.93 1 35.93 1 2 0;opacity:.9}
.seal .seal-line{fill:none;stroke:var(--bg);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.seal .seal-line-thin{fill:none;stroke:var(--bg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.seal .seal-hub{fill:var(--blue-700);stroke:var(--bg);stroke-width:2;transition:fill .25s ease}
.brand:hover .seal .seal-bg,.brand:hover .seal .seal-hub{fill:var(--blue-900)}
.brand-text{display:inline-flex;flex-direction:column;align-items:stretch;min-width:0}
.brand-title{font-weight:500;font-size:clamp(.8rem,3.6vw,1.4rem);letter-spacing:.04em;word-spacing:.14em;text-transform:uppercase;color:#222;line-height:1.15;white-space:nowrap;text-align:justify;text-align-last:justify}
.brand-sub{font:400 clamp(.66rem,2.9vw,.85rem) var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#4d4d4d;margin-top:3px;white-space:nowrap;text-align:justify;text-align-last:justify}

.site-nav{display:flex;align-items:center;gap:2rem;font:600 .9rem var(--sans)}
.site-nav a{color:var(--muted);padding:.5rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.site-nav a:hover{color:var(--blue-700);border-color:var(--accent)}
.site-nav a[aria-current]{color:var(--blue-700);border-color:var(--ochre-lt)}
/* Contact: secondary outlined button */
.site-nav a.nav-contact{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.1rem;border:1px solid var(--blue-700);border-radius:2px;color:var(--blue-700);font-weight:600}
.site-nav a.nav-contact:hover{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}

.nav-toggle{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:2px;cursor:pointer}

/* Four nav items need more room than a tablet has, so the menu collapses below 960px */
@media (max-width:959px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:.25rem var(--pad-x) 1rem;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(0,0,0,.1);font-size:1rem}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:1rem 0;border-bottom:1px solid var(--line)}
  .site-nav a:last-child{border-bottom:none}
  .site-nav a.nav-contact{width:100%;margin-top:.75rem;padding:1rem;border:1px solid var(--blue-700)}
}
@media (max-width:720px){
  :root{--header-h:72px}
  .seal{width:2.75rem}
  .brand{gap:.7rem}
  .brand-sub{letter-spacing:.1em}
}

/* BUTTON */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.8rem;background:var(--blue-700);color:#fff;border:1px solid var(--blue-700);font:600 .9rem var(--sans);letter-spacing:.04em;transition:background .25s,border-color .25s}
.cta:hover{background:var(--blue-900);border-color:var(--blue-900)}
@media (max-width:720px){.cta{width:100%}}

/* FOOTER */
footer{background:var(--blue-900);color:var(--blue-100);padding:2.5rem var(--pad-x);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font:400 var(--t-meta) var(--sans)}
footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}
footer a{padding:.3rem 0;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .site-header,.cta,.skip-link,.nav-toggle{display:none!important}
  body{background:#fff}
}

/* ABOUT PAGE (phones/tablets): give the last section enough height that the Contact link can scroll its heading
   right under the header. Without this the page runs out of room and the heading stops partway down the screen. */
@media (max-width: 959px) {
  .about-page .enquiries-block {
    display: flow-root;
    min-height: calc(100vh - var(--header-h) - 1rem - 8rem);
    min-height: calc(100svh - var(--header-h) - 1rem - 8rem);
  }
}