:root {
  color-scheme: light;
  --paper: #f4f1eb;
  --paper-raised: #fbfaf7;
  --ink: #1b1916;
  --ink-muted: #3f3c37;
  --rule: #ddd6c8;
  --focus: #1b1916;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page: 72rem;
  --measure: 38rem;
  --space: clamp(1.25rem, 3vw, 2rem);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

h1 {
  margin: 0;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

a:hover {
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: #e4dfd4;
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.6rem 0.8rem;
}

.skip-link:focus {
  top: 1rem;
}

.shell {
  width: min(var(--page), calc(100% - 2.5rem));
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.5rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  border-bottom-color: var(--ink);
}

/* Login and account links are icons; the label stays available to screen readers. */
.nav-icon {
  justify-content: center;
  min-width: 44px;
}

.nav-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main {
  flex: 1;
}

.hero {
  padding-block: clamp(4.5rem, 12vh, 8.5rem) clamp(2.5rem, 6vh, 4rem);
}

.hero-inner {
  max-width: 46rem;
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  max-width: var(--measure);
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

.index {
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.index-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.index-list a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--rule);
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-decoration: none;
}

.index-list li:last-child a {
  border-bottom: 1px solid var(--rule);
}

.index-number {
  flex: 0 0 2.5rem;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.index-list a:hover .index-number {
  color: var(--ink);
}

.prose {
  padding-block: clamp(4rem, 12vh, 8rem);
}

.prose h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.5rem;
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem 2rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.footer-name {
  color: var(--ink);
}

.social-links { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-muted); }
.social-link:hover { color: var(--ink); }
.social-link svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.social-link .social-icon-dot, .social-link .social-icon-fill { fill: currentColor; stroke: none; }

.button,
button,
input,
textarea,
select {
  font: inherit;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--ink);
  color: var(--paper);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-field label {
  font-size: 0.95rem;
}

input,
textarea,
select {
  width: 100%;
  max-width: 36rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-raised);
  color: var(--ink);
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-error {
  color: #6d2e24;
  font-size: 0.95rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem 1.5rem;
}

.brand-logo { width: auto; height: auto; max-width: min(220px, 65vw); max-height: 80px; object-fit: contain; }
.site-header .brand-logo { max-width: min(280px, 70vw); max-height: 105px; }
.admin-logo { max-width: min(320px, 100%); max-height: 160px; object-fit: contain; margin-block: 1.5rem; }
.category-section { padding-block: 2rem; border-bottom: 1px solid var(--rule); }
.category-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1rem; }
.category-links a { display: inline-flex; align-items: center; min-height: 44px; }
.category-list { padding: 0; list-style: none; margin-block: 2rem; }
.category-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.category-list h2 { font-size: 1.5rem; }

.demo-notice { padding-block: .8rem; font-size: .82rem; color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
.preview-notice { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.preview-notice .text-link { margin: 0; }
.admin-shell { padding-block: 1.5rem 5rem; }
.admin-shell h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.admin-shell h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding-bottom: 1.2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
.admin-nav a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: .2rem; }
.admin-nav form { margin-left: auto; }
.login-panel { max-width: 38rem; padding-block: 4rem 6rem; }
.login-panel h1 { font-size: clamp(3rem, 6vw, 4.5rem); }
.login-form { margin-top: 2.5rem; }
.admin-error, .form-success { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--rule); background: var(--paper-raised); }
.admin-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-block: 1rem 3rem; }
.admin-counts div { padding: 1rem; border: 1px solid var(--rule); }
.admin-counts strong { font-family: var(--serif); font-size: 2.5rem; font-weight: 400; display: block; }
.admin-counts span { font-size: .85rem; }
.admin-work-list { padding: 0; list-style: none; margin-block: 1.5rem 3rem; }
.admin-work-list a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); text-decoration: none; min-height: 44px; }
.admin-work-title { display: flex; align-items: center; gap: 1rem; }
.admin-work-title img { width: 64px; height: 80px; object-fit: contain; background: var(--paper-raised); }
.sortable-work-list li { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--rule); }
.sortable-work-list a { flex: 1; min-width: 0; border: 0; }
.order-handle { background: none; border: 1px solid var(--rule); color: var(--ink-muted); min-width: 44px; min-height: 44px; font-size: 1.5rem; cursor: grab; }
.order-handle[hidden] { display: none; }
.order-buttons { display: flex; gap: .25rem; }
.order-buttons .button { min-width: 44px; padding-inline: .5rem; }
.order-buttons svg { display: block; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.order-buttons button:disabled { opacity: .35; cursor: default; }
.sortable-work-list .is-dragging { opacity: .5; background: var(--paper-raised); }
.order-status { color: var(--ink-muted); }
@media (max-width: 40rem) {
  .sortable-work-list li { gap: .4rem; }
  .sortable-work-list .admin-work-title { gap: .5rem; }
  .sortable-work-list .admin-work-title img { width: 40px; height: 50px; }
  .order-buttons { flex-direction: column; }
}
.artwork-form, .presentation-form { max-width: 54rem; }
.artwork-form input, .artwork-form textarea, .artwork-form select, .presentation-form input, .presentation-form textarea, .presentation-form select { max-width: none; }
.editor-intro { margin-bottom: 2rem; }
.form-grid { display: grid; gap: 0 1.5rem; }
.editor-details { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--rule); }
summary { cursor: pointer; min-height: 44px; padding-block: .5rem; }
.editor-details .form-grid { padding-top: 1rem; }
.checkbox-field { display: flex; align-items: center; gap: .75rem; margin-block: 1.5rem; min-height: 44px; }
.checkbox-field input { width: 1.2rem; height: 1.2rem; margin: 0; }
.category-choices { border: 0; margin: 0 0 1.1rem; padding: 0; }
.category-choices legend { font-size: .95rem; margin-bottom: .4rem; padding: 0; }
.category-choices .checkbox-field { margin-block: 0; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-block: 1.5rem; }
.action-row .text-link { margin: 0; }
.image-editor { border-top: 1px solid var(--rule); padding-top: 2rem; margin-top: 3rem; }
.upload-form { margin-block: 1.5rem 2.5rem; padding: 1.25rem; background: var(--paper-raised); border: 1px solid var(--rule); max-width: 54rem; }
.artwork-form > .upload-form { margin-top: 0; }
.admin-image-grid { display: grid; gap: 2rem; }
.admin-image-card { padding: 1.25rem; border: 1px solid var(--rule); }
.admin-image-card > img { width: 100%; height: 260px; object-fit: contain; margin-bottom: 1.5rem; }
.admin-image-card textarea { min-height: 5rem; }
.admin-image-card .eyebrow { margin-top: 1rem; }
.image-actions { gap: .5rem; }
.image-actions button { font-size: .82rem; }
.danger-link { color: #6d2e24; }
.admin-portrait { max-height: 300px; margin-block: 1.5rem; }
.confirm-panel { max-width: 42rem; }
@media (min-width: 700px) {
  .form-grid, .admin-image-grid { grid-template-columns: 1fr 1fr; }
}

.preserve-lines { white-space: pre-line; }
.hero-composition { display: grid; gap: 3rem; align-items: center; }
.hero-copy { max-width: 40rem; }
.hero-statement { font-style: italic; }
.hero-with-art { padding-block: clamp(2rem, 5vw, 5rem) 5rem; }
.hero-art, .work-images figure { margin: 0; }
.hero-art img { width: 100%; max-height: 650px; object-fit: contain; }
figcaption { margin-top: .75rem; color: var(--ink-muted); font-size: .85rem; }
.text-link { gap: .75rem; text-underline-offset: .25rem; }
.collection-section, .artist-section, .contact-strip { padding-block: 3.5rem 5rem; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-heading h2, .artist-section h2, .contact-strip h2 { font-size: clamp(2rem, 4vw, 3rem); }
.section-heading .text-link { margin-top: 0; }
.artwork-card a { display: block; text-decoration: none; }
.artwork-card-image { background: #eae5db; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: 1.5rem; }
.artwork-card-image img { width: 100%; height: 100%; object-fit: contain; }
.artwork-card-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: 1rem; }
.artwork-card h3 { font-size: 1.55rem; margin: 0 0 .4rem; }
.artwork-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2rem; }
.work-caption { font-size: .9rem; color: var(--ink-muted); }
.work-status { margin-top: .65rem; font-size: .8rem; letter-spacing: .06em; }
.artist-section { display: grid; gap: 2.5rem; border-top: 1px solid var(--rule); }
.artist-portrait { max-height: 480px; object-fit: contain; }
.contact-strip { border-top: 1px solid var(--rule); }
.catalog { padding-block: 3rem 6rem; }
.catalog-heading { max-width: 44rem; margin-bottom: 2rem; }
.gallery-filters { margin-bottom: 3rem; border-block: 1px solid var(--rule); }
.gallery-filters summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; font-family: var(--serif); font-size: 1.35rem; list-style: none; }
.gallery-filters summary::-webkit-details-marker { display: none; }
.gallery-filters summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-.15rem); }
.gallery-filters[open] summary::after { transform: rotate(-135deg) translateY(-.1rem); }
.gallery-filter-current { font-family: var(--sans); font-size: .9rem; color: var(--ink-muted); }
.gallery-filters form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding-bottom: 1.5rem; }
.gallery-filters label { display: block; font-size: .85rem; margin-bottom: .4rem; }
.gallery-filters select { min-width: 12rem; }
.gallery-filters .text-link { margin: 0; }
.empty-state { padding-block: 4rem; color: var(--ink-muted); }
.image-placeholder { color: var(--ink-muted); font-size: .9rem; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; justify-content: center; margin-top: 3rem; }
.pagination .text-link { margin: 0; }
.work-detail { padding-block: 1.5rem 5rem; }
.back-link { margin: 0 0 2rem; }
.work-layout { display: grid; gap: 2.5rem; }
.work-images { display: grid; gap: 2rem; align-content: start; }
.work-images img { width: 100%; max-height: 850px; object-fit: contain; }
.work-info h1 { font-size: clamp(2.5rem, 4vw, 4rem); overflow-wrap: anywhere; }
.work-description { margin-top: 2rem; }
.details-heading { margin-top: 2.5rem; }
.work-facts { margin: 0; }
.work-facts div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--rule); }
.work-facts dt { color: var(--ink-muted); font-size: .85rem; }
.work-facts dd { margin: 0; font-size: .95rem; }
.work-purchase { margin-top: 2rem; padding-top: 1.5rem; }
.work-price { margin-bottom: 1rem; font-size: 1.2rem; }
.work-price span { display: block; font-size: .8rem; color: var(--ink-muted); margin-bottom: .25rem; }
.work-purchase .button { margin-top: 1.25rem; }
.detail-placeholder { min-height: 400px; display: grid; place-items: center; background: #eae5db; }

@media (min-width: 900px) {
  .hero-with-art .hero-composition { grid-template-columns: 1fr 1.2fr; gap: 4rem; }
  .hero-with-art h1 { font-size: clamp(3rem, 4vw, 4.7rem); }
  .artist-section:has(.artist-portrait) { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
  .work-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; }
}

@media (max-width: 699px) {
  .header-inner {
    align-items: flex-start;
    gap: 0.15rem 1rem;
    padding-block: 0.85rem 0.35rem;
  }

  .nav-list {
    gap: 0 0.85rem;
    font-size: 0.95rem;
  }
}

@media (min-width: 700px) {
  .shell {
    width: min(var(--page), calc(100% - 4rem));
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .site-header .brand-logo {
    max-width: 350px;
    max-height: 130px;
    position: relative;
    z-index: 1;
    transform: translateY(1rem);
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.account-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; }
.login-panel h2 { margin-top: 2.5rem; }

.correspondence-panel { padding-block: 3rem; max-width: 52rem; }
.inquiry-list, .message-list { list-style: none; padding: 0; margin-block: 2rem; }
.inquiry-list li { border-block-end: 1px solid var(--rule); }
.inquiry-list a { display: grid; gap: .35rem; padding: 1.25rem .5rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.inquiry-list a:hover { background: var(--paper-raised); }
.message-card { padding: 1.5rem; margin-block: 1rem; border: 1px solid var(--rule); background: var(--paper-raised); overflow-wrap: anywhere; }
.artist-message { border-inline-start: 4px solid var(--ink-muted); }
.message-meta { display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; font-size: .9rem; }
.unread-label { font-weight: 700; }
.correspondence-panel textarea { width: 100%; resize: vertical; }

.support-table-scroll { overflow-x: auto; margin-block: 1.5rem; }
.support-table-scroll th, .support-table-scroll td { padding: .6rem; text-align: left; vertical-align: top; }

.support-nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }