@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --navy: #071b33;
  --navy-2: #0d2949;
  --navy-3: #15385e;
  --gold: #c9a35b;
  --gold-light: #e2c98e;
  --cream: #f7f3ea;
  --paper: #fffdf8;
  --ink: #15202c;
  --muted: #6f7478;
  --line: rgba(7,27,51,.14);
  --shadow: 0 24px 70px rgba(7,27,51,.15);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--gold-light); color: var(--navy); }

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 780px); margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold); text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; font-weight: 600;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
h1, h2, h3 { font-family: var(--serif); line-height: .98; font-weight: 500; margin: 0; color: var(--navy); }
h1 { font-size: clamp(3.6rem, 8vw, 8.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.6rem, 5vw, 5.4rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.65rem, 2vw, 2.15rem); }
p { margin: 0; }
.lede { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.7rem); color: #35404a; line-height: 1.45; }
.muted { color: var(--muted); }

.demo-bar {
  background: var(--gold); color: var(--navy); text-align: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: 8px 16px;
}
.demo-bar span { opacity: .8; font-weight: 500; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,248,.93); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(7,27,51,.08);
}
.header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: .85; }
.brand-script { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--navy); letter-spacing: -.03em; }
.brand-sub { margin-top: 10px; text-transform: uppercase; letter-spacing: .35em; font-size: .58rem; color: var(--gold); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: .82rem; color: #29333d; position: relative; }
.nav a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--gold); transition: right .25s ease; }
.nav a:hover::after, .nav a[aria-current='page']::after { right: 0; }
.nav-cta { background: var(--navy); color: #fff !important; padding: 12px 18px; border-radius: 2px; }
.menu-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 999px; align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content: ''; width: 18px; height: 1px; background: var(--navy); display: block; position: relative; }
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 2px; text-decoration: none; border: 1px solid transparent; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-outline { border-color: rgba(7,27,51,.35); color: var(--navy); background: transparent; }
.btn-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-text { min-height: auto; padding: 0; border: 0; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 1.22rem; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; }

