/* ==========================================================================
   Sally Mills — bespoke theme
   Layout DNA follows Barrenjoey Artwalk: sticky nav, dismissible event strip,
   gradient hero with paired CTAs, alternating full-width py-16 sections with
   centred headings, masonry work grid, multi-column footer.
   Identity is its own: gallery-neutral bone ground so the paintings carry the
   colour, one accent drawn from Sally's water greens, Fraunces + Karla.
   ========================================================================== */

/* ---------- tokens: light (complete set) ---------- */
:root {
  --bone: #f7f5f0;
  --bone-deep: #efebe2;
  --surface: #ffffff;
  --sand: #e8e2d6;
  --ink: #1c1e1b;
  --ink-soft: #454a44;
  --muted: #6f766d;
  --muted-light: #99a096;
  --rule: #ddd8cc;
  --rule-strong: #c5bfae;

  --teal: #2f5d57;
  --teal-deep: #23453f;
  --teal-light: #4a8079;
  --teal-wash: #e4ece9;

  --clay: #9c6b4f;
  --clay-wash: #f2e7e0;

  --available: #2f6b4f;
  --available-wash: #e4efe8;
  --sold: #8a6a4a;
  --sold-wash: #f1e9e1;

  --shadow-sm: 0 1px 2px rgba(28, 30, 27, .05);
  --shadow-md: 0 4px 6px -1px rgba(28, 30, 27, .08), 0 2px 4px -2px rgba(28, 30, 27, .05);
  --shadow-lg: 0 12px 28px -10px rgba(28, 30, 27, .2);

  --hero-grad: linear-gradient(168deg, #eef2ef 0%, #f7f5f0 46%, #f3ede1 100%);
  --feature-grad: linear-gradient(180deg, #f2efe7 0%, #eaeeea 100%);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --measure: 68ch;
  --nav-h: 74px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bone: #15171a;
    --bone-deep: #101215;
    --surface: #1f2226;
    --sand: #262a2e;
    --ink: #e8e4dc;
    --ink-soft: #c3c1b8;
    --muted: #9aa09a;
    --muted-light: #6e746e;
    --rule: #2f343a;
    --rule-strong: #434a51;

    --teal: #7fb3aa;
    --teal-deep: #a5cdc6;
    --teal-light: #5e968d;
    --teal-wash: #1b2b29;

    --clay: #c8967a;
    --clay-wash: #2a201b;

    --available: #7cc4a0;
    --available-wash: #17251e;
    --sold: #c2a184;
    --sold-wash: #251e17;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 28px -10px rgba(0, 0, 0, .75);

    --hero-grad: linear-gradient(168deg, #1a2124 0%, #15171a 48%, #1d1f1c 100%);
    --feature-grad: linear-gradient(180deg, #191c1f 0%, #15191a 100%);
  }
}

:root[data-theme="dark"] {
  --bone: #15171a;
  --bone-deep: #101215;
  --surface: #1f2226;
  --sand: #262a2e;
  --ink: #e8e4dc;
  --ink-soft: #c3c1b8;
  --muted: #9aa09a;
  --muted-light: #6e746e;
  --rule: #2f343a;
  --rule-strong: #434a51;

  --teal: #7fb3aa;
  --teal-deep: #a5cdc6;
  --teal-light: #5e968d;
  --teal-wash: #1b2b29;

  --clay: #c8967a;
  --clay-wash: #2a201b;

  --available: #7cc4a0;
  --available-wash: #17251e;
  --sold: #c2a184;
  --sold-wash: #251e17;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 28px -10px rgba(0, 0, 0, .75);

  --hero-grad: linear-gradient(168deg, #1a2124 0%, #15171a 48%, #1d1f1c 100%);
  --feature-grad: linear-gradient(180deg, #191c1f 0%, #15191a 100%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--teal-deep); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.sm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bone); padding: 10px 18px;
}
.sm-skip:focus { left: 8px; top: 8px; }

.sm-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sm-measure { max-width: var(--measure); }

.sm-eyebrow {
  font-family: var(--f-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 12px;
}

/* ---------- event strip (BAW pattern) ---------- */
.sm-strip {
  background: var(--teal); color: #fff;
  font-size: 14.5px; position: relative; z-index: 60;
}
.sm-strip .sm-wrap {
  display: flex; align-items: center; gap: 14px;
  padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
}
.sm-strip a { color: #fff; font-weight: 700; text-decoration: underline; }
.sm-strip .sm-strip-close {
  margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8;
}
.sm-strip .sm-strip-close:hover { opacity: 1; }
:root[data-theme="dark"] .sm-strip,
:root:not([data-theme="light"]) .sm-strip { color: #0f1513; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sm-strip { color: #fff; }
}

/* ---------- nav ---------- */
.sm-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.sm-nav-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--nav-h);
}
.sm-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.sm-brand .n {
  font-family: var(--f-display); font-size: 1.42rem; font-weight: 500;
  letter-spacing: -.02em; line-height: 1;
}
.sm-brand .t {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-top: 5px;
}
.sm-brand img { max-height: 42px; width: auto; }
/* Her signature is black ink on transparency, so it vanishes on a dark
   ground. Inverting it keeps the same handwriting rather than swapping in a
   second asset that could drift out of sync with the first. */
[data-theme="dark"] .sm-brand img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sm-brand img { filter: invert(1); }
}

/* wp_nav_menu with items_wrap '%3$s' emits bare <li> with no <ul>, so the
   markers have to be killed on the flex container itself. */
.sm-nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; }
.sm-nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.sm-nav-links li, .sm-nav-links > li { list-style: none; margin: 0; display: block; }
.sm-nav-links li::marker { content: none; }
.sm-nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sm-nav-panel li, .sm-nav-panel > li { list-style: none; margin: 0; }
.sm-nav-panel li::marker { content: none; }
.sm-nav-links a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.sm-nav-links a:hover { color: var(--ink); border-bottom-color: var(--teal); }
.sm-nav-links a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--teal); }

.sm-nav-tools { display: flex; align-items: center; gap: 8px; }
.sm-icon-btn {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  width: 36px; height: 36px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--ink-soft); padding: 0;
}
.sm-icon-btn:hover { border-color: var(--teal); color: var(--teal); }
.sm-icon-btn svg { width: 17px; height: 17px; }

