/* =====================================================================
   LIA FINE ART — visual system
   Palette pulled directly from Lia's own pigments:
   aubergine (image 1 background), cocoa (image 2/3 background),
   yolk yellow, cobalt eye, leaf green, burnt orange.
   ===================================================================== */

:root {
  /* Palette pulled directly from recent works */
  --c-bg:        #F6EFE3;   /* warm cream — canvas */
  --c-bg-deep:   #5B3A2E;   /* cocoa brown — from her still-life backgrounds (img 2 & 3) */
  --c-ink:       #1F1A17;   /* primary text */
  --c-ink-soft:  #4A3F38;   /* secondary text */
  --c-line:      #2A201C;

  --c-aubergine: #5A2D7A;   /* deep purple — from her img 1 background. PRIMARY ACCENT. */
  --c-pink:      #5A2D7A;   /* legacy alias — kept so old rules still resolve */
  --c-cocoa:     #5B3A2E;   /* cocoa brown — alias for --c-bg-deep */
  --c-crimson:   #8B1E3F;   /* deep red */
  --c-mustard:   #F2B33D;   /* warm yellow — the lemon */
  --c-cobalt:    #1E4D9B;   /* cobalt blue — the evil-eye motif */
  --c-moss:      #1F4D3F;   /* deep leaf green */
  --c-violet:    #6B4A8B;   /* lighter violet for blobs */
  --c-clay:      #C24E1A;   /* burnt orange */
  --c-sky:       #6FB7C6;   /* soft accent */

  --c-paper:     #FDF8EE;   /* lighter cream for cards */

  /* Type */
  --f-display: "Fraunces", "Playfair Display", Georgia, serif;
  --f-body:    "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --radius-s: 4px;
  --radius-m: 14px;
  --radius-l: 24px;

  --shadow-soft: 0 30px 60px -30px rgba(31, 26, 23, 0.35);
  --shadow-hover: 0 40px 80px -25px rgba(31, 26, 23, 0.55);

  --max-w: 1400px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.italic { font-style: italic; }

/* ---------- Layout ---------- */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 120px 0;
  position: relative;
}

.section--dark {
  background: var(--c-bg-deep);
  color: var(--c-paper);
}
.section--dark .eyebrow { color: rgba(253, 248, 238, 0.55); }

.section--pink {
  background: var(--c-pink);
  color: var(--c-paper);
}
.section--pink .eyebrow { color: rgba(255,255,255,0.7); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(246, 239, 227, 0.78);
  border-bottom: 1px solid rgba(31, 26, 23, 0.08);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.logo {
  font-family: var(--f-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-pink);
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(230, 51, 106, 0.18);
}

.nav {
  display: flex;
  gap: 36px;
  align-items: center;
  font-size: 15px;
}

.nav a {
  position: relative;
  padding: 6px 0;
  color: var(--c-ink);
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--c-pink);
  transition: width .3s ease;
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--c-pink); }

.nav__cta {
  background: var(--c-ink);
  color: var(--c-paper) !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.nav__cta:hover { background: var(--c-pink); color: var(--c-paper) !important; }
.nav__cta::after { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

.hero__title {
  font-size: clamp(56px, 8vw, 124px);
  letter-spacing: -0.04em;
  font-weight: 400;
  line-height: 0.92;
}
.hero__title .accent {
  font-style: italic;
  color: var(--c-pink);
}

.hero__sub {
  margin: 28px 0 36px;
  font-size: 20px;
  max-width: 480px;
  color: var(--c-ink-soft);
  line-height: 1.55;
}

.hero__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-pink); }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }

.btn--light { background: var(--c-paper); color: var(--c-ink); }
.btn--light:hover { background: var(--c-pink); color: var(--c-paper); }

/* Hero showcase — stacked recent works */
.hero__stage {
  position: relative;
  aspect-ratio: 4/5;
  min-height: 520px;
}

.hero__art {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--c-bg-deep);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
}
.hero__art img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__art--1 { transform: translate(-6%, -3%) rotate(-3deg); z-index: 1; }
.hero__art--2 { transform: translate(0%, 0%)  rotate(0deg);  z-index: 2; }
.hero__art--3 { transform: translate(6%, 4%)  rotate(3deg);  z-index: 3; }

