/* =========================================================================
   Catherine Sweeney — site stylesheet
   Plain CSS, no build step. Colours are editable custom properties below.
   ========================================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------- Palette tokens ---------- */
:root {
  /* Home + Contact: deep brown (dominant), gold (secondary),
     red-orange (sparing accent), deep purple (bands and depth) */
  --brown-950: #1B100A;
  --brown-900: #21140D;
  --brown-800: #2B1A12;   /* primary warm background */
  --brown-700: #3A2318;   /* raised surfaces */
  --brown-600: #4A2D20;   /* fields, hairlines */
  --gold-500: #C9A04A;    /* links, labels, active indicator */
  --gold-300: #E2BE6A;    /* hover */
  --redorange-500: #C4532B;  /* decorative accent */
  --redorange-600: #B4482A;  /* button background (AA with ivory text) */
  --redorange-300: #E8754A;  /* error text on brown */
  --purple-800: #3B2350;  /* footer and invitation band */
  --purple-900: #2A1838;
  --ivory-50: #FFF8EE;
  --ivory-100: #F4EDE2;   /* body text on brown */
  --ivory-300: #D9CFC0;   /* secondary text on brown */

  /* Gallery + Artist Bio: white (primary), silver (borders, details),
     sky blue and grass green (balanced accents) */
  --white: #FFFFFF;
  --silver-50: #F6F7F9;
  --silver-100: #EEF1F4;
  --silver-300: #D5DAE0;
  --silver-500: #A7AFB8;
  --sky-100: #E3F2FB;
  --sky-400: #7CC0EA;     /* decorative */
  --sky-700: #1F6797;     /* links on white (AA) */
  --green-100: #EAF5E4;
  --green-500: #5AA83E;   /* decorative */
  --green-700: #2E6B2A;   /* text on white (AA) */
  --ink-900: #1E2328;     /* body text on white */
  --ink-600: #5B6570;     /* secondary text on white */

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --text-2xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);

  /* Space */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-max: 1360px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Page themes: set on <body> */
.theme-warm {
  --bg: var(--brown-800);
  --bg-raised: var(--brown-700);
  --bg-deep: var(--brown-900);
  --text: var(--ivory-100);
  --text-muted: var(--ivory-300);
  --line: var(--brown-600);
  --link: var(--gold-500);
  --link-hover: var(--gold-300);
  --accent: var(--gold-500);
  --focus: var(--gold-300);
  --band: var(--purple-800);
  --band-text: var(--ivory-100);
  --header-bg: var(--brown-800);
}
.theme-cool {
  --bg: var(--white);
  --bg-raised: var(--silver-50);
  --bg-deep: var(--silver-100);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --line: var(--silver-300);
  --link: var(--sky-700);
  --link-hover: var(--green-700);
  --accent: var(--sky-400);
  --focus: var(--sky-700);
  --band: var(--silver-50);
  --band-text: var(--ink-600);
  --header-bg: var(--white);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 380;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: 0.005em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--text); color: var(--bg); padding: var(--space-2) var(--space-4);
  text-decoration: none; font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-4); color: var(--bg); }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Artwork images: deter casual dragging and selection (not a security measure) */
.artwork-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Header and navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: 84px;
}
.site-logo { display: inline-flex; align-items: center; padding: var(--space-2) 0; }
.site-logo img { height: 42px; width: auto; }

.nav-toggle {
  min-height: 44px;
  display: none;
  align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: var(--space-2) var(--space-4); cursor: pointer;
  font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-toggle__icon { width: 16px; height: 10px; position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle__icon::before { top: 1px; }
.nav-toggle__icon::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 4px; transform: rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.site-nav a {
  display: inline-block; padding: var(--space-2) 0;
  color: var(--text); text-decoration: none;
  font-size: var(--text-sm); font-weight: 450; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--link-hover); border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.theme-cool .site-nav a[aria-current="page"] { border-bottom-color: var(--green-500); }

@media (max-width: 760px) {
  .site-header__inner { min-height: 68px; }
  .site-logo img { height: 34px; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--header-bg); border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--gutter) var(--space-6);
    display: none;
  }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .js .site-nav a[aria-current="page"] { border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-4); }
  .js .theme-cool .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--green-500); }
  /* Without JavaScript the links simply wrap below the logo */
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: var(--space-3) var(--space-6);
  border-radius: 999px; border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 480; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn--primary { background: var(--redorange-600); color: var(--ivory-50); }