/* Home hero */
.hero { min-height: calc(100vh - 116px); display: grid; align-items: center; padding: 56px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(40px, 6vw, 90px); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 20px 0 24px; }
.hero-copy h1 em { color: var(--gold); font-weight: 400; }
.hero-copy .lede { max-width: 580px; }
.hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 24px; color: var(--muted); font-size: .8rem; letter-spacing: .02em; }
.hero-art { min-height: 650px; position: relative; }
.hero-art::before { content: ''; position: absolute; width: 64%; height: 72%; top: 5%; right: -14%; background: var(--navy); z-index: 0; }
.hero-art::after { content: ''; position: absolute; width: 48%; height: 58%; bottom: -4%; left: -7%; border: 1px solid var(--gold); z-index: 0; }
.art-frame { position: absolute; background: #fff; box-shadow: var(--shadow); padding: 10px; z-index: 1; overflow: hidden; }
.art-frame > img { width: 100%; height: 100%; object-fit: cover; }
.art-main { width: 58%; height: 74%; top: 10%; left: 18%; z-index: 3; }
.art-side { width: 40%; height: 42%; bottom: 3%; right: 0; transform: rotate(1.5deg); }
.art-small { width: 34%; height: 33%; top: 2%; left: 0; transform: rotate(-2deg); }
.frame-label { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(7,27,51,.91); color: #fff; padding: 10px 12px; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }

.section { padding: 120px 0; }
.section-sm { padding: 78px 0; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-head { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; gap: 40px; margin-bottom: 56px; }
.section-head .lede { max-width: 690px; }

.signature-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 25px 0; overflow: hidden; }
.signature-row { display: flex; justify-content: center; gap: clamp(28px, 6vw, 88px); flex-wrap: wrap; color: var(--navy); font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.65rem); font-style: italic; }
.signature-row span { display: inline-flex; align-items: center; gap: clamp(28px, 6vw, 88px); }
.signature-row span:not(:last-child)::after { content: '✦'; color: var(--gold); font-size: .55em; font-style: normal; }

.collection-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 340px 300px; gap: 18px; }
.collection-item { position: relative; overflow: hidden; background: #ddd; cursor: pointer; }
.collection-item:first-child { grid-row: 1 / 3; }
.collection-item:nth-child(4) { grid-column: 2 / 4; }
.collection-item > img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.collection-item:hover > img { transform: scale(1.035); }
.collection-overlay { position: absolute; inset: auto 0 0; padding: 55px 22px 20px; background: linear-gradient(transparent, rgba(7,27,51,.88)); color: #fff; opacity: .96; }
.collection-overlay strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; display: block; }
.collection-overlay small { color: #dfd9cb; }
.collection-cta { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.commission-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; }
.commission-visual { position: relative; background: var(--navy-2); overflow: hidden; }
.commission-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .78; mix-blend-mode: luminosity; }
.commission-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(7,27,51,.2), rgba(7,27,51,.76)); }
.commission-copy { background: var(--navy); color: #fff; padding: clamp(58px, 8vw, 110px); display: flex; flex-direction: column; justify-content: center; }
.commission-copy h2 { color: #fff; margin: 16px 0 24px; }
.commission-copy p { color: #d8dce1; max-width: 570px; }
.process-mini { display: grid; gap: 18px; margin: 34px 0; }
.process-mini div { display: grid; grid-template-columns: 30px 1fr; gap: 15px; align-items: start; }
.process-mini b { width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 999px; display: grid; place-items: center; color: var(--gold); font-family: var(--serif); font-size: 1rem; }
.process-mini span { color: #f7f3ea; padding-top: 2px; }

.artist-tease { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(46px, 8vw, 120px); align-items: center; }
.portrait-placeholder { min-height: 590px; background: var(--navy); position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.portrait-placeholder::before { content: 'AT'; font-family: var(--serif); font-style: italic; font-size: clamp(7rem, 18vw, 14rem); color: rgba(201,163,91,.2); }
.portrait-placeholder::after { content: ''; }
.artist-copy h2 { margin: 15px 0 26px; }
.artist-copy .lede { margin-bottom: 26px; }

/* Page hero */
.page-hero { padding: 100px 0 76px; background: var(--cream); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(3.3rem, 7vw, 6.8rem); max-width: 980px; margin-top: 18px; }
.page-hero .lede { margin-top: 24px; max-width: 720px; }
.page-hero.dark { background: var(--navy); }
.page-hero.dark h1, .page-hero.dark .lede { color: #fff; }

/* Gallery */
.gallery-note { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: #f4ecd9; border-left: 3px solid var(--gold); margin-bottom: 34px; color: #5d523e; font-size: .87rem; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter-btn { border: 1px solid var(--line); background: transparent; color: var(--navy); padding: 10px 15px; cursor: pointer; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.gallery-grid { columns: 3 280px; column-gap: 22px; }
.gallery-card { break-inside: avoid; margin-bottom: 26px; background: #fff; border: 1px solid var(--line); }
.gallery-image { position: relative; background: #ece8df; overflow: hidden; cursor: zoom-in; }
.gallery-image img { width: 100%; height: auto; transition: transform .5s ease; }
.gallery-card:hover .gallery-image img { transform: scale(1.018); }
.zoom-hint { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,253,248,.92); display: grid; place-items: center; color: var(--navy); font-size: 1.15rem; opacity: 0; transform: translateY(-5px); transition: .25s; }
.gallery-card:hover .zoom-hint { opacity: 1; transform: translateY(0); }
.gallery-meta { padding: 18px; }
.gallery-meta-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gallery-meta h3 { font-size: 1.65rem; }
.work-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .13em; color: var(--gold); font-weight: 600; }
.gallery-meta p { color: var(--muted); font-size: .82rem; margin-top: 7px; }
.gallery-actions { display: flex; gap: 8px; margin-top: 16px; }
.gallery-actions .btn { min-height: 42px; padding-inline: 14px; font-size: .65rem; }

/* About */
.about-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.about-copy h2 { margin: 18px 0 28px; }
.about-copy p + p { margin-top: 18px; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 54px; border: 1px solid var(--line); }
.value { background: var(--paper); padding: 30px 24px; }
.value small { color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; }
.value h3 { margin-top: 10px; font-size: 1.45rem; line-height: 1.1; }

/* Commission */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: steps; }
.process-card { padding: 30px; background: var(--cream); min-height: 260px; position: relative; }
.process-card::before { counter-increment: steps; content: '0' counter(steps); color: var(--gold); font-family: var(--serif); font-size: 1.25rem; }
.process-card h3 { margin: 44px 0 14px; font-size: 1.75rem; }
.process-card p { color: var(--muted); font-size: .88rem; }
.form-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(48px, 7vw, 100px); align-items: start; }
.form-intro h2 { margin: 16px 0 24px; }
.form-intro p { color: #d6dbe1; }
.contact-links { display: grid; gap: 12px; margin-top: 30px; font-size: .88rem; }
.contact-links a { color: #fff; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.quote-form { background: #fff; color: var(--ink); padding: clamp(26px, 5vw, 50px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #46515b; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #d8d9d8; background: #fff; padding: 13px 14px; border-radius: 0; color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid rgba(201,163,91,.35); border-color: var(--gold); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: .76rem; color: #586069; }
.check-row input { margin-top: 4px; }
.check-row a { color: var(--navy); }
.form-note { font-size: .72rem; color: var(--muted); margin-top: 12px; }

/* Legal */
.legal { padding: 86px 0 120px; }
.legal h2 { font-size: 2.2rem; margin: 40px 0 13px; }
.legal h3 { font-size: 1.45rem; margin: 26px 0 10px; }
.legal p, .legal li { color: #47515a; }
.legal ul { padding-left: 20px; }
.legal .updated { color: var(--muted); font-size: .8rem; margin-top: 16px; }

/* Footer */
.site-footer { background: #051629; color: #d9dee3; padding: 74px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .7fr .7fr; gap: 50px; }
.footer-brand .brand-script { color: #fff; font-size: 2.4rem; }
.footer-brand p { margin-top: 20px; color: #aeb8c2; max-width: 460px; font-family: var(--serif); font-size: 1.14rem; }
.footer-col h4 { margin: 0 0 16px; color: var(--gold-light); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.footer-col a { display: block; color: #d9dee3; text-decoration: none; margin: 8px 0; font-size: .83rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 58px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; color: #8794a0; font-size: .7rem; }
.footer-bottom a { color: inherit; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(3,12,23,.95); display: none; align-items: center; justify-content: center; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox-shell { width: min(1200px, 100%); max-height: calc(100vh - 60px); display: grid; grid-template-columns: minmax(0,1fr) 320px; background: #fff; overflow: auto; }
.lightbox-image { background: #07111d; display: grid; place-items: center; min-height: 520px; }
.lightbox-image img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox-info { padding: 34px; position: relative; }
.lightbox-info h3 { font-size: 2rem; margin: 8px 0 12px; }
.lightbox-info p { color: var(--muted); font-size: .88rem; }
.lightbox-info .btn { margin-top: 24px; width: 100%; }
.lightbox-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; color: var(--navy); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .nav { position: fixed; inset: 113px 0 auto; background: var(--paper); border-bottom: 1px solid var(--line); padding: 24px 20px 30px; display: none; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; font-size: .95rem; }
  .nav-cta { text-align: center; margin-top: 8px; }
  .menu-toggle { display: flex; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 10px; }
  .hero-art { min-height: 610px; max-width: 720px; width: 100%; margin: 0 auto; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .collection-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 370px 270px 270px; }
  .collection-item:first-child { grid-column: 1 / 3; grid-row: auto; }
  .collection-item:nth-child(4) { grid-column: 1 / 3; }
  .commission-split { grid-template-columns: 1fr; }
  .commission-visual { min-height: 500px; }
  .artist-tease, .about-grid, .form-wrap { grid-template-columns: 1fr; }
  .portrait-placeholder { max-width: 620px; width: 100%; min-height: 520px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .lightbox-shell { grid-template-columns: 1fr; max-height: calc(100vh - 30px); }
  .lightbox-image { min-height: 0; }
  .lightbox-image img { max-height: 64vh; }
}

@media (max-width: 640px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--max)); }
  .demo-bar { font-size: .68rem; }
  .header-inner { min-height: 74px; }
  .brand-script { font-size: 1.63rem; }
  .brand-sub { font-size: .49rem; letter-spacing: .28em; }
  .nav { inset: 103px 0 auto; }
  h1 { font-size: clamp(3.4rem, 16vw, 5rem); }
  .hero { padding-top: 35px; }
  .hero-art { min-height: 495px; }
  .art-main { width: 62%; height: 72%; left: 14%; }
  .art-side { width: 43%; height: 36%; bottom: 2%; }
  .art-small { width: 38%; height: 30%; }
  .section { padding: 84px 0; }
  .section-sm { padding: 58px 0; }
  .signature-row { justify-content: flex-start; gap: 15px 30px; }
  .signature-row span { gap: 30px; }
  .collection-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
  .collection-item, .collection-item:first-child, .collection-item:nth-child(4) { grid-column: auto; grid-row: auto; min-height: 320px; }
  .collection-item:nth-child(2), .collection-item:nth-child(3) { min-height: 420px; }
  .collection-cta { align-items: flex-start; flex-direction: column; }
  .commission-visual { min-height: 360px; }
  .commission-copy { padding: 58px 24px; }
  .portrait-placeholder { min-height: 430px; }
  .about-values { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .quote-form { padding: 24px 18px; }
  .gallery-grid { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .lightbox { padding: 10px; }
  .lightbox-info { padding: 26px 20px; }
  .page-hero { padding: 72px 0 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ========================================================================== 
   V2 NAVY + GOLD GALLERY REVAMP
   Business-card-inspired palette, richer opening experience, preserved art color.
   ========================================================================== */

:root {
  --navy: #061a31;
  --navy-2: #0b2948;
  --navy-3: #123b62;
  --gold: #d0a44d;
  --gold-deep: #a97b28;
  --gold-light: #ecd49a;
  --cream: #f2eadc;
  --paper: #fbf7ef;
  --ink: #102033;
  --muted: #6d6b66;
  --line: rgba(6,26,49,.16);
  --shadow: 0 30px 80px rgba(2,14,28,.22);
}

body { background: var(--paper); }

/* Business-card-inspired gold accent strip */
.demo-bar {
  background: linear-gradient(90deg, #b8862f, #dbb764 48%, #b8862f);
  color: #071a30;
  border-bottom: 1px solid rgba(6,26,49,.24);
}

/* Rich navy navigation instead of white */
.site-header {
  background: rgba(5, 22, 41, .965);
  border-bottom: 1px solid rgba(208,164,77,.35);
  box-shadow: 0 12px 32px rgba(1,10,20,.13);
}
.site-header .brand-script { color: #fff8ea; }
.site-header .brand-sub { color: var(--gold-light); }
.site-header .nav a { color: #f3ecdf; }
.site-header .nav a:not(.nav-cta)::after { background: var(--gold); }
.site-header .nav-cta {
  background: var(--gold);
  color: var(--navy) !important;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.site-header .nav-cta:hover { background: var(--gold-light); }
.menu-toggle { border-color: rgba(208,164,77,.62); }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { background: var(--gold-light); }

/* Home opening: navy first, artwork second, cream used only as a supporting neutral. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 116px);
  padding: 70px 0 84px;
  color: #fff7e9;
  background:
    radial-gradient(circle at 76% 24%, rgba(208,164,77,.14), transparent 28%),
    radial-gradient(circle at 14% 80%, rgba(25,66,104,.48), transparent 34%),
    linear-gradient(115deg, #041528 0%, #071f3a 56%, #0c3154 100%);
  border-bottom: 1px solid rgba(208,164,77,.42);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(208,164,77,.14);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  width: 270px;
  height: 1px;
  left: max(24px, calc((100vw - var(--max))/2));
  bottom: 34px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .7;
  pointer-events: none;
}
.hero-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 6vw, 96px); }
.hero-copy {
  padding: 22px 0 22px clamp(22px, 2vw, 34px);
  border-left: 1px solid rgba(208,164,77,.55);
}
.hero-copy h1 { color: #fff9ef; text-shadow: 0 2px 24px rgba(0,0,0,.12); }
.hero-copy h1 em { color: var(--gold-light); }
.hero-copy .lede { color: #e6dfd3; max-width: 600px; }
.hero-copy .eyebrow { color: var(--gold-light); }
.hero-note { color: #c7bca9; }
.hero .btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.hero .btn-primary:hover { background: var(--gold-light); }
.hero .btn-outline { color: #fff8ea; border-color: rgba(236,212,154,.68); }
.hero .btn-outline:hover { background: rgba(255,255,255,.06); border-color: var(--gold-light); }

.hero-art { min-height: 660px; }
.hero-art::before {
  width: 70%;
  height: 80%;
  top: 4%;
  right: -9%;
  background: rgba(2,13,26,.36);
  border: 1px solid rgba(208,164,77,.52);
  box-shadow: inset 0 0 0 9px rgba(208,164,77,.035);
}
.hero-art::after {
  width: 58%;
  height: 62%;
  bottom: -2%;
  left: -3%;
  border-color: rgba(208,164,77,.75);
}
.art-frame {
  background: #f8f0e0;
  border: 1px solid rgba(208,164,77,.72);
  box-shadow: 0 30px 70px rgba(0,0,0,.32);
  padding: 9px;
}
.art-main { width: 59%; height: 77%; top: 8%; left: 18%; }
.art-small { width: 35%; height: 34%; top: 0; left: 0; }
.art-side { width: 41%; height: 43%; bottom: 1%; right: -1%; }
.frame-label {
  background: rgba(4,21,40,.94);
  border-top: 1px solid rgba(208,164,77,.7);
  color: #fff8e9;
}

/* Gold transition immediately after the navy opening.
   The separator is an architectural Victorian crest rather than a text glyph,
   so its proportions remain consistent across browsers and screen densities. */
.signature-strip {
  background: var(--gold);
  border-top: 1px solid rgba(6,26,49,.42);
  border-bottom: 1px solid rgba(6,26,49,.42);
  padding: 24px 0;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.10),
    inset 0 -4px 0 rgba(6,26,49,.06);
}
.signature-row {
  color: var(--navy);
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
}
.signature-row span {
  gap: clamp(18px, 2.8vw, 42px);
  white-space: nowrap;
}
.signature-row span:not(:last-child)::after {
  content: '';
  flex: 0 0 clamp(54px, 6.2vw, 82px);
  width: clamp(54px, 6.2vw, 82px);
  height: 28px;
  background: url('../brand/victorian-crest-divider.svg') center / contain no-repeat;
  opacity: .88;
}

/* Give the first content section warmth instead of stark white */
.signature-strip + .section { background: #f5efe4; }
.section-cream { background: #eee4d2; }
.section-navy {
  background: linear-gradient(135deg, #061a31, #0b2948);
  border-top: 1px solid rgba(208,164,77,.28);
  border-bottom: 1px solid rgba(208,164,77,.20);
}
.section-navy .lede { color: #ddd7cd; }

.section-head { position: relative; }
.section-head::after {
  content: '';
  position: absolute;
  width: 88px;
  height: 1px;
  left: 0;
  bottom: -24px;
  background: var(--gold);
}
.collection-item {
  border: 1px solid rgba(208,164,77,.28);
  box-shadow: 0 16px 36px rgba(6,26,49,.09);
}
.collection-overlay { background: linear-gradient(transparent, rgba(4,20,38,.92)); }

/* Preserve Amber's real painting colors. No blue wash, no luminosity blend. */
.commission-split { border-top: 1px solid var(--gold); border-bottom: 1px solid rgba(208,164,77,.45); }
.commission-visual { background: #e9dfcd; }
.commission-visual img {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  object-position: center center;
}
.commission-visual::after { display: none; content: none; }
.commission-copy {
  background:
    radial-gradient(circle at 85% 18%, rgba(208,164,77,.10), transparent 26%),
    linear-gradient(145deg, #061a31, #0a2948);
  border-left: 1px solid rgba(208,164,77,.55);
}
.commission-copy h2 { color: #fff8e9; }
.commission-copy p { color: #dcd6cb; }
.process-mini b { border-color: var(--gold); color: var(--gold-light); background: rgba(208,164,77,.05); }

.artist-tease { position: relative; }
.artist-tease::after {
  content: '';
  position: absolute;
  right: 0;
  top: -35px;
  width: 140px;
  height: 140px;
  border-top: 1px solid rgba(208,164,77,.5);
  border-right: 1px solid rgba(208,164,77,.5);
  pointer-events: none;
}
.portrait-placeholder {
  background:
    radial-gradient(circle at 50% 42%, rgba(208,164,77,.13), transparent 32%),
    linear-gradient(145deg, #071e38, #041528);
  border: 1px solid rgba(208,164,77,.52);
  box-shadow: 0 26px 65px rgba(6,26,49,.20);
}
.portrait-placeholder::before { color: rgba(208,164,77,.26); }

/* Inner pages now open in navy as well, keeping the site strongly branded. */
.page-hero,
.page-hero.dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%, rgba(208,164,77,.15), transparent 27%),
    linear-gradient(125deg, #041528, #082541 63%, #0b3154);
  border-bottom: 1px solid rgba(208,164,77,.55);
  color: #fff8ea;
}
.page-hero::after {
  content: '';
  position: absolute;
  width: 44%;
  height: 1px;
  right: 0;
  bottom: 27px;
  background: linear-gradient(90deg, transparent, rgba(208,164,77,.78));
}
.page-hero h1,
.page-hero.dark h1 { color: #fff9ef; }
.page-hero .lede,
.page-hero.dark .lede { color: #dcd7ce; }
.page-hero .eyebrow { color: var(--gold-light); }

/* Gallery: cream paper + gold/navy product language */
.gallery-note {
  background: #efe3c9;
  border-left-color: var(--gold-deep);
  color: #4f4638;
}
.filters { padding-bottom: 16px; border-bottom: 1px solid rgba(208,164,77,.30); }
.filter-btn { border-color: rgba(6,26,49,.24); background: rgba(255,255,255,.4); }
.filter-btn:hover { border-color: var(--gold-deep); }
.filter-btn.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.gallery-card {
  background: #fffaf1;
  border: 1px solid rgba(208,164,77,.40);
  box-shadow: 0 14px 34px rgba(6,26,49,.08);
}
.gallery-meta { border-top: 1px solid rgba(208,164,77,.20); }
.gallery-actions .btn-primary { background: var(--navy); }

/* About and commission components */
.about-values { background: rgba(208,164,77,.32); border-color: rgba(208,164,77,.32); }
.value { background: #f8f1e5; }
.process-card {
  background: #f1e7d5;
  border-top: 3px solid var(--gold);
  box-shadow: 0 14px 28px rgba(6,26,49,.06);
}
.quote-form {
  background: #fffaf1;
  border: 1px solid rgba(208,164,77,.52);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.field input, .field textarea, .field select { background: #fffdf8; border-color: #d9ccb5; }
.field input:focus, .field textarea:focus, .field select:focus { outline-color: rgba(208,164,77,.34); }

/* Buttons inherit the palette more visibly throughout */
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-2); }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { border-color: rgba(6,26,49,.38); }

/* Legal and footer details */
.legal { background: #fbf7ef; }
.site-footer {
  background: linear-gradient(145deg, #03111f, #061a31 55%, #082541);
  border-top: 3px solid var(--gold);
}
.footer-brand .brand-sub { color: var(--gold-light); }
.footer-col h4 { color: var(--gold-light); }
.footer-bottom { border-top-color: rgba(208,164,77,.18); }

/* Lightbox styling carries the gallery identity. */
.lightbox-shell { background: #fff9ef; border: 1px solid rgba(208,164,77,.55); }
.lightbox-image { background: #03111f; }
.lightbox-info { border-left: 1px solid rgba(208,164,77,.25); }

@media (max-width: 980px) {
  .nav {
    background: rgba(5,22,41,.99);
    border-bottom: 1px solid rgba(208,164,77,.38);
  }
  .nav a { color: #f7efe1; }
  .nav-cta { color: var(--navy) !important; }
  .hero { padding-top: 52px; }
  .hero-copy { max-width: 760px; }
  .hero-art { min-height: 625px; }
  .commission-copy { border-left: 0; border-top: 1px solid rgba(208,164,77,.55); }
  .lightbox-info { border-left: 0; border-top: 1px solid rgba(208,164,77,.25); }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 42px;
    padding-bottom: 64px;
    background:
      radial-gradient(circle at 80% 56%, rgba(208,164,77,.13), transparent 30%),
      linear-gradient(155deg, #041528, #082541 72%, #0b3154);
  }
  .hero::before { inset: 12px; }
  .hero::after { width: 150px; bottom: 18px; left: 14px; }
  .hero-copy { padding: 10px 0 10px 17px; }
  .hero-copy h1 { font-size: clamp(3.35rem, 16vw, 5rem); }
  .hero-copy .lede { color: #e2dbd0; }
  .hero-art { min-height: 510px; margin-top: 16px; }
  .art-main { width: 64%; height: 73%; left: 13%; top: 9%; }
  .art-small { width: 39%; height: 29%; top: 1%; }
  .art-side { width: 45%; height: 37%; right: -1%; bottom: 2%; }
  .signature-strip { padding: 18px 0; }
  .signature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 42px;
    row-gap: 12px;
    justify-content: center;
    text-align: center;
  }
  .signature-row span {
    display: flex;
    justify-content: center;
    position: relative;
    min-width: 0;
    gap: 0;
    font-size: clamp(1rem, 4.5vw, 1.18rem);
  }
  .signature-row span:not(:last-child)::after { display: none; }
  .signature-row span:nth-child(odd)::after {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 20px;
    right: -36px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../brand/victorian-crest-divider.svg') center / contain no-repeat;
    opacity: .84;
  }
  .commission-visual { min-height: 420px; }
  .artist-tease::after { display: none; }
  .page-hero { padding-top: 78px; }
}



@media (max-width: 360px) {
  .signature-row { column-gap: 34px; }
  .signature-row span { font-size: .98rem; }
  .signature-row span:nth-child(odd)::after {
    width: 24px;
    right: -29px;
  }
}

/* V4 legal-consent treatment */
.consent-card {
  border: 1px solid rgba(208,164,77,.38);
  background: #fbf7ef;
  padding: 16px 18px;
}
.consent-card .check-row {
  font-size: .86rem;
  line-height: 1.55;
  color: #34414d;
}
.consent-card .check-row input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--navy);
}
.consent-card .check-row a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.consent-help {
  margin: 8px 0 0 28px;
  color: #6b6a65;
  font-size: .72rem;
}
.captcha-card {
  border: 1px solid #d8d9d8;
  background: #f7f8f9;
  padding: 16px 18px;
  overflow: hidden;
}
.captcha-heading {
  margin-bottom: 10px;
  color: #46515b;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.captcha-widget {
  min-height: 78px;
}
.captcha-note {
  margin: 8px 0 0;
  color: #6b6a65;
  font-size: .72rem;
  line-height: 1.45;
}
@media (max-width: 420px) {
  .captcha-card { padding: 14px 12px; }
  .captcha-widget { overflow-x: auto; }
}
.legal > p:first-of-type:not(.updated) {
  font-size: 1.04rem;
}

/* ========================================================================== 
   V5 iOS / MOBILE HERO REPAIR
   The V2 desktop hero-grid declaration appeared after the original responsive
   rules, which caused small screens to fall back into a two-column layout.
   These final rules intentionally live at the end of the stylesheet so mobile
   always stacks copy above the artwork collage.
   ========================================================================== */

html, body { max-width: 100%; overflow-x: clip; }
.hero-grid > * { min-width: 0; }

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    align-items: start;
  }

  .hero-copy {
    width: 100%;
    max-width: 780px;
  }

  .hero-art {
    width: min(100%, 720px);
    min-height: 590px;
    margin: 0 auto;
    position: relative;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 30px 0 54px;
  }

  .hero::before {
    inset: 10px;
  }

  .hero-grid {
    gap: 32px;
  }

  .hero-copy {
    padding: 8px 10px 8px 18px;
    border-left-color: rgba(208,164,77,.62);
  }

  .hero-copy h1 {
    font-size: clamp(3.35rem, 15.5vw, 4.15rem);
    line-height: .94;
    margin: 18px 0 22px;
    max-width: 100%;
  }

  .hero-copy .lede {
    font-size: clamp(1.18rem, 5.6vw, 1.42rem);
    line-height: 1.42;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-note {
    margin-top: 22px;
    line-height: 1.6;
  }

  .hero-art {
    min-height: 455px;
    width: 100%;
    margin: 2px auto 0;
  }

  .hero-art::before {
    width: 78%;
    height: 78%;
    top: 5%;
    right: 2%;
  }

  .hero-art::after {
    width: 62%;
    height: 58%;
    left: 2%;
    bottom: 1%;
  }

  .art-frame {
    padding: 7px;
    box-shadow: 0 20px 48px rgba(0,0,0,.30);
  }

  .art-main {
    width: 64%;
    height: 72%;
    top: 9%;
    left: 19%;
  }

  .art-small {
    width: 36%;
    height: 29%;
    top: 1%;
    left: 2%;
    transform: rotate(-1.25deg);
  }

  .art-side {
    width: 38%;
    height: 35%;
    right: 1%;
    bottom: 1%;
    transform: rotate(1deg);
  }

  .frame-label {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 8px 9px;
    font-size: .58rem;
    line-height: 1.25;
  }
}

@media (max-width: 390px) {
  .hero-copy h1 {
    font-size: clamp(3.05rem, 15vw, 3.65rem);
  }

  .hero-art {
    min-height: 420px;
  }
}


/* ========================================================================== 
   V7 ASHLEY SOUTHINE BRAND TYPOGRAPHY
   Ashley Southine is used selectively as outlined SVG artwork rather than live
   webfont text. This locks in the approved glyph spacing/kerning across Safari,
   Chrome, iOS, and desktop browsers while keeping long-form text readable.
   ========================================================================== */
:root { --header-height: 90px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.header-inner { min-height: var(--header-height); }
.brand {
  align-items: center;
  line-height: 1;
  min-width: 0;
}
.brand-script-img {
  display: block;
  width: clamp(190px, 18vw, 224px);
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
}
.brand-sub {
  align-self: center;
  margin-top: 3px;
  padding-left: .35em; /* optical centering for the tracked capitals */
  line-height: 1.1;
  letter-spacing: .35em;
}
.footer-brand .brand-script-img {
  width: min(280px, 100%);
}
.footer-brand .brand-sub {
  margin-top: 5px;
}

/* The script is intentionally reserved for a single expressive hero word.
   The SVG's tight viewBox includes the b ascender and g descender, so the
   dimensions below maintain a clean baseline without widening letter spacing. */
.hero-script-word {
  display: inline-block;
  width: 1.92em;
  height: 1.13em;
  margin: 0 .035em 0 .015em;
  vertical-align: -.245em;
  white-space: nowrap;
}
.hero-script-word img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Use the Ashley capital A as a quiet studio-mark in the artist placeholder. */
.portrait-placeholder::before {
  content: '';
  width: min(58%, 290px);
  aspect-ratio: 236.895 / 295.035;
  background: url('../brand/ashley-a-monogram.svg') center / contain no-repeat;
  opacity: .76;
}

@media (max-width: 980px) {
  .nav { inset: var(--header-height) 0 auto; }
  .brand-script-img { width: 205px; }
}

@media (max-width: 640px) {
  :root { --header-height: 82px; }
  .brand-script-img { width: 178px; }
  .brand-sub {
    margin-top: 1px;
    font-size: .52rem;
    letter-spacing: .33em;
    padding-left: .33em;
  }
  .hero-script-word {
    width: 1.84em;
    height: 1.085em;
    vertical-align: -.225em;
  }
}


/* V9 — Ashley Southine painting titles
   Artwork names are converted to outlined SVGs rather than shipping the font file.
   This preserves the exact Ashley Southine letterforms/spacing across Safari/iOS/Chrome. */
.painting-title-svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Featured-art caption: descriptor stays clean and legible; the artwork title becomes the signature accent. */
.frame-label {
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
  letter-spacing: 0;
  min-height: 48px;
}
.frame-label-prefix {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.painting-title-frame {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.painting-title-frame .painting-title-svg {
  height: 34px;
  max-width: 100%;
}

/* Home portfolio overlays */
.collection-overlay strong.painting-title-home {
  display: block;
  line-height: 1;
  min-height: 42px;
}
.painting-title-home .painting-title-svg {
  height: 48px;
  max-width: min(100%, 300px);
}

/* Gallery cards */
.gallery-painting-title {
  margin: 3px 0 0;
  line-height: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
}
.gallery-painting-title .painting-title-svg {
  height: 54px;
  max-width: min(100%, 245px);
}

/* Lightbox title */
.lightbox-info h3.lightbox-painting-title {
  margin: 8px 0 12px;
  min-height: 68px;
  display: flex;
  align-items: center;
}
.lightbox-painting-title .painting-title-svg {
  height: 68px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .frame-label {
    gap: 6px;
    padding: 8px 9px;
    min-height: 42px;
  }
  .frame-label-prefix {
    font-size: .48rem;
    letter-spacing: .07em;
  }
  .painting-title-frame .painting-title-svg { height: 28px; }
  .painting-title-home .painting-title-svg { height: 44px; }
  .gallery-painting-title { min-height: 50px; }
  .gallery-painting-title .painting-title-svg { height: 50px; }
  .lightbox-info h3.lightbox-painting-title { min-height: 60px; }
  .lightbox-painting-title .painting-title-svg { height: 60px; }
}

@media (max-width: 360px) {
  .frame-label-prefix { display: none; }
  .painting-title-frame .painting-title-svg { height: 30px; }
}

/* ========================================================================== 
   V10 — Amber-requested hero emphasis
   Make the Ashley Southine “belong” dramatically larger without reserving
   extra layout space, so the script can intentionally sweep into the lines
   above and below. Using transform preserves the approved SVG letter spacing.
   ========================================================================== */
.hero-script-word {
  position: relative;
  z-index: 2;
  transform: translateY(.025em) scale(1.68);
  transform-origin: 8% 54%;
  margin-right: .12em;
}

@media (max-width: 980px) {
  .hero-script-word {
    transform: translateY(.02em) scale(1.55);
    transform-origin: 8% 54%;
  }
}

@media (max-width: 640px) {
  .hero-script-word {
    transform: translateY(.01em) scale(1.45);
    transform-origin: 8% 54%;
    margin-right: .08em;
  }
}


/* ========================================================================== 
   V11 — BELONG AS A TRUE FOREGROUND ART LAYER
   Amber requested that the Ashley Southine "belong" be dramatically larger,
   allowed to overlap the serif lines above/below, and NOT increase the space
   allocated between those lines. The middle slot keeps the existing rhythm;
   the SVG itself is absolutely positioned and therefore does not affect flow.
   ========================================================================== */
.hero-title {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.hero-title-line {
  position: relative;
  display: block;
  z-index: 1;
}

.hero-script-slot {
  position: relative;
  display: block;
  height: 1.08em; /* preserves the old line rhythm; the oversized art itself does not push 'somewhere.' */
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.hero-script-slot img {
  position: absolute;
  z-index: 6;
  left: -.08em;
  top: 50%;
  width: 5.00em;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateY(-49%);
  transform-origin: left center;
  overflow: visible;
  pointer-events: none;
}

/* Retire the old inline treatment. The v11 element intentionally ignores it. */
.hero-title .hero-script-word { display: none; }

@media (max-width: 980px) {
  .hero-script-slot { height: 1.08em; }
  .hero-script-slot img {
    left: -.06em;
    width: 4.70em;
    transform: translateY(-49%);
  }
}

@media (max-width: 640px) {
  .hero-script-slot { height: 1.06em; }
  .hero-script-slot img {
    left: -.055em;
    width: 4.45em;
    transform: translateY(-49%);
  }
}

@media (max-width: 390px) {
  .hero-script-slot img { width: 4.20em; }
}

/* ========================================================================== 
   V12 — BALANCED BELONG OVERLAY
   Keep the V11 foreground-layer technique, center, z-index, and reserved line
   rhythm exactly as-is, but reduce only the artwork size so the overlap is
   intentional rather than dominant. The slot height is unchanged, meaning
   'somewhere.' does not move down and no extra vertical spacing is introduced.
   ========================================================================== */
.hero-script-slot img {
  width: 4.40em;
}

@media (max-width: 980px) {
  .hero-script-slot img { width: 4.15em; }
}

@media (max-width: 640px) {
  .hero-script-slot img { width: 3.95em; }
}

@media (max-width: 390px) {
  .hero-script-slot img { width: 3.75em; }
}

/* ========================================================================== 
   V13 — REFINED / SLIGHTLY SMALLER BELONG
   Preserve the V11/V12 foreground overlay behavior and the same visual center,
   but dial the Ashley Southine artwork down another ~8%. The left offset is
   compensated by half of the width reduction so the word remains centered in
   the same place rather than appearing to slide left as it gets smaller.
   The slot height remains untouched, so surrounding line spacing does not move.
   ========================================================================== */
.hero-script-slot img {
  width: 4.05em;
  left: .095em;
}

@media (max-width: 980px) {
  .hero-script-slot img {
    width: 3.82em;
    left: .105em;
  }
}

@media (max-width: 640px) {
  .hero-script-slot img {
    width: 3.65em;
    left: .095em;
  }
}

@media (max-width: 390px) {
  .hero-script-slot img {
    width: 3.48em;
    left: .08em;
  }
}


/* ========================================================================== 
   V14/V15 — APPROVED SMALLER, CENTERED BELONG
   Preserve the foreground overlay and line rhythm from V13. V14 reduced the
   artwork 10%; V15 reduced it another 13%, with offsets compensated so its
   visual center stays in the same place.
   ========================================================================== */
.hero-script-slot img {
  width: 3.17em;
  left: .53em;
}
@media (max-width: 980px) {
  .hero-script-slot img { width: 2.99em; left: .52em; }
}
@media (max-width: 640px) {
  .hero-script-slot img { width: 2.86em; left: .49em; }
}
@media (max-width: 390px) {
  .hero-script-slot img { width: 2.72em; left: .46em; }
}

/* ========================================================================== 
   V16 — RESPONSIVE PAINTING-TITLE OVERLAY SCALE
   Keep Ashley Southine lettering but prevent image captions from overpowering
   the artwork or clipping on iPhone widths.
   ========================================================================== */
.painting-title-home .painting-title-svg,
.painting-title-frame .painting-title-svg {
  height: 31px;
}
@media (max-width: 640px) {
  .painting-title-home .painting-title-svg,
  .painting-title-frame .painting-title-svg { height: 28px; }
}
@media (max-width: 360px) {
  .painting-title-home .painting-title-svg,
  .painting-title-frame .painting-title-svg { height: 26px; }
}

/* ========================================================================== 
   V17 — POPPY FIELD CAPTION CLEANUP
   The descriptor was removed in markup. Keep the signature title forward,
   left-aligned, and slightly larger than the supporting collection captions.
   ========================================================================== */
.art-main .frame-label {
  justify-content: flex-start;
  overflow: visible;
}
.art-main .painting-title-frame {
  flex: 0 1 auto;
  position: relative;
  z-index: 3;
  left: -2px;
  overflow: visible;
}
.art-main .painting-title-frame .painting-title-svg {
  height: 35px;
  max-width: min(100%, 230px);
}
@media (max-width: 640px) {
  .art-main .painting-title-frame .painting-title-svg { height: 31px; }
}
@media (max-width: 360px) {
  .art-main .painting-title-frame .painting-title-svg { height: 29px; }
}


/* ==========================================================================
   V25 — PAINTING TITLE SVG SELECTOR FIX
   Artwork image sizing is intentionally scoped to direct child images only.
   This prevents the nested Ashley Southine title SVGs from inheriting
   width:100% / height:100% and becoming stretched across the card/frame.
   ========================================================================== */
.collection-item .painting-title-svg,
.art-frame .painting-title-svg {
  width: auto;
  object-fit: contain;
  transform: none;
}
.collection-item:hover .painting-title-svg { transform: none; }

/* About page artist portraits — v26 */
.artist-portraits {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 610px;
  padding-top: 14px;
}
.artist-portraits::before {
  content: '';
  position: absolute;
  inset: 0 17% 7% 4%;
  border: 1px solid rgba(208,164,77,.58);
  transform: translate(-14px, 14px);
  pointer-events: none;
}
.artist-portrait {
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid rgba(208,164,77,.58);
  box-shadow: 0 24px 58px rgba(6,26,49,.20);
}
.artist-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02);
}
.artist-portrait-main {
  width: 82%;
  aspect-ratio: 2 / 3;
  position: relative;
  z-index: 1;
}
.artist-portrait-main img {
  object-position: 50% 50%;
}
.artist-portrait-detail {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 47%;
  aspect-ratio: 2 / 3;
  border: 7px solid #f7efe2;
  outline: 1px solid rgba(208,164,77,.62);
}
.artist-portrait-detail img {
  object-position: 50% 36%;
}

@media (max-width: 980px) {
  .artist-portraits {
    max-width: 660px;
    min-height: 640px;
    margin-bottom: 12px;
  }
  .artist-portrait-main { width: 76%; }
  .artist-portrait-detail { width: 39%; }
  .artist-portraits::before { right: 23%; }
}

@media (max-width: 600px) {
  .artist-portraits {
    min-height: 505px;
    max-width: 100%;
    padding-top: 8px;
  }
  .artist-portrait-main { width: 82%; }
  .artist-portrait-detail {
    width: 43%;
    border-width: 5px;
  }
  .artist-portraits::before {
    inset: 0 17% 8% 5%;
    transform: translate(-8px, 8px);
  }
}

/* Homepage artist portrait — v26 */
.artist-home-photo {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 560px;
  min-height: 590px;
  overflow: visible;
}
.artist-home-photo::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(208,164,77,.58);
  pointer-events: none;
}
.artist-home-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 590px;
  object-fit: cover;
  object-position: 50% 38%;
  border: 1px solid rgba(208,164,77,.52);
  box-shadow: 0 26px 65px rgba(6,26,49,.20);
}
@media (max-width: 980px) {
  .artist-home-photo { max-width: 620px; min-height: 520px; }
  .artist-home-photo img { height: 520px; }
}
@media (max-width: 600px) {
  .artist-home-photo { min-height: 430px; }
  .artist-home-photo img { height: 430px; }
  .artist-home-photo::before { inset: 12px -10px -12px 10px; }
}