.hero__stage:hover .hero__art--1 { transform: translate(-12%, -6%) rotate(-7deg); }
.hero__stage:hover .hero__art--3 { transform: translate(12%, 8%)  rotate(7deg); }

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
.blob--pink   { background: var(--c-pink); }
.blob--yellow { background: var(--c-mustard); }
.blob--blue   { background: var(--c-cobalt); }
.blob--green  { background: var(--c-moss); }
.blob--violet { background: var(--c-violet); }

.hero .blob--a { width: 180px; height: 220px; top: 6%; right: -60px; background: var(--c-mustard); border-radius: 56% 44% 60% 40%/55% 45% 55% 45%; }
.hero .blob--b { width: 120px; height: 120px; bottom: 12%; left: -30px; background: var(--c-cobalt); border-radius: 50%; opacity: 0.85; }
.hero .blob--c { width: 70px; height: 70px; top: 40%; left: 45%; background: var(--c-pink); border-radius: 50%; }

/* ---------- Ticker (under hero) ---------- */

.ticker {
  border-top: 1px solid rgba(31,26,23,0.08);
  border-bottom: 1px solid rgba(31,26,23,0.08);
  background: var(--c-bg);
  padding: 18px 0;
  overflow: hidden;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  gap: 60px;
  animation: scroll 38s linear infinite;
  padding-left: 60px;
}
.ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.ticker__dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Featured grid ---------- */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 72px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(40px, 5.5vw, 76px);
  max-width: 800px;
}
.section-head h2 em {
  color: var(--c-pink);
  font-style: italic;
}
.section--dark .section-head h2 em { color: var(--c-mustard); }
.section--pink .section-head h2 em { color: var(--c-mustard); }

.section-head__right {
  max-width: 380px;
  font-size: 16px;
  color: var(--c-ink-soft);
  line-height: 1.6;
}
.section--dark .section-head__right { color: rgba(253, 248, 238, 0.7); }
.section--pink .section-head__right { color: rgba(255,255,255,0.85); }

/* Asymmetric showcase — slot sizes match each work's true aspect ratio,
   so nothing gets cropped. Each .work sets --ratio on itself. */
.showcase {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.work {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: #EFE7D6;  /* warm matte for any letterboxing */
  cursor: pointer;
  transition: transform .4s ease;
  aspect-ratio: var(--ratio, 4/5);
}
.work img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease, filter .6s ease;
}
.work:hover img { transform: scale(1.04); }
.work__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  color: var(--c-paper);
  transform: translateY(100%);
  transition: transform .4s ease;
}
.work:hover .work__caption { transform: translateY(0); }
.work__title {
  font-family: var(--f-display);
  font-size: 26px;
  font-style: italic;
  margin: 0 0 4px;
}
.work__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Showcase column spans — heights now driven by --ratio per work */
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ---------- Series block ---------- */

.series {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.series__copy h3 {
  font-size: clamp(36px, 4.5vw, 56px);
  margin-bottom: 24px;
}
.series__copy p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 0 18px;
}
.section--dark .series__copy p { color: rgba(253,248,238,0.78); }

.series__quote {
  margin-top: 36px;
  padding: 28px 32px;
  border-left: 3px solid var(--c-mustard);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--c-paper);
}
.series__quote::before {
  content: "“";
  font-size: 64px;
  color: var(--c-mustard);
  line-height: 0;
  display: block;
  margin-bottom: 12px;
}

.series__stack {
  position: relative;
  aspect-ratio: 1/1;
}
.series__stack img {
  position: absolute;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  width: 60%;
  object-fit: cover;
}
.series__stack img:nth-child(1) { top: 0; left: 0; width: 58%; aspect-ratio: 4/5; }
.series__stack img:nth-child(2) { top: 14%; right: 0; width: 50%; aspect-ratio: 1/1; }
.series__stack img:nth-child(3) { bottom: 0; left: 18%; width: 56%; aspect-ratio: 4/3; }

/* ---------- About teaser ---------- */

.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
.about-teaser__photo {
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
  box-shadow: var(--shadow-soft);
}
.about-teaser__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__photo::after {
  content: "";
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--c-mustard);
  bottom: -50px; right: -50px;
  z-index: -1;
}

.about-teaser__copy h2 {
  font-size: clamp(40px, 5vw, 64px);
  margin-bottom: 28px;
}
.about-teaser__copy p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 18px;
  color: var(--c-ink-soft);
}
.about-teaser__copy p:first-letter {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 64px;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--c-pink);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--c-bg-deep);
  color: var(--c-paper);
  padding: 100px 0 40px;
  position: relative;
  overflow: hidden;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.footer h4 {
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
  margin-bottom: 18px;
}
.footer p, .footer a { color: rgba(253,248,238,0.75); font-size: 15px; }
.footer a:hover { color: var(--c-mustard); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }

