/* Self-hosted type. Previously loaded from Google Fonts, which meant a
   third-party request on every page view and intermittent gstatic 404s. Latin
   subset only: the site is English and shipping every subset is wasteful. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/archivo-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* NeuroNest Studio

   Direction: the paintings are the only colour on this site.
   Chrome is plaster and ink, full stop. There is no decorative accent, no gold,
   no brand colour competing with the work. The one chromatic move is reserved
   strictly for interaction (hover, focus, current page) so colour on this site
   always means "you can act on this", never "we decorated this".

   That also keeps it clean of the counselling site, which owns sage, teal and
   honey because those colours live inside the paintings themselves. */

:root {
  --paper:  #f2eee7;   /* warm plaster ground, never pure white */
  --paper-2:#eae4da;   /* section ground */
  --ink:    #1b1a17;
  --ink-60: #5b574f;
  --ink-40: #8a857b;
  --live:   #4f4266;   /* INTERACTION ONLY: hover, focus, current page.
                          Never a decorative rule, never a heading, never a kicker. */
  --blush:  #c9afa6;   /* ground only */
  --hair:   #d8d0c3;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --grotesk: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --gut: 24px;
}

@media (prefers-color-scheme: dark) {
  /* The work is photographed against warm light. A dark UI shifts how every
     painting reads, so the ground stays warm and only drops in luminance. */
  :root {
    --paper: #171613; --paper-2: #1f1d19; --ink: #efe9dd; --ink-60: #b3ac9e;
    --ink-40: #857f73; --hair: #33302a; --live: #b3a3d4;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  font-synthesis-weight: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.narrow { max-width: 68ch; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.01em; line-height: 1.12; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--ink); }

/* the small-caps grotesque label is this category's uniform: nav, captions,
   buttons, metadata. It is never used at body size. */
.meta, .nav a, .btn, .cap, .eyebrow-num, footer a, .field-label {
  font-family: var(--grotesk);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- header ---------- */
header {
  padding: 28px 0;
  border-bottom: 1px solid var(--hair);
}
.head-in { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.brand {
  font-family: var(--serif); font-size: 1.45rem; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 11px;
}
.brand-mark { flex: 0 0 auto; }
.brand-text span { color: var(--ink-60); }
.nav { display: flex; gap: 26px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink-60); padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--live); }

.menu-btn { display: none; background: none; border: 1px solid var(--hair); color: var(--ink); padding: 10px 14px; cursor: pointer; }
.drawer { display: none; }

@media (max-width: 820px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .drawer.open { display: block; padding-top: 18px; padding-bottom: 6px; }
  .drawer.open .nav { display: flex; flex-direction: column; gap: 0; }
  .drawer.open .nav a { padding: 14px 0; border-bottom: 1px solid var(--hair); min-height: 48px; }
}

/* ---------- hero: brand first, then the work ----------
   Opening straight onto a painting looked handsome but told a first-time
   visitor nothing about whose studio this is. The mark, the name and the line
   she works by now hold the fold; the work sits beside them, not instead. */
.hero { padding: 56px 0 48px; }
.hero-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: 64px; align-items: center; }
.hero-brand h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-top: 24px; line-height: 1.05; }
.hero-brand h1 span { color: var(--ink-60); }
.hero-mark { color: var(--ink); display: block; }
.hero-line { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.35; margin-top: 20px; max-width: 18ch; }
.hero-sub { color: var(--ink-60); margin-top: 18px; max-width: 46ch; font-size: 17px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-ctas .btn { display: inline-block; width: auto; padding: 15px 26px; margin-top: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) {
  /* stop the two calls to action reading as two giant slabs */
  .hero-ctas .btn { flex: 1 1 auto; padding: 14px 18px; font-size: 12px; }
}

.hero-fig { margin: 0; display: grid; justify-items: center; }
.hero-fig img {
  /* contain, always. Her whole motif is a tiny figure under something vast:
     the empty space above the figure IS the meaning. Cover would crop it out. */
  max-height: min(64vh, 640px); max-width: 100%; width: auto; object-fit: contain;
}
@media (min-width: 1100px) { .hero-fig img { min-height: 420px; } }
@media (max-width: 700px) { .hero-fig img { max-height: 62vh; } }
.wall-label { margin-top: 22px; max-width: 420px; width: 100%; }
.wall-label .t { font-size: 1.35rem; }
.wall-label .m { color: var(--ink-60); margin-top: 6px; }
.wall-label a { text-decoration: none; border-bottom: 1px solid var(--live); }

/* ---------- statement ---------- */
.statement { padding: 64px 0 88px; }
.statement h2 { max-width: 20ch; }
.statement .lede { margin-top: 24px; max-width: 62ch; color: var(--ink-60); }

/* ---------- section headings, numbered not kicker-labelled ---------- */
.sec-head { display: flex; align-items: baseline; gap: 20px; border-top: 1px solid var(--hair); padding-top: 22px; margin-bottom: 40px; }
.eyebrow-num { color: var(--ink-40); font-variant-numeric: tabular-nums; }

/* ---------- collections ---------- */
.collections { padding-bottom: 96px; }
.coll-list { display: grid; gap: 64px; }
.coll {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  text-decoration: none;
}
.coll:nth-child(even) .coll-img { order: 2; }
.coll-img { background: var(--paper-2); aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; }
.coll-img img { max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.coll h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.coll p { color: var(--ink-60); margin-top: 14px; }
.coll .go { margin-top: 18px; color: var(--ink-60); }
.coll:hover .go { color: var(--live); }
@media (max-width: 820px) {
  .coll { grid-template-columns: 1fr; gap: 20px; }
  .coll:nth-child(even) .coll-img { order: 0; }
}

/* ---------- artwork grid: even tiles, contained, no masonry ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; gap: 44px; } }

.tile { text-decoration: none; display: block; }
.tile-box {
  aspect-ratio: 4/5; background: var(--paper-2);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.tile-box img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.tile .cap { margin-top: 14px; color: var(--ink-40); }
.tile .t { font-size: 1.2rem; margin-top: 8px; }
.tile:hover .cap { color: var(--ink-60); }
.badge {
  position: absolute; top: 0; right: 0; background: var(--ink); color: var(--paper);
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px;
}
.tbd { color: var(--ink-60); font-style: italic; }

/* ---------- artwork page ---------- */
/* NEVER use a padding shorthand on an element that also carries .wrap: it wipes
   .wrap's side padding and the text goes hard against the phone screen edge. */
.art-page { display: grid; grid-template-columns: 62fr 38fr; gap: 56px; padding-top: 56px; padding-bottom: 96px; align-items: start; }
@media (max-width: 1023px) { .art-page { grid-template-columns: 1fr; gap: 32px; } }

.art-images { display: grid; gap: 40px; }
.art-images figure { margin: 0; }
.art-images img { width: 100%; height: auto; }
.art-images figcaption { margin-top: 10px; color: var(--ink-40); }

.art-info { position: static; }
@media (min-width: 1024px) { .art-info { position: sticky; top: 32px; } }
.art-info h1 { font-size: 1.75rem; line-height: 1.2; }
.spec { margin: 20px 0 0; border-top: 1px solid var(--hair); }
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.spec dt, .spec .k { font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-40); }
.spec .v { text-align: right; }
.price { font-size: 1.6rem; margin: 24px 0 4px; }
.gst { color: var(--ink-40); font-size: 15px; }

.btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 18px 20px; min-height: 48px; margin-top: 20px; border: 1px solid var(--ink);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.oneofone { margin-top: 18px; color: var(--ink-60); font-style: italic; }
.incl { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.incl li { padding: 10px 0; border-bottom: 1px solid var(--hair); display: flex; gap: 12px; }
.incl li::before { content: ""; flex: 0 0 18px; height: 1px; margin-top: 16px; background: var(--ink-40); }
.tbd-note { color: var(--ink-40); font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

.artist-note { border-top: 1px solid var(--hair); padding: 40px 0 0; margin-top: 24px; }
.artist-note .cap { color: var(--ink-40); }
.artist-note p { margin-top: 12px; }


/* ---------- sensory rail ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
.rail > * { scroll-snap-align: start; }
.rail .tile-box { aspect-ratio: 1; }

/* ---------- sensory grid page ---------- */
.obj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
@media (max-width: 980px) { .obj-grid { grid-template-columns: repeat(2, 1fr); } }
.obj .tile-box { aspect-ratio: 1; }
.obj p { color: var(--ink-60); font-size: 17px; margin-top: 8px; }

/* ---------- prose ---------- */
.prose { padding-top: 48px; padding-bottom: 80px; }
.prose p { color: var(--ink-60); }
.prose p.first { color: var(--ink); }

/* ---------- contact ---------- */
.room img { max-height: 700px; width: 100%; object-fit: contain; background: var(--paper-2); }
/* Contain, not cover. A 4:3 cover box was cutting 93% off the portrait-shaped
   studio photo of Niki, which is exactly what she noticed. Nothing on this site
   gets cropped to fit a box: the box adapts, or it gets a plaster mount. */
.studio-shots figure { background: var(--paper-2); }
.studio-shots figure img { aspect-ratio: 4/3; object-fit: contain; width: 100%; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-bottom: 88px; }
/* room views: the work photographed on a real wall, the honest answer to "how big is it" */
.room { margin: 0; }
.room img { width: 100%; }
.room figcaption { margin-top: 10px; color: var(--ink-40); }
.studio-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
@media (max-width: 700px) { .studio-shots { grid-template-columns: 1fr; } }
.detail-note { color: var(--ink-40); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.field-label { display: block; color: var(--ink-40); margin-bottom: 6px; }
input, textarea {
  width: 100%; font-family: var(--serif); font-size: 18px; color: var(--ink);
  background: transparent; border: 1px solid var(--hair); padding: 13px 14px; margin-bottom: 20px;
}
input:focus, textarea:focus { outline: 2px solid var(--live); outline-offset: 1px; border-color: transparent; }
button.btn { width: 100%; cursor: pointer; font-family: var(--grotesk); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hair); padding: 56px 0 72px; margin-top: 40px; }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
footer a { color: var(--ink-60); text-decoration: none; display: block; padding: 5px 0; }
footer a:hover { color: var(--ink); }
.foot-note { color: var(--ink-40); font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.06em; margin-top: 40px; }
.motion-toggle {
  background: none; border: 1px solid var(--hair); color: var(--ink-60); cursor: pointer;
  font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 10px 14px; min-height: 44px;
}
.motion-toggle:hover { border-color: var(--live); color: var(--ink); }

/* ---------- motion ----------

   The brief here was "artistic, not AI standard". The default everything-fades-
   up-8px is exactly the tell, so nothing on this site translates on entry.

   Instead the page behaves the way paint does: it arrives out of focus and
   settles. Work resolves from blur, rules draw themselves along their length,
   and captions surface after the image they belong to. Long durations, a single
   shared easing curve, and a stagger so a grid arrives as a sequence rather
   than a block. The artwork itself never moves, scales or slides, ever.

   All of it collapses to nothing under data-motion="off". */

:root {
  --settle: cubic-bezier(0.16, 1, 0.3, 1);   /* slow out, long tail */
  --t-slow: 1200ms;
  --t-mid: 720ms;
  --t-quick: 320ms;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-quick); }

/* Work resolves from blur. No translate: a painting does not slide into place. */
.reveal { opacity: 0; filter: blur(14px); transition:
  opacity var(--t-slow) var(--settle) var(--d, 0ms),
  filter var(--t-slow) var(--settle) var(--d, 0ms); }
.reveal.in { opacity: 1; filter: blur(0); }

/* Text is the one thing allowed the faintest lift, and only 5px of it. */
.reveal-text { opacity: 0; transform: translateY(5px); transition:
  opacity var(--t-mid) var(--settle) var(--d, 0ms),
  transform var(--t-mid) var(--settle) var(--d, 0ms); }
.reveal-text.in { opacity: 1; transform: none; }

/* Rules draw along their length instead of fading in as a whole line. */
.sec-head { border-top: 0; position: relative; }
.sec-head::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hair); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--settle);
}
.sec-head.in::before { transform: scaleX(1); }