.btn--primary:hover { background: #9E3E24; color: var(--ivory-50); }
.btn--outline { border-color: var(--gold-500); color: var(--ivory-100); background: transparent; }
.btn--outline:hover { background: rgba(201, 160, 74, 0.12); color: var(--ivory-50); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }

.text-link {
  font-size: var(--text-sm); letter-spacing: 0.06em;
  text-decoration: underline; text-decoration-color: currentColor;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--band-text); margin-top: var(--space-20); }
.theme-cool .site-footer { border-top: 1px solid var(--silver-300); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; justify-content: space-between;
  padding-block: var(--space-8); font-size: var(--text-xs); letter-spacing: 0.04em;
}
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; }
.site-footer a { color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; }
.site-footer a:hover { text-decoration: underline; color: inherit; }
.site-footer p { margin: 0; }

/* =========================================================================
   HOME
   ========================================================================= */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 960px) { .home-hero { grid-template-columns: 1fr; } }
/* Phones held sideways: keep painting and introduction side by side, sized to the short screen */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .home-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; padding-block: var(--space-6); }
  .slideshow__viewport { aspect-ratio: auto; height: calc(100vh - 190px); height: calc(100svh - 190px); min-height: 180px; max-height: none; }
  .home-hero .home-intro__name { font-size: var(--text-xl); }
}

/* Slideshow */
.slideshow { position: relative; }
.slideshow__viewport {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3; max-height: 76vh;
  background: var(--brown-900);
  overflow: hidden;
}
@supports not (aspect-ratio: 4 / 3) {
  .slideshow__viewport { height: 0; padding-bottom: 75%; }
}
.slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease), visibility 0s; }
html:not(.js) .slide:first-child { opacity: 1; visibility: visible; }
.slide__link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.slide__link:focus-visible { outline-offset: -4px; }
.slide img { width: 100%; height: 100%; object-fit: contain; }

.slideshow__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4);
}
.slideshow__caption { min-height: 3.2em; }
.slideshow__title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.2; margin: 0; }
.slideshow__caption a { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.slideshow__controls { display: flex; align-items: center; gap: var(--space-2); }
html:not(.js) .slideshow__controls { display: none; }
.ctrl {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 44px; min-height: 44px; padding: 0 var(--space-3);
  background: transparent; color: var(--ivory-100);
  border: 1px solid var(--brown-600); border-radius: 999px; cursor: pointer;
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ctrl:hover { border-color: var(--gold-500); background: rgba(201, 160, 74, 0.08); }
.ctrl svg { width: 16px; height: 16px; flex: none; }
.ctrl--toggle { padding: 0 var(--space-4); min-width: 6.6em; }
.slideshow__count { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--ivory-300); min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* Intro */
.home-intro { max-width: 34rem; }
.home-intro__name {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl);
  margin-bottom: var(--space-6); color: var(--ivory-50);
}
.home-intro__rule { width: 56px; height: 2px; background: var(--redorange-500); margin: 0 0 var(--space-6); border: 0; }
.home-intro p { color: var(--ivory-100); font-size: var(--text-base); }
.home-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.home-invite { background: var(--purple-800); color: var(--ivory-100); }
.home-invite__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8);
  padding-block: var(--space-8);
}
.home-invite p { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; }
.home-invite a { color: var(--gold-300); }
.theme-warm .site-footer { margin-top: 0; background: var(--purple-900); }

/* =========================================================================
   PAGE HEADINGS (Gallery, Bio, Contact)
   ========================================================================= */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head__rule { display: flex; gap: 6px; margin-top: var(--space-5); }
.page-head__rule span { display: block; height: 2px; width: 40px; }
.page-head__rule span:first-child { background: var(--sky-400); }
.page-head__rule span:last-child { background: var(--green-500); }
.page-head p { color: var(--text-muted); margin-top: var(--space-4); max-width: 40rem; }

