/* ==========================================================================
   Kez Artistry — site.css
   Single stylesheet. No build step. Mobile-first; breakpoints at 640 / 1024.

   Contents
   01  Fonts (self-hosted)
   02  Tokens
   03  Reset & base
   04  Layout: container, sections, rhythm
   05  Typography
   06  Buttons & links
   07  Badges & chips
   08  Header, nav, drawer
   09  Footer
   10  Placeholders (temporary — see PLACEHOLDERS.md)
   11  Utilities
   ========================================================================== */


/* 01  FONTS ================================================================
   Self-hosted, latin subset, only the weights the design uses.
   Fraunces  300–600, opsz 9–144 (optical sizing left on `auto`)
   Mulish    400–700
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* 02  TOKENS ===============================================================
   Two colour families on purpose:

   --c-*        decorative. Fills, borders, dividers, large display text.
                These are the original design values, unchanged.
   --c-*-text   accessible siblings for small text on ivory. Approved
                2026-10-03. All ≥ 4.5:1 on --c-ivory.

   Never set small text in a decorative accent. Use the -text sibling.
   ------------------------------------------------------------------------ */

:root {
  /* --- surfaces --- */
  --c-ivory:          #FAF6EF;   /* page background */
  --c-cream:          #F1EADD;   /* alternating bands, image mats */
  --c-surface:        #FFFDF9;   /* cards lifted off the page */
  --c-rule:           #EAE1D0;   /* hairlines, header/footer borders */
  --c-rule-strong:    #E0D6C3;   /* footer baseline rule */

  /* --- ink --- */
  --c-charcoal:       #3B3833;   /* headings, primary text      10.83:1 */
  --c-taupe:          #6B6153;   /* body copy                    5.63:1 */

  /* --- decorative accents (NOT for small text) --- */
  --c-sage:           #97A489;   /* Original / Mini badge        2.44:1 */
  --c-dusty:          #9DB2BD;   /* Print badge                  2.04:1 */
  --c-clay:           #CDB49C;   /* Wood-Slice / Commissioned    1.84:1 */
  --c-gold:           #B4986A;   /* hairline accents, hover      2.55:1 */
  --c-blush:          #E0CCC6;
  --c-muted:          #8A7F6E;   /* fine print                   3.65:1 */

  /* --- accessible text siblings ---
     Targeted against --c-cream, the darkest background these ever sit on
     (footer and alternating bands), so each one also clears ivory and
     surface. Ratios: cream / ivory. */
  --c-sage-text:      #616D54;   /* 4.59 / 5.10 */
  --c-dusty-text:     #526C7A;   /* 4.64 / 5.15 */
  --c-clay-text:      #846343;   /* 4.56 / 5.07 */
  --c-gold-text:      #7C643E;   /* 4.68 / 5.20 */
  --c-muted-text:     #71685A;   /* 4.58 / 5.09 */

  /* Large display type only (24px+, or 18.7px+ bold), where WCAG asks 3:1
     rather than 4.5:1. Keeps the soft decorative tone at poster sizes. */
  --c-clay-display:   #A67C54;   /* 3.12 / 3.46 */

  /* --- type families --- */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* --- type scale (mobile values; raised at 1024 below) --- */
  --fs-hero:        2.125rem;  /* 34 → 54 */
  --fs-page-title:  1.75rem;   /* 28 → 46 */
  --fs-section:     1.625rem;  /* 26 → 38 */
  --fs-card-title:  1rem;      /* 16 → 20 */
  --fs-wordmark:    1.125rem;  /* 18 → 22 */
  --fs-lead:        1rem;      /* 16 → 17 */
  --fs-body:        0.9375rem; /* 15 */
  --fs-small:       0.8125rem; /* 13 */
  --fs-xs:          0.75rem;   /* 12 */
  --fs-eyebrow:     0.625rem;  /* 10 → 11 */
  --fs-badge:       0.5625rem; /* 9  → 10 */

  --lh-hero:    1.15;
  --lh-tight:   1.25;
  --lh-body:    1.7;
  --lh-snug:    1.6;

  --ls-wordmark: 0.04em;
  --ls-nav:      0.12em;
  --ls-eyebrow:  0.20em;
  --ls-badge:    0.14em;
  --ls-button:   0.10em;

  /* --- layout --- */
  --container:  1280px;
  --measure:    760px;   /* legal / long-form pages */
  --gutter:     22px;    /* 40 @640, 64 @1024 */

  /* --- vertical rhythm --- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.75rem;
  --space-8:  3.5rem;
  --space-9:  4.5rem;
  --section-y: 3rem;     /* 72px @1024 */

  /* --- misc --- */
  --focus:      2px solid var(--c-charcoal);
  --focus-off:  3px;
  --drawer-w:   320px;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  :root {
    --gutter:    40px;
    --section-y: 4rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter:         64px;
    --section-y:      4.5rem;
    --fs-hero:        3.375rem;  /* 54 */
    --fs-page-title:  2.875rem;  /* 46 */
    --fs-section:     2.375rem;  /* 38 */
    --fs-card-title:  1.25rem;   /* 20 */
    --fs-wordmark:    1.375rem;  /* 22 */
    --fs-lead:        1.0625rem; /* 17 */
    --fs-eyebrow:     0.6875rem; /* 11 */
    --fs-badge:       0.625rem;  /* 10 */
    --ls-eyebrow:     0.22em;
  }
}


