/* ==========================================================================
   Art store — gallery-wall theme
   Plaster wall, matted frames, museum wall labels, red dots for sold work.
   ========================================================================== */

/* Self-hosted fonts (SIL Open Font License — see /fonts/LICENSE-*.txt) */
@font-face { font-family: 'Young Serif'; src: url('/fonts/young-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --wall: #ffb6c1;             /* flamingo pink */
  --mat: #fff7f8;              /* blush white mat board */
  --ink: #10292b;              /* deep teal-black: headings and body text */
  --ink-soft: #5b3a4a;         /* muted plum: captions, dates, labels */
  --rule: #e8909f;             /* deeper pink hairlines */
  --ultramarine: #0a5d59;      /* teal: links and buttons */
  --ultramarine-deep: #064542; /* teal hover */
  --red-dot: #a3122b;          /* crimson sold dot, reads as red on pink */

  --font-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (perfect fourth) */
  --step--1: 0.84rem;
  --step-0: 1.0625rem;
  --step-1: 1.33rem;
  --step-2: 1.77rem;
  --step-3: 2.36rem;
  --step-4: 3.15rem;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --frame-shadow: 0 14px 22px -16px rgb(90 30 50 / 0.45), 0 2px 4px -2px rgb(30 42 40 / 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 var(--step-0) / 1.55 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

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

a { color: var(--ultramarine); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ultramarine-deep); text-decoration-thickness: 2px; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

cite { font-style: italic; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ink); color: var(--mat); padding: 0.5em 1em; z-index: 10;
}
.skip-link:focus { top: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: 2.5rem 4rem; }
.wrap-narrow { max-width: 44rem; }
.wrap-medium { max-width: 60rem; }

/* ---------------------------------------------------------------- header */

site-header { display: block; }

.header-inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.4rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

site-header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
site-header nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
site-header nav a:hover { border-bottom-color: var(--rule); }
site-header nav a[aria-current="page"] { border-bottom-color: var(--ultramarine); }
.cart-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */

site-footer { display: block; margin-top: 2rem; }
.footer-inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.footer-inner p { margin: 0; }
.footer-links { display: flex; gap: 1.25rem; }

/* ---------------------------------------------------------- frames & labels */

.frame {
  display: block;
  background: var(--mat);
  padding: clamp(10px, 4%, 22px);
  border: 1px solid #f2d3d9;
  outline: 3px solid var(--ink);   /* thin black frame moulding */
  outline-offset: 0;
  box-shadow: var(--frame-shadow);
  margin: 3px;                     /* room for the outline */
}
.frame img { width: 100%; height: auto; }

.no-image {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  color: var(--ink-soft);
  font-size: var(--step--1);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(30 42 40 / 0.04) 10px 11px);
}

.wall-label {
  margin-top: 1.1rem;
  font-size: var(--step--1);
  line-height: 1.45;
  max-width: 28ch;
}
.wall-label p { margin: 0; color: var(--ink-soft); }
.label-title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  margin: 0 0 0.15rem;
  line-height: 1.3;
}
.label-title a { color: var(--ink); text-decoration: none; }
.label-title a:hover { color: var(--ultramarine); text-decoration: underline; }
.label-price { margin-top: 0.35rem !important; color: var(--ink) !important; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.45rem; }
.status { color: var(--ink-soft); }

.red-dot {
  display: inline-block;
  width: 0.8em; height: 0.8em;
  border-radius: 50%;
  background: var(--red-dot);
  box-shadow: inset 0 -1px 1px rgb(0 0 0 / 0.2);
}

art-card { display: block; }
art-card .frame { transition: transform 0.25s ease; }
art-card:hover .frame { transform: translateY(-2px); }
art-card.is-sold .frame img { filter: saturate(0.85); }

/* ---------------------------------------------------------------- home */

.hero {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
}

.intro { display: block; max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.intro h1 { font-size: clamp(var(--step-3), 6vw, var(--step-4)); margin-bottom: 0.3em; }
.intro p { font-size: var(--step-1); color: var(--ink-soft); margin: 0; line-height: 1.4; }

/* Salon hang: pieces at different sizes, centred on a shared line */
art-gallery.salon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
}
art-gallery.salon art-card { --h: 230px; flex: 0 0 auto; max-width: 100%; }
art-gallery.salon art-card[data-size="s"] { --h: 170px; }
art-gallery.salon art-card[data-size="l"] { --h: 310px; }
art-gallery.salon .frame { width: fit-content; }
art-gallery.salon .frame img { height: var(--h); width: auto; max-width: min(78vw, 520px); object-fit: contain; }
art-gallery.salon .no-image { height: var(--h); }
art-gallery.salon .wall-label { margin-top: 0.8rem; }

.home-section {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: 3rem 1rem;
}
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.section-head h2 { margin-bottom: 0.4em; }

/* Category list on home: a placard-like index */
.category-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 2rem; }
.category-list li a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: var(--step-1);
}
.category-list li a:hover { color: var(--ultramarine); }
.category-list .count { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-soft); }
.category-list li:first-child { display: none; } /* "All work" is the section link */

/* ---------------------------------------------------------------- shop */

