/*!
Theme Name: Wenxian Jiaotai
Theme URI: https://jiao-tai.com
Author: Optimal Consulting
Description: Bespoke block theme for Wenxian Jiaotai Porcelain — handmade jiaotai porcelain from Jiaozuo, China. Heritage-grade marketing + commerce.
Version: 2.3.7
Requires at least: 6.0
Tested up to: 6.7
License: Proprietary
Text Domain: jiaotai
*/

/* All component CSS concatenated directly to avoid @import resolution issues
   with Cloudflare edge cache. v2.2.8 — Pieces section: hero left-justified with black top frame. */


/* ===== reset.css ===== */
/* RESET — minimal, modern, no opinions beyond sane defaults. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{margin:0;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oxblood,#6B1F1F);outline-offset:2px;border-radius:2px}

/* When the nav anchors to any #section, leave room for the fixed header */
[id]{scroll-margin-top:96px}

/* ===== tokens.css ===== */
/* TOKENS — single source of truth for the theme. Mirrored in theme.json. */
:root{
  /* Colors */
  --ink:        #0E1116;
  --ink-soft:   #2A2D33;
  --bone:       #F4F1EA;
  --bone-warm:  #ECE6D9;
  --cobalt:     #1A2E47;
  --cobalt-dk:  #0F1B2D;
  --oxblood:    #6B1F1F;
  --grey:       #6E6A60;
  --rule:       rgba(14,17,22,.12);
  --rule-light: rgba(244,241,234,.14);

  /* Typography */
  --serif: 'Cormorant Garamond','Source Han Serif SC',Georgia,serif;
  --sans:  'Inter',-apple-system,'Helvetica Neue',sans-serif;

  /* Spacing — 8px scale */
  --s-1: .5rem;   /* 8 */
  --s-2: 1rem;    /* 16 */
  --s-3: 1.5rem;  /* 24 */
  --s-4: 2rem;    /* 32 */
  --s-5: 3rem;    /* 48 */
  --s-6: 4rem;    /* 64 */
  --s-7: 6rem;    /* 96 */
  --s-8: 8rem;    /* 128 */

  /* Layout */
  --container: 1320px;
  --gutter: 32px;
  --gutter-sm: 20px;

  /* Header */
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 720px){
  :root{
    --gutter: 20px;
    --header-h: 64px;
  }
}

/* Base typography */
body{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
}

/* Container */
.container,
.entry-content > .wp-block-group.alignwide,
.entry-content > .alignwide{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 720px){
  .container{padding-inline: var(--gutter-sm)}
}

/* Section spacing */
.section{padding: var(--s-8) 0}
@media (max-width: 860px){.section{padding: var(--s-7) 0}}

.section--ink{
  background: var(--ink);
  color: var(--bone);
}
.section--bone-warm{
  background: var(--bone-warm);
}

/* Eyebrow */
.eyebrow{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 var(--s-2);
}
.eyebrow--ink{color: var(--ink)}
.eyebrow--bone{color: var(--bone)}

/* Headings */
h1,h2,h3,h4{font-family: var(--serif);font-weight: 300;color: inherit}
h1{font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -.015em}
h2{font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.01em}
h3{font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.22; font-weight: 400}
h4{font-size: 1rem; font-weight: 400; letter-spacing: .04em}
em{font-style: italic; font-weight: inherit}

/* Lede */
.lede{font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 56ch}

/* Selection */
::selection{background: var(--oxblood);color: var(--bone)}

/* ===== utilities.css ===== */
/* UTILITIES */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}
.fade-in.is-in{opacity:1;transform:none}

*:focus-visible{
  outline:2px solid var(--wp--preset--color--oxblood);
  outline-offset:2px;
}

.text-center{text-align:center}

