/* ============================================================================
   TOKENS + BASE + SHARED COMPONENTS
   Palette, type, layout primitives, header/footer, museum label, placeholders.
   Direction-specific overrides live in directions.css.
   ========================================================================== */

:root {
  /* Greige paper palette — warm, muted. The art supplies the colour. */
  --paper:        oklch(0.957 0.006 83);   /* page background          */
  --paper-2:      oklch(0.975 0.005 83);   /* raised surfaces / cards  */
  --paper-sink:   oklch(0.935 0.007 80);   /* recessed bands           */
  --ink:          oklch(0.285 0.008 60);   /* primary text             */
  --ink-soft:     oklch(0.435 0.008 62);   /* secondary text           */
  --ink-mute:     oklch(0.560 0.007 64);   /* captions / meta          */
  --line:         oklch(0.870 0.006 78);   /* hairlines                */
  --line-soft:    oklch(0.905 0.005 80);
  --accent:       oklch(0.555 0.062 42);   /* muted clay — links/CTA   */
  --accent-deep:  oklch(0.470 0.060 42);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);
  --fs-h1:      clamp(2.0rem, 1.3rem + 2.6vw, 3.4rem);
  --fs-h2:      clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem);
  --fs-h3:      clamp(1.2rem, 1.0rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body:    1.02rem;
  --fs-small:   0.82rem;
  --fs-label:   0.7rem;

  --measure: 38rem;
  --gutter: clamp(1.25rem, 1rem + 3vw, 4rem);
  --maxw: 1320px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.08; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Layout helpers ----------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.serif { font-family: var(--serif); }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; }
.measure { max-width: var(--measure); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Site header -------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line-soft);
}
/* Blur lives on a pseudo-element so the header doesn't become a containing
   block for the position:fixed mobile nav drawer (which would clip it). */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.85rem, 0.6rem + 0.6vw, 1.25rem);
}
.brand { display: flex; flex-direction: column; line-height: 1; gap: 0.25rem; }
.brand__name {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.45rem + 0.8vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand__sub {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink-mute);
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.4vw, 2.1rem); }
.nav a {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding-block: 0.35rem;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav__has { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 0.4rem; min-width: 230px; border-radius: 2px;
  box-shadow: 0 18px 40px -24px oklch(0.3 0.02 60 / 0.5);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease), visibility 0.22s;
}
.nav__has:hover .nav__menu,
.nav__has:focus-within .nav__menu { opacity: 1; visibility: visible; translate: 0 0; }
.nav__menu a {
  display: block; padding: 0.55rem 0.7rem; text-transform: none;
  letter-spacing: 0.01em; font-weight: 500; font-size: 0.86rem;
  color: var(--ink-soft); border-radius: 1px;
}
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--paper-sink); color: var(--ink); }
.nav__toggle { display: none; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.85rem 1.5rem; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  border-radius: 1px; transition: background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--accent { border-color: var(--accent); color: var(--accent-deep); }
.btn--accent:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--ghost { border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--paper-sink); color: var(--ink); border-color: var(--ink); }
.textlink {
  color: var(--accent-deep); border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding-bottom: 1px; transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.textlink:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Image placeholder (used until a real image exists) ----------------- */
.frame {
  position: relative; overflow: hidden; background: var(--paper-sink);
}
.ph {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.9 0.006 80) 0 11px,
    oklch(0.93 0.005 80) 11px 22px);
  display: grid; place-items: center; padding: 1rem;
}
.ph__tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.66rem; letter-spacing: 0.02em; color: var(--ink-mute);
  background: color-mix(in oklab, var(--paper-2) 80%, transparent);
  padding: 0.3rem 0.55rem; border: 1px solid var(--line);
  text-align: center; max-width: 90%; line-height: 1.4;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.tile-availability {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.32rem 0.55rem; background: var(--paper-2); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tile-availability[data-state] { color: var(--ink-mute); }

/* ---- Museum label (definition list) ------------------------------------ */
.label-block { display: grid; gap: 0; border-top: 1px solid var(--line); }
.label-block > div {
  display: grid; grid-template-columns: minmax(7.5rem, 0.4fr) 1fr;
  gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft);
}
.label-block dt {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); padding-top: 0.15rem;
}
.label-block dd { margin: 0; color: var(--ink); }
.label-block > div:last-child { border-bottom: 0; }