/* 03  RESET & BASE ========================================================= */

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

/* The hidden attribute only sets display:none in the UA stylesheet, so ANY
   author display rule (.btn is inline-flex, .drawer__social is flex) silently
   overrides it and the element shows anyway. Everything optional on this site
   ships hidden, so this one line is load-bearing: without it, unconfigured Buy
   buttons and empty social links appear on the live site with dead hrefs. */
[hidden] { display: none !important; }

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

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

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-charcoal);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

/* One visible focus treatment everywhere. Never remove it. */
:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-off);
  border-radius: 1px;
}

::selection {
  background: var(--c-blush);
  color: var(--c-charcoal);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--c-charcoal);
  color: var(--c-ivory);
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }


/* 04  LAYOUT =============================================================== */

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

/* Long-form pages: narrow measure, still inside the gutter. */
.container--measure { max-width: calc(var(--measure) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--cream { background: var(--c-cream); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

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

main:focus { outline: none; }


/* 05  TYPOGRAPHY =========================================================== */

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-sage-text);
  margin-bottom: var(--space-3);
}

.t-hero {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: var(--lh-hero);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.t-page-title {
  font-family: var(--ff-display);
  font-size: var(--fs-page-title);
  font-weight: 300;
  line-height: var(--lh-tight);
  text-wrap: pretty;
}

.t-section {
  font-family: var(--ff-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-wrap: pretty;
}

.t-card-title {
  font-family: var(--ff-display);
  font-size: var(--fs-card-title);
  font-weight: 500;
  line-height: 1.3;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--c-taupe);
  text-wrap: pretty;
}

.t-body { color: var(--c-taupe); }

.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--c-taupe);
}

.t-fine {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--c-muted-text);
}

.t-center { text-align: center; }

/* Long-form / legal pages. Rhythm taken from artboard 2f. */
.prose > h1 { margin-bottom: 2.5rem; }          /* 40 */
.prose > section + section { margin-top: 2rem; } /* 32 */
.prose h2 + p { margin-top: 0.875rem; }          /* 14 */
.prose p + p { margin-top: 0.625rem; }           /* 10 */


/* 06  BUTTONS & LINKS ====================================================== */

a {
  color: var(--c-taupe);
  text-decoration-color: var(--c-gold);
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--c-gold-text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease),
              border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}

.btn--primary {
  background: var(--c-charcoal);
  color: var(--c-ivory);
  border-color: var(--c-charcoal);
}
.btn--primary:hover {
  background: #2E2C28;
  border-color: #2E2C28;
  color: var(--c-ivory);
}

.btn--secondary {
  background: transparent;
  color: var(--c-charcoal);
  border-color: var(--c-clay);
}
.btn--secondary:hover {
  border-color: var(--c-gold-text);
  color: var(--c-gold-text);
}

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

/* External-link mark. The design draws ↗, which neither Fraunces nor Mulish
   contains — drawn as SVG so it never falls back to a system glyph. */
.icon-external {
  width: 0.7em;
  height: 0.7em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
}