/* Fade in animation utility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== sections.css ===== */
/* SECTIONS — shared */
.container{max-width:1440px;margin:0 auto;padding:0 40px}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:#6B1F1F;
  margin:0 0 1.4rem;font-weight:400;
}
.eyebrow--dark{color:rgba(244,241,234,0.55)}
.eyebrow--commission{color:rgba(244,241,234,0.55);margin-bottom:1.4rem}
.section{padding:9rem 0}
.section-head{max-width:980px;margin:0 auto 5rem;padding:0 40px}
.section-head__title{
  font-family:'Cormorant Garamond','Source Han Serif SC',serif;
  font-size:clamp(36px,4.5vw,60px);line-height:1.05;
  letter-spacing:-0.01em;font-weight:300;margin:0 0 1.4rem;
}
.section-head__title em{font-style:italic}
.section-head__lede{font-size:18px;line-height:1.6;color:#2A2D33;margin:0;max-width:60ch}
@media(max-width:860px){
  .container{padding:0 24px}
  .section{padding:5rem 0}
}


/* ===== buttons.css ===== */
/* BUTTONS — three variants used across the site. */

.btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .arr{
  display: inline-block;
  transition: transform .25s var(--ease);
}
.btn:hover .arr,
.btn:focus-visible .arr{transform: translateX(4px)}

.btn--ink{
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.btn--ink:hover,
.btn--ink:focus-visible{background: var(--oxblood); border-color: var(--oxblood)}

.btn--bone{
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn--bone:hover,
.btn--bone:focus-visible{background: var(--ink); color: var(--bone); border-color: var(--ink)}

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible{background: var(--ink); color: var(--bone)}

.btn--ghost-light{
  background: transparent;
  color: var(--bone);
  border-color: rgba(244,241,234,.6);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible{
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

.btn--ghost-ink{
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.btn--ghost-ink:hover,
.btn--ghost-ink:focus-visible{
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 480px){
  .btn{padding: .75rem 1.2rem}
}

/* ===== forms.css ===== */
/* FORMS — enquiry form on commission page */
.enquiry{padding:7rem 0;background:#F4F1EA;color:#0E1116}
.enquiry__grid{display:grid;grid-template-columns:5fr 7fr;gap:5rem;max-width:1320px;margin:0 auto;padding:0 32px}
.enquiry__intro h2{
  font-family:var(--wp--preset--font-family--serif);
  font-size:clamp(32px, 4vw, 48px);line-height:1.05;font-weight:300;
  margin-bottom:1.5rem;
}
.enquiry__intro h2 em{font-style:italic}
.enquiry__intro p{font-size:16px;line-height:1.7;color:var(--wp--preset--color--ink-soft);margin-bottom:2rem;max-width:42ch}
.enquiry__contact{margin-top:2.5rem;border-top:1px solid rgba(14,17,22,0.12);padding-top:2rem}
.enquiry__contact-row{margin-bottom:1.5rem}
.enquiry__contact-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--wp--preset--color--grey);margin-bottom:0.3rem}
.enquiry__contact-value{font-family:var(--wp--preset--font-family--serif);font-size:20px;font-weight:400}
.enquiry__contact-value a:hover{color:var(--wp--preset--color--oxblood)}
.enquiry__contact-sub{font-size:12px;color:var(--wp--preset--color--grey);margin-top:0.3rem}

.form{background:var(--wp--preset--color--bone-warm);padding:3rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form__group{margin-bottom:1.3rem}
.form__group--full{grid-column:span 2}
.form__label{
  display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--wp--preset--color--ink);margin-bottom:0.5rem;font-weight:400;
}
.form__label em{font-style:normal;color:var(--wp--preset--color--oxblood)}
.form__input,.form__select,.form__textarea{
  width:100%;padding:0.85rem 1rem;
  font-family:var(--wp--preset--font-family--sans);font-size:15px;
  background:var(--wp--preset--color--bone);
  border:1px solid rgba(14,17,22,0.12);color:var(--wp--preset--color--ink);
  font-weight:300;transition:border-color .2s ease;border-radius:0;
}
.form__input:focus,.form__select:focus,.form__textarea:focus{outline:0;border-color:var(--wp--preset--color--ink)}
.form__textarea{min-height:140px;resize:vertical;font-family:var(--wp--preset--font-family--sans);line-height:1.5}
.form__select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230E1116' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.5rem;
}
.form__hint{font-size:11px;color:var(--wp--preset--color--grey);margin-top:0.3rem}
.form__checkbox{
  display:flex;align-items:flex-start;gap:0.6rem;
  font-size:13px;color:var(--wp--preset--color--ink-soft);
  line-height:1.5;cursor:pointer;
}
.form__checkbox input{
  appearance:none;width:16px;height:16px;
  border:1px solid rgba(14,17,22,0.12);background:var(--wp--preset--color--bone);
  flex-shrink:0;margin-top:0.2rem;cursor:pointer;position:relative;
}
.form__checkbox input:checked{background:var(--wp--preset--color--ink);border-color:var(--wp--preset--color--ink)}
.form__checkbox input:checked::after{
  content:'';position:absolute;left:4px;top:1px;
  width:6px;height:10px;border:solid var(--wp--preset--color--bone);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.form__submit{margin-top:1.5rem;width:100%;justify-content:center}
.form__privacy{
  font-size:11px;color:var(--wp--preset--color--grey);text-align:center;
  margin-top:1rem;letter-spacing:0.04em;
}
@media (max-width:860px){
  .enquiry__grid{grid-template-columns:1fr;gap:3rem}
  .form{padding:2rem}
  .form__row{grid-template-columns:1fr}
  .form__group--full{grid-column:span 1}
}

/* Form success / error states (rendered by JS after submission) */
.form__success{
  background:#0E1116;color:#F4F1EA;
  padding:4rem 3rem;text-align:center;
  border:1px solid rgba(244,241,234,0.15);
}
.form__success-title{
  font-family:'Cormorant Garamond','Source Han Serif SC',serif;
  font-size:clamp(32px,3.6vw,52px);font-style:italic;
  font-weight:300;line-height:1.1;margin:0 0 1.5rem;
}
.form__success-body{font-size:16px;line-height:1.6;color:rgba(244,241,234,0.75);margin:0;max-width:50ch;margin-left:auto;margin-right:auto}
.form__error{
  background:#6B1F1F;color:#F4F1EA;
  padding:1.5rem 2rem;font-size:14px;
  border-left:3px solid #fff;
}
.form__error p{margin:0}
.form__input--error{border-color:#6B1F1F !important;background:rgba(107,31,31,0.05) !important}

/* ===== header.css ===== */
/* HEADER — fixed, solid bone bar. NEVER changes on scroll.
   Same height, same colour, same shadow, same border, period.
   The page scrolls underneath; the header is a permanent fixture. */

/* === The bar itself === */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  /* No transition. Header is a static element, not an animation. */
}

/* Pull the page content down so it doesn't slide under the fixed bar. */
body{ padding-top: var(--header-h); }

/* === Inner row === */
.site-header__inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* === Brand === */
.brand{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  color: var(--ink);
}
.brand__mark{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--oxblood);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
}
.brand__word{
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
}
.brand__word em{
  font-style: normal;
  color: var(--oxblood);
  font-weight: 300;
}

/* === Desktop nav === */
.nav,
.nav-desktop{
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav a,
.nav-desktop a{
  position: relative;
  display: inline-block;
  padding: .3rem 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  /* No transition */
}
.nav a::after,
.nav-desktop a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  /* No transition */
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after{transform: scaleX(1)}

.nav__cta,
.nav-desktop .nav-cta{
  padding: .55rem 1.1rem !important;
  border: 1px solid currentColor;
  color: var(--ink);
}
.nav__cta::after,
.nav-desktop .nav-cta::after{display: none}
.nav__cta:hover,
.nav__cta:focus-visible,
.nav-desktop .nav-cta:hover,
.nav-desktop .nav-cta:focus-visible{
  background: var(--ink);
  color: var(--bone);
}

/* === Mobile toggle (hamburger) — hidden on desktop, visible on mobile === */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
}
.nav-toggle__bar{
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle__bar::before{top: -7px}
.nav-toggle__bar::after{top: 7px}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background: transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{top: 0; transform: rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{top: 0; transform: rotate(-45deg)}

/* === Mobile menu — full-screen overlay === */
.nav-mobile{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--bone);
  padding: var(--s-5) var(--gutter-sm) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  z-index: 99;
  border-top: 1px solid var(--rule);
}
.nav-mobile.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile a{
  display: block;
  padding: .8rem 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -.005em;
  line-height: 1.1;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav-mobile a em{color: var(--oxblood); font-style: italic}
.nav-mobile .nav-mobile__cta{
  margin-top: var(--s-3);
  padding: 1rem 1.2rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
}
.nav-mobile .nav-mobile__cta:hover,
.nav-mobile .nav-mobile__cta:focus-visible{
  background: var(--ink);
  color: var(--bone);
}

/* === Body lock when mobile menu open === */
body.has-mobile-menu-open{overflow: hidden}

/* === Breakpoint: hide desktop nav + show toggle === */
@media (max-width: 860px){
  .nav,
  .nav-desktop{display: none}
  .nav-toggle{display: inline-flex}
}

/* ===== footer.css ===== */
/* FOOTER — 4-column dark grid. */

.site-footer{
  background: var(--ink);
  color: rgba(244,241,234,.7);
  padding: var(--s-7) 0 var(--s-4);
}

.site-footer__top{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}

.site-footer__col h4{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 var(--s-3);
}
.site-footer__col ul{display: flex; flex-direction: column; gap: .65rem}
.site-footer__col a{
  font-size: 14px;
  color: rgba(244,241,234,.65);
  transition: color .2s var(--ease);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible{color: var(--bone)}

.site-footer__brand p{
  font-size: 14px;
  line-height: 1.6;
  margin-top: var(--s-2);
  max-width: 36ch;
  color: rgba(244,241,234,.6);
}

.site-footer__col p{
  font-size: 14px;
  line-height: 1.7;
}
.site-footer__col p a{color: var(--bone); border-bottom: 1px solid rgba(244,241,234,.25)}
.site-footer__col p a:hover{border-bottom-color: var(--bone)}

.site-footer__bottom{
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-3) var(--gutter) 0;
  border-top: 1px solid var(--rule-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(244,241,234,.45);
}

@media (max-width: 860px){
  .site-footer__top{
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4) var(--s-5);
  }
  .site-footer__brand{grid-column: 1 / -1}
  .site-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-inline: var(--gutter-sm);
  }
}
@media (max-width: 480px){
  .site-footer__top{grid-template-columns: 1fr; padding-inline: var(--gutter-sm)}
  .site-footer__bottom{padding-inline: var(--gutter-sm)}
}

/* ===== heritage.css ===== */
/* HERITAGE — one section that tells the Tang Dynasty origin story
   and shows the recognition badges. Dark background throughout. */

.heritage{
  background: var(--ink);
  color: var(--bone);
  padding: var(--s-9) 0 var(--s-8);
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  /* When the nav anchors to #heritage, leave room for the fixed header */
  scroll-margin-top: 96px;
}

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

/* ==== Section head (eyebrow + headline + lede) ==== */
.heritage__head{
  max-width: 70ch;
  margin: 0 auto var(--s-7);
  text-align: left;
}
.heritage__head .eyebrow{
  color: var(--bone);
  opacity: 0.85;
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.heritage__title{
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 var(--s-3);
}
.heritage__title em{font-style: italic}
.heritage__lede{
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(244,241,234,0.7);
  margin: 0;
  font-style: normal;
}

/* ==== Story body — editorial paragraphs ==== */
.heritage__story{
  max-width: 70ch;
  margin: 0 auto var(--s-8);
  columns: 2;
  column-gap: var(--s-7);
  column-rule: 1px solid rgba(244,241,234,0.12);
}
.heritage__story p{
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(244,241,234,0.78);
  margin: 0 0 1.2rem;
  break-inside: avoid;
}
.heritage__story p:last-child{
  margin-bottom: 0;
}
.heritage__story em{
  font-style: italic;
  color: var(--bone);
  font-weight: 400;
}
@media (max-width: 860px){
  .heritage__story{
    columns: 1;
    column-gap: 0;
    column-rule: 0;
  }
}

/* ==== Recognition strip — 4 seals ==== */
.heritage__recognition{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(244,241,234,0.15);
  max-width: var(--container);
  margin-inline: auto;
}
@media (max-width: 860px){
  .heritage__recognition{
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) var(--s-4);
  }
}
@media (max-width: 480px){
  .heritage__recognition{
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

.heritage__item{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.heritage__seal{
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(244,241,234,0.25);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--oxblood);
  background: rgba(244,241,234,0.02);
}
.heritage__copy{
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(244,241,234,0.7);
}
.heritage__copy strong{
  display: block;
  font-weight: 400;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--bone);
  margin-bottom: 0.25rem;
}

/* ===== hero.css ===== */
/* HERO — bone background, dark text. The vase image sits in a dark frame
   (a "framed artwork" treatment) on a bone field that integrates with the rest
   of the site. */

.hero{
  position: relative;
  background: var(--bone);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  padding-top: 0;
  /* Subtle warm undertone via a faint vertical wash — anchors the hero
     visually without competing with the vase frame. */
  background-image: linear-gradient(180deg, var(--bone) 0%, var(--bone-warm) 100%);
}

.hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--s-4) var(--s-6);
}

.hero__caption{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14,17,22,.6);
  margin: 0 0 var(--s-3);
}

.hero__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.hero__title em{font-style: italic; font-weight: 300}

.hero__sub{
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(14,17,22,.75);
  max-width: 46ch;
  margin: 0 0 var(--s-4);
}

.hero__ctas{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.hero__image-wrap{
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bone);    /* matches the bone-bg vase image seamlessly */
  overflow: hidden;
  /* No dark frame — the vase image already has a clean bone background */
  outline: none;
}
.hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
.hero__image-fallback{
  /* Shown if image fails to load — graceful bone block */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #ECE6D9 0%, #D8D2C5 100%);
}
.hero__caption-tag{
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.85);
  background: rgba(14,17,22,.7);
  padding: .35rem .55rem;
}

.hero__meta{
  position: absolute;
  inset: auto 0 var(--s-3) 0;
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-3);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(14,17,22,.5);
}
.hero__meta-l{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(14,17,22,.7);
}
.hero__meta-r{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Mobile: stack vertical, image first */
@media (max-width: 860px){
  .hero{padding-top: 0}
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    padding-block: 0 0;
  }
  .hero__image-wrap{
    aspect-ratio: 4 / 3;
  }
  .hero__content{
    padding: var(--s-5) var(--gutter-sm) var(--s-6);
  }
}
@media (min-width: 861px){
  .hero__content{
    padding-inline: var(--gutter);
    /* First column gets the gutter on the left */
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
  .hero__image-col{
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
}

/* ===== featured.css ===== */
/* FEATURED PIECES — hero card on the left (left-justified to the page
   edge), with the other two smaller cards in a row below.
   A black top border above the whole section gives the framed look. */

.featured{
  padding: var(--s-8) 0;
  background: var(--bone);
  border-top: 6px solid var(--ink);  /* Black frame edge — the "frame" line */
}
@media (max-width: 860px){.featured{padding: var(--s-7) 0}}

.featured__head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: end;
  max-width: var(--container);
  margin: 0 auto var(--s-6);
  padding-inline: var(--gutter);
}
.featured__head-text{max-width: 60ch}
.featured__head h2{margin-top: .35rem}
.featured__head .lede{margin-top: var(--s-2)}

.featured__view-all{
  align-self: end;
  white-space: nowrap;
}

@media (max-width: 720px){
  .featured__head{
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-3);
    padding-inline: var(--gutter-sm);
  }
}

/* The grid: hero (left-justified, big) on top, 2 smaller cards below */
.featured__grid{
  max-width: var(--container);
  margin: 0;
  /* Hero extends to the LEFT edge of the page (no left padding).
     Right edge still has the standard gutter. */
  padding-right: var(--gutter);
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--s-3);
}
/* Hero: spans 2 columns, 1 row */
.featured__grid .piece-card:nth-child(1){
  grid-column: span 2;
  grid-row: 1;
  aspect-ratio: 16 / 10;
}
/* Cards 2 and 3: each spans 1 column, 1 row */
.featured__grid .piece-card:nth-child(2){
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}
.featured__grid .piece-card:nth-child(3){
  grid-column: span 2;
  grid-row: 2;
  aspect-ratio: 16 / 9;
}

