/* Edisto Art Gallery: shared styles for every page. Tailwind (CDN) handles layout utilities;
   this file holds the theme, the paintbrush cursor, and the art-world treatments (frames, prints, posters). */
:root {
  --foam: #EEF4F5;      /* sea foam: page ground */
  --tide: #DCE8EA;      /* pale tide: walls and surfaces */
  --navy: #1E2D44;      /* deep navy: text, dark bands, buttons */
  --gold: #E2A53A;      /* sunset gold: highlights */
  --mist: #5E7286;      /* secondary text */
  --paper: #FBFDFD;     /* mats and printed photos */
  --poster: #FBF8EF;    /* screen-print posters */
  --card: #FBFDFD;      /* form fields, round buttons */
  --band: #1E2D44;      /* dark bands (footer, homepage About) */
  --on-band: #FBFDFD;   /* text on the dark bands */
  --btn-bg: #1E2D44;
  --btn-fg: #FBFDFD;
  --hero-top: #F7FBFC;
  --wall-glow: rgba(255,255,255,.65);
  --grain-blend: multiply;
  --grain-opacity: .07;
  --dot: #C8442F;       /* the red "sold" dot galleries stick beside a label */
  color-scheme: light dark;
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* layered, navy-tinted shadows for things hung on a wall */
  --hang: 0 1px 1px rgba(30,45,68,.08), 0 4px 8px -2px rgba(30,45,68,.12), 0 20px 40px -14px rgba(30,45,68,.30);
  --hang-up: 0 2px 2px rgba(30,45,68,.08), 0 10px 16px -4px rgba(30,45,68,.14), 0 32px 56px -18px rgba(30,45,68,.38);
}

/* Dark mode follows the visitor's device setting. Same Tidal blue family at night: deep navy walls,
   sea-foam text, posters and fields as dark cards; mats and printed photos stay paper, a little dimmed. */
@media (prefers-color-scheme: dark) {
  :root {
    --foam: #0E1823;
    --tide: #142230;
    --navy: #E3ECEE;
    --gold: #E9B14C;
    --mist: #9FB2BF;
    --paper: #D9DFDE;
    --poster: #1A2939;
    --card: #182635;
    --band: #09111A;
    --on-band: #EEF3F4;
    --btn-bg: #E3ECEE;
    --btn-fg: #0E1823;
    --hero-top: #1A2B3C;
    --wall-glow: rgba(120,160,190,.10);
    --grain-blend: soft-light;
    --grain-opacity: .12;
    --hang: 0 1px 1px rgba(0,0,0,.35), 0 4px 8px -2px rgba(0,0,0,.40), 0 20px 40px -14px rgba(0,0,0,.65);
    --hang-up: 0 2px 2px rgba(0,0,0,.35), 0 10px 16px -4px rgba(0,0,0,.45), 0 32px 56px -18px rgba(0,0,0,.75);
  }
}

html { scroll-behavior: smooth; cursor: var(--brush), auto; }
body { background: var(--foam); color: var(--navy); font-family: 'Instrument Sans', system-ui, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a, button, summary, label, [role="button"] { cursor: var(--brush-loaded), pointer; }
.display { font-family: 'Gloock', Georgia, serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; }
.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.muted { color: var(--mist); }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); pointer-events: none; z-index: 1; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--btn-bg); color: var(--btn-fg); padding: .5rem 1rem; border-radius: 4px; }
.skip:focus { left: .5rem; }