.footer__brand {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 64px;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 16px;
}
.footer__brand .accent { color: var(--c-mustard); }

.footer__bottom {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid rgba(253,248,238,0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(253,248,238,0.5);
  font-family: var(--f-mono);
  letter-spacing: 0.05em;
}

.footer .blob {
  width: 320px; height: 320px;
  background: var(--c-mustard);
  bottom: -120px; right: -100px;
  opacity: 0.22;
  filter: blur(20px);
  z-index: 0;
}

/* =====================================================================
   GALLERY page
   ===================================================================== */

.page-hero {
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(64px, 10vw, 156px);
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.page-hero h1 em { color: var(--c-pink); font-style: italic; }
.page-hero p {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--c-ink-soft);
  font-size: 18px;
}

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 48px 0 64px;
}
.filter-btn {
  padding: 10px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(31,26,23,0.2);
  color: var(--c-ink);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all .2s ease;
}
.filter-btn:hover { border-color: var(--c-ink); }
.filter-btn.is-active {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}

/* Row-first grid — natural reading order, uniform frame per row,
   no cropping (object-fit: contain with matte background). */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
  padding-bottom: 120px;
  align-items: start;
}
.gallery-item {
  cursor: pointer;
  transition: opacity .3s ease;
}
.gallery-item.is-hidden { display: none; }
.gallery-item__frame {
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  background: #EFE7D6;
  margin-bottom: 16px;
  aspect-ratio: 4 / 5;       /* uniform frame size per row */
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;       /* never crop */
  transition: transform .8s ease;
}
.gallery-item:hover .gallery-item__frame img { transform: scale(1.06); }
.gallery-item__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery-item:hover .gallery-item__frame::after { opacity: 1; }

.gallery-item__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  margin: 0 0 4px;
}
.gallery-item__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* =====================================================================
   Gallery Wall View — full-screen immersive painting view
   ===================================================================== */

.wall-view {
  position: fixed;
  inset: 0;
  /* dvh = dynamic viewport height — accounts for iOS Safari URL bar that
     shows/hides during scroll, so wall-view always covers the visible area */
  height: 100dvh;
  width: 100vw;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity .35s ease;
  overflow: hidden;
  overscroll-behavior: contain;  /* prevent rubber-band exposing page underneath */
}
.wall-view.is-open { display: block; opacity: 1; }

/* The gallery room — wall + floor */
.wall-view__room {
  position: absolute;
  inset: 0;
  background:
    /* Subtle vignette darker at corners */
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.20) 100%),
    /* Top spotlight — gallery directional light from above */
    radial-gradient(ellipse 65% 55% at 50% 22%, rgba(255, 245, 220, 0.50) 0%, transparent 70%),
    /* Wall to floor gradient — wall on top 80%, floor on bottom */
    linear-gradient(to bottom,
      #EFE5D2 0%,
      #EBE0CC 55%,
      #E5D9C3 78%,
      /* baseboard line where wall meets floor */
      #B5A48A 80%,
      #8B7B62 80.4%,
      /* floor — wooden gallery floor */
      #7A6B52 81%,
      #4A3F30 100%
    );
}

/* Subtle paper/canvas wall texture via SVG noise */
.wall-view__room::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  pointer-events: none;
}

/* Soft directional spotlight ring (light bleed on wall above painting) */
.wall-view__spotlight {
  position: absolute;
  top: -20%; left: 50%;
  width: 70%; height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(255, 245, 215, 0.35), transparent 60%);
  pointer-events: none;
}

/* Stage area for the painting + label — sits in upper wall area.
   Use vh-based heights and bottom-padded so floor + footer never overlap. */
.wall-view__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Header ~70px, floor starts at 80vh, footer band ~50px under floor.
     Give the stage explicit vh height: 70vh + bottom margin for floor */
  height: calc(78vh - 80px);    /* available wall space below header, above floor */
  margin-top: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: center;
  padding: 20px 100px 30px;
  box-sizing: border-box;
}