@media (max-width: 860px){
  .featured__grid{
    grid-template-columns: 1fr;
    padding-left: var(--gutter-sm);
    padding-right: var(--gutter-sm);
    gap: var(--s-3);
  }
  .featured__grid .piece-card:nth-child(1),
  .featured__grid .piece-card:nth-child(2),
  .featured__grid .piece-card:nth-child(3){
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }
}

/* Card */
.piece-card{
  position: relative;
  display: block;
  background: var(--bone-warm);
  overflow: hidden;
  isolation: isolate;
  /* Hard aspect-ratio guard so missing images never collapse to voids */
  aspect-ratio: 4 / 5;
}
.piece-card__media{
  position: absolute; inset: 0;
  background: var(--bone-warm);
  overflow: hidden;
}
.piece-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .8s var(--ease), filter .4s var(--ease);
  display: block;
  /* Loading state: even before the image loads, show a subtle gradient */
  background: linear-gradient(180deg, #d8d2c4 0%, #c4beae 100%);
}

/* Hero card (the first/left-justified one) — show the full vase,
   don't crop. Wider aspect, less aggressive framing. */
.featured__grid .piece-card:nth-child(1) .piece-card__img{
  object-fit: contain;
  padding: var(--s-3);
  filter: brightness(1.0) saturate(1.0);
}
.featured__grid .piece-card:nth-child(1) .piece-card__media::after{
  background: linear-gradient(180deg, transparent 35%, rgba(14,17,22,.55) 100%);
}
.piece-card__media::after{
  /* Soft floor vignette so the overlaid text stays legible on any image */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(14,17,22,.78) 100%);
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.piece-card:hover .piece-card__img,
.piece-card:focus-visible .piece-card__img{
  transform: scale(1.04);
}

.piece-card__overlay{
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-3);
  color: var(--bone);
}
.piece-card__title{
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin-bottom: .2rem;
}
.piece-card__meta{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,241,234,.85);
}
.piece-card__meta--available{
  color: #d8e3c4;
}
.piece-card__cta{
  width: 38px; height: 38px;
  border: 1px solid rgba(244,241,234,.5);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--bone);
  background: rgba(14,17,22,.4);
  flex-shrink: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.piece-card:hover .piece-card__cta,
.piece-card:focus-visible .piece-card__cta{
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

@media (max-width: 860px){
  .piece-card{aspect-ratio: 4 / 5}
}

/* ===== technique.css ===== */
/* TECHNIQUE — 3-step process on dark ink background. Each step has real aspect-ratio guards. */

.technique{
  background: var(--ink);
  color: var(--bone);
  padding: var(--s-8) 0;
}
@media (max-width: 860px){.technique{padding: var(--s-7) 0}}

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

.technique__head{max-width: 60ch; margin-bottom: var(--s-6)}
.technique__head .eyebrow{color: var(--bone); opacity: .85}
.technique__head h2{color: var(--bone); margin-top: .35rem}
.technique__head .lede{color: rgba(244,241,234,.78)}

.technique__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.technique__step{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.technique__num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--oxblood);
  letter-spacing: .04em;
}
.technique__step-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--bone);
}
.technique__step-body{
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(244,241,234,.78);
  margin: 0;
}

.technique__img{
  position: relative;
  aspect-ratio: 4 / 5;
  background: #1a1a1a;
  overflow: hidden;
  margin-top: auto; /* Push image to bottom if titles wrap */
}
.technique__img img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: linear-gradient(180deg, #2A2D33, #0E1116);
}