.sm-burger { display: none; }

.sm-nav-panel { display: none; }
@media (max-width: 940px) {
  .sm-nav-links { display: none; }
  .sm-burger { display: inline-flex; }
  .sm-nav-panel.is-open {
    display: block; border-top: 1px solid var(--rule);
    background: var(--bone); padding: 10px 0 18px;
  }
  .sm-nav-panel .sm-wrap { display: flex; flex-direction: column; gap: 2px; }
  .sm-nav-panel a {
    padding: 11px 0; text-decoration: none; color: var(--ink);
    font-weight: 600; border-bottom: 1px solid var(--rule);
  }
}

/* ---------- hero ---------- */
.sm-hero { background: var(--hero-grad); border-bottom: 1px solid var(--rule); }
.sm-hero .sm-wrap { padding-top: 76px; padding-bottom: 76px; }
.sm-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .sm-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.sm-hero h1 { font-size: clamp(2.5rem, 6vw, 4.15rem); }
.sm-hero .sm-hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--ink-soft);
  margin: 20px 0 0; max-width: 46ch; line-height: 1.55;
}
.sm-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.sm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 2px; text-decoration: none;
  font-weight: 700; font-size: 15px; border: 1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sm-btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.sm-btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
:root[data-theme="dark"] .sm-btn-primary,
:root:not([data-theme="light"]) .sm-btn-primary { color: #101614; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sm-btn-primary { color: #fff; }
}
.sm-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.sm-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.sm-hero-figure { position: relative; }
.sm-hero-figure img {
  width: 100%; border-radius: 2px; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.sm-hero-figure figcaption {
  font-size: 13px; color: var(--muted); margin-top: 10px; font-style: italic;
}

/* ---------- sections (alternating, BAW rhythm) ---------- */
.sm-section { padding: 72px 0; }
.sm-section--plain { background: var(--surface); }
.sm-section--feature { background: var(--feature-grad); }
.sm-section--bone { background: var(--bone); }

.sm-section-head { text-align: center; max-width: 62ch; margin: 0 auto 46px; }
.sm-section-head h2 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
.sm-section-head p { color: var(--muted); margin: 14px 0 0; font-size: 16.5px; }

.sm-section-foot { text-align: center; margin-top: 44px; }

/* ---------- work grid (masonry) ---------- */
.sm-masonry { columns: 3; column-gap: 22px; }
@media (max-width: 1000px) { .sm-masonry { columns: 2; } }
@media (max-width: 620px)  { .sm-masonry { columns: 1; } }

.sm-work {
  break-inside: avoid; margin: 0 0 22px; display: block;
  text-decoration: none; color: inherit; position: relative;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.sm-work:hover { box-shadow: var(--shadow-lg); border-color: var(--rule-strong); transform: translateY(-2px); }
.sm-work img { width: 100%; background: var(--sand); }
.sm-work-body { padding: 15px 17px 17px; }
.sm-work-title {
  font-family: var(--f-display); font-size: 1.13rem; font-weight: 500;
  line-height: 1.25; margin: 0; color: var(--ink);
}
.sm-work-meta {
  font-size: 13px; color: var(--muted); margin: 6px 0 0;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sm-work-meta .sep { color: var(--rule-strong); }

/* status pills */
.sm-pill {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
}
.sm-pill--available { background: var(--available-wash); color: var(--available); }
.sm-pill--sold { background: var(--sold-wash); color: var(--sold); }
.sm-pill--enquire { background: var(--teal-wash); color: var(--teal); }
.sm-work .sm-pill { position: absolute; top: 12px; left: 12px; box-shadow: var(--shadow-sm); }

/* ---------- single work ---------- */
.sm-work-single { display: grid; grid-template-columns: 1.35fr 1fr; gap: 54px; align-items: start; }
@media (max-width: 940px) { .sm-work-single { grid-template-columns: 1fr; gap: 32px; } }
.sm-work-figure img {
  width: 100%; border-radius: 2px; box-shadow: var(--shadow-lg); background: var(--sand);
}
.sm-work-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sm-work-thumbs img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 2px;
  border: 1px solid var(--rule); cursor: pointer;
}
.sm-work-thumbs img:hover { border-color: var(--teal); }

.sm-work-aside h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.sm-spec {
  list-style: none; padding: 0; margin: 26px 0 0;
  border-top: 1px solid var(--rule);
}
.sm-spec li {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.sm-spec dt, .sm-spec .k {
  color: var(--muted); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700; padding-top: 2px;
}
.sm-spec .v { color: var(--ink); }

.sm-story { margin-top: 26px; color: var(--ink-soft); }
.sm-story p:first-child { margin-top: 0; }

/* ---------- exhibitions / markets ---------- */
.sm-events { display: grid; gap: 18px; }
.sm-event {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 24px;
  align-items: center; background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--teal);
  padding: 20px 24px; border-radius: 0 2px 2px 0;
}
.sm-event.is-past { border-left-color: var(--rule-strong); opacity: .72; }
@media (max-width: 760px) {
  .sm-event { grid-template-columns: 1fr; gap: 12px; }
  .sm-event .sm-event-when { display: flex; gap: 10px; align-items: baseline; }
}
.sm-event-when { text-align: center; }
.sm-event-when .d {
  font-family: var(--f-display); font-size: 2rem; font-weight: 500;
  line-height: 1; display: block; color: var(--ink);
}
.sm-event-when .m {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; display: block;
}
.sm-event-when .y { font-size: 11.5px; color: var(--muted-light); display: block; }
.sm-event h3 { font-size: 1.24rem; margin: 0 0 4px; }
.sm-event .where { font-size: 14.5px; color: var(--muted); margin: 0; }
.sm-event .kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
  background: var(--teal-wash); padding: 3px 8px; border-radius: 2px;
  display: inline-block; margin-bottom: 7px;
}
.sm-event.is-past .kind { color: var(--muted); background: var(--sand); }

/* ---------- enquiry ---------- */
.sm-enquire {
  background: var(--teal-wash); border: 1px solid var(--rule);
  border-radius: 2px; padding: 24px 26px; margin-top: 30px;
}
.sm-enquire h3 { font-size: 1.2rem; margin: 0 0 6px; }
.sm-enquire p { margin: 0 0 16px; font-size: 15px; color: var(--ink-soft); }

.sm-field { display: block; margin-bottom: 14px; }
.sm-field span {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.sm-field input, .sm-field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.sm-field textarea { min-height: 130px; resize: vertical; }
.sm-field input:focus, .sm-field textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-wash); }

