/* =========================================================================
   gomi2d — styles.css
   Static MVP. Organised as: TOKENS / BASE / LAYOUT / COMPONENTS /
   SECTIONS / UTILITIES. Class naming: BEM.
   WP portability note: the COMPONENTS blocks are candidates for partials.
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* Palette
     The background family was re-tuned to a warmer, more saturated wine
     (sampled from the artist's colour reference: #4e0f24 / #6a0f2e).
     The pink accents are deliberately UNCHANGED — she approved them as-is. */
  --color-bg: #4e0f24;          /* warm saturated wine, base */
  --color-bg-alt: #5e1630;      /* panel/card, slightly lighter */
  --color-bg-deep: #3a0a1a;     /* footer / recessed areas / inputs */
  --color-black: #14101299;     /* semi-transparent gothic black (overlays) */
  --color-black-solid: #141012;
  --color-cream: #f7ede0;       /* body text on dark background */
  --color-cream-muted: #d8c7cb; /* secondary text (AA on --color-bg) */
  --color-pink: #ff9fc7;        /* accents / CTA */
  --color-pink-muted: #d97fa3;  /* hover / secondary */
  --color-border: #7d2a45;      /* subtle, decorative separators */
  --color-border-strong: #b05a76; /* form/UI control boundaries (>=3:1, WCAG 1.4.11) */

  /* Status */
  --color-open: #9fe6c1;        /* open / available */
  --color-closed: #e6a1a1;      /* closed / sold */
  --color-wait: #e8d59a;        /* waitlist */

  /* Typography */
  --font-heading: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Shapes */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 6px 24px rgba(20, 16, 18, 0.45);
  --shadow-lift: 0 12px 34px rgba(20, 16, 18, 0.6);

  --header-h: 64px;
  --container: 1200px;
  /* How far the Home bio panel rides up over the banner image. Requested as
     "0.3-0.4 cm on a desktop screen" — just a lip, not a real overlap. The
     shortcut links do NOT overlap at all (see 5.1). */
  --banner-overlap: 0.35cm;
  --transition: 180ms ease;

  /* Vertical-stripe pattern (replaces the old lace/circles motif).
     A translucent warm overlay rather than two hard-coded wines, so it keeps
     working if --color-bg is retuned again. Kept inside the 5-10% opacity
     band from CLAUDE.md, and used ONLY as a section background — never
     behind long blocks of body text. */
  /* Stripe width. Requested as "about 1 cm wide on an average desktop
     screen", so it is written in cm on purpose: CSS treats 1cm as a fixed
     37.8px, which is exactly the intent. The period is twice this. */
  --stripe-w: 1cm;
  --stripe-tint: rgba(255, 120, 160, 0.09);
  --stripe-pattern: repeating-linear-gradient(
    90deg,
    var(--stripe-tint) 0 var(--stripe-w),
    transparent var(--stripe-w) calc(var(--stripe-w) * 2)
  );
  /* The stripes fade out towards the bottom of their section ("manteniendo
     el degradado en la parte inferior"). Applied as a mask so the fade
     follows the pattern, not the section's own background colour. */
  --stripe-fade: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* =========================================================================
   2. BASE
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.25rem, 7vw, var(--fs-3xl)); }
h2 { font-size: clamp(1.75rem, 5vw, var(--fs-2xl)); }
h3 { font-size: clamp(1.25rem, 3.5vw, var(--fs-xl)); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-pink);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover,
a:focus-visible { color: var(--color-cream); text-decoration: underline; }

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

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2xs); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Visible, consistent focus ring on EVERY interactive element (a11y) */
:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-pink); color: var(--color-black-solid); }

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

/* =========================================================================
   3. LAYOUT
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-xl);
}

.section--alt { background-color: var(--color-bg-alt); }

/* Vertical stripes, fading out at the bottom of the section.
   The pattern lives on a ::before layer so the mask that fades it cannot
   also fade the section's contents. */
.section--stripes {
  position: relative;
  isolation: isolate;
}
.section--stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--stripe-pattern);
  -webkit-mask-image: var(--stripe-fade);
  mask-image: var(--stripe-fade);
  pointer-events: none;
}

