/* =============================================================================
   Pages B (owner brief of 28 Sep 2026, built 8 Oct 2026): Heritage Art and the
   artwork page, the Heritage and Porcelain menus, Porcelain and product cards,
   the Gifting Atelier, Hospitality and Impact.

   Loads after system.css, so a rule here wins without !important. Every value
   comes from tokens.css; nothing below replaces an inline style with another
   one-off colour. Phone first: the grids collapse at the same widths the rest
   of the site uses (1100, 900, 640).
   ========================================================================== */

/* ---------------------------------------------------------------- Menus */
/* The Heritage and Porcelain feature cards carry one line and a button; the sub line is empty. */
.mf-sub:empty{display:none}
.mega-feature .mf-title{text-wrap:balance}

/* ---------------------------------------------------------------- Shared pieces */
.pb-center{text-align:center}
.pb-center .eyebrow{justify-content:center}
.pb-center .gold-rule,.pb-center hr.gold-rule{margin-left:auto;margin-right:auto}
.pb-narrow{max-width:760px;margin-left:auto;margin-right:auto}
.pb-h2{margin:14px 0 0}
.pb-h2-space{margin:14px 0 44px}
.pb-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.pb-center .pb-actions{justify-content:center}
.pb-text{font-size:1.1rem;color:var(--text);line-height:1.7}
.section.pb-no-bottom{padding-bottom:0}
.section.pb-list{padding-top:40px}
.pb-cta-row{margin-top:26px}
.link-jh.on-gold,.on-dark .link-jh.on-gold{color:var(--jh-gold-300);background-image:linear-gradient(var(--jh-gold-300),var(--jh-gold-300))}
.link-jh .go{display:inline-block;margin-left:6px;transition:transform var(--dur-2) var(--jh-ease)}
.link-jh:hover .go{transform:translateX(3px)}
.btn-jh.external::after{content:"\2197";margin-left:2px;font-size:.9em}

/* Page heroes carry their photograph as a real image (no inline background, better for the
   first paint); the dark scrim from system.css sits above it. */
.pb-hero .container{padding-bottom:26px}
.pb-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
.pb-hero .hero-actions{margin-top:26px}

/* ---------------------------------------------------------------- Heritage Art */
.pb-tabs{margin:34px 0 8px}
.pb-collection .collection-head{align-items:flex-end}
.pb-collection .ch-blurb{max-width:52ch}
/* A refined label: black ground, gold text, a gold hairline. */
.sold-flag{border:1px solid var(--jh-gold-500);letter-spacing:.14em}
.ap-dims{display:block;margin-top:2px;font-size:var(--fs-meta);color:var(--text-muted)}
.ap-foot .ap-na{font:600 .6875rem/1.35 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent);max-width:22ch}
.ap-foot .link-jh{font:600 .75rem/1.2 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ap-foot .wl-btn{padding:0}
.ap-foot .wl-form{display:inline}
.art-piece .ap-media{aspect-ratio:4/3}

/* The Making: a black band, the real photograph on the left, five numbered steps on the right. */
.pb-making .world-media{aspect-ratio:3/2;overflow:hidden;background:var(--jh-charcoal)}
.pb-making .world-media picture,.pb-making .world-media img{display:block;width:100%;height:100%}
.pb-making .world-media img{object-fit:cover}
.pb-making h2{margin:14px 0 0;color:var(--jh-ivory)}
.pb-making .make-steps li{align-items:flex-start}
.pb-making .make-steps li span{min-width:34px}

/* Behind every piece */
.pb-behind .pb-text{margin-top:0}

/* ---------------------------------------------------------------- Artwork page */
/* The story now sits in the rail before the price, so the rail is read, not pinned. */
.art-page .pd.pd-areas > .pd-rail{position:static}
.art-page .meta-list{margin-top:18px}
.art-page .meta-list li span:last-child{text-align:right}
.art-rail-story{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border)}
.art-rail-story h2{font-size:1.2rem;margin:0 0 8px}
.art-rail-story p{font-size:var(--fs-small);line-height:1.65;color:var(--text)}
.art-status{margin:18px 0 0;padding:14px 16px;border:1px solid var(--border);background:var(--surface-sunken);border-radius:var(--jh-radius)}
.art-status .as-label{display:block;font:600 .6875rem/1.3 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.art-status .as-value{display:block;margin-top:4px;font-family:var(--jh-font-display);font-size:1.15rem;line-height:1.3;color:var(--text)}
.art-status.is-sold .as-value{color:var(--text-accent)}
.art-status .as-note{display:block;margin-top:6px;font-size:var(--fs-meta);color:var(--text-muted)}
.art-price-label{display:block;margin:22px 0 0;font:600 .6875rem/1.3 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.art-page .art-price{margin-top:4px}
.art-page .pd-actions{margin-top:18px}

/* ---------------------------------------------------------------- Product cards */
/* One card, two links: the piece itself, then the call to action that suits how it is acquired.
   Availability is a quiet label with a gold mark, never a button. */
.pcard{display:flex;flex-direction:column}
.pcard-link{display:block;text-decoration:none;color:inherit}
.pcard-link:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.pcard .pcard-price{margin:8px 0 6px}
.pb-avail{display:inline-flex;align-items:center;gap:8px;font:500 .6875rem/1.3 var(--jh-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.pb-avail::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--jh-radius-round);background:var(--jh-gold-500)}
.pb-avail.is-made_to_order::before{background:var(--jh-charcoal)}
.pb-avail.is-enquire::before,.pb-avail.is-sold_out::before{background:transparent;border:1px solid var(--jh-gold-deep)}
.pcard-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;min-height:32px;
  font:600 .75rem/1.2 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--rule-gold);padding-bottom:4px;transition:color var(--dur-2) var(--jh-ease)}