/* Images surface as they decode, at their own pace. */
img[data-fade] { opacity: 0; filter: blur(10px); transition:
  opacity var(--t-slow) var(--settle), filter var(--t-slow) var(--settle); }
img[data-fade].loaded { opacity: 1; filter: blur(0); }

/* The wall label behaves like a real one: it appears after the work is hung. */
.wall-label { opacity: 0; transition: opacity var(--t-mid) var(--settle) 420ms; }
.wall-label.in { opacity: 1; }
.wall-label::before {
  content: ""; display: block; width: 100%; height: 1px; background: var(--hair);
  margin-bottom: 16px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--settle) 300ms;
}
.wall-label.in::before { transform: scaleX(1); }

/* Hover: the mount deepens and the caption underlines itself.
   The work inside is never touched. */
.tile-box { transition: background var(--t-mid) var(--settle); }
.tile:hover .tile-box { background: var(--hair); }
.tile .t { position: relative; display: inline-block; }
.tile .t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--live); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--settle);
}
.tile:hover .t::after { transform: scaleX(1); }
.tile .cap, .tile .t { transition: color var(--t-mid) var(--settle); }

/* Inline links: ink rule at rest, colour only when you touch them. */
.ln { text-decoration: none; border-bottom: 1px solid var(--hair); transition: border-color var(--t-quick) var(--settle), color var(--t-quick) var(--settle); }
.ln:hover { color: var(--live); border-bottom-color: var(--live); }

