/* ── Honeystone: the boutique brand layer (2 Nov 2026). Loaded after marblearc.css by the shared chrome when the install's
   TZ_BRAND names it. Only the tokens, the typefaces and the boutique home sections live here; the layout is MarbleArc's.
   Palette: honey limestone, cream, moss, chocolate and camel — colours from within ten miles of Cheltenham. ───────────── */
:root{
  --tz-accent:#b8862b;          /* honey gold */
  --tz-accent-dark:#96691a;
  --tz-ink:#2b2622;             /* warm charcoal */
  --tz-ink-2:#5a524a;
  --tz-mute:#8c8070;
  --tz-cream:#f7f2e8;
  --tz-sand:#ead9bd;            /* the stone */
  --tz-paper:#fbf7ef;
  --tz-line:#e4d9c6;
  --tz-moss:#5b6b4a;
  --tz-head:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --tz-body:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --accent:#b8862b;--accent-hover:#c9962e;--accent-deep:#96691a;--accent-tint:#f6ecd6;
}
html[data-theme="dark"]{--tz-cream:#15130f;--tz-sand:#221d16;--tz-paper:#1a1713;--tz-line:#2e2920;--tz-ink:#f3eee4;--tz-ink-2:#bdb3a4;--tz-mute:#8c8477}
body{background:var(--tz-paper)}

/* type: a soft serif for headings, lighter weights, a little more air */
h1,h2,h3,.tz-sec-head h2,.tz-hero-card h1,.tz-land-head h1,.tz-page-head h1,.tz-post h3,.tz-card-body h3,.tz-foot-col h4,.tz-foot-nl h4{font-family:var(--tz-head);font-weight:600;letter-spacing:-.01em}
.tz-sec-head h2{font-size:clamp(28px,3.2vw,40px);font-weight:600}
.tz-home .tz-sec-head h2{font-size:40px}
.tz-wordmark{font-family:var(--tz-head);font-weight:600;letter-spacing:-.02em;text-transform:lowercase}
.tz-wordmark::after{content:".";color:var(--tz-accent)}
.tz-eyebrow{color:var(--tz-accent);letter-spacing:.14em}
.tz-cat-label,.tz-badge,.tz-btn,.tz-quick{font-family:var(--tz-body)}
/* the ghost button: MarbleArc's hover fills every button black but leaves the ghost's ink-coloured text in place, which
   on Honeystone's warm charcoal is unreadable. On hover the ghost becomes the solid button. (2 Nov 2026) */
.tz-btn-ghost:hover{background:var(--tz-ink);color:var(--tz-paper);border-color:var(--tz-ink)}
html[data-theme="dark"] .tz-btn-ghost:hover{background:#f3f3f5;color:#111;border-color:#f3f3f5}
.tz-ann{background:var(--tz-moss);color:#fff}
.tz-ann b{color:#f1dca8}
.tz-ann a{color:#fff}

/* ── boutique home (home-boutique.php) ───────────────────────────────────────────────────────────────────────────── */
.hs-hero{position:relative;overflow:hidden;background:var(--tz-sand);height:min(86vh,900px);min-height:520px}
.hs-hero .tz-img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* the hero clip (2 Nov 2026): sits over the still, which stays underneath as the poster and the fallback. Hidden, so never
   fetched beyond metadata, on phones and for reduced-motion visitors: they get the still. The generated clip carries a
   soft dark film edge, so both it and its poster still are scaled up a touch to push that edge out of the frame. */
.hs-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;pointer-events:none}
.hs-hero.has-video .tz-img,.hs-hero-video{transform:scale(1.05);transform-origin:50% 35%}
@media (max-width:600px),(prefers-reduced-motion:reduce){.hs-hero-video{display:none}}
.hs-hero-card{position:absolute;left:var(--tz-gutter);bottom:28px;max-width:560px;background:rgba(251,247,239,.94);padding:26px 28px 28px}
.hs-hero-card h1{font-size:clamp(34px,5.4vw,64px);line-height:.98;margin:0 0 12px}
.hs-hero-card p{font-size:16px;line-height:1.55;color:var(--tz-ink-2);margin:0 0 18px}
html[data-theme="dark"] .hs-hero-card{background:rgba(26,23,19,.92)}
@media (min-width:834px){.hs-hero-card{left:calc(var(--tz-gutter) + 32px);bottom:44px;padding:36px 40px 40px}}

/* the boots tile: the boot-room photograph is tall with the boots along its bottom edge, and the tile goes landscape on
   phones, so a centred crop showed coats and wall. Anchor it to the bottom at every size. (2 Nov 2026) */
.tz-home-boutique .tz-cat-sweat .tz-img{object-position:50% 100%}

.hs-story{display:grid;gap:var(--tz-gap);margin-top:72px}
.hs-story-copy{background:var(--tz-sand);padding:36px 28px}
.hs-story-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.04;margin:8px 0 16px}
.hs-story-copy p{font-size:16px;line-height:1.6;color:var(--tz-ink-2);margin:0 0 22px;max-width:52ch}
.hs-story-media{display:grid;grid-template-columns:1fr 1fr;gap:var(--tz-gap)}
.hs-story-media figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--tz-sand)}
.hs-story-media .tz-img{width:100%;height:100%;object-fit:cover}
@media (min-width:834px){
  .hs-story{grid-template-columns:1fr 1.25fr;align-items:stretch}
  .hs-story-copy{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
}

/* the lookbook banner: Honeystone's backdrop is a dark drystone-wall photograph, and on wide screens MarbleArc drops the
   copy panel's white backing, so the heading went dark on dark. A soft scrim up the left and pale type fix it; under 700px
   the panel keeps its backing and the theme's own colours. (2 Nov 2026) */
@media (min-width:700px){
  .tz-look-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(24,19,12,.62) 0%,rgba(24,19,12,.38) 34%,rgba(24,19,12,0) 62%)}
  .tz-look-copy h2{color:#fbf7ef;text-shadow:0 2px 22px rgba(0,0,0,.45)}
  .tz-look-copy .tz-eyebrow{color:#e9c979;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .tz-look-copy .tz-btn{background:#fbf7ef;color:#2b2622}
  .tz-look-copy .tz-btn:hover{background:#fff;color:#2b2622}
  .tz-look-copy .tz-look-hint{color:#e4d9c6}
}

/* the edit: bigger cards, more white space than the department grid */
.hs-edit .tz-grid{gap:34px 20px}
@media (min-width:1000px){.hs-edit .tz-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* about page (about-boutique.php) */
.hs-about{display:grid;gap:40px;padding-top:28px}
.hs-about-copy{max-width:62ch}
.hs-about-copy h1{font-size:clamp(34px,4.6vw,56px);line-height:1.02;margin:6px 0 18px}
.hs-about-copy .tz-lead{font-size:19px;line-height:1.5;color:var(--tz-ink)}
.hs-about-copy p{font-size:16px;line-height:1.65;color:var(--tz-ink-2)}
.hs-about-copy h2{font-size:24px;margin:34px 0 10px}
.hs-about-copy address{font-style:normal;line-height:1.6;margin:0 0 8px}
.hs-about-demo{font-size:13px;color:var(--tz-mute);border-top:1px solid var(--tz-line);padding-top:16px;margin-top:36px}
.hs-about-media{display:grid;gap:var(--tz-gap);align-content:start}
.hs-about-media figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--tz-sand)}
.hs-about-media .tz-img{width:100%;height:100%;object-fit:cover}
@media (min-width:834px){.hs-about{grid-template-columns:1.1fr .9fr;gap:64px;padding-top:44px}}