/* The painting itself — sized to fit, no crop */
.wall-view__painting-wrap {
  height: 100%;
  min-height: 0;             /* allow shrinking inside grid */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wall-view__painting {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  height: 100%;              /* fill wrap so img max-height: 100% works */
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden is ALWAYS on so the img's scale-back transition stays
     clipped — without this, removing .is-magnifying instantly drops
     overflow:hidden while the img is still at ~2x, briefly revealing the
     full-size painting (the "flash" bug). */
  overflow: hidden;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.35))
    drop-shadow(0 12px 16px rgba(0,0,0,0.25));
  transform: translateY(0);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
  cursor: zoom-in;
}
.wall-view__painting img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center center;
}
/* Click-zoom: painting goes fixed-position and fills the viewport
   (with 40px margin), keeping aspect ratio. The label sidebar fades
   out so the painting has the entire stage. Click again to restore. */
.wall-view__painting.is-zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100vw - 80px);
  height: calc(100vh - 80px);
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  transform: translate(-50%, -50%);
  z-index: 110;
  cursor: zoom-out;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,0.55));
  transition: filter .35s ease;
}
.wall-view__painting.is-zoomed img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: none;            /* override magnify scale */
}
/* Fade the label sidebar out while painting is fullscreen */
.wall-view.is-painting-zoomed .wall-view__label {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* Hover-magnify: mousemove on painting sets transform-origin via JS, this
   rule scales the image 2x so the portion under the cursor appears magnified.
   overflow:hidden is set on the parent permanently (see above) to prevent
   the scale-back flash. */
.wall-view__painting.is-magnifying {
  cursor: crosshair;
}
.wall-view__painting.is-magnifying img {
  transform: scale(2);
  transition: transform .1s ease;
}

/* Museum label */
.wall-view__label {
  background: rgba(253, 248, 238, 0.92);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 36px 32px;
  border-radius: 4px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.15);
  max-height: 100%;
  overflow-y: auto;
  position: relative;
  /* pinned to wall — subtle attachment shadow on top */
}
.wall-view__label::before {
  /* tiny "pin" at the top */
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.wall-view__label__eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
}
.wall-view__label h2 {
  font-family: var(--f-display);
  font-size: 30px;
  font-style: italic;
  margin: 0 0 4px;
  line-height: 1.1;
}
.wall-view__label__titlezh {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--c-ink-soft);
  margin-bottom: 18px;
}
.wall-view__label__titlezh:empty { display: none; }
.wall-view__label__rule {
  height: 1px;
  background: var(--c-ink);
  margin: 18px 0;
  opacity: 0.4;
  width: 40px;
}
.wall-view__label__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}
.wall-view__label__specs dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0;
  padding-top: 2px;
}
.wall-view__label__specs dd {
  margin: 0;
  color: var(--c-ink);
}
.wall-view__label__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin: 0 0 14px;
}
.wall-view__label__desczh {
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-ink-soft);
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.wall-view__label__desczh:empty { display: none; }

/* Top-left brand + counter */
.wall-view__header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  /* right padding leaves room for the close button (~64px) so the counter
     "01 / 08" doesn't get hidden behind it */
  padding: 24px 80px 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(31, 26, 23, 0.7);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wall-view__brand {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-transform: none;
}

/* Close + navigation buttons */
.wall-view__close {
  position: absolute;
  top: 22px; right: 32px;
  z-index: 6;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(31, 26, 23, 0.2);
  background: rgba(253, 248, 238, 0.9);
  color: var(--c-ink);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.wall-view__close:hover { background: var(--c-ink); color: var(--c-paper); transform: rotate(90deg); }

.wall-view__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(31, 26, 23, 0.15);
  background: rgba(253, 248, 238, 0.85);
  color: var(--c-ink);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  font-family: var(--f-display);
}
.wall-view__nav:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  transform: translateY(-50%) scale(1.08);
}
.wall-view__nav--prev { left: 24px; }
.wall-view__nav--next { right: 24px; }