/* ---------- prose ---------- */
.sm-prose { max-width: var(--measure); font-size: 17.5px; color: var(--ink-soft); }
.sm-prose p { margin: 0 0 18px; }
.sm-prose h2 { font-size: 1.7rem; margin: 38px 0 12px; color: var(--ink); }
.sm-prose h3 { font-size: 1.25rem; margin: 30px 0 10px; color: var(--ink); }
.sm-prose img { border-radius: 2px; margin: 26px 0; box-shadow: var(--shadow-md); }
.sm-prose blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--teal);
  font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); font-style: italic;
}
.sm-slider-counter {
  position: relative; z-index: 3;
  margin: 26px 0 0;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sm-spec-inline {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
}
/* An availability pill that can be acted on looks like it can be. */
.sm-pill--link { text-decoration: none; transition: filter .15s ease, transform .15s ease; }
.sm-pill--link:hover { filter: brightness(.94); transform: translateY(-1px); }
a.sm-slide-title { text-decoration: none; color: inherit; }
a.sm-slide-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.sm-prose ul, .sm-prose ol { padding-left: 22px; }
.sm-prose li { margin-bottom: 8px; }

/* ---------- a page that leads with a portrait ----------
   Sally beside her own words rather than a passport photo centred above a
   heading. The portrait keeps the same mount and shadow the paintings get in
   the hero, so a person and a painting are framed the same way. */
.sm-page-lede {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, var(--measure));
  gap: 40px;
  align-items: start;
  justify-content: center;
}
.sm-portrait { margin: 0; }
.sm-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--surface);
  padding: 10px;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .14);
}
/* The lede prose is already inside a sized column, so it must not re-centre. */
.sm-prose--lede { margin: 0; max-width: none; }
@media (max-width: 820px) {
  .sm-page-lede { grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; }
  .sm-portrait { max-width: 260px; }
  .sm-prose--lede { max-width: var(--measure); }
}

