/* NeuroNest Studio
   Deliberately NOT the counselling site's language. That site owns sage, teal
   and honey, because those colours live inside the paintings. Putting them in
   this UI would make the work look like an illustration of a brand. This site
   is plaster, ink and a desaturated gold that never competes with real gold leaf. */

:root {
  --paper:  #f2eee7;   /* warm plaster ground, never pure white */
  --paper-2:#eae4da;   /* section ground */
  --ink:    #1b1a17;
  --ink-60: #5b574f;
  --ink-40: #8a857b;
  --gold:   #a87c3d;   /* rules, focus, small accents. NOT body copy */
  --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; --gold: #c9a063;
  }
}

* { 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;
}
.brand span { color: var(--gold); }
.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(--gold); }

.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: one work, contained, with a wall label ---------- */
.hero { padding: 72px 0 40px; }
.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(74vh, 760px); width: auto; object-fit: contain;
}
.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(--gold); }

/* ---------- 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(--gold); }

/* ---------- 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: 100%; max-height: 100%; 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(--gold); }
@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(--gold); }

/* ---------- 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 7px; height: 7px; margin-top: 12px; background: var(--gold); }
.tbd-note { color: var(--gold); 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; }

/* scale reference silhouette */
.scale-ref { background: var(--paper-2); padding: 28px; }
.scale-ref svg { width: 100%; height: auto; display: block; }

/* ---------- 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 ---------- */
.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(--gold); 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(--gold); color: var(--ink); }

/* ---------- motion ----------
   Everything below is opt-out-able. `data-motion="off"` on <html> is set by the
   footer toggle and defaults to whatever prefers-reduced-motion says, so a
   sensory-sensitive visitor gets a genuinely still page, not a slightly calmer one. */
@view-transition { navigation: auto; }

.reveal { opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
img[data-fade] { opacity: 0; transition: opacity .4s ease; }
img[data-fade].loaded { opacity: 1; }
.tile .cap, .tile .t { transition: color .25s ease; }

html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-motion="off"] img[data-fade] { opacity: 1 !important; transition: none !important; }
html[data-motion="off"] * { transition: none !important; animation: none !important; }
html[data-motion="off"] { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  img[data-fade] { opacity: 1; transition: none; }
  @view-transition { navigation: none; }
}

::selection { background: var(--gold); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold); 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; }

/* scale reference sits inside the info column, small and matter-of-fact */
.scale-ref { margin-top: 26px; padding: 20px 0 0; border-top: 1px solid var(--hair); }
.scale-svg { width: 100%; max-width: 300px; height: auto; display: block; color: var(--ink); }

/* ---------- corrections after visual review ----------
   The hero was reading as a thumbnail in a field of paper. A gallery hero has
   to command the viewport: the work is the largest thing on the page, always. */
.hero { padding-top: 56px; }
.hero-fig img { max-height: min(80vh, 900px); max-width: 100%; }
@media (min-width: 1100px) { .hero-fig img { min-height: 560px; } }
@media (max-width: 700px) { .hero-fig img { max-height: 62vh; } }

/* Documentary photography (studio shots, work in a room) is NOT artwork, so it
   may be cropped to a consistent box. The no-crop rule protects paintings only. */
/* the room shot exists to show real scale, so the whole scene stays in frame */
.room img { max-height: 700px; width: 100%; object-fit: contain; background: var(--paper-2); }
.studio-shots figure img { aspect-ratio: 4/3; max-height: none; object-fit: cover; }

/* Let each collection image sit larger inside its box so the plaster band around
   it reads as a deliberate mount rather than an accident of aspect ratio. */
.coll-img { background: var(--paper-2); }
.coll-img img { max-width: 88%; max-height: 88%; }