.page-head { margin-bottom: 2rem; }
.page-head p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.4; max-width: 38rem; }

.category-tabs { display: block; margin-bottom: 2.5rem; }
.category-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; border-bottom: 1px solid var(--rule); }
.category-tabs a {
  display: inline-block; padding: 0.5rem 0; margin-bottom: -1px;
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.category-tabs a:hover { border-bottom-color: var(--ink-soft); }
.category-tabs a[aria-current="page"] { border-bottom-color: var(--ultramarine); }
.category-tabs .count { color: var(--ink-soft); font-weight: 400; font-size: var(--step--1); }
.category-description { color: var(--ink-soft); max-width: 40rem; margin: 1rem 0 0; }

art-gallery.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 3.5rem clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
art-gallery.grid .frame img { max-height: 380px; object-fit: contain; }

.empty, .error, .notice { color: var(--ink-soft); }
.error { color: var(--red-dot); }
.notice { background: var(--mat); border-left: 3px solid var(--ultramarine); padding: 0.75rem 1rem; color: var(--ink); }
art-gallery[aria-busy="true"], cart-view:empty, post-list:empty, artwork-detail:empty { min-height: 40vh; display: block; }

/* ---------------------------------------------------------------- artwork */

.artwork-layout { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .artwork-layout { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: 4.5rem; align-items: start; }
  .artwork-info { position: sticky; top: 2rem; }
}

.frame-large { cursor: zoom-in; width: calc(100% - 6px); font: inherit; }
.frame-large img { max-height: 78vh; object-fit: contain; margin-inline: auto; }

.thumbs { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.thumbs button { padding: 4px; background: var(--mat); border: 1px solid var(--rule); cursor: pointer; }
.thumbs button[aria-current="true"] { border-color: var(--ink); outline: 1px solid var(--ink); }
.thumbs img { width: 72px; height: 72px; object-fit: cover; }

.artwork-info .wall-label { margin-top: 0; max-width: none; font-size: var(--step-0); }
.artwork-info .label-title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); margin-bottom: 0.6rem; }
.artwork-info .label-title cite { font-style: normal; }
.artwork-info .label-price { font-size: var(--step-1); margin-top: 1rem !important; }

.buy { margin: 1.75rem 0 2rem; display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem; }
.buy label { display: grid; gap: 0.25rem; font-size: var(--step--1); color: var(--ink-soft); }
.buy input { width: 5rem; }
.buy-feedback, .stock { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.buy-feedback:empty { display: none; }
.buy-note { margin: 1.75rem 0 2rem; color: var(--ink-soft); }
.back-link { margin-top: 2rem; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgb(16 41 43 / 0.92); }
.lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
.lightbox form { text-align: right; }
.lightbox-close { background: none; border: 0; color: #fff; font: inherit; padding: 0.5rem 0; cursor: pointer; text-decoration: underline; }

/* ---------------------------------------------------------------- forms */

.button {
  display: inline-block;
  font: 600 var(--step-0) / 1 var(--font-body);
  background: var(--ultramarine);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 0.95em 1.6em;
  cursor: pointer;
  text-decoration: none;
}
.button:hover { background: var(--ultramarine-deep); color: #fff; }
.button:disabled { background: var(--rule); color: var(--ink-soft); cursor: default; }

input, textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--mat);
  border: 1px solid #d98a99;
  border-radius: 2px;
  padding: 0.55em 0.7em;
}

.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--ultramarine); text-decoration: underline; cursor: pointer; font-size: var(--step--1); }

/* ---------------------------------------------------------------- cart */

.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  grid-template-areas: "img info price" "img qty qty";
  gap: 0.5rem 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 640px) {
  .cart-line { grid-template-columns: 100px 1fr auto auto; grid-template-areas: "img info qty price"; align-items: center; }
}
.frame-small { grid-area: img; padding: 6px; outline-width: 2px; }
.cart-line-info { grid-area: info; }
.cart-line-info a { color: var(--ink); font-weight: 600; text-decoration: none; }
.cart-line-info p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.cart-line-qty { grid-area: qty; display: flex; align-items: center; gap: 1rem; font-size: var(--step--1); }
.cart-line-qty input { width: 4.5rem; margin-left: 0.35rem; }
.cart-line-price { grid-area: price; margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.cart-summary { margin-top: 2rem; margin-left: auto; max-width: 24rem; text-align: right; }
.subtotal { display: flex; justify-content: space-between; font-size: var(--step-1); margin: 0; }
.shipping-note { color: var(--ink-soft); font-size: var(--step--1); margin: 0.25rem 0 1.5rem; }
.checkout-error:empty { display: none; }

.order-items { padding-left: 1.2rem; }

/* ---------------------------------------------------------------- blog */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-summary { padding-block: 1.6rem; border-bottom: 1px solid var(--rule); display: grid; gap: 1.25rem; }
.post-list li:first-child .post-summary { padding-top: 0.25rem; }
@media (min-width: 640px) {
  .post-summary.has-cover { grid-template-columns: 9rem 1fr; align-items: start; }
}
.post-cover-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--mat); box-shadow: var(--frame-shadow); }
.post-summary time, .post-header time { color: var(--ink-soft); font-size: var(--step--1); }
.post-summary h3 { margin: 0.2rem 0 0.35rem; }
.post-summary h3 a { color: var(--ink); text-decoration: none; }
.post-summary h3 a:hover { color: var(--ultramarine); text-decoration: underline; }
.post-summary p { margin: 0; color: var(--ink-soft); }
.filter-note { color: var(--ink-soft); }