@media (max-width: 860px){
  .technique__grid{
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .technique__img{aspect-ratio: 3 / 2}
}

/* ===== workshop-band.css ===== */
/* WORKSHOP BAND — atmosphere strip. Cinematic wide image + two process thumbnails. */

.workshop-band{
  background: var(--bone);
  padding: var(--s-8) 0;
}
@media (max-width: 860px){.workshop-band{padding: var(--s-7) 0}}

.workshop-band__head{
  max-width: var(--container);
  margin: 0 auto var(--s-5);
  padding-inline: var(--gutter);
}
.workshop-band__head .eyebrow{margin-bottom: var(--s-2)}
.workshop-band__head h2{margin-top: .35rem; max-width: 22ch}
.workshop-band__head .lede{margin-top: var(--s-2); max-width: 60ch}

.workshop-band__hero{
  max-width: var(--container);
  margin: 0 auto var(--s-4);
  padding-inline: var(--gutter);
}
.workshop-band__hero-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.workshop-band__hero-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: linear-gradient(180deg, #2A2D33, #0E1116);
  /* Slightly desaturate so the real-piece colors elsewhere stay the hero */
  filter: saturate(.92);
}
.workshop-band__hero-caption{
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  padding: .35rem .6rem;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.8);
  background: rgba(14,17,22,.55);
  backdrop-filter: blur(6px);
}

.workshop-band__grid{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.workshop-cell{
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--s-2);
}
.workshop-cell__media{
  aspect-ratio: 4 / 3;
  background: var(--ink);
  overflow: hidden;
}
.workshop-cell__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: linear-gradient(180deg, #2A2D33, #0E1116);
}
.workshop-cell__caption{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-2);
  padding-top: .25rem;
  align-items: start;
}
.workshop-cell__num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--oxblood);
  padding-top: .2rem;
  letter-spacing: .04em;
}
.workshop-cell__copy{
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.workshop-cell__copy strong{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: .25rem;
}

@media (max-width: 860px){
  .workshop-band__grid{
    grid-template-columns: 1fr;
    padding-inline: var(--gutter-sm);
    gap: var(--s-4);
  }
  .workshop-band__hero,
  .workshop-band__head{padding-inline: var(--gutter-sm)}
  .workshop-band__hero-frame{aspect-ratio: 4 / 3}
}

/* ===== founder.css ===== */
/* FOUNDER — quote + atmospheric portrait. Honest image fallback if portrait fails. */

.founder{
  background: var(--bone-warm);
  padding: var(--s-8) 0;
}
@media (max-width: 860px){.founder{padding: var(--s-7) 0}}

.founder__inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-6);
  align-items: center;
}

.founder__media{
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  overflow: hidden;
}
.founder__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
  filter: saturate(.95) contrast(1.02);
  background: linear-gradient(180deg, #2A2D33, #0E1116);
}
.founder__media-caption{
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  padding: .35rem .6rem;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.85);
  background: rgba(14,17,22,.55);
  backdrop-filter: blur(6px);
}

.founder__copy .eyebrow{margin-bottom: var(--s-3)}

.founder__quote{
  margin: 0 0 var(--s-4);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--ink);
}
.founder__quote::before{
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--oxblood);
  margin-bottom: -.3em;
}

.founder__attr{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.founder__attr-rule{
  width: 32px; height: 1px;
  background: var(--oxblood);
  flex-shrink: 0;
}
.founder__attr-name strong{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: .01em;
}
.founder__attr-name span{
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: .15rem;
}

@media (max-width: 860px){
  .founder__inner{
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding-inline: var(--gutter-sm);
  }
  .founder__media{aspect-ratio: 3 / 4}
}

/* ===== commission.css ===== */
/* COMMISSION CTA — cobalt band, faint radial overlay. */

.commission{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(107,31,31,.18) 0%, transparent 60%),
    var(--cobalt);
  color: var(--bone);
  padding: var(--s-8) 0;
  position: relative;
}
@media (max-width: 860px){.commission{padding: var(--s-7) 0}}

.commission__inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.commission__inner .eyebrow{color: rgba(244,241,234,.7); margin-bottom: var(--s-3)}

.commission__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--bone);
  margin-bottom: var(--s-3);
  max-width: 18ch;
}
.commission__title em{font-style: italic}

.commission__body{
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(244,241,234,.78);
  max-width: 56ch;
  margin: 0 0 var(--s-5);
}

.commission__meta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: var(--s-5);
  border-top: 1px solid rgba(244,241,234,.15);
  border-bottom: 1px solid rgba(244,241,234,.15);
  padding-block: var(--s-3);
}
.commission__meta-item{
  padding: 0 var(--s-3);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.55);
}
.commission__meta-item + .commission__meta-item{
  border-left: 1px solid rgba(244,241,234,.15);
}
.commission__meta-item strong{
  display: block;
  margin-top: .35rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--bone);
  text-transform: none;
}

@media (max-width: 860px){
  .commission__meta{
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) 0;
  }
  .commission__meta-item:nth-child(n+3){border-top: 1px solid rgba(244,241,234,.15); padding-top: var(--s-3)}
  .commission__meta-item + .commission__meta-item{border-left: none}
  .commission__meta-item:nth-child(odd){border-right: 1px solid rgba(244,241,234,.15)}
}
@media (max-width: 480px){
  .commission__meta{grid-template-columns: 1fr; gap: var(--s-3)}
  .commission__meta-item:nth-child(n+2){border-top: 1px solid rgba(244,241,234,.15); padding-top: var(--s-3); border-right: none}
}

/* ===== portfolio.css ===== */
/* PORTFOLIO — catalogue page styles */

/* Layout toggle bar */
.toggle-bar{
  position:sticky;top:78px;z-index:20;
  background:rgba(244,241,234,0.95);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(14,17,22,0.12);
  padding:1.1rem 0;
}
.toggle-bar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  max-width:1320px;margin:0 auto;padding:0 32px;
}
.toggle-bar__label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--wp--preset--color--grey)}
.toggle-bar__opts{display:flex;gap:0;border:1px solid rgba(14,17,22,0.12)}
.toggle-bar__opt{
  padding:0.55rem 1.2rem;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-soft);font-weight:400;
  border-right:1px solid rgba(14,17,22,0.12);transition:all .25s ease;
  cursor:pointer;
}
.toggle-bar__opt:last-child{border-right:0}
.toggle-bar__opt:hover{background:var(--wp--preset--color--bone-warm)}
.toggle-bar__opt.is-active{background:var(--wp--preset--color--ink);color:var(--wp--preset--color--bone)}
.toggle-bar__count{font-size:11px;letter-spacing:0.08em;color:var(--wp--preset--color--grey)}

/* Page meta strip */
.page-meta{
  display:flex;gap:3rem;padding-top:2rem;border-top:1px solid rgba(14,17,22,0.12);
  flex-wrap:wrap;
}
.page-meta__item{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--wp--preset--color--grey)}
.page-meta__item strong{
  display:block;color:var(--wp--preset--color--ink);font-weight:400;
  font-size:22px;margin-top:0.3rem;letter-spacing:0;
  font-family:var(--wp--preset--font-family--serif);font-style:italic;text-transform:none;
}

/* Pattern/form sectioned groups */
.section-group{margin-bottom:6rem}
.section-group:last-child{margin-bottom:0}
.section-group__head{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  align-items:end;margin-bottom:2.5rem;padding-bottom:2rem;
  border-bottom:1px solid rgba(14,17,22,0.12);
}
.section-group__title{
  font-family:var(--wp--preset--font-family--serif);
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.05;letter-spacing:-0.01em;font-weight:300;
}
.section-group__title em{font-style:italic}
.section-group__title-ch{
  font-family:var(--wp--preset--font-family--serif);font-size:18px;
  color:var(--wp--preset--color--grey);font-style:italic;margin-left:0.5rem;font-weight:300;
}
.section-group__desc{font-size:14px;line-height:1.7;color:var(--wp--preset--color--ink-soft);max-width:48ch}
.section-group__count{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--wp--preset--color--grey);margin-top:0.5rem}