.section__header {
  margin-bottom: var(--space-lg);
  max-width: 65ch;
}

.section__title { margin-bottom: var(--space-xs); }

.section__subtitle {
  color: var(--color-cream-muted);
  font-size: var(--fs-md);
  margin: 0;
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-bottom: var(--space-xs);
}

.stack > * + * { margin-top: var(--space-md); }

/* Skip to content (first tabbable element on every page) */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 200;
  background: var(--color-pink);
  color: var(--color-black-solid);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-xs); text-decoration: none; }

/* =========================================================================
   4. COMPONENTS
   ========================================================================= */

/* --- 4.1 Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.7em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary {
  background-color: var(--color-pink);
  color: var(--color-black-solid);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-pink-muted);
  color: var(--color-black-solid);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--color-pink);
  color: var(--color-pink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-pink);
  color: var(--color-black-solid);
}

.btn--block { width: 100%; }

/* Placeholder action: the destination does not exist yet, so it is rendered as
   a non-focusable <span> and styled as clearly inactive. Swap it for a real
   <a class="btn btn--primary"> once the URL is known. */
.btn.is-disabled {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-cream-muted);
  cursor: not-allowed;
}
.btn.is-disabled:hover { transform: none; }

/* --- 4.2 Status badges ------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.8em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background-color: rgba(20, 16, 18, 0.55);
}
.badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
}
.badge--open { color: var(--color-open); }
.badge--closed { color: var(--color-closed); }
.badge--wait { color: var(--color-wait); }

/* --- 4.3 Pending-content marker ---------------------------------------- */
/* Any data the artist has not supplied yet is flagged here: never invent it. */
.pending {
  color: var(--color-wait);
  font-style: italic;
  font-size: 0.95em;
}

/* --- 4.4 Header + navigation ------------------------------------------- */

/* Inverted layout: navigation on the LEFT, name + logo on the RIGHT.
   DOM order is toggle → nav → logo, which gives "hamburger left / logo right"
   on mobile and "menu left / logo right" on desktop with the same rule. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(58, 10, 26, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

/* The wordmark uses the SAME typeface as the nav links (body sans, uppercase),
   not the display serif — requested change. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-logo:hover,
.site-logo:focus-visible { color: var(--color-pink); text-decoration: none; }
.site-logo__img { width: 38px; height: 38px; object-fit: contain; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-cream);
  transition: transform var(--transition), opacity var(--transition);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav__link {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-cream);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--color-pink); text-decoration: none; }

.nav__link[aria-current="page"] {
  color: var(--color-pink);
  box-shadow: inset 0 -2px 0 var(--color-pink);
}

/* Mobile-first: the menu stays collapsed up to 767px */
@media (max-width: 767px) {
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--color-bg-deep);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
    display: none;
  }
  .nav.is-open { display: block; }
}

@media (min-width: 768px) {
  .nav__toggle { display: none; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--space-sm); }
}

/* --- 4.5 Cards --------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-pink-muted);
  box-shadow: var(--shadow-lift);
}

.card__media {
  position: relative;
  margin: 0;
  background-color: var(--color-black-solid);
}
.card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.card__img--square { aspect-ratio: 1 / 1; }

.card__badge {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
}

.card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.card__title {
  font-size: var(--fs-md);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

.card__meta {
  font-size: var(--fs-sm);
  color: var(--color-cream-muted);
  margin: 0;
}

.card__price {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-pink);
  margin: 0;
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--color-cream-muted);
  margin: 0;
}

.card__footer { margin-top: auto; padding-top: var(--space-xs); }

/* Button covering the whole card (opens the modal). Keyboard accessible. */
.card__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: transparent;
  font-size: 0;
}
.card__trigger:focus-visible { outline-offset: -4px; }

