:root {
  --ink: #171315;
  --paper: #f4ecee;
  --paper-strong: #fffafa;
  --crimson: #981b34;
  --crimson-dark: #681124;
  --dusty-pink: #dbb2ba;
  --soft-pink: #ecd6da;
  --silver: #d4d4d4;
  --muted: #6c5c61;
  --line: #b98e98;
  --content: 1180px;
}

* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body { margin: 0; min-width: 300px; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: var(--crimson-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson); }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px; transform: translateY(-180%); background: #fff; color: #000; }
.skip-link:focus { transform: none; }
.site-header { position: relative; overflow: hidden; background: #bf1237; color: #fff; }
.header-composition { width: min(100%, 963px); aspect-ratio: 963 / 250; margin: 0 auto; display: grid; grid-template-columns: 194fr 769fr; }
.header-figure { display: block; min-width: 0; overflow: hidden; }
.header-figure img { width: 100%; height: 100%; object-fit: fill; }
.header-main { min-width: 0; display: grid; grid-template-rows: 6fr 136fr 18fr 90fr; }
.header-top-rule { min-height: 0; padding-top: 4px; overflow: hidden; }
.header-top-rule img, .header-mid-rule img { width: 100%; height: 100%; }
.header-scenes { min-width: 0; display: grid; grid-template-columns: 6fr 96fr 14fr 96fr 14fr 96fr 14fr 96fr 14fr 96fr 14fr 96fr 14fr 96fr 7fr; overflow: hidden; }
.header-scenes img { width: 100%; height: 100%; object-fit: fill; }
.header-mid-rule { min-height: 0; overflow: hidden; }
.brand-row { min-width: 0; display: grid; grid-template-columns: 20fr 309fr 113fr 50fr 135fr 60fr 82fr; overflow: hidden; }
.brand-row img { width: 100%; height: 100%; object-fit: fill; }
.brand-space { display: block; }
.site-brand, .brand-flame, .brand-figure, .brand-fade, .brand-end { display: block; min-width: 0; overflow: hidden; }
.site-nav { position: sticky; top: 0; z-index: 30; min-height: 50px; background: #d5d5d5; border-bottom: 1px solid #a2a2a2; box-shadow: 0 2px 7px rgb(23 19 21 / 18%); }
.nav-links { width: min(calc(100% - 32px), var(--content)); min-height: 50px; margin: 0 auto; display: flex; align-items: stretch; }
.nav-links a { display: flex; align-items: center; padding: 0 21px; color: #252025; border-right: 1px solid #b9b9b9; font: 700 13px/1.2 Arial, sans-serif; text-decoration: none; text-transform: uppercase; }
.nav-links a:first-child { border-left: 1px solid #b9b9b9; }
.nav-links a:hover, .nav-links a[aria-current='page'] { background: var(--crimson); color: #fff; }
.menu-toggle { display: none; }
main { min-height: 50vh; }
.intro-band, .page-intro, .content-band, .collection-band, .editorial-band, .prose-page, .collection-nav { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
.intro-band { min-height: 500px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: start; gap: clamp(28px, 5vw, 64px); padding: 48px 0; }
.intro-copy { max-width: 720px; }
h1, h2, h3 { margin-top: 0; line-height: 1.1; }
h1 { max-width: 900px; margin-bottom: 18px; color: var(--crimson-dark); font-size: clamp(48px, 7vw, 86px); font-weight: 400; }
h2 { margin-bottom: 14px; font-size: clamp(30px, 4vw, 48px); font-weight: 400; }
h3 { font-size: 25px; }
.lede { max-width: 800px; margin: 0 0 18px; color: #392d31; font-size: 23px; line-height: 1.4; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--crimson-dark); border-radius: 3px; font: 700 13px/1 Arial, sans-serif; text-decoration: none; text-transform: uppercase; }
.button.primary { background: var(--crimson); color: #fff; }
.button.primary:hover { background: var(--crimson-dark); color: #fff; }
.text-link { font-weight: 700; }
.intro-art { position: relative; width: min(100%, 340px); margin: 0 auto; padding: 16px; background: var(--dusty-pink); border: 1px solid var(--line); box-shadow: 12px 12px 0 var(--silver); }
.intro-art img { width: 100%; height: min(62vh, 470px); object-fit: contain; background: #c8a1aa; }
.content-band.whatcams-feature { padding: 20px 0 44px; }
.whatcams-banner { display: block; overflow: hidden; background: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 24px rgb(40 20 26 / 12%); text-decoration: none; }
.whatcams-banner img { width: 100%; height: auto; }
.whatcams-feature-copy { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); align-items: start; gap: clamp(28px, 5vw, 64px); padding: 24px 2px 0; }
.whatcams-feature-copy h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); }
.whatcams-feature-copy p { max-width: 760px; margin: 2px 0 0; color: #493a3f; }
.whatcams-feature-copy a { color: var(--crimson-dark); font-weight: 700; text-decoration-thickness: 2px; }
.content-band, .collection-band { padding: 48px 0; }
.featured-band { border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 460px; margin: 0 0 5px; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.gallery-item { min-width: 0; margin: 0; background: var(--paper-strong); border: 1px solid #c4a7ad; border-radius: 3px; overflow: hidden; box-shadow: 0 8px 18px rgb(40 20 26 / 9%); }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.panorama { grid-column: 1 / -1; }
.gallery-open { width: 100%; height: 320px; padding: 0; border: 0; overflow: hidden; background: #2b2528; cursor: zoom-in; }
.gallery-open img { width: 100%; height: 100%; object-fit: contain; transition: transform 180ms ease; }
.gallery-item.panorama .gallery-open { height: auto; aspect-ratio: 963 / 250; }
.gallery-open:hover img { transform: scale(1.025); }
.gallery-item figcaption { min-height: 49px; padding: 12px 14px; color: var(--muted); font: 700 12px/1.35 Arial, sans-serif; }
.collection-band { width: 100%; max-width: none; padding-inline: max(20px, calc((100vw - var(--content)) / 2)); background: var(--ink); color: #fff; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.collection-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 260px; background: #30292c; border: 1px solid #5e4d52; border-radius: 3px; overflow: hidden; }
.collection-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.collection-card > div { padding: 20px; }
.collection-card h3 { margin-bottom: 12px; color: #fff; }
.collection-card p { color: #dbcdd0; }
.collection-card a { color: #f0b8c3; font-weight: 700; }
.editorial-band { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 5vw, 60px); padding: 54px 0; }
.editorial-columns { columns: 2; column-gap: 42px; }
.editorial-columns p { margin-top: 0; break-inside: avoid; }
.page-intro { padding: 46px 0 26px; border-bottom: 1px solid var(--line); }
.page-intro h1 { font-size: clamp(45px, 6vw, 76px); }
.page-intro > p { max-width: 860px; }
.muted-band { width: 100%; max-width: none; padding-inline: max(20px, calc((100vw - var(--content)) / 2)); background: var(--soft-pink); }
.story-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-feature .gallery-open { height: 390px; }
.page-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.page-strip figure { margin: 0; min-width: 0; }
.page-strip .gallery-open { height: 195px; border: 1px solid var(--line); background: #352d30; }
.page-strip figcaption { padding: 6px 2px; color: var(--muted); font: 700 11px/1.3 Arial, sans-serif; }
.vintage-gallery .gallery-open { height: 430px; background: #dfd8d2; }
.vintage-gallery .landscape .gallery-open { height: 340px; }
.vintage-section { padding: 30px 0; }
.vintage-section + .vintage-section { border-top: 1px solid var(--line); }
.vintage-section .section-heading { margin-bottom: 16px; }
.vintage-section .section-heading h2 { font-size: 34px; }
.section-note { max-width: 900px; margin: -2px 0 20px; color: #4f4145; }
.artist-preview { border-top: 1px solid var(--line); }
.artist-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.artist-preview-card { min-width: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); min-height: 156px; background: var(--paper-strong); border: 1px solid #c4a7ad; border-radius: 3px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 0 8px 18px rgb(40 20 26 / 8%); }
.artist-preview-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.artist-preview-card > span { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; }
.artist-preview-card strong { color: var(--crimson-dark); font-size: 23px; line-height: 1.05; }
.artist-preview-card small { color: var(--muted); font: 700 12px/1.4 Arial, sans-serif; }
.artist-preview-card:hover { border-color: var(--crimson); }
.artist-preview-link { margin: 18px 0 0; }
.artist-directory { display: grid; gap: 20px; }
.artist-card { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); min-height: 310px; background: var(--paper-strong); border: 1px solid #c4a7ad; border-radius: 3px; overflow: hidden; box-shadow: 0 8px 20px rgb(40 20 26 / 8%); }
.artist-card-image { min-width: 0; background: #2b2528; }
.artist-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.artist-card > div { align-self: center; padding: 28px 34px; }
.artist-card h2 { margin-bottom: 5px; font-size: 38px; }
.artist-card h2 a { color: var(--crimson-dark); text-decoration: none; }
.artist-dates { margin: 0 0 14px; color: var(--muted); font: 700 13px/1.2 Arial, sans-serif; letter-spacing: .04em; }
.artist-card p:not(.artist-dates) { max-width: 680px; }
.artist-reading-guide { border-top: 1px solid var(--line); }
.artist-profile { width: 100%; }
.artist-profile-header { width: min(calc(100% - 40px), var(--content)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: center; gap: clamp(34px, 6vw, 76px); padding: 48px 0; }
.artist-profile-copy h1 { margin-bottom: 18px; }
.artist-profile-copy > p:not(.artist-dates) { max-width: 730px; }
.artist-profile-lead { width: min(100%, 350px); margin: 0 auto; padding: 12px; background: var(--dusty-pink); border: 1px solid var(--line); box-shadow: 11px 11px 0 var(--silver); }
.artist-profile-lead img { width: 100%; height: 450px; object-fit: contain; background: #c8a1aa; }
.artist-profile-lead figcaption { padding: 10px 4px 2px; color: #4f4145; font: 700 11px/1.35 Arial, sans-serif; }
.artist-profile-body { width: min(calc(100% - 40px), var(--content)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(30px, 5vw, 60px); padding: 42px 0; border-top: 1px solid var(--line); }
.artist-profile-body h2 { font-size: 34px; }
.looking-notes, .credit-note { align-self: start; padding: 20px 22px; background: var(--soft-pink); border-left: 5px solid var(--crimson); }
.looking-notes h2 { margin-bottom: 12px; font-size: 28px; }
.looking-notes ul { margin: 0; padding-left: 20px; }
.looking-notes li + li { margin-top: 8px; }
.artist-gallery-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.artist-gallery .gallery-open { height: 400px; }
.artist-gallery .landscape .gallery-open { height: 310px; }
.artist-profile-lower { border-top: 0; }
.credit-note strong { display: block; color: var(--crimson-dark); font: 700 13px/1.2 Arial, sans-serif; text-transform: uppercase; }
.credit-note p { margin-bottom: 0; font-size: 15px; }
.compact-editorial { padding-top: 22px; }
.collection-nav { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0 48px; border-top: 1px solid var(--line); }
.collection-nav a { font-weight: 700; }
.prose-page { max-width: 850px; padding: 50px 0 64px; }
.prose-page h1 { font-size: clamp(45px, 6vw, 70px); }
.prose-page h2 { margin-top: 34px; font-size: 33px; }
.adult-panel { margin-top: 30px; padding: 18px 21px; background: var(--soft-pink); border-left: 5px solid var(--crimson); }
.status-page { min-height: 55vh; }
.site-footer { padding: 32px max(20px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px; background: var(--crimson-dark); color: #f3dfe4; border-top: 6px solid var(--dusty-pink); }
.footer-logo { display: inline-block; }
.footer-logo img { width: min(230px, 100%); height: auto; }
.site-footer p { max-width: 590px; margin: 10px 0 0; font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 10px 20px; }
.site-footer a { color: #fff; }
.site-footer .copyright { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 20%); color: #dfc0c7; }
.lightbox { width: min(94vw, 1100px); max-width: none; height: min(92vh, 900px); max-height: none; padding: 48px 24px 20px; border: 1px solid #76545d; background: #181416; color: #fff; }
.lightbox::backdrop { background: rgb(0 0 0 / 82%); }
.lightbox img { width: 100%; height: calc(100% - 40px); object-fit: contain; }
.lightbox p { margin: 8px 0 0; text-align: center; font: 700 13px/1.3 Arial, sans-serif; }
.lightbox-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font: 34px/36px Arial, sans-serif; }

@media (max-width: 900px) {
  .nav-links a { padding-inline: 13px; font-size: 11px; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-card { grid-template-columns: 150px minmax(0, 1fr); }
  .page-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .artist-preview-grid { grid-template-columns: 1fr; }
  .artist-preview-card { min-height: 135px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .header-composition { width: 100%; height: 135px; aspect-ratio: auto; grid-template-columns: 95px minmax(0, 1fr); }
  .header-main { grid-template-rows: 3px 77px 0 55px; }
  .header-top-rule { padding-top: 1px; }
  .header-mid-rule { display: none; }
  .brand-row { display: block; padding-left: 9px; }
  .site-brand { width: min(100%, 190px); height: 55px; }
  .site-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
  .brand-space, .brand-flame, .brand-figure, .brand-fade, .brand-end { display: none; }
  .site-nav { min-height: 48px; }
  .menu-toggle { width: 100%; min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 0; background: #d5d5d5; color: #231e20; cursor: pointer; font: 700 12px Arial, sans-serif; text-transform: uppercase; }
  .menu-icon { font-size: 23px; font-weight: 400; line-height: 1; }
  .nav-links { position: absolute; top: 48px; right: 0; left: 0; width: 100%; display: none; background: #d5d5d5; box-shadow: 0 8px 18px rgb(0 0 0 / 24%); }
  .nav-links.is-open { display: block; }
  .nav-links a { min-height: 47px; padding: 0 20px; border: 0; border-top: 1px solid #b9b9b9; }
  .intro-band, .page-intro, .content-band, .editorial-band, .prose-page, .collection-nav, .artist-profile-header, .artist-profile-body { width: min(calc(100% - 28px), var(--content)); }
  .intro-band { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 34px 0 44px; }
  h1 { font-size: 48px; }
  .lede { font-size: 20px; }
  .intro-art { width: min(82%, 340px); }
  .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .gallery-grid, .story-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-open, .story-feature .gallery-open { height: 290px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { grid-template-columns: 125px minmax(0, 1fr); min-height: 245px; }
  .collection-card > div { padding: 16px; }
  .editorial-band { grid-template-columns: 1fr; gap: 14px; padding: 42px 0; }
  .editorial-columns { columns: 1; }
  .page-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-strip .gallery-open { height: 180px; }
  .vintage-gallery .gallery-open, .vintage-gallery .landscape .gallery-open { height: 330px; }
  .artist-card { grid-template-columns: 130px minmax(0, 1fr); min-height: 250px; }
  .artist-card > div { padding: 20px; }
  .artist-card h2 { font-size: 29px; }
  .artist-profile-header, .artist-profile-body { grid-template-columns: 1fr; }
  .artist-profile-header { gap: 26px; padding: 34px 0 42px; }
  .whatcams-feature-copy { grid-template-columns: 1fr; gap: 10px; padding-top: 18px; }
  .artist-profile-lead { width: min(88%, 350px); }
  .artist-profile-body { padding: 34px 0; }
  .artist-gallery .gallery-open, .artist-gallery .landscape .gallery-open { height: 330px; }
  .collection-nav { flex-direction: column; padding-bottom: 38px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .site-footer .copyright { grid-column: auto; }
}

@media (max-width: 420px) {
  .gallery-grid:not(.story-feature) { grid-template-columns: 1fr; }
  .gallery-item.wide { grid-column: span 1; }
  .gallery-open { height: 360px; }
  .collection-card { grid-template-columns: 105px minmax(0, 1fr); }
  .collection-card h3 { font-size: 21px; }
  .collection-card p { font-size: 14px; }
  .artist-card { grid-template-columns: 100px minmax(0, 1fr); min-height: 260px; }
  .artist-card > div { padding: 16px; }
  .artist-card h2 { font-size: 24px; }
  .artist-card p { font-size: 14px; }
  .artist-preview-card { grid-template-columns: 98px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