/* Hero of each group — square image, full vase visible */
.section-group__hero{
  display:grid;grid-template-columns:1fr;gap:0;margin-bottom:3rem;
  background:var(--wp--preset--color--ink);
}
.section-group__hero-img{aspect-ratio:1;overflow:hidden;background:var(--wp--preset--color--ink-soft);max-width:600px;margin:0;border:1px solid #000}
.section-group__hero-img img{width:100%;height:100%;object-fit:contain;object-position:left center}
.section-group__hero-meta{
  padding:2.5rem 2rem;display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--wp--preset--color--bone);background:var(--wp--preset--color--ink);
}
.section-group__hero-meta .eyebrow{color:rgba(244,241,234,0.5)}
.section-group__hero-name{
  font-family:var(--wp--preset--font-family--serif);
  font-size:28px;font-weight:300;line-height:1.15;margin-bottom:0.4rem;
}
.section-group__hero-form{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(244,241,234,0.6)}
.section-group__hero-price{
  margin-top:auto;font-family:var(--wp--preset--font-family--serif);
  font-style:italic;color:rgba(244,241,234,0.7);font-size:16px;
}

/* Item grid */
.item-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.2rem}
@media (max-width:1024px){.item-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:720px){.item-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:420px){.item-grid{grid-template-columns:1fr}}

.item-card{position:relative;background:var(--wp--preset--color--bone);overflow:hidden;cursor:pointer}
.item-card__img{aspect-ratio:1;overflow:hidden;background:var(--wp--preset--color--bone)}
.item-card__img.portrait{aspect-ratio:1}
.item-card__img.landscape{aspect-ratio:1}
.item-card__img img{
  width:100%;height:100%;object-fit:contain;
  object-position:left center;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.item-card:hover .item-card__img img{transform:scale(1.03)}
.item-card__meta{padding:1rem 0.2rem 0.2rem;color:var(--wp--preset--color--ink)}
.item-card__title{font-family:var(--wp--preset--font-family--serif);font-size:18px;line-height:1.2;font-weight:400}
.item-card__sub{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--wp--preset--color--grey);margin-top:0.3rem}

/* All-grid (single flat layout) */
.all-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.2rem}
@media (max-width:1024px){.all-grid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:720px){.all-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:420px){.all-grid{grid-template-columns:1fr}}

/* Availability tag */
.tag{
  display:inline-block;font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--wp--preset--color--oxblood);
  border:1px solid var(--wp--preset--color--oxblood);
  padding:0.2rem 0.6rem;margin-top:0.5rem;font-weight:400;
}

/* Layout switcher — JS toggles display; CSS sets the default */
.layout{display:none}
.layout-pattern{display:block}

/* ===== about.css ===== */
/* ABOUT PAGE — page-hero, intro, quote, transition band, timeline */

.page-hero{
  background: var(--bone);
  padding: var(--s-7) 0 var(--s-5);
}
.page-hero--no-border{
  border: 0;
}
.page-hero .container{
  max-width: 880px;
}
.page-hero__title{
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.page-hero__title em{font-style: italic; font-weight: 300}
.page-hero__lede{
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

/* INTRO section: 2-col quote + portrait. Tight top padding to remove the gap. */
.intro{
  background: var(--bone);
  padding: var(--s-3) 0 var(--s-6);
}
.intro .container,
.intro__grid{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.intro__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-6);
  align-items: center;
}
.intro__quote{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  position: relative;
  padding-top: var(--s-3);
}
.intro__quote::before{
  content: "“";
  position: absolute;
  left: -.15em;
  top: -.1em;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--oxblood);
  font-family: var(--serif);
  font-style: normal;
}
.intro__img{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  overflow: hidden;
}
.intro__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95) contrast(1.02);
}
.intro__img-caption{
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.85);
  background: rgba(14,17,22,.65);
  padding: .35rem .6rem;
  backdrop-filter: blur(6px);
}

/* DISCOVERY — 2-col: quote + Li Wenxian portrait.
   The shard image is now BELOW this section, not part of it. */
.discovery{
  background: var(--bone);
  padding: var(--s-3) 0 var(--s-7);
}
.discovery__grid{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-6);
  align-items: center;
}
.discovery__media{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.discovery__media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.discovery__media-caption{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14,17,22,.5);
}
.discovery__quote{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 0;
  border-left: 1px solid rgba(14,17,22,.12);
  padding-left: var(--s-5);
}
.discovery__quote-text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: var(--s-2) 0 var(--s-3);
  position: relative;
  padding-left: var(--s-3);
}
.discovery__quote-text::before{
  content: "“";
  position: absolute;
  left: -.35em;
  top: -.25em;
  font-size: 4rem;
  line-height: 1;
  color: var(--oxblood);
  font-family: var(--serif);
  font-style: normal;
}
.discovery__quote-attr{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
  padding-left: var(--s-3);
}
@media (max-width: 860px){
  .discovery__grid{
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .discovery__quote{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(14,17,22,.12);
    padding-top: var(--s-4);
  }
  .discovery{padding: var(--s-2) 0 var(--s-6)}
}

/* HERO attribution + multi-paragraph lede. The hero carries the page's
   real context now — three paragraphs of body text, not just a one-liner. */
.page-hero__attr{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: var(--s-3) 0 0;
}
.page-hero__lede{
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: var(--s-3) 0 0;
}
.page-hero__lede + .page-hero__lede{
  margin-top: var(--s-2);
}

/* SHARD section — the broken pot that started it all.
   2-col on desktop, image left, copy right. Bone background continues. */
.shard-section{
  background: var(--bone);
  padding: var(--s-3) 0 var(--s-8);
}
.shard-grid{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.shard-media{
  position: relative;
  background: var(--bone);
  overflow: hidden;
}
.shard-media img{
  width: 100%;
  height: auto;
  display: block;
}
.shard-media-caption{
  margin-top: var(--s-2);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14,17,22,.5);
}
.shard-copy{
  max-width: 480px;
}
.shard-title{
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}
.shard-title em{font-style: italic; color: var(--oxblood)}
.shard-body{
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}
.shard-body:last-child{margin-bottom: 0}
.shard-body em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 860px){
  .shard-grid{
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .shard-section{padding: var(--s-2) 0 var(--s-7)}
}

/* TRANSITION BAND: short editorial line that bridges the quote to the timeline.
   Replaces the old 6-card recognition section. */
.about-transition{
  background: var(--ink);
  color: var(--bone);
  padding: var(--s-7) 0;
}
.about-transition .container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  align-items: center;
}
.about-transition__stat{
  font-family: var(--serif);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--oxblood);
  letter-spacing: -.02em;
}
.about-transition__copy{
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(244,241,234,.85);
  margin: 0;
}
.about-transition__copy em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--bone);
  font-size: 1.15em;
}

/* Timeline already has its own CSS in about.css. */
.timeline-section{
  background: var(--bone-warm);
  padding: var(--s-8) 0;
}
.timeline-section .container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.timeline-section__head{
  max-width: 760px;
  margin: 0 auto var(--s-7);
  text-align: left;
}

/* Timeline — vertical line + year markers + rows */
.timeline{position:relative}
.timeline::before{
  content:'';position:absolute;left:140px;top:0;bottom:0;
  width:1px;background:rgba(14,17,22,0.12);
}
.timeline-row{
  display:grid;grid-template-columns:140px 1fr;gap:3rem;
  padding:2rem 0;align-items:start;
}
.timeline-year{
  font-family:var(--serif);font-size:24px;
  color:var(--oxblood);font-weight:400;
  letter-spacing:0;position:relative;
}
.timeline-year::after{
  content:'';position:absolute;right:-1.5rem;top:0.8rem;
  width:10px;height:10px;border-radius:50%;
  background:var(--oxblood);
  border:3px solid var(--bone-warm);z-index:1;
}
.timeline-content{padding-left:1.5rem}
.timeline-title{
  font-family:var(--serif);
  font-size:24px;font-weight:400;line-height:1.25;
  margin-bottom:0.8rem;color:var(--ink);
}
.timeline-body{
  font-size:15px;line-height:1.7;
  color:var(--ink-soft);max-width:62ch;
}
.timeline-body em{
  font-family:var(--serif);
  font-style:italic;font-size:18px;color:var(--oxblood);
}
@media (max-width:720px){
  .timeline::before{left:80px}
  .timeline-row{grid-template-columns:80px 1fr;gap:1.5rem}
  .timeline-content{padding-left:1rem}
  .timeline-year{font-size:18px}
  .timeline-title{font-size:20px}
}

@media (max-width: 860px){
  .intro__grid{
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .intro__img{
    aspect-ratio: 3 / 2;
  }
  .about-transition .container{
    grid-template-columns: 1fr;
    gap: var(--s-3);
    text-align: left;
  }
  .intro{padding: var(--s-2) 0 var(--s-5)}
  .page-hero{padding: var(--s-6) 0 var(--s-3)}
}

/* ===== pieces.css ===== */
/* PIECES — featured pieces grid (home) */
.pieces{display:grid;grid-template-columns:repeat(12, 1fr);gap:1.5rem}
.piece{position:relative;overflow:hidden;background:var(--wp--preset--color--ink);aspect-ratio:4/5}
.piece--lg{grid-column:span 6;aspect-ratio:4/5}
.piece--md{grid-column:span 3;aspect-ratio:4/5}
.piece--sm{grid-column:span 3;aspect-ratio:1}
.piece img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter:brightness(0.92) saturate(0.92);
}
.piece:hover img{transform:scale(1.06);filter:brightness(1) saturate(1)}
.piece__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem;
  background:linear-gradient(180deg, transparent, rgba(14,17,22,0.78));
  color:var(--wp--preset--color--bone);
  display:flex;align-items:flex-end;justify-content:space-between;
}
.piece__title{font-family:var(--wp--preset--font-family--serif);font-size:22px;letter-spacing:0.01em;font-weight:400}
.piece__meta{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(244,241,234,0.7);margin-top:0.3rem}
.piece__cta{
  width:36px;height:36px;border:1px solid rgba(244,241,234,0.5);
  border-radius:50%;display:grid;place-items:center;
  transition:all .3s ease;
}
.piece:hover .piece__cta{background:var(--wp--preset--color--bone);color:var(--wp--preset--color--ink);border-color:var(--wp--preset--color--bone)}
@media (max-width:860px){.piece--lg,.piece--md,.piece--sm{grid-column:span 6}}
@media (max-width:520px){.piece--lg,.piece--md,.piece--sm{grid-column:span 12;aspect-ratio:4/5}}

/* ===== process.css ===== */
/* PROCESS — 3-step technique (home) */
.process__steps{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:0;
  border-top:1px solid rgba(244,241,234,0.12);
}
.process__step{
  padding:3rem 2.5rem 1rem 0;
  border-right:1px solid rgba(244,241,234,0.12);
}
.process__step:last-child{border-right:0;padding-right:0}
.process__step:first-child{padding-left:0}
.process__step:nth-child(2){padding-left:2.5rem}
.process__step:nth-child(3){padding-left:2.5rem}
.process__num{
  font-family:var(--wp--preset--font-family--serif);
  font-style:italic;font-weight:300;
  font-size:14px;color:var(--wp--preset--color--oxblood);
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:0.8rem;
}
.process__num::after{content:'';flex:1;height:1px;background:rgba(244,241,234,0.18)}
.process__step-title{
  font-family:var(--wp--preset--font-family--serif);
  font-size:28px;font-weight:300;line-height:1.15;
  margin-bottom:1rem;color:var(--wp--preset--color--bone);
}
.process__step-body{
  font-size:14px;line-height:1.65;
  color:rgba(244,241,234,0.65);max-width:34ch;
}
.process__img{margin-top:2rem;aspect-ratio:4/3;overflow:hidden}
.process__img img{width:100%;height:100%;object-fit:cover;filter:brightness(0.9) saturate(0.9)}
@media (max-width:860px){
  .process__steps{grid-template-columns:1fr}
  .process__step,.process__step:nth-child(2),.process__step:nth-child(3){
    border-right:0;border-bottom:1px solid rgba(244,241,234,0.12);
    padding:2rem 0;
  }
}

/* 7-step commissioning process (commission page) */
.steps{
  display:grid;grid-template-columns:repeat(7, 1fr);gap:0;
  border-top:1px solid rgba(14,17,22,0.12);
}
.step{padding:2rem 1.2rem 0 0;border-right:1px solid rgba(14,17,22,0.12);position:relative}
.step:last-child{border-right:0}
.step:first-child{padding-left:0}
.step:nth-child(2){padding-left:1.2rem}
.step__num{
  font-family:var(--wp--preset--font-family--serif);
  font-size:14px;color:var(--wp--preset--color--oxblood);
  font-style:italic;margin-bottom:1rem;letter-spacing:0.04em;
}
.step__title{
  font-family:var(--wp--preset--font-family--serif);
  font-size:18px;font-weight:400;line-height:1.25;
  margin-bottom:0.6rem;color:var(--wp--preset--color--ink);min-height:3em;
}
.step__desc{font-size:13px;color:var(--wp--preset--color--ink-soft);line-height:1.5;margin-bottom:1rem}
.step__time{
  font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--wp--preset--color--grey);
  margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid rgba(14,17,22,0.12);
}
.step__time strong{
  color:var(--wp--preset--color--oxblood);font-weight:400;
  font-family:var(--wp--preset--font-family--serif);
  font-style:italic;font-size:14px;display:block;
  text-transform:none;letter-spacing:0;margin-top:0.2rem;
}
/* Step images on the commission page — small process photos
   pulled in next to specific steps in the 7-step process */
.step__img{
  margin-top:1.2rem;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#1a1a1a;
}
.step__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(0.94) saturate(0.95);
  transition:transform 2s ease;
}
.step:hover .step__img img{transform:scale(1.04)}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(4, 1fr)}
  .step{padding:1.5rem 1rem 0 0}
  .step:nth-child(4){border-right:0}
}
@media (max-width:720px){
  .steps{grid-template-columns:repeat(2, 1fr)}
  .step{
    border-right:1px solid rgba(14,17,22,0.12);
    border-bottom:1px solid rgba(14,17,22,0.12);
    padding:1.2rem 1rem 1.2rem 0;
  }
  .step:nth-child(2n){border-right:0}
}

/* ===== available.css ===== */
/* =========================================================
   AVAILABLE PIECES (commission page — dark band)
   ========================================================= */
.available{background:var(--wp--preset--color--ink);color:var(--wp--preset--color--bone);padding:7rem 0}
.available .eyebrow{color:rgba(244,241,234,0.55)}
.available__head{margin-bottom:3rem;max-width:760px;max-width:1320px;margin:0 auto 3rem;padding:0 32px}
.available__head h2{
  font-family:var(--wp--preset--font-family--serif);
  font-size:clamp(32px, 4vw, 48px);line-height:1.05;font-weight:300;
  margin-bottom:1rem;color:var(--wp--preset--color--bone);
}
.available__head h2 em{font-style:italic;color:rgba(244,241,234,0.6)}
.available__head p{color:rgba(244,241,234,0.7);font-size:16px;line-height:1.6;max-width:58ch}
.available__grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1.5rem;max-width:1320px;margin:0 auto;padding:0 32px}
.available-card{
  background:var(--wp--preset--color--cobalt-dk);
  display:grid;grid-template-columns:5fr 7fr;overflow:hidden;cursor:pointer;
  transition:transform .4s ease;
}
.available-card:hover{transform:translateY(-2px)}
.available-card__img{aspect-ratio:1;overflow:hidden}
.available-card__img img{width:100%;height:100%;object-fit:cover;filter:brightness(0.95) saturate(0.95)}
.available-card__body{
  padding:2rem;display:flex;flex-direction:column;justify-content:space-between;
}
.available-card__name{
  font-family:var(--wp--preset--font-family--serif);
  font-size:24px;font-weight:400;line-height:1.2;
  margin-bottom:0.4rem;color:var(--wp--preset--color--bone);
}
.available-card__form{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(244,241,234,0.6);margin-bottom:1rem}
.available-card__price{
  margin-top:auto;
  font-family:var(--wp--preset--font-family--serif);
  font-style:italic;font-size:16px;color:rgba(244,241,234,0.85);
  padding-top:1rem;border-top:1px solid rgba(244,241,234,0.12);
}
.available-card__price strong{font-style:normal;color:var(--wp--preset--color--bone);font-weight:400}
@media (max-width:720px){
  .available__grid{grid-template-columns:1fr}
  .available-card{grid-template-columns:1fr}
  .available-card__img{aspect-ratio:16/10}
}