/* ---------- journal cards ---------- */
.sm-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.sm-post {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.sm-post:hover { box-shadow: var(--shadow-lg); }
.sm-post img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--sand); }
.sm-post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.sm-post-body time { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.sm-post-body h3 { font-size: 1.18rem; margin: 7px 0 8px; }
.sm-post-body p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- footer ---------- */
.sm-footer {
  background: var(--ink); color: #d8d5cd; margin-top: 0;
  padding: 56px 0 30px; font-size: 14.5px;
}
:root[data-theme="dark"] .sm-footer,
:root:not([data-theme="light"]) .sm-footer { background: var(--bone-deep); border-top: 1px solid var(--rule); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sm-footer { background: var(--ink); border-top: 0; }
}
.sm-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
@media (max-width: 820px) { .sm-footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.sm-footer h4 {
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin: 0 0 14px; opacity: .82;
}
.sm-footer a { color: #d8d5cd; text-decoration: none; }
.sm-footer a:hover { color: #fff; text-decoration: underline; }
.sm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.sm-footer .sm-sig {
  font-family: var(--f-display); font-size: 1.5rem; color: #fff; margin: 0 0 8px;
}
.sm-footer .blurb { max-width: 40ch; opacity: .85; margin: 0; }
.sm-footer-base {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; opacity: .7;
}

/* ---------- pagination / misc ---------- */
.sm-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.sm-pagination .page-numbers {
  padding: 9px 15px; border: 1px solid var(--rule); border-radius: 2px;
  text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 600;
}
.sm-pagination .page-numbers.current { background: var(--teal); color: #fff; border-color: var(--teal); }
.sm-pagination .page-numbers:hover:not(.current) { border-color: var(--teal); color: var(--teal); }

.sm-filters { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.sm-filters a {
  font-size: 13.5px; font-weight: 600; padding: 7px 15px;
  border: 1px solid var(--rule); border-radius: 999px;
  text-decoration: none; color: var(--ink-soft);
}
.sm-filters a:hover { border-color: var(--teal); color: var(--teal); }
.sm-filters a.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.sm-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- reveal on scroll ----------
   The same motion as Barrenjoey Artwalk: 30px rise + fade over 0.6s on
   cubic-bezier(.4,0,.2,1), with a 0.1s stagger between siblings.

   One deliberate difference. BAW parks every element at opacity:0 in CSS
   unconditionally, so if the script fails — or a crawler, a print, or a
   screenshot never fires the observer — the content is simply invisible.
   (BAW's own pages screenshot with blank sections for exactly this reason.)
   Here the hidden state only applies once JS has added `.reveal-ready`, and a
   failsafe reveals everything regardless. Same effect, cannot swallow the work. */
.sm-reveal { opacity: 1; transform: none; }

.reveal-ready .sm-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1),
              transform .6s cubic-bezier(.4, 0, .2, 1);
}
.reveal-ready .sm-reveal.is-in { opacity: 1; transform: none; }

/* Variants */
.reveal-ready .sm-reveal--fade  { transform: none; transition: opacity .6s ease; }
.reveal-ready .sm-reveal--left  { transform: translateX(-30px); }
.reveal-ready .sm-reveal--right { transform: translateX(30px); }
.reveal-ready .sm-reveal--scale { transform: scale(.95); }
.reveal-ready .sm-reveal--left.is-in,
.reveal-ready .sm-reveal--right.is-in { transform: translateX(0); }
.reveal-ready .sm-reveal--scale.is-in { transform: scale(1); }

/* Stagger siblings so a grid arrives in sequence rather than all at once. */
.reveal-ready .sm-reveal:nth-child(1) { transition-delay: 0s; }
.reveal-ready .sm-reveal:nth-child(2) { transition-delay: .1s; }
.reveal-ready .sm-reveal:nth-child(3) { transition-delay: .2s; }
.reveal-ready .sm-reveal:nth-child(4) { transition-delay: .3s; }
.reveal-ready .sm-reveal:nth-child(5) { transition-delay: .4s; }
.reveal-ready .sm-reveal:nth-child(6) { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .sm-reveal,
  .reveal-ready .sm-reveal--fade,
  .reveal-ready .sm-reveal--left,
  .reveal-ready .sm-reveal--right,
  .reveal-ready .sm-reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Dimension order key — small, so it reads as a note rather than a value. */
.sm-dim-key { color: var(--muted); font-size: .8em; letter-spacing: .02em; }

/* ---------- series index (Art Gallery) ----------
   Uniform cards on a shared baseline: fixed image ratio, so every title sits
   at the same height regardless of the painting's shape. The old page let the
   raw image dimensions set the row height, which is what made it ragged. */
.sm-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
}
.sm-series-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.sm-series-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.sm-series-figure {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
}
.sm-series-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.sm-series-card:hover .sm-series-figure img { transform: scale(1.03); }
.sm-series-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 17px 19px 20px;
  /* Push the body to a consistent bottom edge even when names wrap to two lines. */
  flex: 1;
  justify-content: flex-start;
}
.sm-series-name {
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.sm-series-count {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- homepage hero: a gallery wall ----------
   Sally has 156 paintings; the hero should look like it. A dimmed, tiled wall
   of her work fills the full width, and the featured piece sits in front of
   it — the way a painting is hung and lit in a room full of other work.

   The earlier version centred one image on a pale gradient, which left the
   same thin margins that made the old nikkon layout feel unfinished. */
.sm-hero-wall {
  position: relative;
  isolation: isolate;          /* keep the scrim's blend contained */
  overflow: hidden;
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--rule);
  background: var(--bone-deep);
}

/* The wall itself: small derivatives, so the whole backdrop costs less than
   one full-size image. */
.sm-wall {
  position: absolute;
  inset: -4%;                  /* bleed past the edges so no seam shows */
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: 210px;
  gap: 7px;
  /* Dimmed enough to sit behind, strong enough to still read as paintings.
     Too faint and the wall becomes grey rectangles, which looks like a
     loading state rather than a hung wall. */
  opacity: .58;
  filter: saturate(.92) contrast(.96);
  pointer-events: none;
}
.sm-wall-tile { display: block; overflow: hidden; border-radius: 1px; }
.sm-wall-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim: lifts the foreground painting off the wall without dulling it. */
.sm-wall-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 50% 46%,
      color-mix(in srgb, var(--bone) 78%, transparent) 0%,
      color-mix(in srgb, var(--bone) 40%, transparent) 55%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bone) 55%, transparent) 0%,
      transparent 22%,
      transparent 86%,
      color-mix(in srgb, var(--bone) 55%, transparent) 100%);
}

.sm-hero-stage {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.sm-slide {
  margin: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;          /* painting and caption stack, both centred */
  text-align: center;
}
/* The wall behind is vivid enough that a bare image would sit *in* it rather
   than in front of it. A mat and a real shadow do the separating — the same
   thing a mount and a wall gap do in a physical hang. */
.sm-slide-link {
  display: inline-block;
  text-decoration: none;
  padding: 14px;
  background: var(--surface);
  border-radius: 2px;
  box-shadow:
    0 32px 70px -20px rgba(0, 0, 0, .55),
    0 6px 18px rgba(0, 0, 0, .16);
}
.sm-slide img {
  display: block;
  width: auto;
  max-width: min(100%, 860px);
  max-height: min(62vh, 620px);
  object-fit: contain;          /* never crop a painting */
  margin-inline: auto;
}
/* Set on its own plate: over a wall of paintings, plain text on the backdrop
   is unreadable at exactly the wrong moment. */
.sm-slide-caption {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 4px 14px; margin-top: 20px;
  padding: 9px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
.sm-slide-title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  color: var(--ink); line-height: 1.2;
}
.sm-slide-meta { font-size: 14.5px; color: var(--muted); }

/* Once JS confirms it can drive the slider, stack the slides and crossfade. */
.js-slider .sm-hero-stage {
  display: grid;
  /* One column, sized to the stage — not to its widest child.
     An implicit `auto` column takes the widest item's max-content width, and
     with every slide stacked in the same cell that is the longest title in the
     catalogue. At 60 slides that blew the column out to 2287px inside a 1240px
     stage and pushed the painting off-centre. minmax(0, 1fr) lets it shrink. */
  grid-template-columns: minmax(0, 1fr);
}
.js-slider .sm-slide {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease;
}
.js-slider .sm-slide.is-active { opacity: 1; visibility: visible; }

.sm-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); cursor: pointer; z-index: 3;
  backdrop-filter: blur(6px);
}
.js-slider .sm-slider-arrow { display: flex; }
.sm-slider-arrow:hover { background: var(--surface); border-color: var(--rule-strong); }
.sm-slider-arrow svg { width: 20px; height: 20px; }
.sm-slider-prev { left: 30px; }
.sm-slider-next { right: 30px; }
@media (max-width: 720px) {
  .sm-slider-prev { left: 8px; }
  .sm-slider-next { right: 8px; }
  .sm-wall { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: 118px; }
}