.link-quiet {
  color: var(--c-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 2px;
}
.link-quiet:hover {
  color: var(--c-gold-text);
  border-bottom-color: var(--c-gold-text);
}


/* 07  BADGES & CHIPS ======================================================= */

.badge {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font-size: var(--fs-badge);
  font-weight: 600;
  letter-spacing: var(--ls-badge);
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--original,
.badge--mini        { color: var(--c-sage-text); }
.badge--print       { color: var(--c-dusty-text); }
.badge--wood,
.badge--commissioned{ color: var(--c-clay-text); }

/* Sold is the one badge that fills rather than outlines, so it reads at a
   glance in a grid without having to be red. */
.badge--sold {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-ivory);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 10px 22px;
  border: 1px solid var(--c-clay);
  background: transparent;
  color: var(--c-taupe);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chip:hover { border-color: var(--c-gold-text); color: var(--c-charcoal); }

.chip[aria-pressed='true'],
.chip.is-active {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-ivory);
  padding: 11px 22px;
}


/* 08  HEADER / NAV / DRAWER ================================================ */

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding-block: 16px;
}

.wordmark {
  font-family: var(--ff-display);
  font-size: var(--fs-wordmark);
  font-weight: 500;
  letter-spacing: var(--ls-wordmark);
  color: var(--c-charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--c-charcoal); }

/* --- burger (mobile only) --- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-left: -4px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-charcoal);
}

/* --- desktop nav --- */
.nav-desktop { display: none; }

.nav-desktop ul {
  display: flex;
  gap: 32px;
}
.nav-desktop a {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-taupe);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-desktop a:hover { color: var(--c-charcoal); border-bottom-color: var(--c-gold); }
.nav-desktop a[aria-current] {
  color: var(--c-charcoal);
  border-bottom-color: var(--c-gold);
}

/* Right-hand slot keeps the wordmark optically centred on mobile. */
.header-spacer { width: 30px; }

/* --- drawer --- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(59, 56, 51, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 70;
  width: min(var(--drawer-w), 86vw);
  display: flex;
  flex-direction: column;
  background: var(--c-ivory);
  transform: translateX(-100%);
  transition: transform 0.25s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-rule);
}

.drawer__close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--c-taupe);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.drawer__close:hover { color: var(--c-charcoal); }

.drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 24px 24px;
}

.drawer__item {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--ff-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--c-charcoal);
  text-decoration: none;
}

.drawer__group { border-bottom: 1px solid var(--c-rule); }

.drawer__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0 8px;
  background: none;
  border: 0;
  font-family: var(--ff-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--c-charcoal);
  text-align: left;
  cursor: pointer;
}
.drawer__group-toggle .sign {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--c-gold-text);
}
.drawer__group-toggle[aria-expanded='false'] + .drawer__sub { display: none; }

.drawer__sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 12px 16px;
}
.drawer__sub a {
  padding: 10px 0;
  font-size: 0.9375rem;
  color: var(--c-taupe);
  text-decoration: none;
}
.drawer__sub a:hover { color: var(--c-charcoal); }

.drawer__foot {
  margin-top: auto;
  padding-top: var(--space-6);
}
.drawer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--c-taupe);
}
.drawer__social a { text-decoration: none; }
.drawer__meta {
  padding: 16px 0;
  font-size: 0.875rem;
  color: var(--c-taupe);
}
.drawer__meta a { text-decoration: none; }

@media (min-width: 1024px) {
  .site-header__inner { padding-block: 22px; }
  .nav-toggle,
  .header-spacer,
  .drawer,
  .drawer-backdrop { display: none; }
  .nav-desktop { display: block; }
}


/* 09  FOOTER =============================================================== */

.site-footer {
  background: var(--c-cream);
  border-top: 1px solid var(--c-rule);
  padding-block: var(--space-8);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
/* Mobile mirrors artboard 1d: brand full-width, Shop + Studio side by side,
   Follow as a single horizontal row. (The --follow overrides live after the
   .site-footer__col rules below, so they win on equal specificity.) */
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__col--follow { grid-column: 1 / -1; }

.site-footer__brand .wordmark { font-size: 1.25rem; }
.site-footer__blurb {
  margin-top: var(--space-3);
  max-width: 36ch;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--c-taupe);
}