/* ===== wc.css ===== */
/* WOOCOMMERCE — single product page
   Override the default WC block styling to match the editorial design.
   The product image, title, price, description, and related products all
   get the same look as the rest of the site (bone background, serif typography,
   thin keylines, oxblood accents). */

/* ==== Product body ==== */
.woocommerce.product,
.woocommerce div.product {
  background: var(--bone);
  padding: var(--s-7) 0 var(--s-8);
}

/* Breadcrumbs — minimal, oxblood accent */
.woocommerce .woocommerce-breadcrumb,
.woocommerce div.product .woocommerce-breadcrumb {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  max-width: var(--container);
  margin: 0 auto var(--s-5);
  padding: 0 var(--gutter);
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce div.product .woocommerce-breadcrumb a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(14,17,22,0.18);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}

/* Main columns — single product layout */
.woocommerce .alignwide,
.woocommerce div.product .wp-block-columns.alignwide {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 860px) {
  .woocommerce .alignwide,
  .woocommerce div.product .wp-block-columns.alignwide {
    grid-template-columns: 1fr;
  }
}

/* ==== Product gallery — full vase visible ==== */
.woocommerce .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce .wp-block-woocommerce-product-image-gallery {
  position: relative;
  background: var(--bone);
  border: 1px solid rgba(14,17,22,0.12);
  padding: var(--s-3);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce .woocommerce-product-gallery img,
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce .wp-block-woocommerce-product-image-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}
/* Gallery thumbnails */
.woocommerce .flex-control-thumbs,
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.woocommerce .flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li {
  width: 60px;
  height: 60px;
  background: var(--bone);
  border: 1px solid rgba(14,17,22,0.12);
  overflow: hidden;
}
.woocommerce .flex-control-thumbs img,
.woocommerce div.product .flex-control-thumbs img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Gallery zoom button — hide the default mag glass */
.woocommerce .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* ==== Right column: title, price, excerpt, meta, add to cart ==== */
.woocommerce div.product .wp-block-column:last-child {
  padding-top: 0;
}

/* Product title */
.woocommerce div.product h1.product_title,
.woocommerce div.product .wp-block-post-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem !important;
  text-transform: none;
}

/* Price */
.woocommerce div.product .price,
.woocommerce div.product .wp-block-woocommerce-product-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem !important;
  color: var(--oxblood) !important;
  margin: 0 0 1.4rem;
  font-weight: 300;
}
.woocommerce div.product .price del,
.woocommerce div.product .price ins {
  display: inline;
  text-decoration: none;
  color: var(--grey);
}
.woocommerce div.product .price ins {
  color: var(--oxblood);
}

/* Short description / excerpt */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .wp-block-post-excerpt {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
  font-style: normal;
}
.woocommerce div.product .wp-block-post-excerpt p {
  margin: 0;
}

/* Product meta — tags and categories */
.woocommerce div.product .product_meta,
.woocommerce div.product .wp-block-woocommerce-product-meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 1.4rem 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(14,17,22,0.12);
}
.woocommerce div.product .product_meta > span,
.woocommerce div.product .wp-block-woocommerce-product-meta > * {
  display: block;
  margin-bottom: 0.4rem;
}
.woocommerce div.product .product_meta a,
.woocommerce div.product .wp-block-woocommerce-product-meta a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(14,17,22,0.18);
  margin: 0 0.25rem;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce div.product .wp-block-woocommerce-product-meta a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}