.sm-slider-dots {
  position: relative; z-index: 3;
  display: none; justify-content: center; gap: 9px; margin-top: 26px;
}
.js-slider .sm-slider-dots { display: flex; }
.sm-slider-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.sm-slider-dot:hover { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.sm-slider-dot.is-active { background: var(--teal); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .js-slider .sm-slide { transition: none; }
}

/* Intro sits under the slider — the painting speaks first, the words second. */
.sm-intro { background: var(--bone); padding: 56px 0 60px; text-align: center; }
.sm-intro h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.sm-intro-sub {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--ink-soft);
  margin: 18px auto 0;
  max-width: 52ch;
  line-height: 1.55;
}
.sm-intro .sm-cta-row { justify-content: center; margin-top: 30px; }

/* ---------- sticky footer ----------
   Short pages (an exhibition, 404, contact) do not fill the viewport, so the
   footer used to stop wherever the content stopped and leave dead ground
   beneath it — one of the things that made the old nikkon layout feel unfinished.
   Flex column pins it to the bottom without ever overlapping longer pages. */
body.sm {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* accounts for mobile browser chrome */
}
body.sm > main#sm-main {
  flex: 1 0 auto;       /* grow to fill, never shrink content away */
}
body.sm > .sm-footer,
body.sm > .sm-nav,
body.sm > .sm-strip {
  flex-shrink: 0;
}