.post-header { margin-bottom: 2rem; }
.post-header h1 { margin-top: 0.3rem; font-size: clamp(var(--step-2), 5vw, var(--step-3)); }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--step--1); }
.post-cover { width: 100%; margin-bottom: 2.5rem; border: 12px solid var(--mat); box-shadow: var(--frame-shadow); }

.prose { font-size: 1.125rem; line-height: 1.65; max-width: 38rem; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; margin-bottom: 0; }
.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); }
.prose h4 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; }
.prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 3px solid var(--ultramarine); color: var(--ink-soft); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; }
.prose figure { margin-inline: 0; }
.prose figure img, .prose p > img { border: 10px solid var(--mat); box-shadow: var(--frame-shadow); }
.prose figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.75rem; }
.prose code { font-size: 0.9em; background: var(--mat); padding: 0.1em 0.3em; }
.prose pre { background: var(--mat); padding: 1rem; overflow-x: auto; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5rem; }
.contact { margin-top: 2rem; }

/* ---------------------------------------------------------------- socials */

.social-links { margin-top: 2rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: baseline; }
.page-intro { display: block; }
.page-intro .prose { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 40rem; }
.button-outline { background: transparent; color: var(--ultramarine); box-shadow: inset 0 0 0 1.5px currentColor; }
.button-outline:hover { background: var(--ultramarine); color: #fff; }

/* ---------------------------------------------------------------- services */

.service-jump ul { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; border-bottom: 1px solid var(--rule); }
.service-jump a { display: inline-block; padding: 0.5rem 0; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.service-jump a:hover { border-bottom-color: var(--ultramarine); }

.service-group { margin-bottom: 3.5rem; scroll-margin-top: 1.5rem; }
.service-group h2 { margin-bottom: 0.3em; }
.service-group-description { color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 40rem; }

.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.75rem; }
.service {
  background: var(--mat);
  border-top: 3px solid var(--ink);
  box-shadow: var(--frame-shadow);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 1.5rem;
}
.service:target { outline: 2px solid var(--ultramarine); outline-offset: 4px; }
.service-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.service-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.service h3 { margin: 0; }
.service-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--ink-soft); font-size: var(--step--1); }
.service-meta strong { color: var(--ink); font-size: var(--step-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.service-summary { margin: 0; font-weight: 500; }
.service-description { font-size: var(--step-0); line-height: 1.6; }
.service-description > * + * { margin-top: 0.75em; }
.service-action { margin-top: auto; padding-top: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.service-action .buy-feedback { flex-basis: 100%; }

/* Compact list on the home page */
.service-index { list-style: none; margin: 0; padding: 0; }
.service-index li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.service-index a { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.service-index a:hover { color: var(--ultramarine); text-decoration: underline; }
.service-index-meta { grid-row: 2; color: var(--ink-soft); font-size: var(--step--1); }
.service-index-price { grid-row: 1 / span 2; grid-column: 2; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- hoop dance */

media-gallery.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 3rem clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
.media-item { margin: 0; }
.media-item .wall-label { max-width: none; }
.media-item .label-title { margin-bottom: 0.2rem; }
.media-photo { cursor: zoom-in; width: calc(100% - 6px); font: inherit; }
.media-photo img { max-height: 420px; object-fit: contain; margin-inline: auto; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 6px solid var(--ink);
  box-shadow: var(--frame-shadow);
}
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--ink); color: #fff; font: inherit;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.play-badge {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--ultramarine);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}
.play-badge::after {
  content: ''; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  width: 22px; height: 26px; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video-facade:hover .play-badge, .video-facade:focus-visible .play-badge { background: var(--ultramarine-deep); }
.video-provider { position: absolute; left: 0.75rem; bottom: 0.6rem; font-size: var(--step--1); background: rgb(16 41 43 / 0.75); padding: 0.15rem 0.5rem; }

.cart-line-tag {
  grid-area: img; align-self: center; justify-self: start;
  font-size: var(--step--1); color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 0.3rem 0.7rem; border-radius: 99px;
}

/* ---------------------------------------------------------------- 404 */

.frame-empty { width: 180px; height: 220px; margin-bottom: 2.5rem; background: var(--wall); box-shadow: inset 0 0 0 1px var(--rule); outline-style: dashed; outline-color: var(--ink-soft); }

/* ---------------------------------------------------------------- motion */

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

@media (max-width: 520px) {
  art-gallery.salon art-card { --h: 180px; }
  art-gallery.salon art-card[data-size="s"] { --h: 140px; }
  art-gallery.salon art-card[data-size="l"] { --h: 240px; }
  .header-inner { flex-direction: column; align-items: flex-start; }
}