.site-footer__col h2 {
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  color: var(--c-charcoal);
  margin-bottom: 10px;
}
.site-footer__col li + li { margin-top: 10px; }
.site-footer__col a {
  font-size: var(--fs-small);
  color: var(--c-taupe);
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--c-gold-text); }

.site-footer__col--follow ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__col--follow li + li { margin-top: 0; }

.site-footer__also {
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
}
.site-footer__also a { color: var(--c-taupe); text-decoration: none; }
.site-footer__also a:hover { color: var(--c-gold-text); }

.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--c-rule-strong);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--c-muted-text);
}
.site-footer__base a { color: inherit; text-decoration: none; }
.site-footer__base a:hover { color: var(--c-gold-text); }

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-7);
  }
  .site-footer__col--follow { grid-column: auto; }
  .site-footer__col--follow ul { display: block; }
  .site-footer__col--follow li + li { margin-top: 10px; }
}

@media (min-width: 1024px) {
  .site-footer { padding-block: var(--space-9); }
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .site-footer__brand { grid-column: auto; }
  .site-footer__base { flex-direction: row; justify-content: space-between; }
}


/* 10  PLACEHOLDERS =========================================================
   Every unresolved value on the site is wrapped in <span class="ph">.
   They are deliberately loud. Fill them in, then delete the <span>.
   Checklist: PLACEHOLDERS.md at the project root.

   To preview the site as it will actually look, add class="ph-quiet" to
   <body> — placeholders keep their text but lose the highlight.
   ------------------------------------------------------------------------ */

.ph {
  background: #FFF3BF;
  box-shadow: 0 0 0 1px #E6C84B inset;
  color: #5A4A12;
  font-family: var(--ff-mono);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.1em 0.4em;
  border-radius: 2px;
}
.ph::before { content: 'PLACEHOLDER: '; font-weight: 700; }

.ph-quiet .ph {
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  padding: 0;
}
.ph-quiet .ph::before { content: none; }


/* 11  GRIDS & SECTIONS ===================================================== */

.grid { display: grid; gap: var(--space-5); }
/* Grid items default to min-width:auto, so one long unbreakable child (a card
   title next to a nowrap badge) can stretch its track and push the page wider
   than the viewport. This keeps tracks honest. */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--cards { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.grid--4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid--6 { grid-template-columns: repeat(3, 1fr); gap: 12px; }

@media (min-width: 640px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--6 { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  .grid--split { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
  .grid--split-r { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.band {
  background: var(--c-charcoal);
  color: var(--c-ivory);
  padding-block: var(--space-8);
  text-align: center;
}
.band h2 { color: var(--c-ivory); }
.band p { color: var(--c-clay); }


/* 12  HERO ================================================================= */

.hero { padding-block: var(--space-7) var(--space-8); }
.hero__media { position: relative; }
.hero__media img { width: 100%; display: block; }
.hero__media::after {
  content: '';
  position: absolute;
  inset: 12px 12px -12px -12px;
  border: 1px solid var(--c-gold);
  pointer-events: none;
}
.hero__actions { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-items: center; gap: 16px; }
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9) calc(var(--space-9) + 1.5rem); }
  .hero__copy { order: 0; }
  .hero__media { order: 1; }
}
/* On small screens the picture leads, then the words. */
.hero__media { order: -1; margin-bottom: var(--space-6); }
@media (min-width: 1024px) { .hero__media { order: 1; margin-bottom: 0; } }


/* 13  ARTWORK CARDS ======================================================== */

.card { display: flex; flex-direction: column; gap: 14px; }

.card__mat {
  aspect-ratio: 4 / 5;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.card__mat img,
.card__mat picture {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.card__mat img { box-shadow: 0 6px 16px rgba(59, 56, 51, 0.18); }

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.card__head .t-card-title { min-width: 0; }
.card__meta { margin-top: 6px; }
.card__note {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--c-sage-text);
}
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.card__actions .btn { padding: 11px 18px; font-size: var(--fs-xs); }

/* Shipping line and the secure-checkout note. Both are written by JS from
   config, and both stay hidden when there is nothing true to say. */
.ship-line {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted-text);
  margin-top: 6px;
}
.buy-note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted-text);
  margin-top: 8px;
  flex-basis: 100%;
}