/* Add to cart form */
.woocommerce div.product form.cart {
  margin: 1.4rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.woocommerce div.product form.cart .quantity {
  margin: 0;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 60px;
  height: 44px;
  background: var(--bone);
  border: 1px solid rgba(14,17,22,0.18);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 0 0.6rem;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  height: 44px;
  padding: 0 1.4rem;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

/* ==== Tabs / Description area ==== */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .wp-block-woocommerce-product-details {
  max-width: var(--container);
  margin: var(--s-7) auto 0;
  padding: 0 var(--gutter);
}
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .wp-block-woocommerce-product-details .wc-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid rgba(14,17,22,0.12);
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div product .wp-block-woocommerce-product-details .wc-tabs li {
  padding: 0 0 0.8rem 0;
  border-bottom: 2px solid transparent;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .wp-block-woocommerce-product-details .wc-tabs li.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .wp-block-woocommerce-product-details .wc-tabs li a {
  color: inherit;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce div.product .wp-block-woocommerce-product-details .wc-tab {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.woocommerce div.product .wp-block-woocommerce-product-details h2,
.woocommerce div.product .woocommerce-Tabs-panel h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
}
.woocommerce div.product .wp-block-woocommerce-product-details p {
  margin: 0 0 1rem;
}

/* ==== Related products ==== */
.woocommerce .related.products,
.woocommerce .up-sells,
.woocommerce-related-products,
.woocommerce div.product .wp-block-woocommerce-related-products,
.woocommerce div.product .wp-block-woocommerce-product-collection {
  max-width: var(--container);
  margin: var(--s-8) auto 0;
  padding: var(--s-7) var(--gutter) 0;
  border-top: 1px solid rgba(14,17,22,0.12);
  display: block !important;
}
.woocommerce .related.products h2,
.woocommerce-related-products h2,
.woocommerce div.product .wp-block-woocommerce-related-products h2,
.woocommerce div.product .wp-block-woocommerce-product-collection h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  letter-spacing: -0.01em;
  text-align: left;
  clear: both;
  display: block;
  width: 100%;
  float: none;
}
/* Reset the WC product-collection block defaults that turn it into a sidebar */
.woocommerce .related.products ul.products,
.woocommerce-related-products ul,
.woocommerce div.product .wp-block-woocommerce-related-products ul,
.woocommerce div.product .wp-block-woocommerce-product-collection ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.2rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
  float: none;
  clear: both;
}
@media (max-width: 1024px) {
  .woocommerce .related.products ul.products,
  .woocommerce-related-products ul,
  .woocommerce div.product .wp-block-woocommerce-related-products ul {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 720px) {
  .woocommerce .related.products ul.products,
  .woocommerce-related-products ul,
  .woocommerce div.product .wp-block-woocommerce-related-products ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Related product card */
.woocommerce .related.products .product,
.woocommerce-related-products li,
.woocommerce div.product .wp-block-woocommerce-related-products li,
.woocommerce div.product .wp-block-woocommerce-product-collection li {
  background: var(--bone) !important;
  border: 1px solid rgba(14,17,22,0.12) !important;
  padding: 0 !important;
  text-align: left !important;
  overflow: hidden;
  transition: all 0.25s ease;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce .related.products .product:hover,
.woocommerce-related-products li:hover {
  border-color: var(--oxblood) !important;
}
.woocommerce .related.products .product a img,
.woocommerce-related-products li img,
.woocommerce div.product .wp-block-woocommerce-related-products li img,
.woocommerce div.product .wp-block-woocommerce-product-collection li img {
  width: 100% !important;
  aspect-ratio: 1;
  object-fit: contain !important;
  background: var(--bone);
  margin: 0 !important;
}
.woocommerce .related.products .product .woocommerce-loop-product__title,
.woocommerce-related-products li .woocommerce-loop-product__title,
.woocommerce div.product .wp-block-woocommerce-related-products li h2,
.woocommerce div.product .wp-block-woocommerce-related-products li h3,
.woocommerce div.product .wp-block-woocommerce-product-collection li h2,
.woocommerce div.product .wp-block-woocommerce-product-collection li h3 {
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  padding: 1rem 1rem 0.3rem !important;
  margin: 0 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
.woocommerce .related.products .product .price,
.woocommerce-related-products li .price,
.woocommerce div.product .wp-block-woocommerce-product-collection li .price {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 0.95rem !important;
  color: var(--oxblood) !important;
  padding: 0 1rem 0.5rem !important;
  display: block;
}
.woocommerce .related.products .product .button,
.woocommerce-related-products li .button,
.woocommerce div.product .wp-block-woocommerce-product-collection li .button {
  display: none;
}

/* ==== Store notices (sale, out of stock) ==== */
.woocommerce-store-notice,
.woocommerce-notices-wrapper {
  display: none !important;
}

/* ==== Wishlist plugin (YITH) — restyle to match ==== */
.woocommerce div.product .yith-wcwl-add-to-wishlist {
  margin: 1rem 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.woocommerce div.product .yith-wcwl-add-to-wishlist a {
  color: var(--grey);
  text-decoration: none;
}
.woocommerce div.product .yith-wcwl-add-to-wishlist a:hover {
  color: var(--oxblood);
}

/* ==== Reviews (avoid them looking generic) ==== */
.woocommerce #reviews,
.woocommerce div.product .wp-block-woocommerce-product-reviews {
  max-width: var(--container);
  margin: var(--s-7) auto 0;
  padding: 0 var(--gutter);
}
.woocommerce #reviews h2,
.woocommerce div.product .wp-block-woocommerce-product-reviews h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.woocommerce #reviews .commentlist li .comment-text,
.woocommerce div.product .wp-block-woocommerce-product-reviews .comment-text {
  border: 1px solid rgba(14,17,22,0.12);
  background: var(--bone);
  padding: 1.2rem;
}

/* ==== Mobile adjustments ==== */
@media (max-width: 860px) {
  .woocommerce div.product .alignwide {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .woocommerce .woocommerce-product-gallery {
    max-width: 100%;
  }
}


/* ===== shop.css ===== */
/* SHOP ARCHIVE (/shop/) — editorial 3-column grid matching catalogue aesthetic */

.wc-archive{
  background: var(--bone);
  padding: var(--s-7) 0 var(--s-8);
}
@media (max-width: 860px){.wc-archive{padding: var(--s-6) 0 var(--s-7)}}

.wc-archive__head{
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
}
.wc-archive__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0.35rem 0 var(--s-3);
  color: var(--ink);
}
.wc-archive__title em{font-style: italic; color: var(--oxblood)}
.wc-archive__lede{
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 var(--s-5);
}
.wc-archive__meta{
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.wc-archive__meta > div{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wc-archive__meta span{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.wc-archive__meta strong{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.wc-archive__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1024px){.wc-archive__grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 600px){.wc-archive__grid{grid-template-columns: 1fr; gap: var(--s-4)}}

.wc-card{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
}
.wc-card:hover{opacity: .9}

.wc-card__media{
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid #000;
}
.wc-card__media img{
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.wc-card:hover .wc-card__media img{transform: scale(1.03)}

.wc-card__meta{padding: 0 0.2rem}

.wc-card__family{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.5rem;
}

.wc-card__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.wc-card__sub{
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grey);
  margin-bottom: 0.6rem;
}

.wc-card__price{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
}

.wc-archive__empty{
  padding: var(--s-6) 0;
  color: var(--ink-soft);
}

/* Pagination */
.wc-archive .woocommerce-pagination{
  margin-top: var(--s-7);
  text-align: center;
}
.wc-archive .woocommerce-pagination ul{
  display: inline-flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wc-archive .woocommerce-pagination a,
.wc-archive .woocommerce-pagination span{
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
}
.wc-archive .woocommerce-pagination .current{
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}


/* SINGLE PRODUCT PAGE */

.wc-single{
  background: var(--bone);
  padding: var(--s-5) 0 var(--s-8);
}

.wc-single__crumb{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--s-3);
  padding-bottom: var(--s-5);
}
.wc-single__crumb a{
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.wc-single__crumb a:hover{border-color: var(--ink-soft)}
.wc-single__crumb-current{color: var(--ink)}

.wc-single__hero{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  align-items: start;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
@media (max-width: 860px){
  .wc-single__hero{grid-template-columns: 1fr; gap: var(--s-5)}
}

.wc-single__media{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid #000;
}
.wc-single__media img{
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left center;
}

.wc-single__media-link{
  display: block;
  width: 100%; height: 100%;
}

.wc-single__info{
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 860px){.wc-single__info{position: static}}

.wc-single__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0.4rem 0 var(--s-4);
}

.wc-single__short{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
  max-width: 28ch;
}

.wc-single__meta{
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wc-single__meta-row{
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--s-3);
  font-size: 14px;
  align-items: baseline;
}
.wc-single__meta-row dt{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}
.wc-single__meta-row dd{
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.wc-single__price{
  font-style: italic;
  color: var(--oxblood) !important;
}

.wc-single__cta{
  align-self: flex-start;
  margin-top: var(--s-3);
}

.wc-single__commission-note{
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  margin: var(--s-4) 0 0;
  max-width: 38ch;
}

.wc-single__story{
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.wc-single__story-body{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 65ch;
  margin-top: var(--s-3);
}
.wc-single__story-body p{margin: 0 0 var(--s-3)}

.wc-single__related{
  padding: var(--s-5) 0;
}
.wc-related__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 1024px){.wc-related__grid{grid-template-columns: repeat(3, 1fr)}}
@media (max-width: 720px){.wc-related__grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 420px){.wc-related__grid{grid-template-columns: 1fr}}

.wc-related__card{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
}
.wc-related__card:hover{opacity: .85}
.wc-related__img{
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid #000;
}
.wc-related__img img{
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left center;
}
.wc-related__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
}

/* Single product: style the WooCommerce product-description block output */
.wc-single__story-body{
  max-width: 65ch;
  margin-top: var(--s-3);
}
.wc-single__story-body > *{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 65ch;
}
.wc-single__story-body p{margin: 0 0 var(--s-3)}
.wc-single__story-body h2,
.wc-single__story-body h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-2);
}

/* Hide redundant WC block post-title (we render our own) */
.wc-single .wp-block-post-title{display:none}

/* Product categories inline */
.wc-single__meta .wc-block-product-categories{
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}
.wc-single__meta .wc-block-product-categories ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
}
.wc-single__meta .wc-block-product-categories li{
  display: inline;
}
.wc-single__meta .wc-block-product-categories li:after{
  content: ", ";
}
.wc-single__meta .wc-block-product-categories li:last-child:after{
  content: "";
}
.wc-single__meta .wc-block-product-categories a{
  color: var(--ink);
  text-decoration: none;
}


/* Shop archive pagination */
.wc-archive__pagination {
  margin: var(--s-6) auto var(--s-7);
  padding: 0 var(--s-4);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  letter-spacing: .04em;
}
.wc-archive__pagination .page-numbers {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wc-archive__pagination .page-numbers li {
  margin: 0;
}
.wc-archive__pagination .page-numbers a,
.wc-archive__pagination .page-numbers span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  background: var(--bone);
}
.wc-archive__pagination .page-numbers .current {
  background: var(--ink);
  color: var(--bone);
}
.wc-archive__pagination .page-numbers a:hover {
  background: var(--ink);
  color: var(--bone);
}

/* Empty state */
.wc-archive__empty {
  text-align: center;
  padding: var(--s-7);
  color: var(--ink-soft);
  font-style: italic;
}