.pcard-cta .go{transition:transform var(--dur-2) var(--jh-ease)}
.pcard-cta:hover{color:var(--text-accent)}
.pcard-cta:hover .go{transform:translateX(3px)}
.pcard-cta:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.pd-rail .pb-avail{margin:4px 0 0}

/* ---------------------------------------------------------------- Porcelain */
.section.pb-catalogue{padding-top:48px}
.pb-band .container{text-align:center}
.pb-band .eyebrow{justify-content:center}
.pb-band h2{margin:14px auto 0;max-width:24ch}
.pb-band .gold-rule{margin:20px auto 24px}
.pb-band .lead{max-width:56ch;margin:0 auto}
.pb-band .pb-actions{justify-content:center;margin-top:36px}

/* ---------------------------------------------------------------- Gifting Atelier */
.pb-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pb-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:0 20px;
  border:1px solid var(--border);background:var(--surface-raised);font-family:var(--jh-font-display);font-size:1.2rem;line-height:1.2;
  color:var(--text);text-decoration:none;transition:border-color var(--dur-2) var(--jh-ease)}
.pb-cat::after{content:"\2192";font-family:var(--jh-font-body);font-size:1rem;color:var(--text-muted);flex:none}
.pb-cat:hover{border-color:var(--rule-gold)}
.pb-cat:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:1100px){.pb-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pb-cats{grid-template-columns:minmax(0,1fr)}}
.pb-gift-lead{max-width:60ch;margin:8px 0 26px}

/* ---------------------------------------------------------------- Hospitality */
.pb-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1100px){.pb-offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pb-offers{grid-template-columns:minmax(0,1fr)}}
.pb-offer{display:flex;flex-direction:column;padding:30px;border:1px solid var(--border);background:var(--surface-raised)}
.pb-offer svg{width:30px;height:30px;stroke:var(--jh-gold-500);fill:none;stroke-width:1.2;margin-bottom:14px}
.pb-offer h3{font-size:1.3rem}
.pb-offer .gold-rule{margin:12px 0}
.pb-offer p{margin:0;font-size:var(--fs-small);color:var(--text-muted);line-height:1.6}
.pb-sets .card-jh h3{font-size:1.1rem}
.pb-sets-cta{margin-top:44px;text-align:center}
.pb-quote{max-width:840px}
.pb-quote h2{margin:14px 0 8px}
.pb-quote .lead{max-width:56ch}
.pb-quote .shop-note{margin-top:16px}
.pb-quote .auth-card{margin-top:26px;position:relative}
.pb-honeypot{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.pb-errlist{margin:0;padding-left:18px}

/* ---------------------------------------------------------------- Impact */
.section.pb-metrics{padding-block:72px}
.pb-figures{margin:26px 0 0;text-align:center;font-size:var(--fs-meta);color:var(--text-inverse-quiet)}
.pb-stories .world + .world{margin-top:80px}
.pb-stories h2{margin:14px 0 0}
.pb-impact-grid .card-jh h3{font-size:1.2rem}
.pb-impact-grid .cap .price{font-size:var(--fs-meta)}

.wl-form-contents{display:contents}
.ap-foot{flex-wrap:wrap}
.ap-foot .ap-na{flex:1 1 100%;margin-bottom:6px}
/* The card's label sits inside the piece link now, so the child rules from system.css are restated here. */
.pcard-link > .eyebrow{display:flex;flex-wrap:wrap;row-gap:4px;gap:.5rem;margin:0 0 8px;font-size:11px;letter-spacing:.14em}
.pcard-link > .eyebrow::before{width:16px}