/* Footer counter + hint — sits on the floor area */
.wall-view__footer {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  color: rgba(253, 248, 238, 0.55);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wall-view__footer kbd {
  font-family: var(--f-mono);
  font-size: 9px;
  padding: 3px 7px;
  background: rgba(253, 248, 238, 0.12);
  border-radius: 3px;
  color: rgba(253, 248, 238, 0.85);
  border: 1px solid rgba(253, 248, 238, 0.15);
}

/* Responsive — on mobile/tablet stack the label below */
@media (max-width: 900px) {
  .wall-view__stage {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding: 70px 24px 24px;
    gap: 24px;
    height: 100%;
  }
  .wall-view__label { max-height: 36vh; }
  .wall-view__nav { width: 44px; height: 44px; font-size: 22px; }
  .wall-view__nav--prev { left: 12px; }
  .wall-view__nav--next { right: 12px; }
}

/* Mobile-only: hide keyboard hints, switch stage from grid → flex-column.
   The grid `auto auto` was collapsing the label row to 0px when the
   container had a fixed 100% height — content overflowed silently with
   no scroll. Flex-column with overflow-y:auto behaves predictably:
   children stay at natural size, overflow scrolls smoothly. */
@media (max-width: 640px) {
  .wall-view__footer { display: none; }
  .wall-view__stage {
    display: flex;
    flex-direction: column;
    padding: 60px 16px 24px;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;       /* explicit: iOS allow vertical scroll */
    box-sizing: border-box;
  }
  .wall-view__painting-wrap {
    flex: 0 0 auto;
    max-height: 55vh;          /* cap painting so label has room */
    min-height: 200px;
  }
  .wall-view__label {
    flex: 0 0 auto;
    padding: 20px 22px;
    max-height: none;          /* let label show in full */
    overflow: visible;
  }
  .wall-view__label h2 { font-size: 24px; }
  .wall-view__brand { font-size: 18px; }
  .wall-view__header { padding: 18px 70px 18px 22px; }
  .wall-view__close { top: 14px; right: 16px; width: 38px; height: 38px; }
}

/* Legacy lightbox kept hidden but still in DOM for older usages — we'll remove later */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 10, 0.92);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open { display: flex; }

.lightbox__inner {
  max-width: 1300px;
  width: 100%;
  max-height: 90vh;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  background: var(--c-bg);
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
}
.lightbox__image {
  background: var(--c-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox__image img { max-height: 90vh; max-width: 100%; object-fit: contain; }
.lightbox__copy {
  padding: 56px 48px;
  overflow-y: auto;
}
.lightbox__copy h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-style: italic;
  margin-bottom: 8px;
}
.lightbox__copy .lightbox__meta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 28px;
}
.lightbox__copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink-soft);
  margin: 0 0 18px;
}
.lightbox__copy .lightbox__zh {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(31,26,23,0.1);
  font-size: 15px;
  line-height: 1.85;
}

.lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 0;
  font-size: 20px;
  z-index: 2;
}
.lightbox__close:hover { background: var(--c-pink); }

.lightbox__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin: 28px 0;
  padding: 24px;
  background: rgba(31,26,23,0.04);
  border-radius: var(--radius-s);
}
.lightbox__specs div {
  font-size: 14px;
}
.lightbox__specs strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 4px;
  font-weight: 500;
}

/* =====================================================================
   ABOUT page
   ===================================================================== */

.about-hero {
  padding: 80px 0 80px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
.about-hero__photo {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-soft);
}
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.about-hero__name {
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.9;
  margin-bottom: 20px;
}
.about-hero__name em { color: var(--c-pink); font-style: italic; }

.about-hero__role {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 24px;
}

.about-hero__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 600px;
}

.statement {
  background: var(--c-paper);
  border-radius: var(--radius-l);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
  position: relative;
}
.statement--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.statement h3 {
  font-size: 32px;
  font-style: italic;
  margin-bottom: 20px;
  color: var(--c-pink);
}
.statement p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px;
  color: var(--c-ink);
}
.statement--zh p {
  font-size: 15.5px;
  line-height: 1.95;
}