/* --- 4.6 Grids --------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid > li { margin: 0; }

@media (min-width: 480px) {
  .grid--gallery,
  .grid--shop { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--gallery { grid-template-columns: repeat(3, 1fr); }
  .grid--shop { grid-template-columns: repeat(3, 1fr); }
  .grid--tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--gallery { grid-template-columns: repeat(4, 1fr); }
  .grid--tiers { grid-template-columns: repeat(3, 1fr); }
}

/* --- 4.7 Filters (portfolio) ------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: 0;
  list-style: none;
}
.filters__btn {
  padding: 0.45em 1.2em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: transparent;
  color: var(--color-cream-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.filters__btn:hover { color: var(--color-cream); border-color: var(--color-pink-muted); }
.filters__btn[aria-pressed="true"] {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-black-solid);
  font-weight: 600;
}

/* A declared category with no items left is hidden rather than showing a
   button that filters to nothing (main.js > initFilters). Both rules are
   explicit because `.filters { display: flex }` would otherwise beat the
   user-agent [hidden] rule. */
.filters[hidden],
.filters__btn[hidden] { display: none; }

.gallery__item.is-hidden { display: none; }

/* Sub-category headings inside a filtered grid (commissions.html).
   They only make sense while "All" is selected — main.js > initFilters hides
   them for every other filter, and hides one whose group has no items. */
.gallery__group {
  grid-column: 1 / -1;
  margin: 0;
}
.gallery__group.is-hidden { display: none; }

.gallery__group-title {
  margin: 0;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xl);
  color: var(--color-cream);
}
.gallery__group:not(:first-child) .gallery__group-title { margin-top: var(--space-lg); }

.gallery__empty {
  color: var(--color-cream-muted);
  font-style: italic;
  padding: var(--space-lg) 0;
}

/* --- 4.8 Modal / Lightbox ---------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(20, 16, 18, 0.88);
}
.modal.is-open { display: flex; }

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-lg);
}

.modal__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black-solid);
  color: var(--color-cream);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.modal__close:hover { color: var(--color-pink); border-color: var(--color-pink); }

.modal__body {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .modal__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.modal__figure { margin: 0; }
.modal__img {
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background-color: var(--color-black-solid);
}
.modal__caption {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--color-cream-muted);
}

.modal__title { margin-bottom: var(--space-xs); padding-right: 3rem; }
.modal__meta { color: var(--color-cream-muted); font-size: var(--fs-sm); }
.modal__price { color: var(--color-pink); font-size: var(--fs-lg); font-weight: 600; }

.modal__nav {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.modal__nav-btn {
  flex: 1;
  padding: 0.6em 1em;
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.modal__nav-btn:hover { border-color: var(--color-pink); color: var(--color-pink); }
.modal__nav[hidden] { display: none; }

/* Thumbnail strip: used by the commission item gallery, where one item has
   several sample images. Filled in by main.js from the item's data-images. */
.modal__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}
.modal__thumbs[hidden] { display: none; }
.modal__thumbs li { margin: 0; }

.modal__thumb {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--color-black-solid);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--transition), border-color var(--transition);
}
.modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal__thumb:hover { opacity: 1; border-color: var(--color-pink-muted); }
.modal__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-pink);
  box-shadow: 0 0 0 1px var(--color-pink);
}

/* --- 4.9 Form ---------------------------------------------------------- */
/* CURRENTLY UNUSED: the commission request form was removed from
   commissions.html at the artist's request (contact is by DM only). The
   component is kept because the WordPress phase may bring a form back, and
   because there is no version control here to recover it from. Delete this
   whole block if the site is confirmed to stay form-free. */

.form { max-width: 720px; }

.form__row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__field { margin-bottom: var(--space-md); }

.form__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.form__required { color: var(--color-pink); }

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  background-color: var(--color-bg-deep);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--transition);
}
.form__input::placeholder,
.form__textarea::placeholder { color: #a08b92; }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-pink);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 159, 199, 0.28);
}

.form__textarea { min-height: 150px; resize: vertical; }

.form__hint {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--color-cream-muted);
}

.form__error {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--color-closed);
  font-weight: 600;
}
.form__error:empty { display: none; }

.form__field.has-error .form__input,
.form__field.has-error .form__select,
.form__field.has-error .form__textarea { border-color: var(--color-closed); }

.form__status {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-deep);
  font-size: var(--fs-sm);
}
.form__status[hidden] { display: none; }
.form__status--ok { border-color: var(--color-open); color: var(--color-open); }
.form__status--error { border-color: var(--color-closed); color: var(--color-closed); }