/* =========================================================================
   GALLERY — justified rows that keep every painting's full proportions
   ========================================================================= */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.4vw, 2.25rem);
}
.gallery::after { content: ""; flex: 999 1 0; }
.art-card {
  /* --ar is the painting's width / height, set inline */
  flex: var(--ar) 1 calc(var(--ar) * 17rem);
  min-width: 0;
  display: flex; flex-direction: column;
  scroll-margin-top: 110px;
}
/* Tablets: smaller row basis so two or three paintings share a row */
@media (max-width: 1100px) {
  .art-card { flex-basis: calc(var(--ar) * 12.5rem); }
}
@media (max-width: 640px) {
  .art-card { flex: 1 1 100%; }
}
.art-card__thumb {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: var(--silver-100);
  cursor: zoom-in; position: relative;
}
.art-card__thumb img { width: 100%; height: auto; aspect-ratio: var(--ar); }
.art-card__thumb::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(30, 35, 40, 0.06);
  pointer-events: none; transition: box-shadow 0.25s var(--ease);
}
.art-card__thumb:hover::after { box-shadow: inset 0 0 0 1px var(--silver-500); }
.art-card__thumb:focus-visible { outline: 3px solid var(--sky-700); outline-offset: 4px; }
.art-card:target .art-card__thumb { outline: 3px solid var(--green-500); outline-offset: 6px; }

.art-card__info { padding-top: var(--space-4); border-top: 0; }
.art-card__title { font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--space-2); }
.art-meta { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.art-meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.art-meta dd { margin: 0; }
.art-note { font-size: var(--text-xs); color: var(--ink-600); letter-spacing: 0.04em; margin-top: var(--space-1); }

.status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: 2px 10px 2px 8px; border-radius: 999px;
  font-size: var(--text-xs); letter-spacing: 0.06em; line-height: 1.6;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status--available { background: var(--green-100); color: var(--green-700); }
.status--available::before { background: var(--green-500); }
.status--sold { background: var(--silver-100); color: var(--ink-600); border: 1px solid var(--silver-300); }
.status--sold::before { background: var(--silver-500); }
.art-card__inquire { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); }

/* ---------- Lightbox (native <dialog>) ---------- */
.lightbox {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  width: 100dvw; height: 100dvh; max-width: 100dvw; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: #121416; color: #F2F4F6;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(18, 20, 22, 0.94); }
.lightbox__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: 100%;
}
.lightbox__stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem) clamp(3.5rem, 6vw, 5rem);
  min-height: 0; touch-action: pan-y pinch-zoom;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  opacity: 1; transition: opacity 0.3s var(--ease);
}
.lightbox__img.is-loading { opacity: 0.25; }
.lightbox__panel {
  background: #FFFFFF; color: var(--ink-900);
  padding: var(--space-16) var(--space-8) var(--space-8);
  overflow-y: auto; border-left: 1px solid var(--silver-300);
  display: flex; flex-direction: column;
}
.lightbox__count { font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--ink-600); margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.lightbox__title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.lightbox .art-meta { font-size: var(--text-base); color: var(--ink-600); }
.lightbox__inquire { margin-top: var(--space-6); }
.lightbox__inquire a {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-5);
  border: 1px solid var(--sky-700); border-radius: 999px; text-decoration: none;
  font-size: var(--text-sm); letter-spacing: 0.04em;
}
.lightbox__inquire a:hover { background: var(--sky-100); color: var(--sky-700); }
.lightbox__hint { margin-top: auto; padding-top: var(--space-8); font-size: var(--text-xs); color: var(--ink-600); }

.lb-btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 48px; min-height: 48px; padding: 0 var(--space-3);
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(18, 20, 22, 0.7); color: #FFFFFF; cursor: pointer;
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
}
.lb-btn:hover { border-color: #FFFFFF; background: rgba(18, 20, 22, 0.9); }
.lb-btn:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 3px; }
.lb-btn svg { width: 18px; height: 18px; }
.lb-btn--prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lb-btn--next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lb-btn--close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: #FFFFFF; color: var(--ink-900); border-color: var(--silver-300); padding: 0 var(--space-4);
}
.lb-btn--close:hover { background: var(--silver-100); border-color: var(--silver-500); }
.lb-btn--close:focus-visible { outline-color: var(--sky-700); }

@media (max-width: 860px) {
  .lightbox__layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox__stage { padding: var(--space-16) var(--space-3) var(--space-3); }
  .lb-btn--prev, .lb-btn--next { top: auto; bottom: var(--space-3); transform: none; }
  .lightbox__panel { padding: var(--space-5) var(--gutter) var(--space-6); border-left: 0; border-top: 1px solid var(--silver-300); max-height: 42vh; }
  .lightbox__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
  .lightbox .art-meta { font-size: var(--text-sm); }
  .lightbox__inquire { margin-top: var(--space-4); }
  .lightbox__hint { display: none; }
}