/* Shipping tier table, rendered from config on Shipping & Returns. */
.ship-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
}
.ship-table th,
.ship-table td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
}
.ship-table th {
  font-weight: 400;
  color: var(--c-taupe);
  padding-right: var(--space-4);
}
.ship-table td {
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-charcoal);
  text-align: right;
}

a.card { text-decoration: none; color: inherit; }
a.card:hover .card__head .t-card-title { color: var(--c-gold-text); }

/* Square tile used by Shop by Category and the studio strip */
.tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-cream);
  text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-label {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-card-title);
  font-weight: 500;
  color: var(--c-charcoal);
  text-align: center;
}
a.tile-wrap { text-decoration: none; display: block; }
a.tile-wrap:hover .tile-label { color: var(--c-gold-text); }


/* 14  SHOP FILTER ========================================================== */

/* The chip row scrolls sideways on small screens. The mask fades the right
   edge so it is visibly cut off rather than looking like the last chip, and
   it lifts once you have scrolled to the end. */
.filters-wrap {
  position: relative;
  margin-bottom: var(--space-5);
}
.filters-wrap::after {
  content: '';
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(250, 246, 239, 0), var(--c-ivory) 72%);
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.filters-wrap[data-scroll-end]::after { opacity: 0; }

.filters {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* a little runway so the last chip clears the fade */
  padding-right: 44px;
  scroll-padding-right: 44px;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; }

.shop-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  color: var(--c-muted-text);
}

@media (min-width: 1024px) {
  .filters {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    padding-right: 0;
  }
  /* Everything fits at this width, so there is nothing to fade. */
  .filters-wrap::after { content: none; }
}


/* 15  PRODUCT PAGE ========================================================= */

.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--c-muted-text);
  margin-bottom: var(--space-5);
}
.breadcrumb a { color: var(--c-muted-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-gold-text); }

/* The gallery column is shorter than the buy column, and the grid's
   align-items:center was floating it down the page. Pin it to the top. */
@media (min-width: 1024px) {
  .grid--split > [data-gallery],
  .grid--split-r > [data-gallery] { align-self: start; }
}

.gallery__main {
  background: var(--c-cream);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.gallery__main img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 10px 28px rgba(59, 56, 51, 0.2);
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 640px) { .gallery__thumbs { grid-template-columns: repeat(6, 1fr); } }

.thumb {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  background: var(--c-cream);
  cursor: pointer;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[aria-pressed='true'] { border-color: var(--c-gold-text); }

.buy-box {
  border: 1px solid var(--c-rule);
  background: var(--c-surface);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.buy-box h2 {
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  color: var(--c-charcoal);
  margin-bottom: 10px;
}
.buy-box p { margin-bottom: var(--space-4); }
.buy-box .btn { width: 100%; }

.price {
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--c-charcoal);
}


/* 16  ACCORDIONS =========================================================== */

.acc { border-top: 1px solid var(--c-rule); }
.acc:last-of-type { border-bottom: 1px solid var(--c-rule); }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-charcoal);
  text-align: left;
  cursor: pointer;
}
.acc__btn .sign {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--c-gold-text);
  flex: none;
}
.acc__btn[aria-expanded='true'] .sign { transform: rotate(45deg); }
.acc__panel { padding: 0 0 20px; max-width: 68ch; }


/* 17  FORMS ================================================================ */

.form { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .form--2 { grid-template-columns: 1fr 1fr; }
  .form--2 .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-taupe);
}
.field input,
.field select,
.field textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  padding: 14px 15px;
  font-size: var(--fs-body);
  color: var(--c-charcoal);
  width: 100%;
  border-radius: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-muted-text); opacity: 1; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--c-gold-text); }
.field__hint { font-size: var(--fs-xs); color: var(--c-muted-text); }

.field--hp {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.note {
  border-left: 2px solid var(--c-clay);
  padding: 14px 0 14px 18px;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--c-taupe);
}


/* 18  PROCESS STEPS ======================================================== */

.steps { counter-reset: step; display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); } }

.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: block;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--c-gold-text);
  margin-bottom: 8px;
}
.step h3 {
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.flow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-taupe);
}


/* 19  UTILITIES ============================================================ */

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

.flow-tight > * + * { margin-top: var(--space-2); }
.mt-0 { margin-top: 0; }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

@media print {
  .site-header, .site-footer, .skip-link, .drawer, .drawer-backdrop { display: none; }
  body { background: #fff; }
}