/* --- 4.10 Text panel (ToS, notes) -------------------------------------- */

.panel {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pink);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.panel__title { margin-bottom: var(--space-sm); }

/* --- 4.11 Footer ------------------------------------------------------- */

.site-footer {
  background-color: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-xl);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  margin-bottom: var(--space-xs);
}

.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: var(--space-2xs); }

.site-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  color: var(--color-cream-muted);
  font-size: var(--fs-xs);
}

/* =========================================================================
   5. SECTIONS
   ========================================================================= */

/* --- 5.1 Home banner --------------------------------------------------- */
/* Replaces the old profile-picture hero: a full-width customisable banner
   across the top of Home. The bio panel only laps over the bottom edge of the
   banner by --banner-overlap; the shortcut links sit entirely below the image
   and never cover it (requested change). */

.banner {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--space-xl);
}

.banner__media { margin: 0; }
.banner__img {
  width: 100%;
  height: clamp(200px, 38vw, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
  background-color: var(--color-bg-deep);
}

/* Stripes below the banner image, so the panel does not sit on flat colour */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--stripe-pattern);
  -webkit-mask-image: var(--stripe-fade);
  mask-image: var(--stripe-fade);
  pointer-events: none;
}

/* The row itself starts where the banner image ends, so nothing in it covers
   the artwork by default. Only the bio panel is pulled up, by its own margin
   (see .banner__panel) — the shortcut links stay clear of the image. */
.banner__overlay {
  position: relative;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 768px) {
  .banner__overlay {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl);
  }
}

/* Opaque surface: the bio is a long text block, so it never sits directly
   on the banner image or on the stripe pattern. The negative margin is the
   whole overlap — keep it small, the banner is meant to stay visible. */
.banner__panel {
  margin-top: calc(-1 * var(--banner-overlap));
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lift);
  max-width: 60ch;
}

.banner__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}
@media (min-width: 768px) {
  .banner__links { align-items: flex-end; }
  .banner__links .btn { min-width: 15rem; }
}

/* --- 5.2 About --------------------------------------------------------- */
/* The bio is the Home page's primary content. Per the change request it has
   no "About me" label: it is plain customisable text inside the panel. */

.about__bio { max-width: 60ch; font-size: var(--fs-md); }

/* --- 5.3 CTA ----------------------------------------------------------- */

.cta {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-pink-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.cta__title { margin-bottom: 0; }
.cta__text { color: var(--color-cream-muted); max-width: 52ch; }

/* --- 5.4 Commissions: tier details ------------------------------------- */
/* Commission tiers are no longer split into per-group sections: all seven
   live in one filterable grid, same pattern as the portfolio gallery. */

.tier__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-cream-muted);
}
.tier__list li { padding-left: 1.1em; position: relative; }
.tier__list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--color-pink-muted);
  font-size: 0.8em;
}

/* --- 5.5 Shop ---------------------------------------------------------- */

.item-detail__list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  font-size: var(--fs-sm);
}
.item-detail__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.item-detail__label { color: var(--color-cream-muted); }

/* --- 5.6 Contact: direct-message channels ------------------------------ */
/* Contact is its own page now. These are the routes the artist actually
   answers on (Discord, Instagram DM, Twitter/X DM) — not an inbox. */

.channels {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .channels { grid-template-columns: repeat(3, 1fr); }
}
.channels > li { margin: 0; }

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition);
}
.channel:hover,
.channel:focus-within {
  transform: translateY(-3px);
  border-color: var(--color-pink-muted);
}

.channel__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
}
.channel__handle { font-size: var(--fs-sm); margin: 0; word-break: break-word; }
.channel__note {
  font-size: var(--fs-xs);
  color: var(--color-cream-muted);
  margin: 0;
}
.channel__action { margin-top: auto; padding-top: var(--space-sm); }

/* =========================================================================
   6. UTILITIES
   ========================================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-cream-muted); }
.text-xs { font-size: var(--fs-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-lg { margin-top: var(--space-lg); }
.mb-0 { margin-bottom: 0; }

/* Without JS the filter cannot work, so it is hidden rather than showing
   dead buttons. The full gallery stays visible. */
.no-js [data-filters] { display: none; }