/* =========================================================================
   ARTIST BIO
   ========================================================================= */
.bio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
@media (max-width: 900px) { .bio { grid-template-columns: 1fr; } }
.bio__portrait { margin: 0; position: sticky; top: 112px; }
@media (max-width: 900px) { .bio__portrait { position: static; } }
.bio__portrait img { width: 100%; border: 1px solid var(--silver-300); padding: 10px; background: var(--white); }
.bio__portrait figcaption { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--space-3); letter-spacing: 0.04em; }
.bio__text { max-width: 38rem; }
.bio__text p { font-size: var(--text-base); line-height: 1.8; margin-bottom: 1.3em; }
.bio__text p:first-child::first-letter {
  font-family: var(--font-display); float: left; font-size: 3.6em; line-height: 0.82;
  padding: 0.06em 0.1em 0 0; color: var(--sky-700);
}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
  padding-bottom: var(--space-20);
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact__aside p { color: var(--ivory-300); }
.contact__aside h2 { font-size: var(--text-lg); font-style: italic; color: var(--ivory-50); margin: var(--space-8) 0 var(--space-2); }
.contact__aside .ig-link { font-size: var(--text-base); }
.page-head--warm .page-head__rule span:first-child { background: var(--redorange-500); }
.page-head--warm .page-head__rule span:last-child { background: var(--gold-500); }
.page-head--warm p { color: var(--ivory-300); }

.form { background: var(--brown-700); padding: clamp(1.5rem, 4vw, 3rem); border-top: 2px solid var(--redorange-500); }
.field { margin-bottom: var(--space-6); }
.field label { display: block; font-size: var(--text-sm); letter-spacing: 0.06em; margin-bottom: var(--space-2); color: var(--ivory-100); }
.field .req { color: var(--gold-300); font-size: var(--text-xs); letter-spacing: 0.08em; margin-left: var(--space-2); text-transform: uppercase; }
.field .opt { color: var(--ivory-300); font-size: var(--text-xs); letter-spacing: 0.08em; margin-left: var(--space-2); text-transform: uppercase; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--brown-900); color: var(--ivory-50);
  border: 1px solid var(--brown-600); border-radius: 4px;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-500) 50%), linear-gradient(135deg, var(--gold-500) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px;
}
.field select option { background: var(--brown-900); color: var(--ivory-50); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #6A4733; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 1px; border-color: var(--gold-500); }
.field [aria-invalid="true"] { border-color: var(--redorange-300); }
.field__hint { font-size: var(--text-xs); color: var(--ivory-300); margin-top: var(--space-2); }
.field__error { font-size: var(--text-sm); color: var(--redorange-300); margin-top: var(--space-2); }
.field__error:empty { display: none; }
.field__error::before { content: "! "; font-weight: 600; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.form__note { font-size: var(--text-xs); color: var(--ivory-300); margin: 0; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 248, 238, 0.4); border-top-color: var(--ivory-50);
  animation: spin 0.9s linear infinite; display: none;
}
.is-sending .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.alert { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); border-radius: 4px; }
.alert:empty, .alert[hidden] { display: none; }
.alert h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.alert p { margin: 0; }
.alert--error { background: rgba(232, 117, 74, 0.1); border: 1px solid var(--redorange-300); color: var(--ivory-50); }
.alert--success { background: rgba(201, 160, 74, 0.12); border: 1px solid var(--gold-500); color: var(--ivory-50); }
.alert:focus { outline: 2px solid var(--gold-300); outline-offset: 2px; }

.thanks { padding-block: clamp(3rem, 10vw, 8rem); max-width: 40rem; }
.thanks h1 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.thanks p { color: var(--ivory-300); }

/* ---------- Touch devices: comfortable tap areas (at least 44px tall) ---------- */
@media (pointer: coarse) {
  .site-footer ul { gap: var(--space-2) var(--space-5); }
  .site-nav a, .site-footer a, .text-link, .slideshow__caption a, .art-card__inquire, .contact__aside .ig-link, .lightbox__inquire a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .slideshow__caption a { line-height: 1.3; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .spinner { animation: none; border-top-color: rgba(255, 248, 238, 0.4); }
}

/* ---------- Print: keep it simple ---------- */
@media print {
  .site-header, .site-footer, .slideshow__controls, .lb-btn { display: none !important; }
}