/* =============================================================================
   J. ALIX BARBER PHOTOGRAPHY -- concept design (styles.css)
   Design draw: glass-card crossfade hero / museum lightbox gallery + working
   commerce signature / editorial serif (Cormorant Garamond) + Jost / warm
   espresso-ivory-gold, restrained Profundities rose on the boutique only.
   kit.css carries the mechanics; everything visual lives here.
   ============================================================================= */

:root{
  --k-head-h:84px;
  --k-logo-h:62px;
  --k-ink:#17130f;            /* espresso near-black */
  --k-on-ink:#f2ece0;         /* ivory on dark */
  --k-paper:#f6f1e7;          /* warm ivory page */
  --k-card:#fffdf8;           /* card surface */
  --k-muted:#6c6154;          /* warm gray text */
  --k-line:rgba(23,19,15,.14);
  --k-line-on-dark:rgba(242,236,224,.16);
  --k-accent:#8a6a2e;         /* deep gold: kit focus rings / form outlines */
  --k-accent-ink:#ffffff;
  --k-radius:3px;             /* gallery-crisp, minimal rounding */
  --k-wrap:1220px;
  --k-shadow:0 26px 60px -30px rgba(23,19,15,.5);
  --k-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --k-font-body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gold:#A2824A;            /* brand gold. ONE definition: every gold button
                               reads var(--gold), so this line is the standard
                               she asked for (slides 1 and 4). */
  --gold-soft:#c8a86a;
  --rose:#a83a68;           /* Profundities sub-brand, boutique ONLY */
  --rose-deep:#7c274a;
  --linen:#efe7d8;          /* tinted band */
  --ink-2:#241d16;          /* slightly lifted espresso for dark panels */
}

/* ---- type rhythm ---- */
body{font-size:16.5px; letter-spacing:.005em}
h1,h2,h3{font-weight:500; letter-spacing:.004em}
.display{font-family:var(--k-font-display); font-weight:500; line-height:1.02}
main{overflow-x:clip}

.k-wrap{padding:0 28px}
.eyebrow{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; font-weight:500; color:var(--gold); display:inline-flex; align-items:center; gap:12px}
.eyebrow--onink{color:var(--gold-soft)}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7}
.eyebrow--center{justify-content:center}
.lede{color:var(--k-muted); font-size:1.075rem; line-height:1.7; max-width:60ch}
.lede--onink{color:rgba(242,236,224,.82)}
.serif-lead{font-family:var(--k-font-display); font-weight:500; font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.34; letter-spacing:.005em}

/* section frames */
.band{padding:clamp(68px,9vw,120px) 0}
.band--tight{padding:clamp(48px,6vw,80px) 0}
.band--tint{background:var(--linen)}
.band--dark{background:var(--k-ink); color:var(--k-on-ink)}
.band--dark .lede{color:rgba(242,236,224,.8)}
.section-head{max-width:760px}
.section-head h2{font-family:var(--k-font-display); font-size:clamp(2.1rem,4.4vw,3.4rem); margin:18px 0 0}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.rule-gold{width:64px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); border:0; margin:22px 0 0}

/* ---- buttons: primary = espresso ink; accent(gold) reserved for detailing ---- */
.k-btn{border-radius:2px; font-family:var(--k-font-body); font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; font-size:.8rem; min-height:52px; padding:0 30px}
.k-btn--solid{background:var(--k-ink); color:var(--k-on-ink); border-color:var(--k-ink)}
.k-btn--solid:hover{filter:none; background:#2c231a; border-color:#2c231a; transform:translateY(-2px)}
.k-btn--gold{background:var(--gold); color:#20180c; border-color:var(--gold)}
.k-btn--gold:hover{background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-2px)}
.k-btn--rose{background:var(--rose); color:#fff; border-color:var(--rose)}
.k-btn--rose:hover{background:var(--rose-deep); border-color:var(--rose-deep); transform:translateY(-2px)}
.k-btn--line{background:transparent; color:var(--k-ink); border:1px solid var(--k-line)}
.k-btn--line:hover{border-color:var(--k-ink); transform:translateY(-2px)}
.k-btn--onink{background:transparent; color:var(--k-on-ink); border:1px solid var(--k-line-on-dark)}
.k-btn--onink:hover{border-color:var(--k-on-ink); background:rgba(242,236,224,.08)}
.textlink{font-family:var(--k-font-body); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  font-size:.76rem; color:var(--k-ink); display:inline-flex; align-items:center; gap:10px; min-height:44px}
.textlink::after{content:"\2192"; transition:transform .2s ease}
.textlink:hover::after{transform:translateX(5px)}
.textlink--gold{color:var(--gold)}
.textlink--onink{color:var(--k-on-ink)}

/* ---- sample bar ---- */
.k-samplebar{background:var(--ink-2); color:var(--gold-soft); letter-spacing:.04em}
.k-samplebar span{color:rgba(242,236,224,.72)}

/* =========================== HEADER (light, dark logo) =========================== */
.k-head{background:color-mix(in srgb,var(--k-paper) 90%,transparent); border-bottom:1px solid var(--k-line)}
.k-brand img{border-radius:0; filter:none}
/* Six full division names have to sit on one bar without going ragged, so every
   link is the same height, centred both ways, wraps on its own words, and is
   never squeezed narrower than its longest word. Below 1100px the two least
   used divisions move into the More menu rather than the bar getting denser. */
.k-nav{align-items:stretch; gap:0}
.k-nav > a{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.13em; font-size:.665rem;
  font-weight:400; color:var(--k-muted); padding:10px 11px; position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  line-height:1.5; width:max-content; max-width:106px; flex:0 0 auto; text-wrap:balance}
.k-nav > a:hover{color:var(--k-ink)}
.k-nav > a[aria-current="page"]{color:var(--k-ink)}
.k-nav > a[aria-current="page"]::after{content:""; position:absolute; left:11px; right:11px; bottom:12px;
  height:1px; background:var(--gold)}
.nav-more-menu a.nav-narrow{display:none}
@media (max-width:1240px){
  :root{--k-logo-h:52px}
  .k-nav > a{letter-spacing:.1em; font-size:.63rem; padding:10px 8px; max-width:98px}
}
@media (max-width:1000px){
  .k-nav > a.nav-wide{display:none}
  .nav-more-menu a.nav-narrow{display:flex}
}
.head-tools{display:flex; align-items:center; gap:6px; margin-left:auto}
.head-tools .k-nav{margin-left:0}
/* cart button */
.cart-btn{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:0; background:transparent; color:var(--k-ink); cursor:pointer}
.cart-btn svg{width:22px; height:22px}
.cart-count{position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--gold); color:#20180c; font-family:var(--k-font-body); font-size:.66rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1}
.cart-count[data-empty="true"]{display:none}

/* =========================== HERO (glass card crossfade) =========================== */
.hero{position:relative; min-height:calc(100svh - var(--k-head-h)); display:flex; align-items:flex-end;
  overflow:clip; background:var(--k-ink)}
.hero-card{max-width:588px; background:color-mix(in srgb,var(--k-paper) 12%,transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(242,236,224,.22); padding:clamp(30px,4vw,46px); border-radius:2px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.hero-card h1{font-family:var(--k-font-display); color:var(--k-on-ink); font-weight:500;
  font-size:clamp(2.7rem,6vw,4.7rem); line-height:1.0; margin:20px 0 0}
.hero-card h1 em{font-style:italic; color:var(--gold-soft)}
.hero-card .lede{color:rgba(242,236,224,.86); margin-top:20px; max-width:44ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:26px}
.hero-trust span{font-family:var(--k-font-body); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,236,224,.82); display:inline-flex; align-items:center; gap:9px}
.hero-trust span::before{content:""; width:5px; height:5px; background:var(--gold); border-radius:50%; flex:none}
.hero-caption{position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  padding:16px 0 0; margin-top:26px; border-top:1px solid rgba(242,236,224,.18);
  font-family:var(--k-font-body); color:rgba(242,236,224,.78); font-size:.82rem; letter-spacing:.04em; min-height:34px}
.hero-caption .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none}
.hero-caption b{font-family:var(--k-font-display); font-style:italic; font-weight:500; color:var(--k-on-ink);
  font-size:1.05rem; letter-spacing:.01em}

/* =========================== COLLECTIONS (3 doorways) =========================== */
.collections{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:2px; background:var(--k-line)}
.doorway{position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; background:var(--k-ink)}
.doorway img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .8s ease, opacity .5s}
.doorway::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,10,8,.82),rgba(12,10,8,.18) 66%)}
.doorway:hover img{transform:scale(1.06); opacity:1}
.doorway-body{position:relative; z-index:2; padding:30px 30px 34px; color:var(--k-on-ink)}
.doorway-body .num{font-family:var(--k-font-display); font-style:italic; color:var(--gold-soft); font-size:1.1rem}
.doorway-body h3{font-family:var(--k-font-display); font-size:1.9rem; margin:6px 0 8px; font-weight:500}
.doorway-body p{color:rgba(242,236,224,.82); font-size:1rem; line-height:1.55; max-width:34ch}
.doorway-body .textlink{margin-top:14px}
/* branded (no-photo) doorway, used for the boutique so baked-in image text never collides */
.doorway--brand{background:linear-gradient(155deg,var(--rose-deep) 0%,#2a1622 52%,var(--ink-2) 100%)}
.doorway--brand::after{background:linear-gradient(0deg,rgba(12,10,8,.55),transparent 62%)}
.doorway--brand .brandmark{position:absolute; top:26px; left:30px; right:30px; z-index:2}
.doorway--brand .brandmark img{height:76px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}

/* =========================== WORK GRID (museum lightbox) =========================== */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.work-grid--feature{grid-template-columns:repeat(3,1fr)}
.work-grid--four{grid-template-columns:repeat(4,1fr)}
.work{margin:0}
.work .k-tile{width:100%; aspect-ratio:4/5; display:block; background:var(--ink-2)}
.work .k-tile::before{content:""; display:block; padding-top:125%}
.work--wide{grid-column:span 2}
.work--wide .k-tile{aspect-ratio:16/10}
.work--wide .k-tile::before{padding-top:62.5%}
.work-meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 2px 0}
.work-title{font-family:var(--k-font-display); font-style:italic; font-size:1.28rem; font-weight:500; line-height:1.1}
/* The title is a link to the work's own page; it keeps the caption's look and
   only shows it is clickable on hover or keyboard focus. */
a.work-title{color:inherit; text-decoration:none}
a.work-title:hover, a.work-title:focus-visible{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.work-place{font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--k-muted); white-space:nowrap}
.edition{display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-family:var(--k-font-body);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.edition::before{content:""; width:5px; height:5px; background:var(--gold); border-radius:50%}

/* =========================== SPLIT BANDS (framed / about / sovereignty) =========================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}
.split--reverse .split-media{order:2}
.split-media{position:relative; min-height:440px; border-radius:2px; overflow:hidden; background:var(--ink-2)}
.split-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.split-media--frame{padding:22px; background:var(--k-card); border:1px solid var(--k-line); box-shadow:var(--k-shadow)}
.split-media--frame img{position:relative; inset:auto; height:auto; border:1px solid var(--k-line)}
.split-body h2{font-family:var(--k-font-display); font-size:clamp(1.9rem,3.6vw,3rem); margin:16px 0 0}
.split-body .lede{margin-top:18px}
.partner-list{list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px}
.partner-list li{font-family:var(--k-font-body); font-size:.9rem; color:var(--k-ink); display:flex; gap:10px; align-items:baseline}
.partner-list li::before{content:""; width:6px; height:6px; margin-top:6px; border:1px solid var(--gold); transform:rotate(45deg); flex:none}
.pull{font-family:var(--k-font-display); font-style:italic; font-weight:500; font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.32; letter-spacing:.005em}
.pull .mark{color:var(--gold)}

/* =========================== BOUTIQUE / PRODUCTS =========================== */
.boutique-theme{--accent:var(--rose)}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.product-grid--three{grid-template-columns:repeat(3,1fr)}
.product{display:flex; flex-direction:column; background:var(--k-card); color:var(--k-ink); border:1px solid var(--k-line); border-radius:2px; overflow:hidden}
.product-name{color:var(--k-ink)}
.product-media{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden}
.product-media::before{content:""; display:block; padding-top:100%}
.product-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%; transition:transform .5s ease}
.product:hover .product-media img{transform:scale(1.04)}
.product-tag{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--k-font-body); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; background:var(--rose); color:#fff; padding:5px 9px; border-radius:2px}
.product-tag--soon{background:var(--ink-2); color:var(--gold-soft)}
.product-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.product-name{font-family:var(--k-font-display); font-size:1.24rem; font-weight:500; line-height:1.16; letter-spacing:.005em}
.product-sub{font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--k-muted); margin-top:7px}
.product-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px}
.price{font-family:var(--k-font-display); font-size:1.4rem; font-weight:600; color:var(--k-ink)}
.add-btn{border:0; cursor:pointer; background:var(--k-ink); color:var(--k-on-ink); font-family:var(--k-font-body);
  text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:500; min-height:44px; padding:0 16px; border-radius:2px;
  transition:background .16s, transform .16s}