.contact-band {
  background: var(--c-pink);
  border-radius: var(--radius-l);
  padding: 80px;
  color: var(--c-paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-band h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  margin-bottom: 16px;
  font-style: italic;
}
.contact-band p { font-size: 18px; max-width: 540px; margin: 0 auto 36px; opacity: 0.92; }
.contact-band .blob--c1 { width: 280px; height: 280px; background: var(--c-mustard); top: -80px; left: -80px; opacity: 0.25; }
.contact-band .blob--c2 { width: 220px; height: 220px; background: var(--c-cobalt); bottom: -60px; right: -60px; opacity: 0.3; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1024px) {
  .hero__inner, .series, .about-teaser, .about-hero { grid-template-columns: 1fr; gap: 60px; }
  .showcase { gap: 16px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 6; }
  .col-12 { grid-column: span 12; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .statement { padding: 50px; grid-template-columns: 1fr; gap: 40px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .lightbox__inner { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
  .lightbox__image img { max-height: 60vh; }
  .lightbox__copy { padding: 32px; }
  .section { padding: 80px 0; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .site-header__inner { padding: 14px 20px; }
  .nav { gap: 18px; font-size: 14px; }
  .nav a:not(.nav__cta) { display: none; }
  .hero { padding: 60px 0; }
  .hero__title { font-size: 56px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 28px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 12; }
  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .statement, .contact-band { padding: 40px 24px; }
  .ticker { font-size: 22px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Misc helpers ---------- */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }


/* =====================================================================
   MINIMAL PAGES — Daniella-style gallery layout (page-minimal body class)
   Active on Home / Works / About after the 2026-05-17 redesign.
   Painting takes the wall; everything else whispers.
   ===================================================================== */

.page-minimal {
  background: var(--c-bg);
  position: relative;
  min-height: 100vh;
}

/* — Outer frame: a thin 1px line inset from the page edges, enclosing all
     content. position: absolute so it scrolls WITH the page — the top edge
     disappears as you scroll down, like Daniella's site. */
.page-minimal::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  border: 1px solid rgba(31, 26, 23, 0.22);
  pointer-events: none;
  z-index: 200;
}

/* — Header: centered wordmark on top, nav on a horizontal line beneath — */
.page-minimal .site-header {
  position: static;        /* override base sticky; header scrolls away naturally */
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  padding-top: 20px;       /* breathing room from frame */
  z-index: auto;
}
.page-minimal .site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 36px 32px 0;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Big centered wordmark — "LIA FINE ART" */
.page-minimal .logo {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  gap: 0;
  text-align: center;
  line-height: 1;
}
.page-minimal .logo__dot { display: none; }

/* Nav sits ON a horizontal rule. The trick: a single thin line behind the
   nav row, and each link has a background-color matching the page bg, so
   the link "covers" the line where it sits — giving the floating-on-a-line
   look. */
.page-minimal .nav {
  display: flex;
  justify-content: center;
  gap: 0;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 920px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.page-minimal .nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(31, 26, 23, 0.22);
  z-index: 0;
}
.page-minimal .nav a {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  padding: 0 18px 4px;
  color: rgba(31, 26, 23, 0.55);  /* readable but recessed by default */
  font-weight: 400;
  transition: color .15s ease, border-color .15s ease;
  border-bottom: 1px solid transparent;  /* reserve space so hover doesn't jump */
}
.page-minimal .nav a::after { display: none; }
/* Hover: darker ink + underline appears (matches active state styling) */
.page-minimal .nav a:hover {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}
.page-minimal .nav a.is-active {
  color: var(--c-ink);
  /* active = dark color only, no underline */
}
.page-minimal .nav a.is-active:hover {
  border-bottom-color: transparent;  /* don't show underline even on hover */
}

/* — Home: single hero painting + short bio paragraph below — */
.home-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 32px 80px;
}
.home-hero {
  margin: 0 0 56px;
  display: flex;
  justify-content: center;
}
.home-hero img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.home-bio {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.home-bio p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink);
  margin: 0;
}
.home-bio em {
  font-style: italic;
  font-family: var(--f-display);
}

/* — Works page: 3-col grid, no heading (nav already says WORKS) — */
.works-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 120px;
}

/* — Gallery grid override for the minimal look —
     3-col, smaller gap, no matte frame, no hover-opacity-fade.
     Painting sits on the page background; a subtle scale on hover. */
.page-minimal .gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 32px;
  padding-bottom: 0;
}
.page-minimal .gallery-item {
  /* thin bottom line acts as a "shelf" under each painting card */
  border-bottom: 1px solid rgba(31, 26, 23, 0.18);
  padding-bottom: 18px;
}
.page-minimal .gallery-item__frame {
  background: transparent;
  border-radius: 0;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  overflow: hidden;
}
.page-minimal .gallery-item__frame img {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  transform-origin: center center;
}
.page-minimal .gallery-item:hover .gallery-item__frame img {
  opacity: 1;
  transform: scale(1.04);  /* subtle "step closer" on hover */
}
.page-minimal .gallery-item__frame::after { display: none; }
.page-minimal .gallery-item__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0 0 4px;
  color: var(--c-ink);
}
.page-minimal .gallery-item__meta {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 400;
}
/* Always reserves vertical space (even when empty) so each card's bottom
   border-line aligns horizontally with neighbors, sold or not. */
