/* ═══════════════════════════════════════════════════════════════════════
   elnazerart — one stylesheet, no framework, no build step.

   The design idea: the paintings are the only colour on the page.
   Everything else is near-white, near-black and one restrained accent, so
   nothing competes with the work. Generous whitespace, small quiet type
   for the metadata, and no shadows or gradients on the chrome.

   Every colour, size and spacing value is a variable at the top — change
   the palette in one place rather than hunting through rules.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #fbfaf8;   /* page background — warm, not pure white */
  --surface:    #ffffff;
  --ink:        #1a1a1a;   /* body text */
  --ink-soft:   #6b6560;   /* metadata, captions */
  --line:       #e6e2dc;   /* hairlines */
  --accent:     #2f4538;   /* deep green — buttons, links on hover */
  --accent-ink: #ffffff;

  --wrap:       1200px;
  --gap:        28px;
  --radius:     2px;       /* almost square: galleries are not app UIs */

  /* How many paintings per row on a wide screen.
     Two gives each work room to be looked at rather than scanned, which
     suits a small collection of originals. Change this one number to 3
     for a denser grid — nothing else needs touching. Narrow screens drop
     to a single column regardless, at the bottom of this file. */
  --cols:       2;

  /* System fonts only. Nothing to download, nothing to block rendering,
     no third party watching who visits. A serif for display gives the
     gallery feel without a webfont. */
  --font-display: ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── TYPE SCALE ────────────────────────────────────────────────────────
   Every font-size in this file is in rem, so this one rule scales all of
   them together. --type-scale is set per-site in the admin (Appearance);
   the fallback of 1 means an unset value renders exactly as designed.

   ⚠️ Only font sizes scale. Padding, margins and the grid stay in px on
   purpose — scaling those too would reflow the layout and the paintings
   would change size, which is not what "larger text" should mean. */
html {
  font-size: calc(16px * var(--type-scale, 1));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}

.brand { text-decoration: none; display: block; }

/* ── LOGO ──────────────────────────────────────────────────────────────
   Height is driven by --logo-h, set per-site in the admin and written as
   an inline style on the img. Width is auto, so any aspect ratio works
   without the logo being squashed.

   ⚠️ max-width: 100% matters on narrow screens. A wide wordmark at a
   fixed height will otherwise push the nav off the right edge of a phone,
   and the overflow is invisible until someone looks at it on a phone.

   ⚠️ image-rendering is NOT set here. Browsers smooth upscaled images by
   default, and that is the right behaviour: a logo enlarged past its
   pixel size looks soft, and forcing crisp-edges would make it look
   jagged instead. The real fix is a bigger source file, not a CSS rule. */
.brand-logo {
  display: block;
  height: var(--logo-h, 46px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand--logo .brand-tag { margin-top: 6px; }

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.625rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.brand-tag {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 5px;
}

.nav { display: flex; gap: 28px; }

.nav a {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.nav a:hover            { color: var(--ink); }
.nav a.is-current       { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Intro ──────────────────────────────────────────────────────────── */

.intro { padding: 64px 24px 40px; text-align: center; }

.intro-h {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 2.75rem);
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 1.15;
}

.intro-p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── The grid ───────────────────────────────────────────────────────── */

.grid {
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* ⚠️ minmax(0, 1fr), NOT just 1fr. A grid track's default minimum is
     auto, which means it will not shrink below its content — a long
     painting title would push the column wider than its share and
     overflow the row. minmax(0, …) lets the track actually shrink. */
  gap: calc(var(--gap) * 1.6) calc(var(--gap) * 1.4);
}

.card { display: flex; flex-direction: column; }

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-img-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  /* A fixed aspect box keeps the grid tidy when paintings are all
     different shapes; object-fit: contain means nothing is ever cropped,
     which matters more for artwork than a flush grid does. */
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}

.card-img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform .35s ease;
}

.card-link:hover .card-img { transform: scale(1.025); }

.card-body { padding: 14px 2px 0; }

.card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 1.3;
}

.card-year { color: var(--ink-soft); font-size: 0.9375rem; }

.card-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.card-price {
  margin: 8px 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ── Badges ─────────────────────────────────────────────────────────── */

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius);
}

.badge-lg { font-size: 0.6875rem; padding: 7px 12px; top: 14px; left: 14px; }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover { background: var(--ink); color: #fff; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  padding: 13px 26px;
}

.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

/* The card button: present but quiet, so it does not shout over the work. */
.btn-quiet {
  margin-top: 12px;
  align-self: flex-start;
  border-color: var(--line);
  color: var(--ink-soft);
  padding: 9px 16px;
}

.btn-quiet:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn-disabled {
  margin-top: 12px;
  align-self: flex-start;
  border-color: var(--line);
  color: var(--ink-soft);
  padding: 9px 16px;
  cursor: default;
  opacity: .6;
}

.btn-disabled:hover { background: transparent; color: var(--ink-soft); }

.btn-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* ── Painting detail ────────────────────────────────────────────────── */

.crumb { margin: 32px 0 20px; font-size: 0.8125rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
  margin-bottom: 64px;
}

.detail-media {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.detail-img { max-height: 72vh; width: auto; object-fit: contain; }

.detail-h {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  font-weight: 400;
  margin: 0 0 22px;
  line-height: 1.2;
}

/* The spec list: two columns, label quiet, value normal. */
.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}

.spec dt {
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 2px;
}

.spec dd { margin: 0; }

.spec-price { font-size: 1.0625rem; }

.sold-note { color: var(--ink-soft); margin: 0 0 16px; }

.prose { margin-top: 30px; }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }

/* ── Pager ──────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 26px 0 72px;
}

.pager-link { text-decoration: none; max-width: 45%; }
.pager-next { text-align: right; margin-left: auto; }

.pager-dir {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.pager-title { font-family: var(--font-display); font-size: 1.0625rem; }
.pager-link:hover .pager-title { text-decoration: underline; }

/* ── About ──────────────────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 52px;
  align-items: start;
  padding: 56px 0 80px;
}

.about-media { background: var(--surface); border: 1px solid var(--line); padding: 18px; }

.about-h {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 400;
  margin: 0 0 22px;
}

.about-cta { margin-top: 32px; }

/* ── Empty / 404 ────────────────────────────────────────────────────── */

.empty { padding: 90px 24px 110px; text-align: center; }
.empty p { color: var(--ink-soft); }
.empty code {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2px 6px;
  font-size: 0.875rem;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 36px;
}

.footer-h {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0 0 12px;
}

.footer-line { margin: 0 0 4px; font-size: 0.875rem; color: var(--ink-soft); }
.footer-line a { color: var(--ink-soft); }
.footer-line a:hover { color: var(--ink); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  padding-bottom: 28px;
}

.footer-base p { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .detail, .about { grid-template-columns: 1fr; gap: 32px; }
  .detail-img { max-height: 60vh; }
  .intro { padding-top: 44px; }
  .header-inner { padding-top: 16px; padding-bottom: 16px; }
}

/* One painting per row once two would be too narrow to look at. Set on
   the variable rather than on grid-template-columns, so the rule above
   stays the only place the grid is defined. */
@media (max-width: 680px) {
  .grid { --cols: 1; }
  .nav  { gap: 20px; }
}

/* ── Respect reduced-motion and keyboard users ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card-link:hover .card-img { transform: none; }
}

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOUND 2026-10-29 — classes the templates emit that nothing styled.

   Found by diffing every class in the templates against every class in the
   stylesheets, after the Share row on a painting page was seen sitting flush
   against the description with no separation at all.

   ⚠️ ALL FOUR PRE-DATE THIS FILE. They were carried over from the Node
   prototype, where the same classes were emitted and the same rules were
   missing. Nobody saw them because the seeded demo paintings had no
   description to push the Share row around, and the About page had no image
   — which is exactly the case the worst of these breaks.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SHARE ROW — was completely unstyled ──────────────────────────
   Measured at 0px from the description above it. */
.share {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.share-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.share-link {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.share-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── 2. ABOUT PAGE WITH NO PORTRAIT — the worst of the four ──────────
   .about is a 2-column grid. The template adds `about-body--wide` when
   there is no image, expecting the text to span both columns. No rule
   existed, so the text stayed in the narrow 1.4fr column with a third of
   the page empty beside it. The About page has no image today, so this is
   live right now. */
.about-body--wide { grid-column: 1 / -1; max-width: 68ch; }

/* ── 3. ABOUT PORTRAIT COULD OVERFLOW ────────────────────────────────
   No max-width meant a wide portrait photo would push out of its column. */
.about-img { display: block; width: 100%; height: auto; }

/* ── 4. SOLD BADGE LOOKED IDENTICAL TO ANY OTHER BADGE ───────────────
   .badge styled it; .badge-sold added nothing. A sold work should read as
   sold at a glance, not require reading the small print. */
.badge-sold { background: var(--accent); }

/* Intro paragraph when the owner has written one, rather than falling back
   to the tagline — slightly wider measure so a real sentence can breathe. */
.intro-body { max-width: 58ch; margin-left: auto; margin-right: auto; }


/* ═══════════════════════════════════════════════════════════════════════
   FULL-SCREEN ZOOM (added 2026-10-30)
   Paired with assets/js/zoom.js. Nothing here hides or moves any part of
   the page: the overlay does not exist in the markup until JS builds it,
   so with JS off the painting is simply a painting.
   ═══════════════════════════════════════════════════════════════════════ */

/* The affordance. ⚠️ Added by JS (.is-zoomable), never in the stylesheet
   alone — a magnifier cursor on a page where clicking does nothing is a
   promise the page cannot keep. */
.detail-img.is-zoomable { cursor: zoom-in; }
.detail-img.is-zoomable:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.zoomer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(16, 16, 18, 0.94);
}
.zoomer.is-open { display: block; }

/* ⚠️ The scroll lock goes on <html>, not <body>. iOS Safari ignores
   overflow:hidden on body in enough cases that the page scrolls behind the
   overlay; on the root element it holds. */
html.zoomer-lock { overflow: hidden; }

.zoomer-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* ⚠️ THIS LINE IS WHAT MAKES PINCH-ZOOM WORK. Without touch-action:none
     the browser handles the two-finger gesture itself — scrolling the page
     behind the overlay — and our handler never sees consistent events. */
  touch-action: none;
  cursor: zoom-in;
}
.zoomer-stage.is-zoomed { cursor: grab; }
.zoomer-stage.is-zoomed:active { cursor: grabbing; }

.zoomer-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  /* No transition: a pinch sends many events per second and animating each
     one lags a finger that is still moving. */
  user-select: none;
  -webkit-user-drag: none;
}

.zoomer-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;          /* ≥44px: a reliable touch target */
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.zoomer-close:hover { background: rgba(255, 255, 255, 0.22); }
.zoomer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.zoomer-hint {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;    /* never intercepts a drag near the bottom */
}

/* While the large file is on its way. A spinner would need a keyframe and
   a reduced-motion exception; a word says the same thing. */
.zoomer.is-loading .zoomer-stage::after {
  content: 'Loading…';
  position: absolute;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
  /* The hint describes a mouse on desktop; on a phone, drop the wording to
     what applies rather than mentioning scrolling and the Esc key. */
  .zoomer-hint { font-size: 0.6875rem; }
}