.btn { transition: background var(--t-mid) var(--settle), color var(--t-mid) var(--settle), border-color var(--t-mid) var(--settle); }
.nav a { transition: color var(--t-quick) var(--settle), border-color var(--t-quick) var(--settle); }

/* Motion off means OFF: no blur, no fade, no draw, nothing deferred. */
html[data-motion="off"] .reveal,
html[data-motion="off"] .reveal-text,
html[data-motion="off"] .wall-label { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
html[data-motion="off"] .sec-head::before,
html[data-motion="off"] .wall-label::before { transform: scaleX(1) !important; transition: none !important; }
html[data-motion="off"] img[data-fade] { opacity: 1 !important; filter: none !important; transition: none !important; }
html[data-motion="off"] * { transition: none !important; animation: none !important; }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] .tile .t::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-text, .wall-label { opacity: 1; filter: none; transform: none; transition: none; }
  .sec-head::before, .wall-label::before { transform: scaleX(1); transition: none; }
  img[data-fade] { opacity: 1; filter: none; transition: none; }
  @view-transition { navigation: none; }
}

::selection { background: var(--live); color: var(--paper); }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 10; }


/* ---------- basket ----------
   A sticky bar rather than a hidden drawer: on a phone, a basket you cannot see
   is a basket you forget you filled. Appears only once something is in it. */
.basket {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--paper); border-top: 1px solid var(--ink);
  padding: 14px 0; margin-top: 8px;
}
.basket-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.basket-sum { margin: 0; font-size: 1.05rem; }
.basket-actions { display: flex; gap: 10px; }
.basket-err { color: var(--ink); margin: 10px auto 0; font-size: 15px; }
.add-to-basket { display: inline-block; }
@media (max-width: 560px) {
  .basket-in { gap: 12px; }
  .basket-sum { flex: 1 1 100%; }
  .basket-actions { flex: 1 1 100%; }
  .basket-actions .btn { flex: 1 1 auto; }
}