.add-btn:hover{background:var(--rose); transform:translateY(-2px)}
.add-btn.is-added{background:var(--rose)}
.add-btn:disabled{opacity:.5; cursor:not-allowed}

/* =========================== FORM =========================== */
.inquire-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:start}
.k-form{background:var(--k-card); border:1px solid var(--k-line); border-radius:3px; padding:clamp(24px,3vw,36px); color:var(--k-ink)}
.band--dark .k-form{color:var(--k-ink)}
.k-form h3{font-family:var(--k-font-display); font-size:1.7rem; margin:0 0 20px; font-weight:500}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.contact-lines{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px}
.contact-lines li{display:flex; gap:14px; align-items:flex-start; font-family:var(--k-font-body); font-size:.95rem}
.contact-lines .lab{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); min-width:96px; padding-top:3px}

/* =========================== FOOTER =========================== */
.foot{background:var(--k-paper); color:var(--k-ink); padding:clamp(56px,7vw,88px) 0 0; border-top:1px solid var(--k-line)}
/* Six groups: the brand block, then five named divisions. The link columns size
   to their own content (auto) so a two-word division never wraps to two lines,
   and the brand block takes whatever is left. */
.foot-top{display:grid; grid-template-columns:minmax(240px,1.5fr) repeat(5,auto);
  gap:clamp(20px,2.6vw,44px); align-items:start}
.foot-brand{padding-top:2px}
.foot-links a.nowrap{white-space:nowrap}
.foot img.foot-logo{height:64px; width:auto; margin-bottom:20px}
.foot p{color:var(--k-muted); font-size:.92rem; line-height:1.6; max-width:34ch}
.foot h4{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem;
  color:var(--gold); font-weight:500; margin:0 0 12px}
.foot-links{display:flex; flex-direction:column}
.foot-links a{color:var(--k-muted); font-size:.94rem; min-height:44px; display:flex; align-items:center}
.foot-links a:hover{color:var(--k-ink)}
.handle{font-family:var(--k-font-body); color:var(--k-ink); font-size:.92rem; letter-spacing:.02em}
/* On the dark inquiry band the ink colour is invisible against the ground. */
.band--dark .handle{color:var(--k-on-ink)}
.band--dark a.handle:hover,.foot a.handle:hover{color:var(--gold-soft)}
/* The rule under a link is a response to the visitor, not a standing ornament. */
a.handle{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px;
  transition:border-color .18s ease, color .18s ease}
a.handle:hover,a.handle:focus-visible{border-bottom-color:var(--gold-soft)}
@media (prefers-reduced-motion:reduce){a.handle{transition:none}}
.foot-legal{border-top:1px solid var(--k-line); margin-top:clamp(46px,6vw,72px); padding:26px 0; text-align:center}
.foot-legal p{max-width:1050px; margin:0 auto; color:var(--k-muted); text-wrap:balance}
.tm{font-family:var(--k-font-body); font-size:.7rem; letter-spacing:.06em}

/* =========================== CART DRAWER + TOAST =========================== */
.cart-overlay{position:fixed; inset:0; z-index:80; background:rgba(12,10,8,.5); opacity:0; visibility:hidden; transition:opacity .3s}
.cart-overlay.is-open{opacity:1; visibility:visible}
.cart-drawer{position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(420px,92vw); background:var(--k-paper);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)}
.cart-drawer.is-open{transform:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--k-line)}
.cart-head h2{font-family:var(--k-font-display); font-size:1.5rem; font-weight:500}
.cart-close{background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--k-ink); min-width:44px; min-height:44px}
.cart-items{flex:1; overflow-y:auto; padding:8px 24px}
.cart-empty{padding:48px 8px; text-align:center; color:var(--k-muted); font-family:var(--k-font-body)}
.cart-line{display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--k-line)}
.cart-line-img{width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--k-line); padding:4px}
.cart-line-name{font-family:var(--k-font-display); font-size:1.05rem; line-height:1.2}
.cart-line-price{font-family:var(--k-font-body); font-size:.8rem; color:var(--k-muted); margin-top:3px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--k-line); border-radius:2px; margin-top:8px}
.qty button{width:44px; height:44px; border:0; background:transparent; cursor:pointer; font-size:1.05rem; color:var(--k-ink)}
.qty span{min-width:30px; text-align:center; font-family:var(--k-font-body); font-size:.9rem}
.cart-line-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.cart-line-total{font-family:var(--k-font-display); font-size:1.1rem; font-weight:600}
.link-remove{background:none; border:0; cursor:pointer; font-family:var(--k-font-body); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--k-muted); text-decoration:underline; min-height:44px;
  display:inline-flex; align-items:center}