/* ---- Footer ------------------------------------------------------------- */
.site-foot { margin-top: clamp(4rem, 3rem + 6vw, 8rem); border-top: 1px solid var(--line); }
/* Home ends on a full section band (no footer signup strip); the section's own
   bottom padding already sets the rhythm, so drop the footer's extra top margin. */
.site-foot:not(:has(.site-foot__signup)) { margin-top: 0; }
/* When the mailing-list strip is present it adds its own top padding, so trim
   the footer's top margin to keep the gap above "Stay in touch" in step with
   the page's section rhythm instead of doubling up. */
.site-foot:has(.site-foot__signup) { margin-top: clamp(2.5rem, 1.8rem + 2vw, 3.75rem); }
/* If the page ends on a full sink band (e.g. Exhibitions), the band should
   meet the footer directly — drop the top margin so no strip of page color
   is left between the band and the footer. */
body:has(main > .section--sink:last-child) .site-foot { margin-top: 0; }

/* Compact mailing-list strip at the top of the footer (interior pages) */
.site-foot__signup {
  display: grid; grid-template-columns: 1fr minmax(0, 26rem); gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center; padding-block: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  border-bottom: 1px solid var(--line-soft);
}
.site-foot__signup-intro h4 { margin-bottom: 0.4rem; }
.site-foot__signup-intro p { color: var(--ink-soft); max-width: 44ch; margin: 0; }
.site-foot__signup .newsletter__note { margin-top: 0.6rem; }
@media (max-width: 700px) {
  .site-foot__signup { grid-template-columns: 1fr; gap: 1rem; }
}

.site-foot__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.site-foot__name { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; }
.site-foot__formerly { font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  color: var(--ink-mute); margin: 0.2rem 0 0; }
.site-foot h4 {
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 1rem;
}
.site-foot a { color: var(--ink-soft); transition: color 0.2s var(--ease); }
.site-foot li { margin-bottom: 0.55rem; }
.site-foot a:hover { color: var(--accent-deep); }
.site-foot__legal {
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between;
  padding-block: 1.4rem; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small); color: var(--ink-mute);
}
.site-foot__legal .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---- Fade-in on scroll -------------------------------------------------- */
/* Fail-safe: content is visible by default. Only when JS has confirmed motion
   is wanted (html.anim, set synchronously in <head>) do items start hidden and
   fade in. So if JS never runs, nothing is ever stuck invisible. */
.anim .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Responsive header -------------------------------------------------- */
@media (max-width: 860px) {
  .nav { display: none; position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    flex-direction: column; align-items: flex-start; gap: 0.2rem;
    background: var(--paper-2); padding: 5rem 1.6rem 2rem; border-left: 1px solid var(--line);
    overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav a { font-size: 0.95rem; text-transform: none; letter-spacing: 0.01em; padding-block: 0.6rem; }
  .nav__menu { position: static; transform: none; opacity: 1; visibility: visible; translate: 0;
    box-shadow: none; border: 0; border-left: 1px solid var(--line); border-radius: 0;
    padding: 0 0 0 0.8rem; min-width: 0; background: transparent; }
  .nav__has { width: 100%; }
  .nav__toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none;
    border: 0; cursor: pointer; padding: 0.4rem; z-index: 60; }
  .nav__toggle span { width: 24px; height: 1.6px; background: var(--ink); display: block; transition: 0.3s var(--ease); }
  .site-foot__inner { grid-template-columns: 1fr; gap: 2rem; }
}