.page-minimal .gallery-item__sold {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  font-weight: 500;
  margin-top: 8px;
  min-height: 17px;  /* ≈ one line of 11px text + a hair */
  line-height: 17px;
}
.page-minimal .gallery-item.is-sold .gallery-item__title,
.page-minimal .gallery-item.is-sold .gallery-item__meta {
  color: var(--c-ink-soft);  /* slightly recede sold works */
}

/* — About page: portrait + 150-word bio — */
.about-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 32px 80px;
}
.about-portrait {
  margin: 0 0 56px;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
}
.about-text h1 {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--c-ink);
}
.about-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink);
  margin: 0 0 22px;
}
.about-text em {
  font-style: italic;
  font-family: var(--f-display);
  font-weight: 500;
}
.about-text a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-text a:hover { color: var(--c-aubergine); }
.about-contact-line {
  margin-top: 32px !important;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.about-contact-line a { text-decoration: none; }

/* — Minimal footer — */
.footer--minimal {
  background: transparent;
  color: var(--c-ink-soft);
  padding: 40px 0 32px;
  border-top: 1px solid rgba(31, 26, 23, 0.08);
  margin-top: 40px;
}
.footer--minimal .blob { display: none; }
.footer--minimal .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.footer--minimal .footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-family: var(--f-body);
  border-top: none;
  padding-top: 0;
}
.footer--minimal a {
  color: var(--c-ink-soft);
  text-decoration: none;
}
.footer--minimal a:hover { color: var(--c-ink); }

@media (max-width: 900px) {
  .page-minimal .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
}

/* — Wall view "Contact for purchase" CTA — */
.wall-view__purchase {
  display: inline-block;
  margin: 4px 0 18px;
  padding: 11px 20px;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background .2s ease;
}
.wall-view__purchase:hover {
  background: var(--c-aubergine);
}

/* — Prints "Coming soon" page — */
.prints-main {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
}
.prints-coming-soon {
  text-align: center;
  max-width: 480px;
}
.prints-coming-soon h1 {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--c-ink);
}
.prints-coming-soon p {
  font-family: var(--f-display);
  font-size: 36px;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 28px;
  color: var(--c-ink);
}
.prints-coming-soon .prints-note {
  font-family: var(--f-body);
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.prints-coming-soon .prints-note a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prints-coming-soon .prints-note a:hover { color: var(--c-aubergine); }

/* — Contact page form — */
.contact-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 32px 80px;
}
.contact-head {
  text-align: center;
  margin-bottom: 48px;
}
.contact-head h1 {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--c-ink);
}
.contact-intro {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--c-ink);
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-field > span {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 26, 23, 0.18);
  border-radius: 4px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--c-ink);
  background: rgba(255, 255, 255, 0.9);
}
.contact-field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 6px;
  padding: 13px 28px;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 0;
  border-radius: 2px;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-submit:hover {
  background: var(--c-aubergine);
}

.contact-fineprint {
  margin: 28px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  text-align: center;
}
.contact-fineprint a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .contact-main { padding: 40px 20px 60px; }
  .prints-coming-soon p { font-size: 28px; }
  .prints-coming-soon .prints-note { font-size: 13px; }
}
@media (max-width: 640px) {
  .page-minimal::before { inset: 8px; }
  .page-minimal .site-header__inner { padding: 28px 20px 0; gap: 20px; }
  .page-minimal .logo { font-size: 22px; letter-spacing: 0.1em; }
  .page-minimal .nav {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .page-minimal .nav a { padding: 0 8px; display: inline-block; }
  /* override base mobile rule that hides nav links — show all on mobile,
     including the .is-active one, so user sees which page they're on */
  .page-minimal .nav a.is-active { display: inline-block; }
  .home-main { padding: 32px 20px 60px; }
  .home-hero { margin-bottom: 36px; }
  .home-hero img { max-height: 70vh; }
  .home-bio p { font-size: 15px; }
  .works-main { padding: 48px 20px 80px; }
  .about-main { padding: 36px 20px 64px; }
  .about-portrait { margin-bottom: 36px; }
  .footer--minimal .footer__bottom { flex-direction: column; gap: 12px; }
  .page-minimal .gallery-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}