/* ---------- buy ----------
   Only rendered when a work is explicitly marked available. Everything else
   gets the enquiry route, so nothing is ever offered for sale by accident. */
.sm-buy {
  background: var(--available-wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--available);
  border-radius: 0 2px 2px 0;
  padding: 24px 26px;
  margin-top: 30px;
}
.sm-buy h3 { font-size: 1.2rem; margin: 0 0 14px; }
.sm-buy select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.sm-buy-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.sm-enquire--secondary {
  background: none; border: 0; padding: 14px 0 0; margin-top: 8px;
  font-size: 14.5px; color: var(--muted);
}
.sm-buy-notice {
  padding: 13px 16px; border-radius: 2px; margin: 0 0 18px; font-size: 15px;
  border-left: 3px solid var(--rule-strong); background: var(--surface-sunk, var(--sand));
}
.sm-buy-notice--good { border-left-color: var(--available); color: var(--available); background: var(--available-wash); }
.sm-buy-notice--warn { border-left-color: var(--clay); color: var(--clay); background: var(--clay-wash); }
.sm-buy-notice--note { border-left-color: var(--teal); color: var(--ink-soft); background: var(--teal-wash); }

/* ---------- work images: click to see the brushwork ---------- */
.sm-shot {
  display: block; width: 100%; padding: 0; margin: 0 0 14px;
  border: 0; background: none; cursor: zoom-in; position: relative;
  border-radius: 2px; overflow: hidden;
}
.sm-shot img, .sm-shot-plain { display: block; width: 100%; height: auto; border-radius: 2px; }
.sm-shot:last-child { margin-bottom: 0; }
.sm-shot-hint {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink); opacity: 0; transition: opacity .18s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sm-shot-hint svg { width: 17px; height: 17px; }
.sm-shot:hover .sm-shot-hint, .sm-shot:focus-visible .sm-shot-hint { opacity: 1; }
/* Touch has no hover, so the affordance has to be permanent there. */
@media (hover: none) { .sm-shot-hint { opacity: 1; } }

html.sm-lb-locked { overflow: hidden; }
.sm-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  background: color-mix(in srgb, #0d0f10 92%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sm-lightbox.is-open { display: flex; }
.sm-lb-figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.sm-lb-figure img {
  display: block; max-width: min(92vw, 1400px); max-height: 86vh;
  width: auto; height: auto; object-fit: contain;
  background: #fff; padding: 10px; border-radius: 2px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
}
.sm-lightbox.is-loading .sm-lb-figure img { opacity: .35; }
.sm-lb-caption {
  color: rgba(255,255,255,.72); font-size: 12.5px;
  letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.sm-lb-close, .sm-lb-nav {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1); color: #fff;
}
.sm-lb-close { position: absolute; top: 18px; right: 18px; }
.sm-lb-close:hover, .sm-lb-nav:hover { background: rgba(255,255,255,.2); }
.sm-lb-close svg, .sm-lb-nav svg { width: 20px; height: 20px; }
.sm-lb-nav[hidden] { display: none; }
@media (max-width: 640px) {
  .sm-lightbox { padding: 12px; }
  .sm-lb-nav { position: absolute; bottom: 18px; }
  .sm-lb-prev { left: 18px; } .sm-lb-next { right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-shot-hint { transition: none; }
}