/* ---------- interactive states ---------- */
.link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease, opacity .2s ease; }
.link:hover { text-decoration-color: currentColor; }
.link:active { opacity: .7; }
.nav a[aria-current="page"] { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 500; line-height: 1; transition: transform .35s var(--spring), opacity .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-navy { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 2px rgba(30,45,68,.3), 0 12px 24px -12px rgba(30,45,68,.55); }
.btn-gold { background: var(--gold); color: #1E2D44; box-shadow: 0 1px 2px rgba(30,45,68,.25), 0 10px 24px -10px rgba(226,165,58,.6); }
.btn-line { color: var(--navy); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 35%, transparent); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------- frames ---------- */
.piece { display: flex; flex-direction: column; gap: 1rem; }
.piece img { display: block; width: 100%; height: auto; }
.frame-gilt { padding: clamp(10px, 1.4vw, 18px); background: linear-gradient(135deg, #E9D7A0 0%, #B89443 22%, #F2E3B4 40%, #9C7A2E 62%, #D4B566 82%, #85682A 100%); box-shadow: var(--hang), inset 0 0 0 1px rgba(30,45,68,.3); }
.frame-gilt img { box-shadow: 0 0 0 3px #5E4A1E, inset 0 0 0 1px rgba(0,0,0,.2); }
.frame-mat { padding: 6px; background: #22252B; box-shadow: var(--hang); }
.frame-mat > div { padding: 14%; background: var(--paper); box-shadow: inset 1px 1px 3px rgba(30,45,68,.25); }
.frame-float { padding: 5px; background: #23262C; box-shadow: var(--hang); }
.frame-float > div { padding: 14px; background: #15171B; }
.frame-float img { box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.frame-wood { padding: clamp(8px, 1vw, 12px); background: linear-gradient(160deg, #6B5442, #463427 55%, #5C4635); box-shadow: var(--hang); }
.frame-white { padding: clamp(10px, 4%, 22px); background: var(--paper); box-shadow: var(--hang), inset 0 0 0 1px rgba(30,45,68,.08); }
.frame-white img { box-shadow: inset 0 0 0 1px rgba(30,45,68,.08); }
.object-hung img { filter: drop-shadow(0 2px 2px rgba(30,45,68,.2)) drop-shadow(0 16px 20px rgba(30,45,68,.28)); }
/* hover lift for frames that are links: shadow swap by opacity on a pseudo layer, so only opacity + transform animate */
.lift { position: relative; display: block; transition: transform .45s var(--spring); }
.lift::after { content: ""; position: absolute; inset: 0; box-shadow: var(--hang-up); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.lift:hover, a:hover > .lift, button:hover > .lift { transform: translateY(-4px); }
.lift:hover::after, a:hover > .lift::after, button:hover > .lift::after { opacity: 1; }
a:active > .lift, button:active > .lift { transform: translateY(-1px) scale(.99); }

/* museum wall label */
.label { font-size: .875rem; line-height: 1.5; max-width: 30ch; }
.label strong { font-weight: 600; display: block; }
.label em { font-style: italic; display: block; }
.label span { color: var(--mist); display: block; }
.label .sold, .sold { display: inline-flex; align-items: center; gap: .4rem; color: var(--navy); font-weight: 500; }
.label .sold::before, .sold::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- deckle-edged print and studio tape ---------- */
.deckle { position: relative; padding: 7%; }
.deckle::before { content: ""; position: absolute; inset: 0; background: var(--paper); filter: url(#deckle); box-shadow: 0 2px 4px rgba(20,30,45,.18), 0 24px 48px -16px rgba(20,30,45,.42); }
.deckle img { position: relative; display: block; width: 100%; height: auto; }
.tape { position: absolute; width: 34%; max-width: 120px; height: 26px; background: rgba(226,214,170,.72); box-shadow: 0 1px 2px rgba(30,45,68,.15); z-index: 2; clip-path: polygon(2% 10%, 98% 0, 100% 88%, 0 100%); }

/* ---------- oval portrait (miniature) ---------- */
.cameo { padding: 12px; border-radius: 50%; background: linear-gradient(135deg, #E9D7A0, #B89443 30%, #F2E3B4 50%, #9C7A2E 75%, #D4B566); box-shadow: var(--hang); }
.cameo > div { border-radius: 50%; overflow: hidden; padding: 10px; background: var(--paper); }
.cameo img { border-radius: 50%; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- screen-print posters ---------- */
.poster { position: relative; background: var(--poster); color: var(--navy); box-shadow: var(--hang); overflow: hidden; }
.poster::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: calc(var(--grain-opacity) * 2.2); mix-blend-mode: var(--grain-blend); pointer-events: none; }
.misreg { text-shadow: 3px 2px 0 rgba(226,165,58,.95); }

/* ---------- watercolor wash ---------- */
.wash { position: absolute; inset: -10%; filter: url(#bleed); opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 85%, transparent);
  background:
    radial-gradient(38% 42% at 22% 35%, rgba(94,140,170,.32), transparent 70%),
    radial-gradient(30% 36% at 70% 28%, rgba(226,165,58,.26), transparent 70%),
    radial-gradient(42% 40% at 60% 78%, rgba(120,170,175,.30), transparent 70%),
    radial-gradient(25% 30% at 12% 85%, rgba(226,165,58,.16), transparent 70%); }

/* ---------- lightbox ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--foam) 97%, transparent); color: var(--navy); }
.lightbox::backdrop { background: rgba(30,45,68,.35); }
.lightbox[open] .lb-figure { animation: lb-in .4s var(--spring); }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-figure img { max-height: calc(100dvh - 12rem); width: auto; max-width: 100%; margin-inline: auto; display: block; }
.lb-btn { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--card); color: var(--navy); box-shadow: var(--hang); transition: transform .35s var(--spring); }
.lb-btn:hover { transform: scale(1.06); }
.lb-btn:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .link, .lift, .lift::after, .lb-btn { transition: none; }
  .lightbox[open] .lb-figure { animation: none; }
}

/* ---------- flyers pinned to the wall ---------- */
.flyer { position: relative; display: block; padding: 10px; background: var(--paper); box-shadow: var(--hang); }
.flyer img { display: block; width: 100%; height: auto; }
.pin { position: absolute; top: -9px; left: 50%; z-index: 2; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6CD7A, var(--gold) 45%, #A8721C); box-shadow: 0 3px 4px rgba(30,45,68,.35); }
.highlights li { position: relative; padding-left: 1.4rem; }
.highlights li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); }
.poster { transition: transform .45s var(--spring), box-shadow .3s ease; }
.poster-link:hover .poster { transform: translateY(-4px); box-shadow: var(--hang-up); }
.poster-link:active .poster { transform: translateY(-1px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .poster { transition: none; } }

/* ---------- gallery tiles ---------- */
.tile-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.group:hover .tile-img { transform: scale(1.03); }
.group:active .tile-img { transform: scale(1.01); }

/* ---------- contact form ---------- */
.field { margin-top: .5rem; display: block; width: 100%; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent); background: var(--card); padding: .75rem 1rem; font-size: 1rem; font-weight: 400; color: var(--navy); box-shadow: inset 0 1px 2px rgba(30,45,68,.06); }
.field:hover { border-color: color-mix(in srgb, var(--navy) 45%, transparent); }
.field:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(226,165,58,.45); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; transform: none; }
@media (prefers-reduced-motion: reduce) { .tile-img { transition: none; } }

/* ---------- shared surfaces ---------- */
.band { background: var(--band); color: color-mix(in srgb, var(--on-band) 88%, transparent); }
.on-band { color: var(--on-band); }
.bg-page { background: var(--foam); }
.rule-t { border-top: 1px solid color-mix(in srgb, var(--navy) 15%, transparent); }

/* ---------- wall (shared) ---------- */
.wall { background: radial-gradient(70% 50% at 50% 0%, var(--wall-glow), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(94,140,170,.10), transparent 70%), var(--tide); }

:root { --brush: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231E2D44%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%231E2D44%27/%3E%3C/g%3E%3C/svg%3E") 3 29; --brush-loaded: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg transform=%27translate%282.6 29.4%29 rotate%28-45%29 scale%28.85%29%27%3E%3Cg fill=%27%23fff%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27/%3E%3C/g%3E%3Cpath d=%27M17.2-2.1C24-2.6 30-3.9 36-3.7 41-3.5 44-1.6 44 0S41 3.5 36 3.7C30 3.9 24 2.6 17.2 2.1Z%27 fill=%27%231E2D44%27/%3E%3Cpath d=%27M13.4-3.1h2.6v6.2h-2.6Z%27 fill=%27%23A9B4BF%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 5.6-7.2 9.8-7 12.6-4.4V4.4C9.8 7 5.2 6.6 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23D8B47C%27/%3E%3Cpath d=%27M0 0C1.6-.9 2.6-2.6 3.6-4.2 4.2-5.1 5-5.8 5.8-6.2V6.1C4.6 5.7 3.7 4.9 3 3.8 2 2.4 1.2 1 0 0Z%27 fill=%27%23E2A53A%27/%3E%3C/g%3E%3C/svg%3E") 3 29; }