.link-remove:hover{color:var(--rose)}
.cart-foot{padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--k-line); background:var(--k-card)}
.cart-subtotal{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.cart-subtotal .lab{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:var(--k-muted)}
.cart-subtotal .val{font-family:var(--k-font-display); font-size:1.5rem; font-weight:600}
.cart-note{font-size:.76rem; color:var(--k-muted); font-family:var(--k-font-body); margin:4px 0 16px}

.toast{position:fixed; z-index:95; left:50%; bottom:26px; transform:translate(-50%,140%);
  background:var(--k-ink); color:var(--k-on-ink); padding:14px 22px; border-radius:2px; box-shadow:var(--k-shadow);
  font-family:var(--k-font-body); font-size:.86rem; display:flex; gap:12px; align-items:center; transition:transform .34s ease; max-width:92vw}
.toast.is-show{transform:translate(-50%,0)}
.toast:empty{display:none}
.toast .tk{color:var(--gold-soft)}
.toast a{color:var(--gold-soft); text-decoration:underline; white-space:nowrap}

/* =========================== CART PAGE =========================== */
.cartpage{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.cartpage-items{border-top:1px solid var(--k-line)}
.cartpage-line{display:grid; grid-template-columns:96px 1fr auto; gap:20px; padding:24px 0; border-bottom:1px solid var(--k-line)}
.cartpage-line-img{width:96px; height:96px; object-fit:contain; background:#fff; border:1px solid var(--k-line); padding:6px}
.summary{background:var(--k-card); border:1px solid var(--k-line); border-radius:3px; padding:28px; position:sticky; top:calc(var(--k-head-h) + 20px)}
.summary h2{font-family:var(--k-font-display); font-size:1.7rem; font-weight:500; margin:0 0 18px}
.sum-row{display:flex; justify-content:space-between; padding:9px 0; font-family:var(--k-font-body); font-size:.95rem; color:var(--k-muted)}
.sum-row.total{border-top:1px solid var(--k-line); margin-top:8px; padding-top:16px; color:var(--k-ink)}
.sum-row.total .v{font-family:var(--k-font-display); font-size:1.5rem; font-weight:600}

/* checkout steps */
.checkout-steps{display:flex; gap:0; margin:0 0 26px; counter-reset:step}
.cstep{flex:1; text-align:center; font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--k-muted); padding-bottom:12px; border-bottom:2px solid var(--k-line); position:relative}
.cstep[aria-current="true"]{color:var(--k-ink); border-color:var(--gold)}
.cstep .n{display:inline-flex; width:24px; height:24px; border-radius:50%; border:1px solid currentColor;
  align-items:center; justify-content:center; margin-right:8px; font-size:.72rem}
.cstep[aria-current="true"] .n{background:var(--gold); border-color:var(--gold); color:#20180c}
.checkout-panel[hidden]{display:none}
.checkout-confirm{text-align:center; padding:20px 0}
.checkout-confirm .seal{width:74px; height:74px; margin:0 auto 22px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold)}
.checkout-confirm h2{font-family:var(--k-font-display); font-size:2.2rem; font-weight:500; margin:0 0 12px}
.order-no{font-family:var(--k-font-body); letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; color:var(--gold); margin-top:6px}

/* small page hero (interior pages) */
.pagehero{background:var(--k-ink); color:var(--k-on-ink); padding:clamp(70px,10vw,130px) 0 clamp(46px,6vw,80px)}
.pagehero h1{font-family:var(--k-font-display); font-size:clamp(2.6rem,6vw,4.4rem); font-weight:500; line-height:1.0; margin:18px 0 0}
.pagehero .lede{color:rgba(242,236,224,.8); margin-top:20px}
/* The Boutique opens on the same warm ivory the rest of the Boutique and the
   footer use, with the Profundities logo as the section's identity rather than
   a small mark above a headline (deck slide 29). */
.pagehero--ivory{background:var(--linen); color:var(--k-ink)}
.pagehero--ivory .lede{color:var(--k-muted)}
.pagehero--ivory .crumb,.crumb--ink{color:var(--k-muted)}
.pagehero--ivory .crumb a{color:var(--k-ink)}
.bq-logo{display:block; width:auto; height:clamp(150px,19vw,260px); margin:clamp(26px,4vw,44px) auto clamp(18px,2.5vw,28px)}
.bq-lede{max-width:660px; margin:0 auto; text-align:center; text-wrap:pretty}
.crumb{font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,236,224,.55)}
.crumb a{min-height:44px; display:inline-flex; align-items:center}
.crumb a:hover{color:var(--gold-soft)}

/* callbar (no phone: inquire + shop) */
.k-callbar .k-btn{min-height:48px}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1000px){
  .collections{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:repeat(3,auto); row-gap:34px}
  .foot-brand{grid-column:1 / -1}
  .split{grid-template-columns:1fr}
  .split--reverse .split-media{order:0}
  .inquire-grid{grid-template-columns:1fr}
  .cartpage{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:760px){
  .head-tools .k-nav{display:none}
  .hero{min-height:auto}
  .hero-inner{padding-top:34px; padding-bottom:32px}
  .hero-card{max-width:none}
  .collections{grid-template-columns:1fr}
  .work--wide{grid-column:auto}
  .partner-list{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cart-line{grid-template-columns:56px 1fr}
  .cart-line-right{grid-column:2; flex-direction:row; justify-content:space-between; align-items:center; width:100%}
}
@media (max-width:520px){
  .work-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .doorway img,.product-media img,.k-tile img{transition:none}
}

/* ============================================================================
   MIGRATION ADDITIONS (client feedback pass)
   ============================================================================ */

/* ---- nav "More" dropdown (native details/summary, no JS) ---- */
.nav-more{position:relative; display:flex; align-items:stretch}
.nav-more summary{list-style:none; cursor:pointer; font-family:var(--k-font-body); text-transform:uppercase;
  letter-spacing:.13em; font-size:.665rem; color:var(--k-muted); padding:10px 11px; min-height:44px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:"+"; font-size:.9rem; opacity:.7}
.nav-more[open] summary::after{content:"\2212"}
.nav-more summary:hover{color:var(--k-ink)}
.nav-more-menu{position:absolute; right:0; top:100%; min-width:250px; background:var(--k-card);
  border:1px solid var(--k-line); border-radius:2px; box-shadow:var(--k-shadow); padding:6px; z-index:70; display:flex; flex-direction:column}
.nav-more-menu a{padding:11px 14px; min-height:44px; display:flex; align-items:center; color:var(--k-muted);
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; border-radius:2px; white-space:nowrap}
.nav-more-menu a:hover{background:var(--linen); color:var(--k-ink)}

/* ---- per-page search / filter bar ---- */
.searchbar{display:flex; align-items:center; gap:12px; max-width:520px; margin:0 0 30px;
  border:1px solid var(--k-line); border-radius:2px; padding:2px 4px 2px 16px; background:var(--k-card)}
.searchbar svg{width:18px; height:18px; color:var(--k-muted); flex:none}
.searchbar input{flex:1; border:0; background:transparent; font-family:var(--k-font-body); font-size:1rem;
  color:var(--k-ink); min-height:46px; outline:none}
.search-empty{font-family:var(--k-font-body); color:var(--k-muted); padding:24px 0; display:none}
.is-hidden{display:none !important}

/* ---- collection filter pills (boutique) ---- */
.coll-pills{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px}
/* PRODUCT TYPES, the Boutique's primary navigation. One row on a desktop; on a
   phone it scrolls sideways rather than wrapping into several tall rows, which
   is what slide 30 asks for and what keeps the grid above the fold. */
.type-row{display:flex; gap:10px; margin:0 0 18px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.type-row::-webkit-scrollbar{display:none}
.type-pill{flex:0 0 auto; border:1px solid var(--k-line); background:transparent; color:var(--k-muted);
  font-family:var(--k-font-body); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 18px; border-radius:2px; cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s}
.type-pill:hover{color:var(--k-ink); border-color:var(--k-ink)}
.type-pill.is-active{background:var(--rose); border-color:var(--rose); color:#fff}
/* Her collection names, demoted from a wall of buttons to one control. */
.coll-select{display:flex; align-items:center; gap:10px; margin:0 0 30px}
.coll-select label{font-family:var(--k-font-body); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--k-muted)}
.coll-select select{font-family:var(--k-font-body); font-size:.86rem; color:var(--k-ink);
  background:transparent; border:1px solid var(--k-line); border-radius:2px; padding:9px 12px; max-width:280px}
@media (min-width:761px){.type-row{flex-wrap:wrap; overflow:visible}}
.coll-pill{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem;
  padding:10px 18px; min-height:44px; border:1px solid var(--k-line); background:var(--k-card); color:var(--k-muted);
  border-radius:2px; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.coll-pill:hover{border-color:var(--k-ink); color:var(--k-ink)}
.coll-pill.is-active{background:var(--rose); border-color:var(--rose); color:#fff}

/* ---- gallery view picker (masonry / justified rows) ---- */
.view-toggle{display:flex; align-items:center; gap:8px; margin:0 0 26px}
.view-label{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--k-muted); margin-right:4px}
.view-btn{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem;
  padding:9px 16px; min-height:40px; border:1px solid var(--k-line); background:var(--k-card); color:var(--k-muted); cursor:pointer; border-radius:2px;
  transition:background .15s, color .15s, border-color .15s}
.view-btn:hover{border-color:var(--k-ink); color:var(--k-ink)}
.view-btn.is-active{background:var(--k-ink); border-color:var(--k-ink); color:var(--k-on-ink)}
/* justified-rows container; JS sets each work's width and each tile's height */
.gallery-rows{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start}
.gallery-rows .work{margin:0}
.gallery-rows .work .k-tile{display:block; width:100%; height:100%; aspect-ratio:auto; border:1px solid var(--k-line); background:var(--ink-2)}
.gallery-rows .work .k-tile::before{display:none}
.gallery-rows .work .k-tile img{position:static; width:100%; height:100%; object-fit:cover; display:block}

/* ============================================================================
   IMMERSIVE HOME (art-as-parallax) -- the one and only home experience
   ============================================================================ */

/* ---- the opening hero -------------------------------------------------------
   Every band on this page is the same instrument: a full-bleed photograph on a
   slow parallax, a directional scrim, and a card of copy that DRIFTS at its own
   rate (data-sp-drift) so the words float over the picture rather than sitting
   on it. The opening hero is simply the tallest of them. */
.scroll-cue{position:absolute; left:50%; transform:translateX(-50%); z-index:3;
  bottom:clamp(26px,4vw,44px);
  color:rgba(242,236,224,.85); font-family:var(--k-font-body); text-transform:uppercase;
  letter-spacing:.22em; font-size:.62rem; display:flex; flex-direction:column; align-items:center;
  gap:10px; min-height:44px; justify-content:flex-end; text-shadow:0 1px 12px rgba(12,10,8,.75)}
.scroll-cue:hover{color:var(--k-on-ink)}
.scroll-cue span{width:1px; height:26px; background:linear-gradient(var(--gold-soft),transparent); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}
.pfx--tall{min-height:calc(100svh - var(--k-head-h))}
/* Two deliberate lines: "Welcome to", then the full name, which must never
   split across "Alix", "Barber" and "Photography". text-wrap:balance is removed
   because it was choosing its own break. The name only unlocks its wrap on
   phones, where nowrap would run past the screen. */
.pfx-card h1{font-family:var(--k-font-display); font-weight:500; line-height:1.04;
  font-size:clamp(1.9rem,3.8vw,3rem); color:var(--k-on-ink); margin:0}
.hl-lead,.hl-name{display:block}
@media (min-width:761px){.hl-name{white-space:nowrap}}
.pfx--tall .pfx-card{max-width:680px}
.signature{font-family:var(--k-font-display); font-style:italic; font-size:1.6rem;
  color:var(--gold-soft); margin:22px 0 0}

.pfx{position:relative; min-height:88vh; display:flex; align-items:center; overflow:clip; color:var(--k-on-ink)}
.pfx .pfx-bg{position:absolute; inset:0}
.pfx-scrim{position:absolute; inset:0; z-index:1}
.pfx--left .pfx-scrim{background:linear-gradient(90deg,rgba(12,10,8,.84),rgba(12,10,8,.35) 56%,rgba(12,10,8,.08))}
.pfx--right .pfx-scrim{background:linear-gradient(270deg,rgba(12,10,8,.84),rgba(12,10,8,.35) 56%,rgba(12,10,8,.08))}
.pfx--center .pfx-scrim{background:radial-gradient(120% 120% at center,rgba(12,10,8,.32),rgba(12,10,8,.82))}
.pfx-content{position:relative; z-index:2; width:100%}
.pfx-card{max-width:540px}
.pfx--right .pfx-card{margin-left:auto}
.pfx--center .pfx-card{margin:0 auto; text-align:center}
.pfx-card .eyebrow{color:var(--gold-soft)}
.pfx--center .pfx-card .eyebrow{justify-content:center}
.pfx-card h2{font-family:var(--k-font-display); font-size:clamp(2.2rem,5vw,3.7rem); font-weight:500; line-height:1.02; color:var(--k-on-ink); margin:14px 0 0; text-wrap:balance}
.pfx-card .lede{color:rgba(242,236,224,.86); margin-top:18px}
.pfx-card .hero-actions{margin-top:28px}
.pfx--right .pfx-card .hero-actions{justify-content:flex-end}
.pfx-count{font-family:var(--k-font-display); font-style:italic; color:var(--gold-soft); font-size:1.15rem}
/* ---- Surviving to Sovereignty: two intentional halves ----------------------
   The cover is shown WHOLE (contain, never cover) in the left half, and the copy
   is a separate editorial panel on the right with its own inner padding, so the
   two never encroach on one another. */
.bookspread{background:#15110e; color:var(--k-on-ink); padding:clamp(52px,7vw,104px) 0}
.bookspread-in{max-width:var(--k-wrap); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:center}
.bookspread-art{margin:0; display:flex; justify-content:center; align-items:center}
.bookspread-art img{display:block; width:auto; max-width:100%; max-height:min(72svh,660px);
  object-fit:contain; box-shadow:0 44px 90px -40px rgba(0,0,0,.9)}
.bookspread-copy{max-width:44ch; padding-left:clamp(8px,3vw,52px)}
.bookspread-copy .eyebrow{color:var(--gold-soft)}
.bookspread-copy h2{font-family:var(--k-font-display); font-size:clamp(2.1rem,4.4vw,3.3rem);
  font-weight:500; line-height:1.04; color:var(--k-on-ink); margin:14px 0 0; text-wrap:balance}
.bookspread-copy .lede{color:rgba(242,236,224,.86); margin-top:18px}
.bookspread-copy .hero-actions{margin-top:28px}
@media (max-width:860px){
  .bookspread-in{grid-template-columns:1fr; gap:34px}
  .bookspread-copy{padding-left:0; max-width:none}
  .bookspread-art img{max-height:56svh}
}

/* Right-hand variant: the Gallery and the book both put their picture's subject
   on one side and the words on the other. */
/* The card sits further right than the old centre split, per the brief. The
   eyebrow keeps its rule on the LEFT of the words (as in the mockup); it is the
   inline-flex box as a whole that moves to the right edge. */
.pfx--right .pfx-card{text-align:right; max-width:520px}
.pfx--right .pfx-card .lede{margin-left:auto}
/* The book cover sits on the LEFT of its photograph, so hold the frame there and
   let the flat ground of the image carry the copy on the right. */
.pfx--book{background:#15110e}
.pfx--book .pfx-bg img{object-position:left center}
.pfx--book .pfx-scrim{background:linear-gradient(270deg,rgba(12,10,8,.72),rgba(12,10,8,.34) 52%,rgba(12,10,8,.06))}
@media (max-width:860px){
  /* Right-aligned copy over a tall crop reads badly on a phone: go back to the
     left edge, which is where every other band puts it. */
  .pfx--right .pfx-card{text-align:left; margin-left:0; max-width:none}
  .pfx--right .pfx-card .lede{margin-left:0}
  .pfx--right .pfx-card .hero-actions{justify-content:flex-start}
  .pfx--right .pfx-scrim{background:linear-gradient(90deg,rgba(12,10,8,.86),rgba(12,10,8,.5) 60%,rgba(12,10,8,.22))}
  .pfx--book .pfx-bg img{object-position:center}
}

/* ---- From the Collection (five selected works) ---- */
.alt-strip-wrap{padding:clamp(60px,8vw,110px) 0}
.alt-strip{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 0 20px; -webkit-overflow-scrolling:touch}
.alt-strip::-webkit-scrollbar{height:6px}
.alt-strip::-webkit-scrollbar-thumb{background:var(--k-line); border-radius:3px}
/* Five selected works in a justified row. Every image keeps its OWN aspect ratio
   (uniform height, natural width) rather than being cropped to a common tile:
   these are artworks, and a panorama squeezed into a portrait box is not the
   work. Narrow screens fall back to a snap strip. */
.alt-strip--five{display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(12px,1.6vw,22px); overflow:visible; padding-bottom:0}
.coll-work{display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; color:inherit; flex:0 0 auto}
/* align-self keeps the image at its INTRINSIC width: a flex column stretches its
   children, which would let a long caption widen (and letterbox) the artwork. */
.coll-work img{height:clamp(190px,22vw,300px); width:auto; align-self:center; object-fit:contain;
  border-radius:2px; display:block; transition:opacity .25s ease, transform .25s ease}
.coll-work:hover img{opacity:.9; transform:translateY(-3px)}
.cw-title{font-family:var(--k-font-display); font-style:italic; font-size:1.12rem; margin-top:11px; color:var(--k-ink)}
.cw-meta{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.13em;
  font-size:.62rem; color:var(--k-muted); margin-top:5px; line-height:1.5; max-width:20ch}
.services-line{margin:clamp(26px,3.4vw,40px) 0 0; font-family:var(--k-font-body); text-transform:uppercase;
  letter-spacing:.2em; font-size:.64rem; color:var(--k-muted); line-height:2}
@media (max-width:900px){
  .alt-strip--five{justify-content:flex-start; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:18px}
  .alt-strip--five .coll-work{flex:0 0 auto; scroll-snap-align:center}
  .coll-work img{height:min(56vw,300px)}
}
@media (max-width:760px){.pfx-card{max-width:none} .pfx--right .pfx-card{margin-left:0}}

/* ---- honeypot: present for bots, never for people ---- */
.nowrap{white-space:nowrap}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---- Framed by Spaces portfolio slider (deck slide 25) ----
   A wide, immersive image area: the Wix version sat inside a large white
   poster border, which the brief asks to drop. One room at a time, arrows
   always visible rather than on hover, and discreet dots beneath. */
.fbs-portfolio{overflow:hidden}
.fbs-stage{position:relative; margin-top:40px; border-radius:2px; overflow:hidden;
  background:#0c0a08; box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.fbs-stage:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.fbs-track{position:relative}
.fbs-slide{margin:0; display:none}
.fbs-slide.is-current{display:block}
.fbs-slide img{display:block; width:100%; height:auto}
.fbs-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; cursor:pointer;
  background:rgba(12,10,8,.55); border:1px solid rgba(242,236,224,.35); color:#f2ece0;
  font-size:2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .16s, border-color .16s}
.fbs-arrow:hover{background:rgba(12,10,8,.8); border-color:rgba(242,236,224,.7)}
.fbs-prev{left:16px}
.fbs-next{right:16px}
.fbs-dots{display:flex; gap:10px; justify-content:center; margin-top:22px}
/* Read by screen readers and search engines, drawn by nothing. */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* The dot stays an 8px mark, but the BUTTON around it is a 44px target: a
   discreet indicator on screen, a finger-sized one under a thumb. The visible
   mark is the pseudo-element; the button itself is transparent. */
.fbs-dot{width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; position:relative; margin:-18px 0}
.fbs-dot::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:transparent; border:1px solid rgba(242,236,224,.45); transition:background .16s, border-color .16s}
.fbs-dot:hover::before{border-color:var(--gold-soft)}
.fbs-dot.is-current::before{background:var(--gold); border-color:var(--gold)}
.fbs-dot:focus-visible{outline:2px solid var(--gold); outline-offset:-10px; border-radius:50%}
.fbs-dot-legacy{width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid rgba(242,236,224,.45); transition:background .16s, border-color .16s}
.fbs-dot-legacy:hover{border-color:var(--gold-soft)}
.fbs-dot-legacy.is-current{background:var(--gold); border-color:var(--gold)}
/* The room label is announced, not printed over the picture. */
.fbs-live{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.fbs-attrib{font-family:var(--k-font-body); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-soft); margin-top:18px}
@media (max-width:760px){
  /* Touch has swipe, so the arrows shrink out of the way of the picture. */
  .fbs-arrow{width:42px; height:42px; font-size:1.5rem}
  .fbs-prev{left:8px}
  .fbs-next{right:8px}
  .fbs-stage{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.fbs-arrow,.fbs-dot{transition:none}}

/* ---- gallery artwork buy modal ---- */
.art-modal{position:fixed; inset:0; z-index:95; background:rgba(12,10,8,.93); display:none; align-items:center; justify-content:center; padding:26px}
.art-modal.is-open{display:flex}
.art-modal-inner{position:relative; max-width:1200px; width:100%; display:flex; align-items:center; gap:16px}
.art-stage{flex:1 1 60%; display:flex; align-items:center; justify-content:center; min-width:0}
.art-stage img{max-width:100%; max-height:84vh; object-fit:contain; border-radius:2px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.art-panel{flex:0 0 330px; color:var(--k-on-ink)}
.art-edition{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--gold-soft); min-height:.9em}
.art-title{font-family:var(--k-font-display); font-style:italic; font-weight:500; font-size:2.4rem; line-height:1.04; margin:8px 0 0; color:var(--k-on-ink)}
.art-place{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:rgba(242,236,224,.7); margin-top:10px}
.art-price{font-family:var(--k-font-display); font-size:1.9rem; font-weight:600; color:var(--k-on-ink); margin:20px 0 0}
/* The panel scrolls on its own so a long description is never cut off and
   the artwork stays in view beside it (deck slide 22). */
.art-panel{max-height:84vh; overflow-y:auto; overscroll-behavior:contain; padding-right:12px}
.art-panel::-webkit-scrollbar{width:6px}
.art-panel::-webkit-scrollbar-thumb{background:rgba(242,236,224,.22); border-radius:3px}
.art-facts{font-family:var(--k-font-body); font-size:.76rem; letter-spacing:.06em; color:rgba(242,236,224,.6); margin-top:8px}
.art-narrative{font-family:var(--k-font-body); font-size:.92rem; color:rgba(242,236,224,.88); line-height:1.62; margin-top:18px}
.art-narrative p{margin:0 0 9px}
.art-narrative p:last-child{margin-bottom:0}
/* Her presentation copy carries its own heading, so this is spacing and rhythm
   rather than styling: the technical details stay visibly separate lines. */
.art-presentation{font-family:var(--k-font-body); font-size:.85rem; color:rgba(242,236,224,.78); line-height:1.55; margin-top:22px;
  border-top:1px solid rgba(242,236,224,.14); padding-top:16px}
.art-presentation p{margin:0 0 6px}
.art-presentation p:first-child{font-weight:600; letter-spacing:.03em; color:rgba(242,236,224,.94); margin-bottom:9px}
.art-presentation ul{margin:8px 0 0; padding-left:18px}
.art-presentation li{margin:0 0 6px}
.art-presentation a,.art-alt a,.art-narrative a{color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px}
.art-alt{font-family:var(--k-font-body); font-size:.8rem; color:rgba(242,236,224,.62); line-height:1.5; margin-top:14px}
.art-alt p{margin:0}
.art-actions--second{margin-top:16px}
.art-pres{font-family:var(--k-font-body); font-size:.88rem; color:rgba(242,236,224,.78); margin-top:10px; line-height:1.5}
.art-actions{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.art-note{color:rgba(242,236,224,.55); margin-top:16px}
.art-close{position:absolute; top:-48px; right:0; background:none; border:0; color:#f2ece0; font-size:2.4rem; line-height:1; cursor:pointer; min-width:44px; min-height:44px}
.art-nav{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:2rem; width:52px; height:52px; border-radius:50%; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center}
.art-nav:hover{background:rgba(255,255,255,.2)}
@media (max-width:820px){
  .art-modal{padding:16px; align-items:flex-start; overflow-y:auto}
  .art-modal-inner{flex-direction:column; gap:14px}
  .art-stage{order:1; width:100%; max-height:48vh}
  .art-stage img{max-height:48vh}
  .art-panel{order:2; flex:none; width:100%; max-height:none; overflow:visible; padding-right:0}
  .art-title{font-size:1.9rem}
  .art-prev{position:absolute; left:4px; top:22vh; z-index:2}
  .art-next{position:absolute; right:4px; top:22vh; z-index:2}
  .art-close{top:2px; right:6px}
}

/* ---- boutique product tags (badge variants) ---- */
.product-tag--new{background:var(--gold); color:#20180c}
.product-tag--info{background:var(--ink-2); color:var(--gold-soft)}
/* quick-view affordance over the image */
.quickview-btn{position:absolute; z-index:3; left:50%; bottom:14px; transform:translate(-50%,10px);
  opacity:0; transition:opacity .2s, transform .2s; background:rgba(23,19,15,.92); color:var(--k-on-ink);
  border:0; cursor:pointer; font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.12em;
  font-size:.66rem; padding:10px 16px; border-radius:2px; min-height:40px}
.product-media{position:relative}
.product:hover .quickview-btn,.quickview-btn:focus-visible{opacity:1; transform:translate(-50%,0)}
@media (hover:none){.quickview-btn{opacity:1; transform:translate(-50%,0); bottom:10px}}

/* ---- quick-view modal ---- */
.qv-overlay{position:fixed; inset:0; z-index:92; background:rgba(12,10,8,.72); display:none; align-items:center; justify-content:center; padding:24px}
.qv-overlay.is-open{display:flex}
.qv-card{background:var(--k-paper); max-width:820px; width:100%; border-radius:3px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; box-shadow:var(--k-shadow); max-height:88vh}
.qv-media{background:#fff; display:flex; align-items:center; justify-content:center; padding:24px}
.qv-media img{max-width:100%; max-height:70vh; object-fit:contain}
.qv-body{padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; overflow-y:auto}
.qv-body h3{font-family:var(--k-font-display); font-size:1.9rem; font-weight:500; line-height:1.1}
.qv-price{font-family:var(--k-font-display); font-size:1.6rem; font-weight:600; margin:14px 0 0}
/* The information panel scrolls on its own when the copy is longer than the
   card, so nothing is cut off and the product photo stays put (slide 32). */
.qv-body{max-height:86vh}
.qv-desig{font-family:var(--k-font-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); margin-top:12px}
.qv-prof{font-family:var(--k-font-display); font-style:italic; font-size:1.05rem; color:var(--k-ink);
  margin-top:16px; padding-left:14px; border-left:2px solid var(--gold)}
.qv-prof p{margin:0}
.qv-story,.qv-more{font-family:var(--k-font-body); font-size:.94rem; line-height:1.62; color:var(--k-muted); margin-top:18px}
.qv-story p,.qv-more p{margin:0 0 10px}
.qv-story p:last-child,.qv-more p:last-child{margin-bottom:0}
.qv-details{font-family:var(--k-font-body); font-size:.84rem; line-height:1.55; color:var(--k-muted);
  margin-top:20px; border-top:1px solid var(--k-line); padding-top:16px}
.qv-details ul{margin:0; padding-left:18px}
.qv-details li{margin:0 0 6px}
.qv-details a,.qv-story a,.qv-more a{color:var(--rose); text-decoration:underline; text-underline-offset:3px}
#qv-add{margin-top:22px}
.qv-full{margin-top:14px; background:none; border:0; padding:0; cursor:pointer; align-self:flex-start;
  font-family:var(--k-font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--k-ink); text-decoration:underline; text-underline-offset:4px}
.qv-full:hover{color:var(--rose)}
.qv-close{position:absolute; top:16px; right:20px; background:none; border:0; font-size:2rem; color:var(--k-on-ink); cursor:pointer; min-width:44px; min-height:44px; z-index:2}
@media (max-width:700px){.qv-card{grid-template-columns:1fr; max-height:92vh} .qv-media{padding:16px} .qv-media img{max-height:36vh}
  .qv-body{max-height:none}}

/* ---- gallery: show works FULLY in their true aspect ratio (client request) ---- */
.gallery-full{columns:3; column-gap:20px}
.gallery-full .work{break-inside:avoid; margin:0 0 26px; display:block}
.gallery-full .work .k-tile{aspect-ratio:auto; height:auto; display:block; background:transparent; border:1px solid var(--k-line)}
.gallery-full .work .k-tile::before{display:none}
.gallery-full .work .k-tile img{position:static; width:100%; height:auto; object-fit:contain; display:block}
@media (max-width:900px){.gallery-full{columns:2}}
@media (max-width:560px){.gallery-full{columns:1}}

/* ---- interior + architecture project list ---- */
.project-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.project-item{display:flex; align-items:center; min-height:112px; padding:24px; background:var(--k-card);
  border:1px solid var(--k-line); border-radius:2px; font-family:var(--k-font-display); font-size:1.3rem;
  font-weight:500; line-height:1.2; color:var(--k-ink); transition:transform .16s, border-color .16s}
.project-item:hover{transform:translateY(-2px); border-color:var(--gold)}
.project-item .idx{font-size:.72rem; font-family:var(--k-font-body); letter-spacing:.18em; color:var(--gold); margin-right:14px}
@media (max-width:900px){.project-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.project-list{grid-template-columns:1fr}}

/* ---- giving page partner blocks ---- */
.give-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.give-card{background:var(--k-card); border:1px solid var(--k-line); border-radius:2px; padding:32px}
.give-card h3{font-family:var(--k-font-display); font-size:1.6rem; font-weight:500; margin-bottom:14px}
.give-card .lab{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; color:var(--gold); display:block; margin:16px 0 6px}
@media (max-width:900px){.give-grid{grid-template-columns:1fr}}

/* ---- book editions (Surviving to Sovereignty) ---- */
.editions{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.edition-card{background:var(--k-card); border:1px solid var(--k-line); border-radius:3px; padding:clamp(26px,3vw,40px); display:flex; flex-direction:column}
.edition-card--featured{border-color:var(--gold); box-shadow:var(--k-shadow)}
.edition-card .etag{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--gold)}
.edition-card h3{font-family:var(--k-font-display); font-size:2rem; font-weight:500; margin:8px 0 4px}
.edition-card .eprice{font-family:var(--k-font-display); font-size:2.4rem; font-weight:600; margin:6px 0 16px}
.edition-card .k-btn{margin-top:auto}
/* The S2S mark sits directly above the purchase button (deck slide 8). It
   takes over the auto margin that used to push the button to the bottom,
   so the two travel together and both cards still floor their buttons at
   the same height however long the copy above them runs. */
.edition-card .esigil{display:block; height:clamp(50px,6vw,66px); width:auto;
  margin:26px auto 18px; margin-top:auto}
.edition-card .esigil + .k-btn{margin-top:0}
.edition-note{font-size:.8rem; color:var(--k-muted); font-family:var(--k-font-body); margin-top:14px}
@media (max-width:760px){.editions{grid-template-columns:1fr}}


/* ============================================================================
   PHONE REFINEMENTS
   Found by auditing every page at 390px and 320px. Three things: an email link
   that was a 26px-tall tap target, uppercase micro-labels that fall under 10px
   once the body is at the 16px phone floor, and the gallery reserving no space
   for a lazy image (so the grid jumped as you scrolled).
   ============================================================================ */
@media (max-width:760px){
  /* Links inside running text need a real tap target, not just a text box. */
  a.handle{display:inline-flex; align-items:center; min-height:44px}
  .contact-lines li{align-items:center}

  /* Letterspaced uppercase micro-copy: readable on a desk, not in the hand. */
  .cw-meta{font-size:.74rem; letter-spacing:.1em}
  .lab{font-size:.74rem}
  .contact-lines .lab{font-size:.74rem; min-width:0}
  .give-card .lab{font-size:.74rem}
  /* Quick View is the only way into a product on touch: give it a full target. */
  .quickview-btn{min-height:44px}
  .edition{font-size:.74rem}
  .work-meta .place{font-size:.78rem}
  .services-line{font-size:.72rem; letter-spacing:.14em}
  .flagship-label,.scroll-cue{font-size:.7rem}
  .product-tag{font-size:.72rem}
  .view-label,.view-btn{font-size:.76rem}
}

/* The gallery lazy-loads 74 photographs. Without a reserved box each tile is
   ~2px until its image decodes and the column reflows under the reader's thumb.
   The aspect ratio is already known per work (data-ar), so hold the space. */
.gallery-full .work .k-tile,
.gallery-rows .work .k-tile{background:var(--linen)}
.gallery-full .work[data-ar] .k-tile{aspect-ratio:var(--ar)}


/* ---- mobile menu ------------------------------------------------------------
   Under 760px the bar and the More control are both hidden, and the call bar
   only ever carried two links, so most of the site was reachable on a phone
   only by scrolling to the footer. This is the same set of destinations as the
   desktop navigation, in the same order, with the More group below a rule. */
.nav-burger{display:none; width:48px; height:48px; padding:0; border:0; cursor:pointer;
  background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav-burger span{display:block; width:20px; height:1px; background:var(--k-ink); transition:transform .22s ease, opacity .18s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mm-overlay{position:fixed; inset:0; z-index:58; background:rgba(12,10,8,.45)}
.mobile-menu{position:fixed; left:0; right:0; top:var(--k-head-h); z-index:59;
  background:var(--k-paper); border-bottom:1px solid var(--k-line);
  box-shadow:0 24px 50px -24px rgba(23,19,15,.45);
  display:flex; flex-direction:column; padding:8px 0 14px;
  max-height:calc(100svh - var(--k-head-h)); overflow-y:auto; overscroll-behavior:contain}
.mobile-menu a{display:flex; align-items:center; min-height:52px; padding:0 26px;
  font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; color:var(--k-muted); text-decoration:none}
.mobile-menu a:hover{color:var(--k-ink); background:var(--linen)}
.mobile-menu a[aria-current="page"]{color:var(--k-ink)}
.mobile-menu a[aria-current="page"]::before{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); margin-right:12px; margin-left:-17px}
.mm-rule{display:block; height:1px; background:var(--k-line); margin:10px 26px}
@media (max-width:760px){.nav-burger{display:inline-flex}}
.mobile-menu[hidden],.mm-overlay[hidden]{display:none}
@media (min-width:761px){.mobile-menu,.mm-overlay{display:none !important}}
@media (prefers-reduced-motion:reduce){.nav-burger span{transition:none}}

/* The dropdown is a list, not the bar: it must not inherit the bar's 106px
   box or its centring, which made "Interior + Architecture" overflow. */
.nav-more-menu a{font-family:var(--k-font-body); max-width:none; width:100%;
  justify-content:flex-start; text-align:left; white-space:nowrap}

/* =========================================================================
   THE SHOP FRONT END, WEARING THIS SITE'S CLOTHES

   The product tiles, the product panel and the collection drawer are rendered
   by SimplePath now, so they arrive as .sp-* elements with the platform's own
   plain styling. Everything below re-dresses them as the .product / .cart-*
   pieces this site already had, so the boutique and the memoir range look
   exactly as they did while gaining sizes, finishes and one honest basket.

   Every selector is prefixed with `body` on purpose. The platform's stylesheet
   is injected at the END of <head>, after this file, so at equal specificity
   it would win. One extra element in the selector settles it without !important.
   ========================================================================= */

/* ---- the grid keeps this site's three columns, not auto-fill ---- */
body .product-grid.sp-shop{grid-template-columns:repeat(4,1fr); gap:22px}
body .product-grid--three.sp-shop{grid-template-columns:repeat(3,1fr)}
/* THE BREAKPOINTS HAVE TO BE RESTATED HERE. The two rules above carry an
   extra element and an extra class, so they outrank the RESPONSIVE block's
   plain `.product-grid` overrides at every width: taking the auto-fill grid
   away took the site's own phone layout with it, and the boutique held three
   columns on a 390px screen with each name breaking one word per line and
   the Add button clipped off the card. Same widths as the block above. */
@media (max-width:1000px){
  body .product-grid.sp-shop,body .product-grid--three.sp-shop{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  body .product-grid.sp-shop,body .product-grid--three.sp-shop{grid-template-columns:1fr}
}

/* ---- a tile is a .product ---- */
body .sp-card{display:flex; flex-direction:column; background:var(--k-card); color:var(--k-ink);
  border:1px solid var(--k-line); border-radius:2px; overflow:hidden}
body .sp-card-art{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden}
body .sp-card-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  padding:8%; transition:transform .5s ease}
body .sp-card:hover .sp-card-art img{transform:scale(1.04)}
body .sp-card-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; gap:0}
body .sp-card-body h3{font-family:var(--k-font-display); font-size:1.24rem; font-weight:500;
  line-height:1.16; letter-spacing:.005em; color:var(--k-ink); margin:0}
body .sp-cat{font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--k-muted); margin:7px 0 0}
body .sp-card .sp-foot{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:auto; padding-top:18px}
body .sp-price{font-family:var(--k-font-display); font-size:1.4rem; font-weight:600; color:var(--k-ink)}
body .sp-was{font-size:1rem; color:var(--k-muted); margin-left:8px}

/* ---- the button is an .add-btn, wherever it appears ---- */
body .sp-btn{border:0; cursor:pointer; background:var(--k-ink); color:var(--k-on-ink);
  font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem;
  font-weight:500; min-height:44px; padding:0 16px; border-radius:2px;
  transition:background .16s, transform .16s}
body .sp-btn:hover{background:var(--rose); transform:translateY(-2px)}
body .sp-btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
body .sp-badge{font-family:var(--k-font-body); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; background:var(--rose); color:#fff; padding:5px 9px; border-radius:2px}
body .sp-badge.sp-badge-stock{background:var(--ink-2); color:var(--gold-soft)}
body .sp-shop-note{font-family:var(--k-font-body); color:var(--k-muted)}
/* The attribute spec line belongs in the product panel, not on a tile: this
   site's cards carried the name, the collection, the price and the button, and
   "Type: Handbags" under every one of them is a filter value, not a caption. */
body .sp-card .sp-attrs{display:none}

/* ---- the product panel wears the quick-view's clothes ---- */
body .sp-overlay{background:rgba(12,10,8,.72); padding:24px; z-index:92}
body .sp-panel{background:var(--k-paper); max-width:820px; width:100%; border-radius:3px;
  box-shadow:var(--k-shadow); max-height:88vh}
body .sp-detail h2{font-family:var(--k-font-display); font-weight:500; font-size:1.6rem; margin:0}
body .sp-details, body .sp-detail .sp-full{font-family:var(--k-font-body); color:var(--k-ink)}
body .sp-details i, body .sp-details em{font-style:italic}
body .sp-opts label{font-family:var(--k-font-body); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--k-muted)}

/* ---- the collection drawer ---- */
body .sp-drawer{width:min(420px,92vw); background:var(--k-paper); color:var(--k-ink);
  box-shadow:-20px 0 60px -30px rgba(0,0,0,.6)}
body .sp-drawer-head{padding:22px 24px; border-bottom:1px solid var(--k-line)}
body .sp-drawer-head h2{font-family:var(--k-font-display); font-size:1.5rem; font-weight:500}
body .sp-lines{padding:8px 24px}
body .sp-line-name{font-family:var(--k-font-display); font-size:1.05rem; line-height:1.2; font-weight:500}
body .sp-drawer-foot{padding:20px 24px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--k-line); background:var(--k-card)}
/* This site has its own control in the header, so the floating bubble would be
   a second one saying the same thing. */
body .sp-basket-btn{display:none}

/* =========== HOW WE WORK TOGETHER (Framed by Spaces, slide 19) ===========
   Replaces the portfolio reel. Built from the same tokens as the product
   cards so it inherits the site's paper, rule and type without a new look. */
.way-card{background:var(--k-card); border:1px solid var(--k-line); border-radius:2px;
  padding:28px 26px 30px; display:flex; flex-direction:column}
.way-no{font-family:var(--k-font-display); font-style:italic; font-size:.95rem;
  color:var(--gold); margin-bottom:14px}
.way-card h3{font-family:var(--k-font-display); font-size:1.3rem; font-weight:500;
  line-height:1.2; margin:0 0 12px; color:var(--k-ink)}
.way-card p{font-family:var(--k-font-body); font-size:.94rem; line-height:1.6;
  color:var(--k-muted); margin:0}
@media (max-width:900px){ .way-card{padding:24px 22px 26px} }

/* =========== PHOTOGRAPHIC PAGE HERO (deck slides 5, 7, 10) ===========
   Her ask on three internal pages: make the first block under the nav a
   photograph, soften it, and let the copy drift over it as the page scrolls.
   Both halves of that motion already exist in the kit (data-k-parallax moves
   the picture, data-sp-drift moves the words), so this only builds the stage:
   a bed for the photo, a scrim, and a stacking order that keeps the words on
   top. The blur is what "soften" means here; the scale covers the soft edge
   blur leaves behind, since a blurred layer samples past its own bounds. */
/* overflow:hidden first, because Safari only learned `clip` in 16 and an
   unclipped parallax layer shows its own edge as you scroll. */
.pagehero--img{position:relative; overflow:hidden; overflow:clip}
.pagehero--img .ph-bg{position:absolute; inset:0; z-index:0}
.pagehero--img .ph-bg img{filter:blur(3px) saturate(.94) brightness(var(--ph-lift,1));
  transform:scale(1.08); object-position:var(--ph-pos,center)}
.pagehero--img .ph-scrim{position:absolute; inset:0; z-index:1}
.pagehero--img > .k-wrap{position:relative; z-index:2}
/* Dark pages (the book, j. a. b. the change) keep ink-ground text, so the
   scrim has to carry the photograph far enough back for it to read. */
.pagehero--img .ph-scrim{background:linear-gradient(180deg,rgba(12,10,8,.80),rgba(12,10,8,.60) 46%,rgba(12,10,8,.88))}
/* The Boutique stays ivory: its logo is a pink line drawing and its subtitle a
   pale grey, neither of which survives a dark ground, and the photograph under
   it is pale travertine anyway. So the same treatment, lit the other way. */
.pagehero--ivory.pagehero--img .ph-scrim{background:linear-gradient(180deg,rgba(247,243,236,.86),rgba(247,243,236,.66) 46%,rgba(247,243,236,.92))}
.pagehero--ivory.pagehero--img .ph-bg img{filter:blur(4px) saturate(.9)}
@media (prefers-reduced-motion:reduce){ .pagehero--img .ph-bg img{transform:none} }
/* WHERE THE SUBJECT IS, because cover crops toward the middle and a phone
   crops hard. A 16:9 photograph in a 375x485 hero is scaled to 862px wide
   and shows the middle 43% of itself, so the seed head on the right of
   giving-hero and the book on the left of s2s-hero both fell outside the
   frame and the hero was a blurred nothing. Set per page below. It costs
   nothing on a desktop hero, which is wider than its photograph and so
   crops vertically, where a horizontal position has no say. */
/* On a phone the hero is nearly the whole screen and the blur is measured
   in CSS pixels, so the same 3px reads far heavier against a 375px-wide
   photograph than against a desktop one: the picture stops being a
   picture. Less blur, and the scrim left where it is. A stronger scrim
   was tried here to buy back the contrast, and measured on the phone it
   bought nothing the lighter blur had not already covered while making
   the photograph fainter on the screen it matters most on. */
@media (max-width:760px){
  .pagehero--img .ph-bg img{filter:blur(2px) saturate(.94) brightness(var(--ph-lift,1))}
  .pagehero--ivory.pagehero--img .ph-bg img{filter:blur(3px) saturate(.9)}
}

/* =========== THE S2S INTENSIVE, ON MARBLE (deck slide 13) ===========
   Same stage as the photographic heroes and the same ivory text treatment,
   with two differences. The marble is NOT softened: it is a texture rather
   than a picture of something, so blurring it would only cost the veining
   that makes it marble. And it is served as ONE file with no srcset, because
   a cover-filled texture renders far wider than the viewport on a phone (a
   3:1 plate in a tall narrow section is scaled to about 4200px), which is
   exactly the case `sizes="100vw"` describes wrongly, and the browser would
   pick the 800px copy for a 4200px job. At 52 KB the full plate is cheaper
   than the bug.
   These rules sit at the end of the file on purpose: the blur and the ivory
   scrim they override are set on `.pagehero--ivory.pagehero--img`, which ties
   on specificity, so order is what settles it. */
/* THE PLATE HAS TO BE TOLD TO FILL. The photographic heroes get their
   sizing from the kit's `.k-parallax > [data-k-parallax] img` rule, and
   this one has no parallax wrapper to inherit it from, so the marble
   rendered at its own 3:1 shape: a 125px band across the top of a 1558px
   section on a phone, with plain white under everything below it. */
.pagehero--marble .ph-bg img{display:block; width:100%; height:100%;
  object-fit:cover; filter:none; transform:none}
.pagehero--ivory.pagehero--marble .ph-bg img{filter:none}
.pagehero--ivory.pagehero--marble .ph-scrim{background:linear-gradient(180deg,rgba(253,252,251,.42),rgba(253,252,251,.62))}
/* LESS air above the copy than the other page heroes take, not more. This
   one opens on a near-white plate, so the extra padding that keeps a dark
   hero from crowding its header just reads as an empty band here: measured
   on a 1890px screen it put 156px of nothing between the header and the
   first line. The floor stays generous enough for a phone, where the
   sticky header is proportionally much taller. */
.pagehero--marble{padding-top:clamp(64px,4.5vw,76px); padding-bottom:clamp(48px,6vw,80px)}

/* The mark and the copy, side by side as she drew them. */
.s2s-head{display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,4vw,60px); align-items:center; margin-top:clamp(10px,1.4vw,18px)}
.s2s-mark{display:block; height:clamp(170px,22vw,270px); width:auto}
.s2s-head-copy .lede{max-width:68ch}
.s2s-head-copy .lede + .lede{margin-top:16px}

/* Five formats, each under its own gold rule. */
.s2s-formats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px); margin-top:clamp(38px,5vw,62px)}
.s2s-format{border-top:1px solid var(--gold); padding-top:14px}
.s2s-format h2{font-family:var(--k-font-display); font-size:1.06rem; font-weight:600;
  line-height:1.2; color:var(--k-ink); margin:0 0 10px}
.s2s-format p{font-family:var(--k-font-body); font-size:.89rem; line-height:1.6;
  color:var(--k-muted); margin:0}

.pagehero--marble .hero-actions{margin-top:clamp(34px,4vw,52px)}
.s2s-read{text-align:center; margin-top:18px; font-family:var(--k-font-body);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase}
.s2s-read a{color:var(--k-ink); border-bottom:1px solid var(--gold); padding-bottom:4px;
  display:inline-block; min-height:44px; line-height:44px}

@media (max-width:1000px){ .s2s-formats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px} }
@media (max-width:760px){
  /* The mark goes above the copy rather than beside it, and the copy stays
     left aligned: a centred paragraph of this length is harder to read than
     the small asymmetry of a centred mark over left-aligned text. */
  .s2s-head{grid-template-columns:1fr; justify-items:center; gap:22px}
  .s2s-mark{height:clamp(120px,26vw,150px)}
  .s2s-head-copy{width:100%}
}
@media (max-width:560px){ .s2s-formats{grid-template-columns:1fr; gap:22px} }

/* =========== THE TWO OFF-CENTRE HEROES (deck slides 6-8, 10-11) ===========
   Both plates she supplied put the subject in one half and leave the other
   open, so the copy takes the open half and the scrim runs ACROSS rather than
   down: a top-to-bottom wash would either bury the subject or leave the words
   sitting on the busiest part of the picture. On a phone there is only one
   column, so the scrim goes back to top-to-bottom and the copy sits over the
   whole frame. */

/* ---- Boutique: bag on the right, copy on the left, ivory ---- */
.pagehero--bq{text-align:left}
.pagehero--bq .bq-intro{max-width:600px}
.pagehero--bq .rule-gold{margin:18px 0 0}
.pagehero--bq .bq-logo{margin:clamp(18px,2.4vw,28px) 0 clamp(16px,2vw,24px);
  height:clamp(96px,11vw,150px)}
.pagehero--bq .bq-lede{margin:0; text-align:left; max-width:none; font-size:1rem}
.pagehero--bq .hero-actions{margin-top:clamp(24px,3vw,34px)}
.pagehero--ivory.pagehero--bq .ph-scrim{
  background:linear-gradient(90deg,rgba(247,243,236,.92),rgba(247,243,236,.80) 46%,rgba(247,243,236,.30))}

/* ---- The book: book on the left, copy on the right, ink ---- */
.pagehero--s2s .k-wrap{display:flex; flex-direction:column}
.pagehero--s2s .s2s-intro{max-width:620px; margin-left:auto; margin-top:clamp(20px,3vw,34px)}
.s2s-intro-mark{display:block; height:clamp(64px,7vw,96px); width:auto;
  margin:0 0 clamp(16px,2vw,24px)}
.pagehero--s2s h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.pagehero--s2s .lede{max-width:none}
.pagehero--s2s .ph-scrim{
  background:linear-gradient(270deg,rgba(12,10,8,.88),rgba(12,10,8,.72) 48%,rgba(12,10,8,.30))}

@media (max-width:900px){
  .pagehero--bq .bq-intro,.pagehero--s2s .s2s-intro{max-width:none; margin-left:0}
  .pagehero--ivory.pagehero--bq .ph-scrim{
    background:linear-gradient(180deg,rgba(247,243,236,.90),rgba(247,243,236,.78) 46%,rgba(247,243,236,.94))}
  .pagehero--s2s .ph-scrim{
    background:linear-gradient(180deg,rgba(12,10,8,.84),rgba(12,10,8,.66) 46%,rgba(12,10,8,.90))}
}

/* NOT SOFTENED, unlike the other page heroes. "Soften the background image
   slightly" was written about the older plates, which were ordinary sharp
   photographs. These two arrive already composed that way: the room falls off
   into bokeh and only the bag, or the book, is in focus. Blurring them again
   takes the one sharp thing in the frame with it, and her comps show both
   subjects crisp. The scale goes too, since it existed only to hide the soft
   edge a blur leaves behind. */
.pagehero--ivory.pagehero--bq .ph-bg img,
.pagehero--img.pagehero--s2s .ph-bg img{filter:none; transform:none}

/* =========== GALLERY CAPTIONS MAY WRAP (David, 2026-09-13) ===========
   Title and place sat on one line with the place set nowrap. In the justified
   Rows view a tile can be narrow, so a long place ("Notre-Dame Basilica,
   Montréal") ran out of its own tile and underneath the next one's title. The
   place now drops under the title when the two do not fit side by side. */
.work{min-width:0}
.work-meta{flex-wrap:wrap; row-gap:4px; min-width:0}
.work-title{min-width:0; overflow-wrap:anywhere}
.work-place{white-space:normal; min-width:0; overflow-wrap:anywhere}

/* =========== THE ART OF GIVING HERO (deck slides 15-16) ===========
   Her plate is a white gallery wall with the LOVE print hung on the right, so
   the copy takes the open wall on the left in ink, and nothing is softened:
   the print is the one sharp thing in the frame. */
.pagehero--give{text-align:left}
.pagehero--give .give-intro{max-width:560px}
.pagehero--give h1{font-size:clamp(2.4rem,5vw,4rem)}
.pagehero--give .lede{max-width:none}
.pagehero--ivory.pagehero--give .ph-bg img{filter:none; transform:none}
.pagehero--ivory.pagehero--give .ph-scrim{
  background:linear-gradient(90deg,rgba(250,249,247,.78),rgba(250,249,247,.45) 44%,rgba(250,249,247,0) 62%)}
@media (max-width:900px){
  .pagehero--give .give-intro{max-width:none}
  .pagehero--ivory.pagehero--give .ph-scrim{
    background:linear-gradient(180deg,rgba(250,249,247,.86),rgba(250,249,247,.72) 50%,rgba(250,249,247,.90))}
}

/* =========== OUR PARTNERS, EVEN (deck slides 17-19) ===========
   Her note on this section: uneven on desktop and on mobile. The three cards
   now share one height with their labels on the same lines, the section sits
   on the gradient plate she supplied (dark under the heading, cream by the
   cards), and it closes on the j. a. b. the change mark and its button. */
.give-band{background:#fbf8f3 url(giving-partners-bg.jpg) center top / 100% 100% no-repeat}
.give-band .section-head .eyebrow{color:var(--gold-soft)}
.give-band .section-head h2{color:var(--k-on-ink)}
.give-band .give-grid{align-items:stretch}
.give-band .give-card{display:flex; flex-direction:column; height:100%;
  box-shadow:0 18px 40px rgba(20,16,12,.10)}
.give-band .give-close{margin:clamp(34px,4vw,48px) auto 0; max-width:640px; text-align:center}
.give-band .give-close .lede{margin:0 auto; text-align:center; color:var(--k-ink)}
.give-band .jab-logo{display:block; width:auto; height:clamp(96px,11vw,132px); margin:18px auto 6px}
@media (max-width:900px){
  .give-band{background-size:100% 760px}
  .give-band .give-card{height:auto}
}

/* =========== ONE HEADER-TO-TEXT DISTANCE, EVERY PAGE (David, 2026-09-13) ===========
   Every page hero now starts its first line the same short distance below the
   header. Before, the flat heroes took up to 130px, the marble page 76px, and
   the book page added a further margin under its crumb, so no two pages agreed
   and all of them left a band of nothing under the navigation. */
.pagehero,
.pagehero--marble{padding-top:clamp(34px,3.4vw,52px)}

/* The three photographic heroes keep enough height for the picture to read,
   with the words starting at that same distance from the top. */
.pagehero--bq,.pagehero--s2s,.pagehero--give{min-height:clamp(440px,40vw,700px)}

/* ---- The book, to slide 10: one column on the dark side of the room ---- */
.pagehero--s2s .s2s-intro{max-width:760px; margin-top:8px}
.pagehero--s2s h1{font-size:clamp(2rem,3.2vw,2.9rem); line-height:1.08}
.pagehero--s2s .ph-scrim{
  background:linear-gradient(270deg,rgba(12,10,8,.80),rgba(12,10,8,.52) 46%,rgba(12,10,8,0) 72%)}

/* ---- The Boutique photograph at full colour (David: it looked faded) ----
   The ivory wash that carried the copy ran across two thirds of the frame at
   up to 92%, which is the milky film over the lobby and the bag. The left of
   her plate is already a pale, luminous floor, so the wash now only lifts
   that side a little and is gone before it reaches the bag. */
.pagehero--ivory.pagehero--bq .ph-scrim{
  background:linear-gradient(90deg,rgba(247,243,236,.62),rgba(247,243,236,.34) 40%,rgba(247,243,236,0) 60%)}

@media (max-width:900px){
  .pagehero--bq,.pagehero--s2s,.pagehero--give{min-height:0}
  .pagehero--s2s .s2s-intro{max-width:none}
  .pagehero--s2s .ph-scrim{
    background:linear-gradient(180deg,rgba(12,10,8,.78),rgba(12,10,8,.60) 46%,rgba(12,10,8,.84))}
  .pagehero--ivory.pagehero--bq .ph-scrim{
    background:linear-gradient(180deg,rgba(247,243,236,.80),rgba(247,243,236,.66) 46%,rgba(247,243,236,.86))}
}

/* =========== THE ART OF GIVING HERO, WHOLE (deck slides 15-16, second pass) ===========
   Her comp shows the whole framed LOVE print on the wall, and her instruction
   asks for parallax on the TITLE AND DESCRIPTION, not on the picture. The kit
   parallax wrapper enlarges the photo to 140% so it can move, which cut the
   top and bottom off the frame. So this one picture holds still at its own
   2:1 shape, and only the words drift over it. The distance from the header
   to the first line is the same shared value every page uses. */
.pagehero--give{min-height:clamp(440px,50vw,860px)}
.pagehero--give .ph-still{position:absolute; inset:0}
.pagehero--give .ph-still img{display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--ph-pos,center); filter:none; transform:none}
.pagehero--give h1{font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1.02}
.pagehero--give .give-intro{max-width:600px; margin-top:clamp(12px,3vw,56px)}
.pagehero--ivory.pagehero--give .ph-scrim{
  background:linear-gradient(90deg,rgba(250,249,247,.55),rgba(250,249,247,.25) 40%,rgba(250,249,247,0) 55%)}
@media (max-width:900px){
  .pagehero--give{min-height:0}
  .pagehero--give .give-intro{margin-top:0}
  .pagehero--ivory.pagehero--give .ph-scrim{
    background:linear-gradient(180deg,rgba(250,249,247,.82),rgba(250,249,247,.62) 55%,rgba(250,249,247,.30))}
}

/* =========== ABOUT: HER QUOTE (deck slide 24) =========== */
.about-quote{margin:18px 0 0; padding:0; border:0}
.about-quote p{font-family:var(--k-font-display); font-weight:400; color:var(--k-ink);
  font-size:clamp(1.35rem,2.3vw,1.9rem); line-height:1.3; margin:0; text-wrap:pretty}
.about-quote-lead{font-size:1.28em; line-height:1.18}
.about-quote footer{font-family:var(--k-font-display); font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--k-muted); margin-top:18px; letter-spacing:.02em}

/* =========== ABOUT: A STUDIO BEYOND THE LENS (deck slide 25) =========== */
.band--studio{background:#F2EADC}

/* =========== ABOUT: THE CLOSING BAND (deck slide 26) =========== */
.about-close-quote{font-family:var(--k-font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.15; color:var(--k-on-ink); margin:0}
.about-close-quote .mark{color:var(--gold)}
.about-close-lede{margin:20px auto 0; text-align:center; max-width:none}
.about-doors{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,110px);
  margin:clamp(34px,4vw,50px) auto 0; max-width:900px}
.about-door{display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 0 22px; border-bottom:1px solid var(--gold); text-decoration:none; color:inherit}
.about-door-kicker{font-family:var(--k-font-body); text-transform:uppercase; letter-spacing:.2em;
  font-size:.82rem; color:var(--gold)}
.about-door-title{font-family:var(--k-font-display); font-style:italic; font-size:clamp(1.25rem,1.9vw,1.55rem);
  color:var(--k-on-ink)}
.about-door:hover .about-door-title,.about-door:focus-visible .about-door-title{color:var(--gold-soft)}
@media (max-width:700px){ .about-doors{grid-template-columns:1fr; gap:30px} }

/* =========== FRAMED BY SPACES REEL, ALL 27 ROOMS (2026-09-14) ===========
   Her rooms mix landscape and portrait presentations. Sized by their own
   height the stage jumped by hundreds of pixels on every turn, and a portrait
   room filled a whole desktop screen. So the stage holds one height and each
   room sits whole inside it on the dark ground. 27 dots wrap on a phone. */
.fbs-slide img{height:clamp(300px,58vw,720px); object-fit:contain; background:var(--k-ink)}
.fbs-dots{flex-wrap:wrap; row-gap:4px; max-width:760px; margin-left:auto; margin-right:auto}
.fbs-dots{display:none !important}

/* =========== CONNECT: STUDIO AS A TWO-COLUMN TABLE (deck slide 30) ===========
   The label used to size itself, so on a phone "The Profundities Boutique"
   broke one word per line and every value started at a different indent.
   Now the label is one fixed column and every value starts on the same line,
   phone included. */
.contact-lines li{display:grid; grid-template-columns:clamp(96px,24vw,128px) minmax(0,1fr);
  column-gap:18px; align-items:baseline}
.contact-lines .lab{min-width:0; padding-top:0}
.contact-lines li > :not(.lab){overflow-wrap:anywhere}
@media (max-width:760px){ .contact-lines li{align-items:baseline; column-gap:14px} }

/* Measured at 375px (2026-09-14): the widest label, CONSULTATION, renders at
   109px, so a 96px column let it run into its value. One fixed 112px column
   on phones keeps every row aligned. The email breaks only after the @ (a
   <wbr> in the markup), never mid-word: its domain alone is 183px against a
   193px value column. */
@media (max-width:760px){
  .contact-lines li{grid-template-columns:112px minmax(0,1fr)}
}
.contact-lines a.handle{overflow-wrap:normal; word-break:normal}


/* =========== WHERE EACH HOME PHOTOGRAPH IS ANCHORED (David, 2026-09-30) ===========
   These sections are 715px tall on a phone and the parallax layer is 140% of
   that, so a landscape photograph is scaled to cover a 375x1000 box and only
   the middle fifth of its width survives. Measured: the wide photographs show
   21% of their width (x 39%-61%), the squarer two 34%. Centred, that put the
   dandelion seed head outside the frame and cut the gallery sign in half. Each
   section now names the point that must stay in shot. It changes nothing on a
   desktop, where the section is wider than the photograph is tall and the full
   width is already visible: only the vertical crop bites there. */
.pfx-bg img{object-position:var(--pfx-pos,50% 50%)}

/* ---- The Profundities hero on a phone: the whole handbag, centred ----
   The bag sits at 68-93% across a 2:1 photo. Covering the kit's parallax
   layer (140% of a 676px hero) made the photo ~1900px wide, so a phone showed
   51-71% of it: the bag's left edge and nothing else, and no focus point
   could have fitted it (the bag alone would be ~470px wide).
   So on a phone the layer stops moving and is sized from the SCREEN WIDTH
   (150vw, capped at the hero so a wider screen never crops the bag's top):
   the photo is then 3x the screen wide, the bag takes ~75% of the width at
   every phone size, and 96% across centres it. Bottom-anchored, with its top
   edge faded into the linen behind the logo so there is no seam. */
@media (max-width:760px){
  .pagehero--bq .ph-bg [data-k-parallax]{top:auto; bottom:0; height:min(150vw,100%);
    transform:none !important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .pagehero--ivory.pagehero--bq .ph-bg img{object-position:96% 50%}
  /* With the bag centred, the paragraph runs across its dark body, where the
     muted text fell to 2.9:1 against 4.5 needed. Her ink there is 8.8:1. */
  .pagehero--ivory.pagehero--bq .bq-lede{color:var(--k-ink)}
}

/* ---- The Art of Giving hero on a phone: words on the wall, then the print ----
   Her plate is a white wall with the LOVE print on the right half. A phone has
   no room beside it, so the copy sat on top of the red letters behind a wash
   and read poorly. Below 760px the hero stacks instead: the words on her
   linen, nothing behind them, and the photograph underneath, cropped square
   to the framed print (it spans 53-82% across, so 85% puts it in the middle),
   sharp and unwashed. The desktop breaks in the paragraph are hers and stay on
   desktop; on a phone they left one-word lines, so they are ignored there. */
@media (max-width:760px){
  .pagehero--give{display:flex; flex-direction:column; padding-bottom:0}
  .pagehero--give > .k-wrap{order:1}
  .pagehero--img.pagehero--give .ph-bg{position:relative; inset:auto; order:2; z-index:0;
    margin-top:clamp(30px,8vw,44px); aspect-ratio:1 / 1; overflow:hidden}
  .pagehero--give .ph-still img{object-position:85% 50%}
  .pagehero--ivory.pagehero--give .ph-scrim{display:none}
  .pagehero--give .lede br{display:none}
}